qniao
/
paper-shopkeeper-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'devlop' of http://git.qniao.cn/dengxiongfei/paper-shopkeeper-app into devlop

devlop
邓雄飞 4 years ago
parent
30fe8e9301 a3a73c37ab
commit
954438e039
40 changed files with 4912 additions and 137 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      apis/clientDetailApi.js
  2. 23
      apis/trade.js
  3. 9
      common/css/reset.scss
  4. 65
      components/not-logged/not-logged.vue
  5. 24
      components/u-gap/u-gap.vue
  6. 268
      pages.json
  7. 22
      pages/client-detail/base-paper-deals.vue
  8. 540
      pages/client-detail/basic-information.vue
  9. 42
      pages/client-detail/custom-header.vue
  10. 22
      pages/client-detail/equipment-information.vue
  11. 82
      pages/client-detail/index.vue
  12. 464
      pages/client-detail/news-item.nvue
  13. 22
      pages/client-detail/waste-paper-trading.vue
  14. 128
      pages/trade/index.vue
  15. 208
      pages/trade/my-offer.vue
  16. 201
      pages/trade/orderList.vue
  17. 268
      pages/trade/quotationList.vue
  18. BIN
      static/imgs/client-detail/address-icon.png
  19. BIN
      static/imgs/client-detail/arrow-down-icon.png
  20. BIN
      static/imgs/client-detail/arrow-up-icon.png
  21. BIN
      static/imgs/trade/not-login.png
  22. 29
      uni_modules/uni-badge/changelog.md
  23. 268
      uni_modules/uni-badge/components/uni-badge/uni-badge.vue
  24. 88
      uni_modules/uni-badge/package.json
  25. 10
      uni_modules/uni-badge/readme.md
  26. 18
      uni_modules/uni-list/changelog.md
  27. 107
      uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
  28. 58
      uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
  29. 538
      uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
  30. 474
      uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
  31. 106
      uni_modules/uni-list/components/uni-list/uni-list - 副本.vue
  32. 108
      uni_modules/uni-list/components/uni-list/uni-list.vue
  33. 65
      uni_modules/uni-list/components/uni-list/uni-refresh.vue
  34. 87
      uni_modules/uni-list/components/uni-list/uni-refresh.wxs
  35. 91
      uni_modules/uni-list/package.json
  36. 347
      uni_modules/uni-list/readme.md
  37. 9
      uni_modules/uni-segmented-control/changelog.md
  38. 146
      uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
  39. 87
      uni_modules/uni-segmented-control/package.json
  40. 13
      uni_modules/uni-segmented-control/readme.md

12
apis/clientDetailApi.js
View File

@ -0,0 +1,12 @@
import http from '../utils/http/index.js'
// 纸掌柜--客户详情--基础信息
export function getBaseInfo(data) {
return http.get(
{
url: '/yyt-uec/get/customer/detail/base-info',
data
}
)
}

23
apis/trade.js
View File

@ -0,0 +1,23 @@
import http from '../utils/http/index.js'
// 交易大厅-报价
export function getEnterpriseList(data) {
return http.get(
{
url: '/base-paper-trading/get/supplier/enquiry-reply/wait-reply-list',
data
},
{ hideLoading: true }
)
}
// 交易大厅-订单
export function gettradingHallList(data) {
return http.get(
{
url: '/base-paper-trading/get/trading-hall/supplier-order-page',
data
},
{ hideLoading: true }
)
}

9
common/css/reset.scss
View File

