Browse Source
Merge branch 'devlop' of http://git.qniao.cn/dengxiongfei/paper-shopkeeper-app into devlop
devlop
Merge branch 'devlop' of http://git.qniao.cn/dengxiongfei/paper-shopkeeper-app into devlop
devlop
40 changed files with 4912 additions and 137 deletions
Split View
Diff Options
-
12apis/clientDetailApi.js
-
23apis/trade.js
-
9common/css/reset.scss
-
65components/not-logged/not-logged.vue
-
24components/u-gap/u-gap.vue
-
268pages.json
-
22pages/client-detail/base-paper-deals.vue
-
540pages/client-detail/basic-information.vue
-
42pages/client-detail/custom-header.vue
-
22pages/client-detail/equipment-information.vue
-
82pages/client-detail/index.vue
-
464pages/client-detail/news-item.nvue
-
22pages/client-detail/waste-paper-trading.vue
-
128pages/trade/index.vue
-
208pages/trade/my-offer.vue
-
201pages/trade/orderList.vue
-
268pages/trade/quotationList.vue
-
BINstatic/imgs/client-detail/address-icon.png
-
BINstatic/imgs/client-detail/arrow-down-icon.png
-
BINstatic/imgs/client-detail/arrow-up-icon.png
-
BINstatic/imgs/trade/not-login.png
-
29uni_modules/uni-badge/changelog.md
-
268uni_modules/uni-badge/components/uni-badge/uni-badge.vue
-
88uni_modules/uni-badge/package.json
-
10uni_modules/uni-badge/readme.md
-
18uni_modules/uni-list/changelog.md
-
107uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
-
58uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
-
538uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
-
474uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
-
106uni_modules/uni-list/components/uni-list/uni-list - 副本.vue
-
108uni_modules/uni-list/components/uni-list/uni-list.vue
-
65uni_modules/uni-list/components/uni-list/uni-refresh.vue
-
87uni_modules/uni-list/components/uni-list/uni-refresh.wxs
-
91uni_modules/uni-list/package.json
-
347uni_modules/uni-list/readme.md
-
9uni_modules/uni-segmented-control/changelog.md
-
146uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
-
87uni_modules/uni-segmented-control/package.json
-
13uni_modules/uni-segmented-control/readme.md
@ -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 |
|||
} |
|||
) |
|||
} |
|||
|
|||
@ -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 } |
|||
) |
|||
} |
|||
|
|||
@ -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> |
|||
@ -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> |
|||
@ -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函数里面得到 |
|||
}] |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
原纸交易 |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
设备信息 |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
废纸交易 |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,40 +1,120 @@ |
|||
<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> |
|||
</template> |
|||
|
|||
<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> |
|||
|
|||
<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; |
|||
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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 1.5 KiB |
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 446 B |
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 421 B |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 456 | Size: 72 KiB |
@ -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目录规范 |
|||
@ -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> |
|||
@ -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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
## Badge 数字角标 |
|||
> **组件名：uni-badge** |
|||
> 代码块： `uBadge` |
|||
|
|||
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景， |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
|
|||
|
|||
@ -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 角标显示不正常的问题 |
|||
@ -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> |
|||
@ -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; |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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 |
|||
} |
|||
@ -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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -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) |
|||
@ -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目录规范 |
|||
@ -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> |
|||
@ -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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -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