@ -45,3 +45,12 @@ button::after {
clear: both; clear: both;
visibility: hidden; visibility: hidden;
} }
// 两行省略号
.u-line-2 {
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; // 弹性伸缩盒
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

65
components/not-logged/not-logged.vue
View File

@ -0,0 +1,65 @@
<template>
<view class="not-logged">
<view class="view-contant">
<image class="view-image" src="../../static/imgs/trade/not-login.png" mode=""></image>
<view class="text-info">
登录后可以查看更多，请先登录
</view>
<view class="login-btn">
<button type="primary" class="login-btn-text login-btn" @click="loginClick()">登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
loginClick(){
this.$emit('loginChange')
}
}
}
</script>
<style lang="scss">
.not-logged{
.text-info{
font-family: PingFangSC-Regular;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
font-weight: 550;
margin-top: 50rpx;
}
.view-contant{
text-align: center;
margin-top: 40%;
}
.view-image{
width: 100rpx;
height: 100rpx;
}
.login-btn{
width: 90%;
height: 86rpx;
background: #007AFF;
border-radius: 425px;
margin-left: 5%;
margin-top: 121rpx;
}
.login-btn-text{
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
}
</style>

24
components/u-gap/u-gap.vue
View File

@ -0,0 +1,24 @@
<template>
<view class="gap"></view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.gap {
height: 20rpx;
width: 100%;
background: #f4f4f5;
}
</style>

268
pages.json
View File

@ -1,115 +1,157 @@
{ {
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/client/index",
"style": {
"navigationBarTitleText": "客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/client-list/index",
"style": {
"navigationBarTitleText": "客户列表",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/index",
"style": {
"navigationBarTitleText": "客户搜索",
"navigationStyle": "custom"
}
},
{
"path": "pages/add-user/index",
"style": {
"navigationBarTitleText": "添加客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/trade/index",
"style": {
"navigationBarTitleText": "交易"
}
},
{
"path": "pages/mall/index",
"style": {
"navigationBarTitleText": "商城"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/agreement/index",
"style": {
"navigationBarTitleText": "用户与隐私协议"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"backgroundColorTop": "#FFFFFF"
},
"tabBar": {
"color": "#888",
"selectedColor": "#007AFF",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [
{
"pagePath": "pages/client/index",
"iconPath": "static/imgs/tabbar/client-gray.png",
"selectedIconPath": "static/imgs/tabbar/client-blue.png",
"text": "客户"
},
{
"pagePath": "pages/trade/index",
"iconPath": "static/imgs/tabbar/trade-gray.png",
"selectedIconPath": "static/imgs/tabbar/trade-blue.png",
"text": "交易"
},
{
"pagePath": "pages/mall/index",
"iconPath": "static/imgs/tabbar/mall-gray.png",
"selectedIconPath": "static/imgs/tabbar/mall-blue.png",
"text": "纸商城"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/imgs/tabbar/mine-gray.png",
"selectedIconPath": "static/imgs/tabbar/mine-blue.png",
"text": "我的"
}
]
},
"condition": {
//模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}
]
}
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/client/index",
"style": {
"navigationBarTitleText": "客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/client-list/index",
"style": {
"navigationBarTitleText": "客户列表",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/index",
"style": {
"navigationBarTitleText": "客户搜索",
"navigationStyle": "custom"
}
},
{
"path": "pages/add-user/index",
"style": {
"navigationBarTitleText": "添加客户",
"navigationStyle": "custom"
}
},
{
"path": "pages/trade/index",
"style": {
"navigationBarTitleText": "交易",
"navigationStyle": "custom"
}
},
{
"path": "pages/mall/index",
"style": {
"navigationBarTitleText": "商城"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/agreement/index",
"style": {
"navigationBarTitleText": "用户与隐私协议"
}
},
{
"path": "pages/client-detail/index",
"style": {
"navigationBarTitleText": "客户详情",
"navigationStyle": "custom"
}
}
,{
"path" : "components/not-logged/not-logged",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/trade/quotationList",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/trade/orderList",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/trade/my-offer",
"style" :
{
"navigationBarTitleText": "我的报价",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"backgroundColorTop": "#FFFFFF"
},
"tabBar": {
"color": "#888",
"selectedColor": "#007AFF",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [{
"pagePath": "pages/client/index",
"iconPath": "static/imgs/tabbar/client-gray.png",
"selectedIconPath": "static/imgs/tabbar/client-blue.png",
"text": "客户"
},
{
"pagePath": "pages/trade/index",
"iconPath": "static/imgs/tabbar/trade-gray.png",
"selectedIconPath": "static/imgs/tabbar/trade-blue.png",
"text": "交易"
},
{
"pagePath": "pages/mall/index",
"iconPath": "static/imgs/tabbar/mall-gray.png",
"selectedIconPath": "static/imgs/tabbar/mall-blue.png",
"text": "纸商城"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/imgs/tabbar/mine-gray.png",
"selectedIconPath": "static/imgs/tabbar/mine-blue.png",
"text": "我的"
}
]
},
"condition": {
//模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}]
}
} }

22
pages/client-detail/base-paper-deals.vue
View File

@ -0,0 +1,22 @@
<template>
<view>
原纸交易
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

540
pages/client-detail/basic-information.vue
View File

@ -0,0 +1,540 @@
<template>
<view class="warpper">
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="card-box">
<view class="card-header">
<view class="left-text">基本信息</view>
<view class="right-text">跟进记录</view>
</view>
<view class="card-content">
<view class="info">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="content">
<view class="title">
<text class="text">{{info.name}}</text>
<image
class="icon"
:src="info.registrationStatus ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"
></image>
</view>
<view class="desc u-line-2">
<text>主营：{{ info.mainBusiness }}</text>
</view>
</view>
</view>
<view class="company-box">
<view>
<view><text class="title">法定代表人</text></view>
<view class="value">{{ info.legalPersonName }}</view>
</view>
<view class="">
<view><text class="title">注册资本</text></view>
<view class="value">{{ info.registeredCapital }}万</view>
</view>
<view class="">
<view><text class="title">成立时间</text></view>
<view class="value">{{ transformDate(info.foundDate) }}</view>
</view>
</view>
<view class="site">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
<text class="text">{{ info.locProvinceName }}{{ info.locCityName }} {{ info.locDetail }}</text>
</view>
</view>
</view>
<uGap></uGap>
<view class="card-box">
<view class="card-header"><view class="left-text">工商信息</view></view>
<view class="card-content">
<view class="gs-info">
<view class="row">
<view class="info-title">
<text>
社会统一
<br />
信用代码：
</text>
</view>
<view class="info-value"><text>{{info.uniformSocialCreditCode}}</text></view>
</view>
<view class="row">
<view class="info-title"><text>营业执照：</text></view>
<view class="look-over" @tap="previewImg(info.businessLicenseImg, [info.businessLicenseImg])"><text>点击查看</text></view>
</view>
<view class="row">
<view class="info-title"><text>所属行业：</text></view>
<view class="info-value"><text>{{info.belongIndustry}}</text></view>
</view>
<view class="row">
<view class="info-title"><text>登记状态：</text></view>
<view class="info-value"><text>{{info.registrationStatus}}</text></view>
</view>
</view>
</view>
</view>
<uGap></uGap>
<view class="card-box">
<view class="card-header"><view class="left-text">厂房信息</view></view>
<view class="card-content">
<view class="cf-info">
<view class="row">
<view class="left">
<view class="info-title"><text>产房面积：</text></view>
<view class="info-value"><text>{{info.plantArea}}m²</text></view>
</view>
<view class="right">
<view class="info-title"><text>年营业额：</text></view>
<view class="info-value"><text>{{info.annualTurnover}}万</text></view>
</view>
</view>
<view class="row">
<view class="left">
<view class="info-title"><text>产房照片：</text></view>
<view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view>
</view>
<view class="right">
<view class="info-title"><text>租赁合同：</text></view>
<view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view>
</view>
</view>
</view>
<view class="site">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
<text class="text">{{info.factoryAddress}}</text>
</view>
</view>
</view>
<uGap></uGap>
<view class="card-box">
<view class="card-header"><view class="left-text">法律诉讼</view></view>
<view class="card-content" style="margin: 20rpx 0rpx;">
<view class="fl-info" v-for="(item, index) in 2" :key="index">
<view class="row">
<view class="title">
<view class="left">
<view class="dot"></view>
<view><text>买卖合同纠纷案件执行首次执行裁定书</text></view>
</view>
</view>
<view class="other">
<view class="left-text"><text>案件：</text></view>
<view><text>金融借款合同纠纷</text></view>
</view>
<view class="other">
<view class="left-text"><text>案号：</text></view>
<view><text>(2019)鲁0911执1608号</text></view>
</view>
<view class="other">
<view class="left-text"><text>裁判日期：</text></view>
<view><text>2019/12/09</text></view>
</view>
</view>
</view>
</view>
<view class="see-more">
<view class="" @tap="seemoreTap">
<text>查看更多</text>
<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image>
</view>
</view>
</view>
<uGap></uGap>
<view class="card-box">
<view class="card-header"><view class="left-text">经营异常</view></view>
<view class="card-content" style="margin: 20rpx 0rpx;">
<view class="fl-info" v-for="(item, index) in 2" :key="index">
<view class="row">
<view class="title">
<view class="left">
<view class="dot"></view>
<view><text>编号 44012020013906</text></view>
</view>
<view class="valid"><text>有效</text></view>
</view>
<view class="other">
<view class="left-text"><text>抵押人：</text></view>
<view><text>金融借款合同纠纷</text></view>
</view>
<view class="other">
<view class="left-text"><text>抵押权人：</text></view>
<view><text>(2019)鲁0911执1608号</text></view>
</view>
<view class="other">
<view class="left-text"><text>债务期限：</text></view>
<view><text>2020/01/24～2023/01/24</text></view>
</view>
<view class="other">
<view class="left-text"><text>债务数额：</text></view>
<view><text>243.95万人民币</text></view>
</view>
</view>
</view>
</view>
</view>
<uGap></uGap>
<view class="card-box">
<view class="card-header"><view class="left-text">征信信息</view></view>
<view class="card-content" style="margin: 20rpx 0rpx;">
<view class="fl-info" v-for="(item, index) in 2" :key="index">
<view class="row">
<view class="other">
<view class="left-text"><text>立案日期：</text></view>
<view><text>2021/07/21</text></view>
</view>
<view class="other">
<view class="left-text"><text>案号：</text></view>
<view><text>(2019)鲁0911执1608号</text></view>
</view>
<view class="other">
<view class="left-text"><text>执行标准：</text></view>
<view><text>24563345元</text></view>
</view>
<view class="other">
<view class="left-text"><text>执行法院：</text></view>
<view><text>太原市杏花岭区人民法院</text></view>
</view>
</view>
</view>
</view>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import { getBaseInfo } from '@/apis/clientDetailApi'
export default {
components: {
uGap
},
props: {
customerId: {
type: String,
default: null
}
},
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无数据~',
background: '#F7F8FA',
disabled: true
},
info: {
annualTurnover: 0,
belongIndustry: 'string',
businessLicenseImg: 'string',
factoryAddress: 'string',
factoryImgList: ['string'],
foundDate: '2022-01-05T02:20:30.776Z',
id: 0,
leaseContract: 'string',
legalPersonName: 'string',
locCityId: 0,
locCityName: 'string',
locDetail: 'string',
locDistriceName: 'string',
locDistrictId: 0,
locProvinceId: 0,
locProvinceName: 'string',
locStreetId: 0,
locStreetName: 'string',
mainBusiness: 'string',
name: 'string',
plantArea: 0,
registeredCapital: 0,
registrationStatus: 'string',
shortName: 'string',
uniformSocialCreditCode: 'string'
},
seemoreFlag: true
}
},
methods: {
getBaseInfo() {
getBaseInfo({customerId: this.customerId }).then(res => {
console.log('基础信息', res)
this.info = res
})
},
seemoreTap() {
this.seemoreFlag = !this.seemoreFlag
},
transformDate(date) {
if (date) {
return `${date[0]}/${date[1]}/${date[2]}`
}
return ''
},
previewImg(index, list) {
uni.previewImage({
urls: list,
current: index
});
},
downCallback() {},
upCallback() {}
}
}
</script>
<style lang="scss">
.warpper {
width: 750rpx;
height: 100%;
.card-box {
.card-header {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 88rpx;
line-height: 88rpx;
border-bottom: 2rpx solid #dddddd;
padding: 0rpx 32rpx;
.left-text {
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.right-text {
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: right;
font-weight: 400;
}
}
}
.card-content {
.info {
width: 750rpx;
display: flex;
flex-direction: row;
padding: 20rpx 32rpx;
.image {
width: 140rpx;
height: 140rpx;
flex: 0 0 140rpx;
margin-right: 20rpx;
}
.content {
.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.text {
font-size: 32rpx;
color: #000000;
font-weight: 600;
}
.icon {
width: 100rpx;
height: 32rpx;
flex-grow: 0;
flex-shrink: 0;
margin-left: 8rpx;
}
}
.desc {
margin-top: 14rpx;
font-size: 26rpx;
color: #333333;
line-height: 1.6;
}
}
}
}
.company-box {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 34rpx 0rpx;
.title {
font-size: 24rpx;
color: #888888;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
.value {
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
text-align: center;
padding-top: 16rpx;
font-weight: 500;
}
}
.site {
display: flex;
flex-direction: row;
align-items: center;
height: 80rpx;
line-height: 80rpx;
background: #ffffff;
border-top: 2rpx solid #dddddd;
padding: 0rpx 32rpx;
.icon {
width: 32rpx;
height: 32rpx;
flex-grow: 0;
flex-shrink: 0;
margin-right: 10rpx;
}
.text {
font-size: 26rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
line-height: 32rpx;
font-weight: 400;
}
}
.see-more {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 80rpx;
line-height: 80rpx;
background: #ffffff;
border-top: 2rpx solid #dddddd;
padding: 0rpx 32rpx;
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: center;
font-weight: 400;
.icon {
width: 24rpx;
height: 24rpx;
}
}
.gs-info {
padding: 20rpx 32rpx;
.row {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 16rpx;
}
}
.cf-info {
padding: 20rpx 32rpx;
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.left {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.right {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.fl-info {
padding-bottom: 20rpx;
padding-left: 32rpx;
padding-right: 32rpx;
.row {
background: #f7f8fa;
border-radius: 8px;
padding: 24rpx;
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 500;
margin-bottom: 20rpx;
.left {
display: flex;
flex-direction: row;
align-items: center;
}
.dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #adbac9;
margin-right: 8rpx;
}
.valid {
font-size: 28rpx;
color: #36cfc9;
letter-spacing: 0;
font-weight: 500;
}
}
.other {
display: flex;
flex-direction: row;
align-items: center;
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 16rpx;
.left-text {
width: 140rpx;
margin-right: 8rpx;
}
}
}
}
.info-title {
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
margin-right: 8rpx;
width: 140rpx;
}
.info-value {
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
.look-over {
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
font-weight: 400;
}
}
</style>

42
pages/client-detail/custom-header.vue
View File

@ -0,0 +1,42 @@
<template>
<view
class="header"
:style="{
height: `${statusBarHeight + 44}px`,
paddingTop: `${statusBarHeight}px`
}"
>
<slot name="icon"><uni-icons type="back" size="28" @click="back" /></slot>
<slot></slot>
</view>
</template>
<script>
import { back } from '@/utils/hook.js'
export default {
data() {
return {
statusBarHeight: 20
}
},
mounted() {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0
},
methods: {
back
}
}
</script>
<style lang="scss">
.header {
width: 750rpx;
padding: 0 32rpx 10rpx 20rpx;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #d8d8d8;
}
</style>

22
pages/client-detail/equipment-information.vue
View File

@ -0,0 +1,22 @@
<template>
<view>
设备信息
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

82
pages/client-detail/index.vue
View File

@ -0,0 +1,82 @@
<template>
<view class="warpper">
<qnHeader class="header">
<!-- <view class="header"> -->
<view class="header-title">客户详情</view>
<view class="right-title">客户授信</view>
<!-- </view> -->
</qnHeader>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
<view class="content">
<view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view>
<view v-show="current === 1"><equipmentInformation></equipmentInformation></view>
<view v-show="current === 2"><basePaperDeals></basePaperDeals></view>
<view v-show="current === 3"><wastePaperTrading></wastePaperTrading></view>
</view>
</view>
</view>
</template>
<script>
import qnHeader from '@/components/qn-header/qn-header.vue'
import basicInformation from './basic-information.vue'
import equipmentInformation from './equipment-information.vue'
import basePaperDeals from './base-paper-deals.vue'
import wastePaperTrading from './waste-paper-trading.vue'
export default {
components: {
qnHeader,
basicInformation,
equipmentInformation,
basePaperDeals,
wastePaperTrading
},
data() {
return {
current: 0,
items: ['基础信息', '设备信息', '原纸交易', '废纸交易'],
customerId: null,
}
},
onLoad(option) {
this.customerId = option.id || '800890'
this.$nextTick(() => {
this.$refs.basicInformationRef.getBaseInfo()
})
},
methods: {
onClickItem(e) {
console.log('e', e)
this.current = e.currentIndex
},
}
}
</script>
<style lang="scss" scoped>
.warpper {
.header {
justify-content: space-between;
}
.header-title {
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.right-title {
font-size: 28rpx;
color: #007aff;
text-align: center;
line-height: 40rpx;
font-weight: 500;
}
}
</style>

464
pages/client-detail/news-item.nvue
View File

@ -0,0 +1,464 @@
<template>
<view class="tabs">
<view class="page">
<!-- <swiper indicator-dots="true">
<swiper-item v-for="(img, key) in imgUrls" :key="key"><image :src="img" /></swiper-item>
</swiper> -->
</view>
<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
</view>
</scroll-view>
<view class="line-h"></view>
<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
<!-- #ifdef APP-NVUE -->
<list class="scroll-v list" enableBackToTop="true" scroll-y loadmoreoffset="15" @loadmore="loadMore(index1)">
<refresh class="refresh" @refresh="onrefresh(index1)" @pullingdown="onpullingdown" :display="tab.refreshing ? 'show' : 'hide'">
<div class="refresh-view">
<image class="refresh-icon" :src="refreshIcon" :style="{width: (tab.refreshing || pulling) ? 0: '30px'}" :class="{'refresh-icon-active': tab.refreshFlag}"></image>
<loading-indicator class="loading-icon" animating="true" v-if="tab.refreshing"></loading-indicator>
<text class="loading-text">{{tab.refreshText}}</text>
</div>
</refresh>
<cell v-for="(newsitem,index2) in tab.data" :key="newsitem.id">
<media-item :options="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-item>
</cell>
<cell class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
<text class="loading-more-text">{{tab.loadingText}}</text>
</cell>
</list>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
<view v-for="(newsitem,index2) in tab.data" :key="newsitem.id">
<media-item :options="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-item>
</view>
<view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
<text class="loading-more-text">{{tab.loadingText}}</text>
</view>
</scroll-view>
<!-- #endif -->
</swiper-item>
</swiper>
</view>
</template>
<script>
import mediaItem from './news-item.nvue';
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;
const newsData = {
data0: {
"datetime": "40分钟前",
"article_type": 0,
"title": "uni-app行业峰会频频亮相，开发者反响热烈!",
"source": "DCloud",
"comment_count": 639
},
data1: {
"datetime": "一天前",
"article_type": 1,
"title": "DCloud完成B2轮融资，uni-app震撼发布!",
"image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg",
"source": "DCloud",
"comment_count": 11395
},
data2: {
"datetime": "一天前",
"article_type": 2,
"title": "中国技术界小奇迹：HBuilder开发者突破200万",
"image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4cd3000-517d-11eb-a16f-5b3e54966275.jpg",
"source": "DCloud",
"comment_count": 11395
},
data3: {
"article_type": 3,
"image_list": [{
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b2e201d0-517d-11eb-8a36-ebb87efcf8c0.jpg",
"width": 563,
"height": 316
}, {
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4cd3000-517d-11eb-a16f-5b3e54966275.jpg",
"width": 641,
"height": 360
}, {
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg",
"width": 640,
"height": 360
}],
"datetime": "5分钟前",
"title": "uni-app 支持使用 npm 安装第三方包，生态更趋丰富",
"source": "DCloud",
"comment_count": 11
},
data4: {
"datetime": "2小时前",
"article_type": 4,
"title": "uni-app 支持原生小程序自定义组件，更开放、更自由",
"image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b2e201d0-517d-11eb-8a36-ebb87efcf8c0.jpg",
"source": "DCloud",
"comment_count": 69
}
};
export default {
components: {
mediaItem
},
data() {
return {
showSwiper: true,
imgUrls: [
'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4b60b10-5168-11eb-bd01-97bc1429a9ff.jpg',
'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1dcfa70-5168-11eb-bd01-97bc1429a9ff.jpg'
],
newsList: [],
cacheTab: [],
tabIndex: 0,
tabBars: [{
name: '关注',
id: 'guanzhu'
}, {
name: '推荐',
id: 'tuijian'
}, {
name: '体育',
id: 'tiyu'
}, {
name: '热点',
id: 'redian'
}],
scrollInto: "",
showTips: false,
navigateFlag: false,
pulling: false,
refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=="
}
},
/**
* 当 searchInput 配置 disabled 为 true 时触发
*/
onNavigationBarSearchInputClicked(e) {
console.log('事件执行了')
uni.navigateTo({
url: '/pages/index/detail1/detail1'
});
},
/**
* 点击导航栏 buttons 时触发
*/
onNavigationBarButtonTap() {
uni.showModal({
title: '提示',
content: '用户点击了功能按钮，这里仅做展示。',
success: res => {
if (res.confirm) {
console.log('用户点击了确定');
}
}
});
},
onLoad() {
setTimeout(()=>{
this.tabBars.forEach((tabBar) => {
this.newsList.push({
data: [],
isLoading: false,
refreshText: "",
loadingText: '加载更多...'
});
});
this.getList(0);
},350)
},
methods: {
getList(index) {
let activeTab = this.newsList[index];
let list = [];
for (let i = 1; i <= 10; i++) {
let item = Object.assign({}, newsData['data' + Math.floor(Math.random() * 5)]);
item.id = this.newGuid();
list.push(item);
}
activeTab.data = activeTab.data.concat(list);
},
goDetail(e) {
if (this.navigateFlag) {
return;
}
this.navigateFlag = true;
uni.navigateTo({
url: './detail/detail?title=' + e.title
});
setTimeout(() => {
this.navigateFlag = false;
}, 200)
},
close(index1, index2) {
uni.showModal({
content: '是否删除本条信息？',
success: (res) => {
if (res.confirm) {
this.newsList[index1].data.splice(index2, 1);
}
}
})
},
loadMore(e) {
setTimeout(() => {
this.getList(this.tabIndex);
}, 500)
},
ontabtap(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.switchTab(index);
},
ontabchange(e) {
let index = e.target.current || e.detail.current;
this.switchTab(index);
},
switchTab(index) {
if (this.newsList[index].data.length === 0) {
this.getList(index);
}
if (this.tabIndex === index) {
return;
}
// 缓存 tabId
if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
if (isExist < 0) {
this.cacheTab.push(this.tabIndex);
//console.log("cache index:: " + this.tabIndex);
}
}
this.tabIndex = index;
this.scrollInto = this.tabBars[index].id;
// 释放 tabId
if (this.cacheTab.length > MAX_CACHE_PAGE) {
let cacheIndex = this.cacheTab[0];
this.clearTabData(cacheIndex);
this.cacheTab.splice(0, 1);
//console.log("remove cache index:: " + cacheIndex);
}
},
clearTabData(e) {
this.newsList[e].data.length = 0;
this.newsList[e].loadingText = "加载更多...";
},
refreshData() {},
onrefresh(e) {
var tab = this.newsList[this.tabIndex];
if (!tab.refreshFlag) {
return;
}
tab.refreshing = true;
tab.refreshText = "正在刷新...";
setTimeout(() => {
this.refreshData();
this.pulling = true;
tab.refreshing = false;
tab.refreshFlag = false;
tab.refreshText = "已刷新";
setTimeout(() => { // TODO fix ios和Android 动画时间相反问题
this.pulling = false;
}, 500);
}, 2000);
},
onpullingdown(e) {
var tab = this.newsList[this.tabIndex];
if (tab.refreshing || this.pulling) {
return;
}
if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
tab.refreshFlag = true;
tab.refreshText = "释放立即刷新";
} else {
tab.refreshFlag = false;
tab.refreshText = "下拉可以刷新";
}
},
newGuid() {
let s4 = function() {
return (65536 * (1 + Math.random()) | 0).toString(16).substring(1);
}
return (s4() + s4() + "-" + s4() + "-4" + s4().substr(0, 3) + "-" + s4() + "-" + s4() + s4() + s4()).toUpperCase();
}
}
}
</script>
<style>
image,
swiper,
.img-view {
width: 750rpx;
width: 100%;
height: 500rpx;
}
.page-section-title {
margin-top: 50rpx;
}
/* #ifndef APP-PLUS */
page {
width: 100%;
min-height: 100%;
display: flex;
}
/* #endif */
.tabs {
flex: 1;
flex-direction: column;
overflow: hidden;
background-color: #ffffff;
/* #ifndef APP-PLUS */
height: 100vh;
/* #endif */
}
.scroll-h {
width: 750rpx;
/* #ifdef H5 */
width:100%;
/* #endif */
height: 80rpx;
flex-direction: row;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
/* flex-wrap: nowrap; */
/* border-color: #cccccc;
border-bottom-style: solid;
border-bottom-width: 1px; */
}
.line-h {
height: 1rpx;
background-color: #cccccc;
}
.uni-tab-item {
/* #ifndef APP-PLUS */
display: inline-block;
/* #endif */
flex-wrap: nowrap;
padding-left: 34rpx;
padding-right: 34rpx;
}
.uni-tab-item-title {
color: #555;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
flex-wrap: nowrap;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
}
.uni-tab-item-title-active {
color: #007AFF;
}
.swiper-box {
flex: 1;
}
.swiper-item {
flex: 1;
flex-direction: row;
}
.scroll-v {
flex: 1;
/* #ifndef MP-ALIPAY */
flex-direction: column;
/* #endif */
width: 750rpx;
width:100%;
}
.update-tips {
position: absolute;
left: 0;
top: 41px;
right: 0;
padding-top: 5px;
padding-bottom: 5px;
background-color: #FDDD9B;
align-items: center;
justify-content: center;
text-align: center;
}
.update-tips-text {
font-size: 14px;
color: #ffffff;
}
.refresh {
width: 750rpx;
width:100%;
height: 64px;
justify-content: center;
}
.refresh-view {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.refresh-icon {
width: 30px;
height: 30px;
transition-duration: .5s;
transition-property: transform;
transform: rotate(0deg);
transform-origin: 15px 15px;
}
.refresh-icon-active {
transform: rotate(180deg);
}
.loading-icon {
width: 20px;
height: 20px;
margin-right: 5px;
color: #999999;
}
.loading-text {
margin-left: 2px;
font-size: 16px;
color: #999999;
}
.loading-more {
align-items: center;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.loading-more-text {
font-size: 28rpx;
color: #999;
}
</style>

22
pages/client-detail/waste-paper-trading.vue
View File

@ -0,0 +1,22 @@
<template>
<view>
废纸交易
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

128
pages/trade/index.vue
View File

@ -1,40 +1,120 @@
<template> <template>
<view class="content">
trade
<view class="trade-index">
<view class="top-bar">
<view v-if="mainKey === '0'" class="text-view"><text class="title">交易大厅</text></view>
<view v-if="mainKey === '1'">
<view class="bar-contant">
<view class="check-control title-left36" :class="current === '0' ? 'check-title' : 'oncheck-title'" @click="controlChange('0')"><text>报价</text></view>
<view class="check-control title-left" :class="current === '1' ? 'check-title' : 'oncheck-title'" @click="controlChange('1')"><text>订单</text></view>
</view>
</view>
</view>
<view class="" v-if="mainKey === '0'"><not-logged @loginChange="loginChange()"></not-logged></view>
<view class="" v-if="mainKey === '1'">
<view class="content">
<view v-show="current === '0'">
<quotationList></quotationList>
</view>
<view v-show="current === '1'">
<orderList></orderList>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
export default {
import notLogged from '@/components/not-logged/not-logged.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import quotationList from './quotationList.vue'
import orderList from './orderList.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
components: { notLogged, scrollList, quotationList, orderList },
data() {
return {
key: '',
mainKey: '1',
current: '0',
controlCurrent: 0,
items: ['报价', '订单'],
controlItems: ['全部', '待确认', '待发货', '已完成'],
}
},
mounted() {
// this.getQuotationQurty()
},
watch: {
},
methods: {
loginChange() {
this.mainKey === '0' ? '1' : '0'
},
// 标题选项卡点击事件
controlChange(value) {
this.current = value
// if (value === '0') {
// this.getQuotationQurty()
// } else {
// this.getTradingQurty()
// }
},
//分段器点击事件
onClickItem(value) {
console.log(value)
}
} }
}
</script> </script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
<style lang="scss">
.trade-index {
.top-bar {
background-color: rgb(255, 255, 255);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
z-index: 998;
height: 44px;
} }
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.title {
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
} }
.text-area {
.text-view {
padding: 10px;
}
.bar-contant {
display: flex; display: flex;
justify-content: center;
} }
.check-title {
font-family: PingFangSC-Medium;
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 550;
border-bottom: 2px solid #007aff;
}
.oncheck-title {
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #555555;
font-weight: 550;
}
.check-control {
line-height: 35px;
.title {
font-size: 36rpx;
color: #8f8f94;
width: 40px;
text-align: center;
}
.title-left {
margin-left: 24rpx;
}
.title-left36 {
margin-left: 36rpx;
} }
}
</style> </style>

208
pages/trade/my-offer.vue
View File

@ -0,0 +1,208 @@
<template>
<view class="my-offer">
<!-- <uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control> -->
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items,index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ items.orderStatus }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info list-border">
<view class=""><image class="list-image" :src="item.productImg" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text class="list-time">三分钟前</text>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
}
}
}
</script>
<style lang="scss">
.my-offer {
margin-bottom: 0px;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.list-title-line {
line-height: 44px;
padding-left: 24px;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 24px;
line-height: 35px;
}
.list-info-contant {
margin-left: 24px;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32px;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 10px;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 35px;
padding-left: 24px;
}
.list-time{
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
line-height: 32px;
font-weight: 400;
}
}
</style>

201
pages/trade/orderList.vue
View File

@ -0,0 +1,201 @@
<template>
<view class="order-list">
<!-- <uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control> -->
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items,index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ items.orderStatus }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info list-border">
<view class=""><image class="list-image" :src="item.productImg" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text>交货时间：</text>
<text>{{ items.deliveryDay }}天</text>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
}
}
}
</script>
<style lang="scss">
.order-list {
margin-bottom: 0px;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.list-title-line {
line-height: 44px;
padding-left: 24px;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 24px;
line-height: 35px;
}
.list-info-contant {
margin-left: 24px;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32px;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 10px;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 35px;
padding-left: 24px;
}
}
</style>

268
pages/trade/quotationList.vue
View File

@ -0,0 +1,268 @@
<template>
<view class="quotation-list">
<scroll-list ref="quotationRef" :option="option" @load="quotationUp" @refresh="quotationDown">
<view v-for="(item,index) in quotationData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">待报价</text>
</view>
<view class="list-border list-info-line">
<view class="list-info list-border">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
<view class="list-info">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text>交货时间：</text>
<text>3天</text>
</view>
<view>
<text>交货区域：</text>
<text>3天</text>
</view>
<view class="offer-class">
<view class="offer-width">
<text>报价截止：</text>
<text>3天</text>
</view>
<view>
<button type="primary" class="offer-btn" @click="offerClick()">报价</button>
</view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
<view>
<view class="offer-prices" @click="nativeTo()">
<image class="my-image" src="../../static/imgs/tabbar/trade-gray.png" mode=""></image>
<view class="my-price">
我的报价
</view>
</view>
</view>
</view>
</template>
<script>
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
import uGap from '@/components/u-gap/u-gap.vue'
export default {
props: {
queryData: {
type: Object,
default: () => {}
}
},
components: {
uGap
},
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
params: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
},
pagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
quotationData:[]
}
},
watch: {
params: {
handler(val) {
this.getQuotationQurty()
},
deep: true
},
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getQuotationQurty()
},
methods: {
// 获取报价列表
getQuotationQurty() {
return new Promise((resolve, reject) => {
getEnterpriseList({ ...this.params, ...this.pagination })
.then(res => {
if (res) {
if (this.pagination.pageNum == 1) {
// this.quotationData = res.records
this.quotationData = []
this.quotationData = [{ name: '111', id: '222' }, { name: '111', id: '222' }]
} else {
this.quotationData = this.quotationData.concat(res.records)
}
console.log('this.quotationData', res)
resolve({ list: this.quotationData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//报价分页
quotationUp(page) {
this.pagination.pageNum++
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.loadFail()
})
},
//报价分页
quotationDown() {
this.pagination.pageNum = 1
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.refreshFail()
})
},
// 报价按钮事件
offerClick(){},
// 我的报价页面跳转事件
nativeTo(){
console.log(11)
uni.navigateTo({
url: 'my-offer'
});
},
}
}
</script>
<style lang="scss">
.quotation-list {
margin-bottom: 0px;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.list-title-line {
line-height: 44px;
padding-left: 24px;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 24px;
line-height: 35px;
}
.list-info-contant {
margin-left: 24px;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32px;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 10px;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 35px;
padding-left: 24px;
padding-bottom: 24px;
}
.my-image {
width: 30px;
height: 30px;
}
.my-price {
color: #007aff;
font-size: 28rpx;
}
.offer-class{
display: flex;
}
.offer-btn{
width: 80px;
line-height: 35px;
}
.offer-width{
width: 70%;
}
.offer-prices{
position: absolute;
z-index: 9999;
right: 10px;
bottom: 20%;
background-color: #ffffff;
border-radius: 50%;
padding: 10px;
text-align: center;
width: 80px;
height: 80px;
border: 2px solid #F9F9F9;
box-shadow: 0px 4px 34px 0px rgba(0,0,0,0.2);
}
}
</style>

BIN
static/imgs/client-detail/address-icon.png
View File

Before After
Width: 32  |  Height: 32  |  Size: 1.5 KiB

BIN
static/imgs/client-detail/arrow-down-icon.png
View File

Before After
Width: 32  |  Height: 32  |  Size: 446 B

BIN
static/imgs/client-detail/arrow-up-icon.png
View File

Before After
Width: 32  |  Height: 32  |  Size: 421 B

BIN
static/imgs/trade/not-login.png
View File

Before After
Width: 750  |  Height: 456  |  Size: 72 KiB

29
uni_modules/uni-badge/changelog.md
View File

@ -0,0 +1,29 @@
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
## 1.1.7（2021-11-08）
- 优化 升级ui
- 修改 size 属性默认值调整为 small
- 修改 type 属性，默认值调整为 error，info 替换 default
## 1.1.6（2021-09-22）
- 修复 在字节小程序上样式不生效的 bug
## 1.1.5（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.4（2021-07-29）
- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
## 1.1.3（2021-06-24）
- 优化 示例项目
## 1.1.1（2021-05-12）
- 新增 组件示例地址
## 1.1.0（2021-05-12）
- 新增 uni-badge 的 absolute 属性，支持定位
- 新增 uni-badge 的 offset 属性，支持定位偏移
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
## 1.0.7（2021-05-07）
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
- 新增 uni-badge 属性 custom-style， 支持自定义样式
## 1.0.6（2021-02-04）
- 调整为uni_modules目录规范

268
uni_modules/uni-badge/components/uni-badge/uni-badge.vue
View File

@ -0,0 +1,268 @@
<template>
<view class="uni-badge--x">
<slot />
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
class="uni-badge" @click="onClick()">{{displayValue}}</text>
</view>
</template>
<script>
/**
* Badge 数字角标
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
* @property {String} text 角标内容
* @property {String} size = [normal|small] 角标内容
* @property {String} type = [info|primary|success|warning|error] 颜色类型
* @value info 灰色
* @value primary 蓝色
* @value success 绿色
* @value warning 黄色
* @value error 红色
* @property {String} inverted = [true|false] 是否无需背景颜色
* @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
* @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
* @value rightTop 右上
* @value rightBottom 右下
* @value leftTop 左上
* @value leftBottom 左下
* @property {Array[number]} offset 距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
* @property {String} isDot = [true|false] 是否显示为一个小点
* @event {Function} click 点击 Badge 触发事件
* @example <uni-badge text="1"></uni-badge>
*/
export default {
name: 'UniBadge',
emits: ['click'],
props: {
type: {
type: String,
default: 'error'
},
inverted: {
type: Boolean,
default: false
},
isDot: {
type: Boolean,
default: false
},
maxNum: {
type: Number,
default: 99
},
absolute: {
type: String,
default: ''
},
offset: {
type: Array,
default () {
return [0, 0]
}
},
text: {
type: [String, Number],
default: ''
},
size: {
type: String,
default: 'small'
},
customStyle: {
type: Object,
default () {
return {}
}
}
},
data() {
return {};
},
computed: {
width() {
return String(this.text).length * 8 + 12
},
classNames() {
const {
inverted,
type,
size,
absolute
} = this
return [
inverted ? 'uni-badge--' + type + '-inverted' : '',
'uni-badge--' + type,
'uni-badge--' + size,
absolute ? 'uni-badge--absolute' : ''
].join(' ')
},
positionStyle() {
if (!this.absolute) return {}
let w = this.width / 2,
h = 10
if (this.isDot) {
w = 5
h = 5
}
const x = `${- w + this.offset[0]}px`
const y = `${- h + this.offset[1]}px`
const whiteList = {
rightTop: {
right: x,
top: y
},
rightBottom: {
right: x,
bottom: y
},
leftBottom: {
left: x,
bottom: y
},
leftTop: {
left: x,
top: y
}
}
const match = whiteList[this.absolute]
return match ? match : whiteList['rightTop']
},
badgeWidth() {
return {
width: `${this.width}px`
}
},
dotStyle() {
if (!this.isDot) return {}
return {
width: '10px',
height: '10px',
borderRadius: '10px'
}
},
displayValue() {
const {
isDot,
text,
maxNum
} = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
}
},
methods: {
onClick() {
this.$emit('click');
}
}
};
</script>
<style lang="scss" scoped>
$uni-primary: #2979ff !default;
$uni-success: #4cd964 !default;
$uni-warning: #f0ad4e !default;
$uni-error: #dd524d !default;
$uni-info: #909399 !default;
$bage-size: 12px;
$bage-small: scale(0.8);
.uni-badge--x {
/* #ifdef APP-NVUE */
// align-self: flex-start;
/* #endif */
/* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
position: relative;
}
.uni-badge--absolute {
position: absolute;
}
.uni-badge--small {
transform: $bage-small;
transform-origin: center center;
}
.uni-badge {
/* #ifndef APP-NVUE */
display: flex;
overflow: hidden;
box-sizing: border-box;
/* #endif */
justify-content: center;
flex-direction: row;
height: 20px;
line-height: 18px;
color: #fff;
border-radius: 100px;
background-color: $uni-info;
background-color: transparent;
border: 1px solid #fff;
text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: $bage-size;
/* #ifdef H5 */
z-index: 999;
cursor: pointer;
/* #endif */
&--info {
color: #fff;
background-color: $uni-info;
}
&--primary {
background-color: $uni-primary;
}
&--success {
background-color: $uni-success;
}
&--warning {
background-color: $uni-warning;
}
&--error {
background-color: $uni-error;
}
&--inverted {
padding: 0 5px 0 0;
color: $uni-info;
}
&--info-inverted {
color: $uni-info;
background-color: transparent;
}
&--primary-inverted {
color: $uni-primary;
background-color: transparent;
}
&--success-inverted {
color: $uni-success;
background-color: transparent;
}
&--warning-inverted {
color: $uni-warning;
background-color: transparent;
}
&--error-inverted {
color: $uni-error;
background-color: transparent;
}
}
</style>

88
uni_modules/uni-badge/package.json
View File

@ -0,0 +1,88 @@
{
"id": "uni-badge",
"displayName": "uni-badge 数字角标",
"version": "1.2.0",
"description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"uniui",
"数字角标",
"徽章"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

10
uni_modules/uni-badge/readme.md
View File

@ -0,0 +1,10 @@
## Badge 数字角标
> **组件名：uni-badge**
> 代码块： `uBadge`
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

18
uni_modules/uni-list/changelog.md
View File

@ -0,0 +1,18 @@
## 1.2.0（2021-11-23）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
## 1.1.3（2021-08-30）
- 修复 在vue3中to属性在发行应用的时候报错的bug
## 1.1.2（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.1.1（2021-07-21）
- 修复 与其他组件嵌套使用时，点击失效的Bug
## 1.1.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.17（2021-05-12）
- 新增 组件示例地址
## 1.0.16（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.0.15（2021-02-05）
- 调整为uni_modules目录规范
- 修复 uni-list-chat 角标显示不正常的问题

107
uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
View File

@ -0,0 +1,107 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view class="uni-list-ad">
<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
export default {
name: 'UniListAd',
props: {
title: {
type: String,
default: '',
}
},
// inject: ['list'],
data() {
return {
isFirstChild: false,
border: false,
borderShow: true,
}
},
mounted() {
this.list = this.getForm()
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true
this.isFirstChild = true
}
this.border = this.list.border
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
aderror(e) {
console.log("aderror: " + JSON.stringify(e.detail));
},
closeAd(e) {
this.borderShow = false
}
}
}
</script>
<style lang="scss" scoped>
.uni-list-ad {
position: relative;
border: 1px red solid;
}
.uni-list--border {
position: relative;
padding-bottom: 1px;
/* #ifdef APP-PLUS */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
margin-left: $uni-spacing-row-lg;
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: $uni-border-color;
}
.uni-list-item--first:after {
height: 0px;
}
/* #endif */
</style>

58
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
View File

@ -0,0 +1,58 @@
/**
* 这里是 uni-list 组件内置的常用样式变量
* 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
*
*/
// 背景色
$background-color : #fff;
// 分割线颜色
$divide-line-color : #e5e5e5;
// 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
// nvue 页面不支持修改头像大小
$avatar-width : 45px ;
// 头像边框
$avatar-border-radius: 5px;
$avatar-border-color: #eee;
$avatar-border-width: 1px;
// 标题文字样式
$title-size : 16px;
$title-color : #3b4144;
$title-weight : normal;
// 描述文字样式
$note-size : 12px;
$note-color : #999;
$note-weight : normal;
// 右侧额外内容默认样式
$right-text-size : 12px;
$right-text-color : #999;
$right-text-weight : normal;
// 角标样式
// nvue 页面不支持修改圆点位置以及大小
// 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
$badge-left: 0px;
$badge-top: 0px;
// 显示圆点时，圆点大小
$dot-width: 10px;
$dot-height: 10px;
// 显示角标时，角标大小和字体大小
$badge-size : 18px;
$badge-font : 12px;
// 显示角标时，角标前景色
$badge-color : #fff;
// 显示角标时，角标背景色
$badge-background-color : #ff5a5f;
// 显示角标时，角标左右间距
$badge-space : 6px;
// 状态样式
// 选中颜色
$hover : #f5f5f5;

538
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
View File

@ -0,0 +1,538 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
<view class="uni-list-chat__container">
<view class="uni-list-chat__header-warp">
<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
<image class="uni-list-chat__header-image" :src="avatar" mode="aspectFill"></image>
</view>
<!-- 头像组 -->
<view v-else class="uni-list-chat__header">
<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
:style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
mode="aspectFill"></image>
</view>
</view>
</view>
<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
</view>
<view class="uni-list-chat__content">
<view class="uni-list-chat__content-main">
<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
<text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
</view>
<view class="uni-list-chat__content-extra">
<slot>
<text class="uni-list-chat__content-extra-text">{{ time }}</text>
<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
</view>
</slot>
</view>
</view>
</view>
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
// 头像大小
const avatarWidth = 45;
/**
* ListChat 聊天列表
* @description 聊天列表,用于创建聊天类列表
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {Boolean} clickable = [true|false] 是否开启点击反馈，默认为false
* @property {String} badgeText 数字角标内容
* @property {String} badgePositon = [left|right] 角标位置，默认为 right
* @property {String} link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
* @value false 不开启
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {String} time 右侧时间显示
* @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像，默认为false
* @property {String} avatar 头像地址，avatarCircle 不填时生效
* @property {Array} avatarList 头像组，格式为 [{url:''}]
* @event {Function} click 点击 uniListChat 触发事件
*/
export default {
name: 'UniListChat',
emits:['click'],
props: {
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
clickable: {
type: Boolean,
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
badgeText: {
type: [String, Number],
default: ''
},
badgePositon: {
type: String,
default: 'right'
},
time: {
type: String,
default: ''
},
avatarCircle: {
type: Boolean,
default: false
},
avatar: {
type: String,
default: ''
},
avatarList: {
type: Array,
default () {
return [];
}
}
},
// inject: ['list'],
computed: {
isSingle() {
if (this.badgeText === 'dot') {
return 'uni-badge--dot';
} else {
const badgeText = this.badgeText.toString();
if (badgeText.length > 1) {
return 'uni-badge--complex';
} else {
return 'uni-badge--single';
}
}
},
computedAvatar() {
if (this.avatarList.length > 4) {
this.imageWidth = avatarWidth * 0.31;
return 'avatarItem--3';
} else if (this.avatarList.length > 1) {
this.imageWidth = avatarWidth * 0.47;
return 'avatarItem--2';
} else {
this.imageWidth = avatarWidth;
return 'avatarItem--1';
}
}
},
data() {
return {
isFirstChild: false,
border: true,
// avatarList: 3,
imageWidth: 50
};
},
mounted() {
this.list = this.getForm()
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
this.border = this.list.border;
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
uni[api]({
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
console.error(err.errMsg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
$uni-font-size-lg:16px;
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
$background-color: #fff;
$divide-line-color: #e5e5e5;
$avatar-width: 45px;
$avatar-border-radius: 5px;
$avatar-border-color: #eee;
$avatar-border-width: 1px;
$title-size: 16px;
$title-color: #3b4144;
$title-weight: normal;
$note-size: 12px;
$note-color: #999;
$note-weight: normal;
$right-text-size: 12px;
$right-text-color: #999;
$right-text-weight: normal;
$badge-left: 0px;
$badge-top: 0px;
$dot-width: 10px;
$dot-height: 10px;
$badge-size: 18px;
$badge-font: 12px;
$badge-color: #fff;
$badge-background-color: #ff5a5f;
$badge-space: 6px;
$hover: #f5f5f5;
.uni-list-chat {
font-size: $uni-font-size-lg;
position: relative;
flex-direction: column;
justify-content: space-between;
background-color: $background-color;
}
// .uni-list-chat--disabled {
// opacity: 0.3;
// }
.uni-list-chat--hover {
background-color: $hover;
}
.uni-list--border {
position: relative;
margin-left: $uni-spacing-row-lg;
/* #ifdef APP-PLUS */
border-top-color: $divide-line-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $divide-line-color;
}
.uni-list-item--first:after {
height: 0px;
}
/* #endif */
.uni-list-chat--first {
border-top-width: 0px;
}
.uni-ellipsis {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
}
.uni-ellipsis-2 {
/* #ifndef APP-NVUE */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* #endif */
/* #ifdef APP-NVUE */
lines: 2;
/* #endif */
}
.uni-list-chat__container {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
padding: $uni-spacing-row-base $uni-spacing-row-lg;
position: relative;
overflow: hidden;
}
.uni-list-chat__header-warp {
position: relative;
}
.uni-list-chat__header {
/* #ifndef APP-NVUE */
display: flex;
align-content: center;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: $avatar-width;
height: $avatar-width;
/* #endif */
border-radius: $avatar-border-radius;
border-color: $avatar-border-color;
border-width: $avatar-border-width;
border-style: solid;
overflow: hidden;
}
.uni-list-chat__header-box {
/* #ifndef APP-PLUS */
box-sizing: border-box;
display: flex;
width: $avatar-width;
height: $avatar-width;
/* #endif */
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
overflow: hidden;
border-radius: 2px;
}
.uni-list-chat__header-image {
margin: 1px;
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: $avatar-width;
height: $avatar-width;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list-chat__header-image {
display: block;
width: 100%;
height: 100%;
}
.avatarItem--1 {
width: 100%;
height: 100%;
}
.avatarItem--2 {
width: 47%;
height: 47%;
}
.avatarItem--3 {
width: 32%;
height: 32%;
}
/* #endif */
.header--circle {
border-radius: 50%;
}
.uni-list-chat__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
overflow: hidden;
padding: 2px 0;
}
.uni-list-chat__content-main {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
padding-left: $uni-spacing-row-base;
flex: 1;
overflow: hidden;
}
.uni-list-chat__content-title {
font-size: $title-size;
color: $title-color;
font-weight: $title-weight;
overflow: hidden;
}
.uni-list-chat__content-note {
margin-top: 3px;
color: $note-color;
font-size: $note-size;
font-weight: $title-weight;
overflow: hidden;
}
.uni-list-chat__content-extra {
/* #ifndef APP-NVUE */
flex-shrink: 0;
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-left: 5px;
}
.uni-list-chat__content-extra-text {
color: $right-text-color;
font-size: $right-text-size;
font-weight: $right-text-weight;
overflow: hidden;
}
.uni-list-chat__badge-pos {
position: absolute;
/* #ifdef APP-NVUE */
left: 55px;
top: 3px;
/* #endif */
/* #ifndef APP-NVUE */
left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
/* #endif */
}
.uni-list-chat__badge {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: $badge-background-color;
}
.uni-list-chat__badge-text {
color: $badge-color;
font-size: $badge-font;
}
.uni-badge--single {
/* #ifndef APP-NVUE */
// left: calc(#{$avatar-width} + 7px + #{$badge-left});
/* #endif */
width: $badge-size;
height: $badge-size;
}
.uni-badge--complex {
/* #ifdef APP-NVUE */
left: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
height: $badge-size;
padding: 0 $badge-space;
}
.uni-badge--dot {
/* #ifdef APP-NVUE */
left: 60px;
top: 6px;
/* #endif */
/* #ifndef APP-NVUE */
left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
/* #endif */
width: $dot-width;
height: $dot-height;
padding: 0;
}
.uni-list-chat--right {
/* #ifdef APP-NVUE */
left: 0;
/* #endif */
}
</style>

474
uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
View File

@ -0,0 +1,474 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view :class="{ 'uni-list-item--disabled': disabled }"
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
class="uni-list-item" @click="onClick">
<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
<view class="uni-list-item__container"
:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
<slot name="header">
<view class="uni-list-item__header">
<view v-if="thumb" class="uni-list-item__icon">
<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
</view>
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
</view>
</view>
</slot>
<slot name="body">
<view class="uni-list-item__content"
:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
<text v-if="title" class="uni-list-item__content-title"
:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
</view>
</slot>
<slot name="footer">
<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
:class="{ 'flex--justify': direction === 'column' }">
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
@change="onSwitchChange" />
</view>
</slot>
</view>
<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
/**
* ListItem 列表子组件
* @description 列表子组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标
* @property {String} thumbSize = [lg|base|sm] 略缩图大小
* @value lg 大图
* @value base 一般
* @value sm 小图
* @property {String} badgeText 数字角标内容
* @property {String} badgeType 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
* @property {String} rightText 右侧文字内容
* @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clickable = [true|false] 是否开启点击反馈
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
* @property {String} direction = [row|column] 排版方向
* @value row 水平排列
* @value column 垂直排列
* @event {Function} click 点击 uniListItem 触发事件
* @event {Function} switchChange 点击切换 Switch 时触发
*/
export default {
name: 'UniListItem',
emits: ['click', 'switchChange'],
props: {
direction: {
type: String,
default: 'row'
},
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
ellipsis: {
type: [Number,String],
default: 0
},
disabled: {
type: [Boolean, String],
default: false
},
clickable: {
type: Boolean,
default: false
},
showArrow: {
type: [Boolean, String],
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
showBadge: {
type: [Boolean, String],
default: false
},
showSwitch: {
type: [Boolean, String],
default: false
},
switchChecked: {
type: [Boolean, String],
default: false
},
badgeText: {
type: String,
default: ''
},
badgeType: {
type: String,
default: 'success'
},
rightText: {
type: String,
default: ''
},
thumb: {
type: String,
default: ''
},
thumbSize: {
type: String,
default: 'base'
},
showExtraIcon: {
type: [Boolean, String],
default: false
},
extraIcon: {
type: Object,
default () {
return {
type: 'contact',
color: '#000000',
size: 20
};
}
},
border: {
type: Boolean,
default: true
}
},
// inject: ['list'],
data() {
return {
isFirstChild: false
};
},
mounted() {
this.list = this.getForm()
// 判断是否存在 uni-list 组件
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
onSwitchChange(e) {
this.$emit('switchChange', e.detail);
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
let callback = {
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
}
}
switch (api) {
case 'navigateTo':
uni.navigateTo(callback)
break
case 'redirectTo':
uni.redirectTo(callback)
break
case 'reLaunch':
uni.reLaunch(callback)
break
case 'switchTab':
uni.switchTab(callback)
break
default:
uni.navigateTo(callback)
}
}
}
};
</script>
<style lang="scss">
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
$uni-spacing-col-lg: 12px;
$uni-spacing-row-lg: 15px;
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
$uni-border-color:#e5e5e5;
$uni-bg-color-hover:#f1f1f1;
$uni-text-color-grey:#999;
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
.uni-list-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
font-size: $uni-font-size-lg;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #fff;
flex-direction: row;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-list-item--disabled {
opacity: 0.3;
}
.uni-list-item--hover {
background-color: $uni-bg-color-hover;
}
.uni-list-item__container {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: $list-item-pd;
padding-left: $uni-spacing-row-lg;
flex: 1;
overflow: hidden;
// align-items: center;
}
.container--right {
padding-right: 0;
}
// .border--left {
// margin-left: $uni-spacing-row-lg;
// }
.uni-list--border {
position: absolute;
top: 0;
right: 0;
left: 0;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
.uni-list-item__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
padding-right: 8px;
flex: 1;
color: #3b4144;
// overflow: hidden;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.uni-list-item__content--center {
justify-content: center;
}
.uni-list-item__content-title {
font-size: $uni-font-size-base;
color: #3b4144;
overflow: hidden;
}
.uni-list-item__content-note {
margin-top: 6rpx;
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
overflow: hidden;
}
.uni-list-item__extra {
// width: 25%;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.uni-list-item__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.uni-list-item__icon {
margin-right: 18rpx;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uni-list-item__icon-img {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-icon-wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 0 10px;
}
.flex--direction {
flex-direction: column;
/* #ifndef APP-NVUE */
align-items: initial;
/* #endif */
}
.flex--justify {
/* #ifndef APP-NVUE */
justify-content: initial;
/* #endif */
}
.uni-list--lg {
height: $uni-img-size-lg;
width: $uni-img-size-lg;
}
.uni-list--base {
height: $uni-img-size-base;
width: $uni-img-size-base;
}
.uni-list--sm {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
}
.uni-list-item__extra-text {
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
}
.uni-ellipsis-1 {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
text-overflow:ellipsis;
/* #endif */
}
.uni-ellipsis-2 {
/* #ifndef APP-NVUE */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* #endif */
/* #ifdef APP-NVUE */
lines: 2;
text-overflow:ellipsis;
/* #endif */
}
</style>

106
uni_modules/uni-list/components/uni-list/uni-list - 副本.vue
View File

@ -0,0 +1,106 @@
<template>
<!-- #ifndef APP-NVUE -->
<view class="uni-list uni-border-top-bottom">
<view v-if="border" class="uni-list--border-top"></view>
<slot />
<view v-if="border" class="uni-list--border-bottom"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
<!-- #endif -->
</template>
<script>
/**
* List 列表
* @description 列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} border = [true|false] 标题
*/
export default {
name: 'uniList',
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
enableBackToTop: {
type: [Boolean, String],
default: false
},
scrollY: {
type: [Boolean, String],
default: false
},
border: {
type: Boolean,
default: true
}
},
// provide() {
// return {
// list: this
// };
// },
created() {
this.firstChildAppend = false;
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" scoped>
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
}
.uni-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
z-index: 1;
}
.uni-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
</style>

108
uni_modules/uni-list/components/uni-list/uni-list.vue
View File

@ -0,0 +1,108 @@
<template>
<!-- #ifndef APP-NVUE -->
<view class="uni-list uni-border-top-bottom">
<view v-if="border" class="uni-list--border-top"></view>
<slot />
<view v-if="border" class="uni-list--border-bottom"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
<!-- #endif -->
</template>
<script>
/**
* List 列表
* @description 列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} border = [true|false] 标题
*/
export default {
name: 'uniList',
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
enableBackToTop: {
type: [Boolean, String],
default: false
},
scrollY: {
type: [Boolean, String],
default: false
},
border: {
type: Boolean,
default: true
}
},
// provide() {
// return {
// list: this
// };
// },
created() {
this.firstChildAppend = false;
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" scoped>
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
}
.uni-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
z-index: 1;
}
.uni-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
</style>

65
uni_modules/uni-list/components/uni-list/uni-refresh.vue
View File

@ -0,0 +1,65 @@
<template>
<!-- #ifdef APP-NVUE -->
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
<slot />
</refresh>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
<slot />
</view>
<!-- #endif -->
</template>
<script>
export default {
name: 'UniRefresh',
props: {
display: {
type: [String],
default: "hide"
}
},
data() {
return {
pulling: false
}
},
computed: {
isShow() {
if (this.display === "show" || this.pulling === true) {
return true;
}
return false;
}
},
created() {},
methods: {
onchange(value) {
this.pulling = value;
},
onrefresh(e) {
this.$emit("refresh", e);
},
onpullingdown(e) {
// #ifdef APP-NVUE
this.$emit("pullingdown", e);
// #endif
// #ifndef APP-NVUE
var detail = {
viewHeight: 90,
pullingDistance: e.height
}
this.$emit("pullingdown", detail);
// #endif
}
}
}
</script>
<style>
.uni-refresh {
height: 0;
overflow: hidden;
}
</style>

87
uni_modules/uni-list/components/uni-list/uni-refresh.wxs
View File

@ -0,0 +1,87 @@
var pullDown = {
threshold: 95,
maxHeight: 200,
callRefresh: 'onrefresh',
callPullingDown: 'onpullingdown',
refreshSelector: '.uni-refresh'
};
function ready(newValue, oldValue, ownerInstance, instance) {
var state = instance.getState()
state.canPullDown = newValue;
// console.log(newValue);
}
function touchStart(e, instance) {
var state = instance.getState();
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
if (!state.canPullDown) {
return
}
// console.log("touchStart");
state.height = 0;
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
state.refreshInstance.setStyle({
'height': 0
});
state.refreshInstance.callMethod("onchange", true);
}
function touchMove(e, ownerInstance) {
var instance = e.instance;
var state = instance.getState();
if (!state.canPullDown) {
return
}
var oldHeight = state.height;
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
var height = endY - state.touchStartY;
if (height > pullDown.maxHeight) {
return;
}
var refreshInstance = state.refreshInstance;
refreshInstance.setStyle({
'height': height + 'px'
});
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
state.height = height;
refreshInstance.callMethod(pullDown.callPullingDown, {
height: height
});
}
function touchEnd(e, ownerInstance) {
var state = e.instance.getState();
if (!state.canPullDown) {
return
}
state.refreshInstance.callMethod("onchange", false);
var refreshInstance = state.refreshInstance;
if (state.height > pullDown.threshold) {
refreshInstance.callMethod(pullDown.callRefresh);
return;
}
refreshInstance.setStyle({
'height': 0
});
}
function propObserver(newValue, oldValue, instance) {
pullDown = newValue;
}
module.exports = {
touchmove: touchMove,
touchstart: touchStart,
touchend: touchEnd,
propObserver: propObserver
}

91
uni_modules/uni-list/package.json
View File

@ -0,0 +1,91 @@
{
"id": "uni-list",
"displayName": "uni-list 列表",
"version": "1.2.0",
"description": "List 组件 ，帮助使用者快速构建列表。",
"keywords": [
"",
"uni-ui",
"uniui",
"列表",
"",
"list"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-badge",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

347
uni_modules/uni-list/readme.md
View File

@ -0,0 +1,347 @@
## List 列表
> **组件名：uni-list**
> 代码块： `uList`、`uListItem`
> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后，会有点击选中效果
> - 使用插槽时，可以完全自定义内容
> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法
- 设置 `title` 属性，可以显示列表标题
- 设置 `disabled` 属性，可以禁用当前项
```html
<uni-list>
<uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
```
### 多行内容显示
- 设置 `note` 属性 ，可以在第二行显示描述文本信息
```html
<uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
```
### 右侧显示角标、switch
- 设置 `show-badge` 属性 ，可以显示角标内容
- 设置 `show-switch` 属性，可以显示 switch 开关
```html
<uni-list>
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
</uni-list>
```
### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
```html
<uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
```
### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
```html
<uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
```
### 聊天列表示例
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
- 设置 `to` 属性，可以跳转页面
- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示
- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效
- 可以通过默认插槽自定义列表右侧内容
```html
<uni-list>
<uni-list :border="true">
<!-- 显示圆形头像 -->
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
<!-- 右侧带角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
<!-- 头像显示圆点 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 头像显示角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
<!-- 显示多头像 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 自定义右侧内容 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
<view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text>
<!-- 需要使用 uni-icons 请自行引入 -->
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view>
</uni-list-chat>
</uni-list>
</uni-list>
```
```javascript
export default {
components: {},
data() {
return {
avatarList: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}]
}
}
}
```
```css
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.chat-custom-text {
font-size: 12px;
color: #999;
}
```
## API
### List Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
border |Boolean |true | 是否显示边框
### ListItem Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标
thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;
showBadge |Boolean |false | 是否显示数字角标
badgeText |String |- | 数字角标内容
badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
rightText |String |- | 右侧文字内容
disabled |Boolean |false | 是否禁用
showArrow |Boolean |true | 是否显示箭头图标
link |String |navigateTo | 新页面跳转方式，可选值见下表
to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
clickable |Boolean |false | 是否开启点击反馈
showSwitch |Boolean |false | 是否显示Switch
switchChecked |Boolean |false | Switch是否被选中
showExtraIcon |Boolean |false | 左侧是否显示扩展图标
extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)
direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItem Events
事件称名 |说明 |返回参数
:-: |:-: |:-:
click |点击 uniListItem 触发事件，需开启点击反馈 |-
switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked}
### ListItem Slots
名称 | 说明
:-: | :-:
header | 左/上内容插槽，可完全自定义默认显示
body | 中间内容插槽，可完全自定义中间内容
footer | 右/下内容插槽，可完全自定义右侧内容
> **通过插槽扩展**
> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
**示例**
```html
<uni-list>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template slot="header">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
<uni-list-item>
<!-- 自定义 header -->
<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
<!-- 自定义 body -->
<text slot="body" class="slot-box slot-text">自定义插槽</text>
<!-- 自定义 footer-->
<template slot="footer">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
</uni-list>
```
### ListItemChat Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
clickable |Boolean |false | 是否开启点击反馈
badgeText |String |- | 数字角标内容，设置为 `dot` 将显示圆点
badgePositon |String |right | 角标位置
link |String |navigateTo | 是否展示右侧箭头并开启点击反馈，可选值见下表
clickable |Boolean |false | 是否开启点击反馈
to |String |- | 跳转页面地址，如填写此属性，click 会返回页面是否跳转成功
time |String |- | 右侧时间显示
avatarCircle |Boolean |false | 是否显示圆形头像
avatar |String |- | 头像地址，avatarCircle 不填时生效
avatarList |Array |- | 头像组，格式为 [{url:''}]
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItemChat Slots
名称 | 说明
:- | :-
default | 自定义列表右侧内容（包括时间和角标显示）
### ListItemChat Events
事件称名 | 说明 | 返回参数
:-: | :-: | :-:
@click | 点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息
## 基于uni-list扩展的页面模板
通过扩展插槽，可实现多种常见样式的列表
**新闻列表类**
1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
**商品列表类**
1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)

9
uni_modules/uni-segmented-control/changelog.md
View File

@ -0,0 +1,9 @@
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.5（2021-05-12）
- 新增 项目示例地址
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范

146
uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
View File

@ -0,0 +1,146 @@
<template>
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
class="segmented-control__item" @click="_onClick(index)">
<view>
<text :style="{color:
index === currentIndex
? styleType === 'text'
? activeColor
: '#fff'
: styleType === 'text'
? '#000'
: activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
</view>
</view>
</view>
</template>
<script>
/**
* SegmentedControl 分段器
* @description 用作不同视图的显示
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
* @property {Number} current 当前选中的tab索引值，从0计数
* @property {String} styleType = [button|text] 分段器样式类型
* @value button 按钮类型
* @value text 文字类型
* @property {String} activeColor 选中的标签背景色与边框颜色
* @property {Array} values 选项数组
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
*/
export default {
name: 'UniSegmentedControl',
emits: ['clickItem'],
props: {
current: {
type: Number,
default: 0
},
values: {
type: Array,
default () {
return []
}
},
activeColor: {
type: String,
default: '#2979FF'
},
styleType: {
type: String,
default: 'button'
}
},
data() {
return {
currentIndex: 0
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val
}
}
},
created() {
this.currentIndex = this.current
},
methods: {
_onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index
this.$emit('clickItem', {
currentIndex: index
})
}
}
}
}
</script>
<style lang="scss" scoped>
.segmented-control {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
height: 36px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.segmented-control__item {
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
/* #endif */
position: relative;
flex: 1;
justify-content: center;
align-items: center;
}
.segmented-control__item--button {
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 0;
}
.segmented-control__item--button--first {
border-left-width: 1px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.segmented-control__item--button--last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.segmented-control__item--text {
border-bottom-style: solid;
border-bottom-width: 2px;
padding: 6px 0;
}
.segmented-control__text {
font-size: 14px;
line-height: 20px;
text-align: center;
font-weight: 500;
}
</style>

87
uni_modules/uni-segmented-control/package.json
View File

@ -0,0 +1,87 @@
{
"id": "uni-segmented-control",
"displayName": "uni-segmented-control 分段器",
"version": "1.2.0",
"description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
"keywords": [
"uni-ui",
"uniui",
"分段器",
"segement",
"顶部选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

13
uni_modules/uni-segmented-control/readme.md
View File

@ -0,0 +1,13 @@
## SegmentedControl 分段器
> **组件名：uni-segmented-control**
> 代码块： `uSegmentedControl`
用作不同视图的显示
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
Write Preview
Loading…
Cancel
Save