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
27 changed files with 2421 additions and 383 deletions
Split View
Diff Options
-
433components/bussiness-components/packingStationItem.vue
-
38pages.json
-
206pages/client-detail/base-paper-deals.vue
-
38pages/client-detail/basic-information.vue
-
249pages/client-detail/equipment-information.vue
-
10pages/client-detail/index.vue
-
291pages/client-detail/lv-select.vue
-
49pages/client-detail/no-data.vue
-
4pages/client-detail/waste-paper-trading.vue
-
264pages/mall/index.vue
-
48pages/my-offer/index.vue
-
667pages/submit-quotation/index.vue
-
21pages/trade/index.vue
-
66pages/trade/orderList.vue
-
77pages/trade/quotationList.vue
-
BINstatic/imgs/client-detail/arrow-right-icon.png
-
BINstatic/imgs/client-detail/no-data-icon.png
-
BINstatic/imgs/client-detail/yzjy-icon.png
-
BINstatic/imgs/mall/cut-icon.png
-
BINstatic/imgs/mall/grounding-icon.png
-
BINstatic/imgs/mall/sold-out-icon.png
-
BINstatic/imgs/mall/zsc-bg-icon.png
-
BINstatic/imgs/trade/myPrice.png
-
25uni_modules/uni-number-box/changelog.md
-
220uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
-
85uni_modules/uni-number-box/package.json
-
13uni_modules/uni-number-box/readme.md
@ -1,228 +1,229 @@ |
|||
<template> |
|||
<view class="packing-area"> |
|||
<view class="info"> |
|||
<image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image> |
|||
<view class="content"> |
|||
<view class="title"> |
|||
<text class="text">{{ info.enterpriseName }}</text> |
|||
<image |
|||
class="icon" |
|||
:src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'" |
|||
></image> |
|||
</view> |
|||
<view class="desc"> |
|||
<text>{{ transformBusiness(info.business) }}</text> |
|||
</view> |
|||
<view v-show="info.whetherCooperation === 1" class="box-area"> |
|||
<view class="box"> |
|||
<view><text class="title">月采购量</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">月采购额</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">最近购买</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-show="info.whetherCooperation === 0" class="box-area"> |
|||
<view class="box"> |
|||
<view><text class="title">法定代表人</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">注册资本</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">成立时间</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ transformDate(info.openingDate) || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="box"> |
|||
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image> |
|||
<text class="text">{{ info.detailedAddress || '未知' }}</text> |
|||
</view> |
|||
<view class="divide"></view> |
|||
<view class="box"> |
|||
<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image> |
|||
<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="packing-area"> |
|||
<view class="info" @tap="goDetail"> |
|||
<image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image> |
|||
<view class="content"> |
|||
<view class="title"> |
|||
<text class="text">{{ info.enterpriseName }}</text> |
|||
<image class="icon" :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"></image> |
|||
</view> |
|||
<view class="desc"> |
|||
<text>{{ transformBusiness(info.business) }}</text> |
|||
</view> |
|||
<view v-show="info.whetherCooperation === 1" class="box-area"> |
|||
<view class="box"> |
|||
<view><text class="title">月采购量</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">月采购额</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">最近购买</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-show="info.whetherCooperation === 0" class="box-area"> |
|||
<view class="box"> |
|||
<view><text class="title">法定代表人</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">注册资本</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view><text class="title">成立时间</text></view> |
|||
<view style="margin-top: 16rpx"> |
|||
<text class="value">{{ transformDate(info.openingDate) || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="box"> |
|||
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image> |
|||
<text class="text">{{ info.detailedAddress || '未知' }}</text> |
|||
</view> |
|||
<view class="divide"></view> |
|||
<view class="box"> |
|||
<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image> |
|||
<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2 } from '@/utils/hook.js' |
|||
export default { |
|||
props: { |
|||
info: { |
|||
type: Object, |
|||
default: () => ({ |
|||
enterpriseName: '广州市金骏彩色印务有限公司', |
|||
enterpriseLogo: '', |
|||
business: '生产画册、书刊、包装盒、手提袋子、快递箱', |
|||
whetherCooperation: 1, |
|||
monthlyPurchaseQuantity: 100, |
|||
monthlyTradingQuota: 200, |
|||
lastTradingDate: '2020-12-12', |
|||
openingDate: '2020-12-12', |
|||
legalPerson: '张三', |
|||
registeredCapital: 1000, |
|||
contactNumber: '13888888888', |
|||
detailedAddress: '广州市天河区天河路' |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
transformBusiness(business) { |
|||
let text = business?.trim() || '未知' |
|||
if (text.length > 17) { |
|||
text = text.substr(0, 17) + '...' |
|||
} |
|||
return '主营：' + text |
|||
}, |
|||
transformDate(date) { |
|||
if (date) { |
|||
return date.split('-').join('/') |
|||
} |
|||
return '' |
|||
}, |
|||
transformPhoneNum(phoneNum) { |
|||
if (phoneNum) { |
|||
if (this.hasLogin) { |
|||
return phoneNum |
|||
} else { |
|||
return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') |
|||
} |
|||
} |
|||
return '--' |
|||
} |
|||
}, |
|||
computed: { |
|||
hasLogin() { |
|||
return this.$store.state.qnToken != '' |
|||
} |
|||
} |
|||
props: { |
|||
info: { |
|||
type: Object, |
|||
default: () => ({ |
|||
enterpriseName: '广州市金骏彩色印务有限公司', |
|||
enterpriseLogo: '', |
|||
business: '生产画册、书刊、包装盒、手提袋子、快递箱', |
|||
whetherCooperation: 1, |
|||
monthlyPurchaseQuantity: 100, |
|||
monthlyTradingQuota: 200, |
|||
lastTradingDate: '2020-12-12', |
|||
openingDate: '2020-12-12', |
|||
legalPerson: '张三', |
|||
registeredCapital: 1000, |
|||
contactNumber: '13888888888', |
|||
detailedAddress: '广州市天河区天河路' |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
goDetail() { |
|||
go2('client-detail', { id: this.info.enterpriseId }) |
|||
}, |
|||
transformBusiness(business) { |
|||
let text = business?.trim() || '未知' |
|||
if (text.length > 17) { |
|||
text = text.substr(0, 17) + '...' |
|||
} |
|||
return '主营：' + text |
|||
}, |
|||
transformDate(date) { |
|||
if (date) { |
|||
return date.split('-').join('/') |
|||
} |
|||
return '' |
|||
}, |
|||
transformPhoneNum(phoneNum) { |
|||
if (phoneNum) { |
|||
if (this.hasLogin) { |
|||
return phoneNum |
|||
} else { |
|||
return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') |
|||
} |
|||
} |
|||
return '--' |
|||
} |
|||
}, |
|||
computed: { |
|||
hasLogin() { |
|||
return this.$store.state.qnToken != '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.packing-area { |
|||
width: 750rpx; |
|||
background-color: #fff; |
|||
.info { |
|||
width: 750rpx; |
|||
padding: 30rpx 32rpx 48rpx; |
|||
border-bottom: 2rpx solid #dddddd; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: flex-start; |
|||
.image { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
} |
|||
.content { |
|||
flex-grow: 1; |
|||
.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; |
|||
} |
|||
.box-area { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
.box { |
|||
width: 170rpx; |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
} |
|||
.value { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.other { |
|||
width: 750rpx; |
|||
padding: 24rpx 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.divide { |
|||
width: 2rpx; |
|||
height: 32rpx; |
|||
background: #d8d8d8; |
|||
} |
|||
.box { |
|||
width: 340rpx; |
|||
margin: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.icon { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin-right: 10rpx; |
|||
} |
|||
.text { |
|||
font-size: 24rpx; |
|||
color: #555555; |
|||
} |
|||
} |
|||
} |
|||
width: 750rpx; |
|||
background-color: #fff; |
|||
.info { |
|||
width: 750rpx; |
|||
padding: 30rpx 32rpx 48rpx; |
|||
border-bottom: 2rpx solid #dddddd; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: flex-start; |
|||
.image { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
} |
|||
.content { |
|||
flex-grow: 1; |
|||
.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; |
|||
} |
|||
.box-area { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
.box { |
|||
width: 170rpx; |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
} |
|||
.value { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.other { |
|||
width: 750rpx; |
|||
padding: 24rpx 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.divide { |
|||
width: 2rpx; |
|||
height: 32rpx; |
|||
background: #d8d8d8; |
|||
} |
|||
.box { |
|||
width: 340rpx; |
|||
margin: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.icon { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin-right: 10rpx; |
|||
} |
|||
.text { |
|||
font-size: 24rpx; |
|||
color: #555555; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,22 +1,204 @@ |
|||
<template> |
|||
<view> |
|||
原纸交易 |
|||
<view class="warpper"> |
|||
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> |
|||
<view class="sum-box"> |
|||
<view class=""> |
|||
<view class="title"> |
|||
交易金额 |
|||
</view> |
|||
<view class="value"> |
|||
458 682.00 |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="title"> |
|||
总交易量(吨) |
|||
</view> |
|||
<view class="value"> |
|||
125.7752 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="card-box"> |
|||
<view class="header"> |
|||
<view class="left-title"> |
|||
XJ 202112235389 |
|||
</view> |
|||
<view class="right-title"> |
|||
¥ 22045.78 |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
|||
<view class=""> |
|||
<view class="title"> |
|||
金蝶蓝白卡 |
|||
</view> |
|||
<view class="desc"> |
|||
白卡纸/金蝶蓝/350g/787*1092/2200张 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
|||
<view class=""> |
|||
<view class="title"> |
|||
丽盈白卡 |
|||
</view> |
|||
<view class="desc"> |
|||
白卡纸/丽盈/350g/787*1092/2200张 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="time"> |
|||
2021-12-23 12:30:45 |
|||
</view> |
|||
<view class="btn"> |
|||
更多详情 |
|||
<image class="icon" src="/static/imgs/client-detail/arrow-right-icon.png"></image> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
</view> |
|||
</scroll-list> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
export default { |
|||
components: { uGap }, |
|||
data() { |
|||
return { |
|||
option: { |
|||
size: 10, |
|||
auto: true, |
|||
emptyText: '暂无数据~', |
|||
background: '#F7F8FA', |
|||
disabled: false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
downCallback() {}, |
|||
upCallback() {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
<style lang="scss"> |
|||
.warpper { |
|||
width: 750rpx; |
|||
.sum-box { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
// text-align: center; |
|||
height: 184rpx; |
|||
background: url('/static/imgs/client-detail/yzjy-icon.png') no-repeat; |
|||
background-size: 100%; |
|||
.title { |
|||
font-size: 26rpx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
} |
|||
.value { |
|||
font-size: 56rpx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 500; |
|||
margin-top: 16rpx; |
|||
} |
|||
} |
|||
.card-box { |
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 88rpx; |
|||
background: #FFFFFF; |
|||
border-bottom: 2rpx solid #DDDDDD; |
|||
padding: 0rpx 32rpx; |
|||
.left-title { |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 600; |
|||
} |
|||
.right-title { |
|||
font-size: 30rpx; |
|||
color: #FF5368; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
border-bottom: 2rpx solid #DDDDDD; |
|||
padding: 0rpx 32rpx; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
flex: 0 0 100rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
.desc { |
|||
padding-top: 26rpx; |
|||
font-size: 26rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.other { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
padding: 0rpx 32rpx; |
|||
.time { |
|||
font-size: 26rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
.btn { |
|||
font-size: 28rpx; |
|||
color: #007AFF; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,22 +1,247 @@ |
|||
<template> |
|||
<view> |
|||
设备信息 |
|||
<view class="warpper"> |
|||
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> |
|||
<view class="card-box"> |
|||
<view class="header"> |
|||
<view class="title">全自动立体糊盒机</view> |
|||
<view class="desc">近30天</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="info"> |
|||
<view class=""> |
|||
<view class="value">8900件</view> |
|||
<view class="title"> |
|||
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|||
设备产能 |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="value">89 h</view> |
|||
<view class="title"> |
|||
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|||
工作时长 |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="value">86%</view> |
|||
<view class="title"> |
|||
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|||
开机率 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shrink-box" v-if="!seemoreFlag"> |
|||
<view class="row"> |
|||
<view class="left"> |
|||
<view class="title">设备图片：</view> |
|||
<view class="look-over">点击查看</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">购买年份：</view> |
|||
<view class="value">2019年</view> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="left"> |
|||
<view class="title">购买金额：</view> |
|||
<view class="value">2000万</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">设备产能：</view> |
|||
<view class="value">2000个/天</view> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="left"> |
|||
<view class="title">成色：</view> |
|||
<view class="value">9成新</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">设备类型：</view> |
|||
<view class="value">糊盒机</view> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="left"> |
|||
<view class="title">最大输纸 长度：</view> |
|||
<view class="value">2000mm</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">最大输纸 宽度：</view> |
|||
<view class="value">2000mm</view> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="left"> |
|||
<view class="title">最大输纸 厚度：</view> |
|||
<view class="value">2000mm</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">咬口：</view> |
|||
<view class="value">2000mm</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> |
|||
<uGap></uGap> |
|||
</view> |
|||
</scroll-list> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
import lvSelect from './lv-select.vue' |
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
export default { |
|||
components: { lvSelect, uGap }, |
|||
data() { |
|||
return { |
|||
option: { |
|||
size: 10, |
|||
auto: true, |
|||
emptyText: '暂无数据~', |
|||
background: '#F7F8FA', |
|||
disabled: false |
|||
}, |
|||
seemoreFlag: true |
|||
} |
|||
}, |
|||
methods: { |
|||
seemoreTap() { |
|||
this.seemoreFlag = !this.seemoreFlag |
|||
}, |
|||
downCallback() {}, |
|||
upCallback() {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
<style lang="scss"> |
|||
.warpper { |
|||
.card-box { |
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 88rpx; |
|||
background: #ffffff; |
|||
padding: 0rpx 36rpx 0rpx 32rpx; |
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 600; |
|||
} |
|||
.desc { |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.content { |
|||
border-bottom: 2rpx solid #dddddd; |
|||
border-top: 2rpx solid #dddddd; |
|||
.info { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
text-align: center; |
|||
height: 148rpx; |
|||
background: #ffffff; |
|||
.value { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
} |
|||
.title { |
|||
margin-top: 16rpx; |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
.icon { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
padding-right: 6rpx; |
|||
} |
|||
} |
|||
.shrink-box { |
|||
background: #f7f8fa; |
|||
padding: 8rpx 36rpx 16rpx 32rpx; |
|||
.row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 16rpx; |
|||
.left { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 60%; |
|||
} |
|||
.right { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 40%; |
|||
} |
|||
.title { |
|||
flex: 0 0 140rpx; |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.see-more { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background: #ffffff; |
|||
padding: 0rpx 32rpx; |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
.icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<template> |
|||
<view style="position: relative;" :class="size === 'small' ? 'small' : ''"> |
|||
<view class="uni-flex" :class="{unishadow :uniShadow}"> |
|||
<view class="uni-search-form uni-circular uni-background"> |
|||
<icon type="search" size="14" class="uni-icon-position"/> |
|||
<input |
|||
type="text" |
|||
:placeholder="placeholder" |
|||
v-model="inputVal" |
|||
@input="onInput" |
|||
@focus="onFocus" |
|||
></input> |
|||
<icon v-if="isShowClearIcon" type="clear" size="16" class="uni-icon-clear" @tap="clearInputValue"/> |
|||
</view> |
|||
<view class="uni-action"> |
|||
<button |
|||
:disabled="loading" |
|||
class="uni-cu-btn uni-bg-gradual-green uni-shadow-blur uni-round" |
|||
:class="[type === 'primary' ? 'uni-primary' : (type === 'success' ? 'uni-success' : (type === 'warning' ? 'uni-warning' : 'uni-error'))]" |
|||
hover-class="hover" |
|||
@click="handleSearch" |
|||
>搜索</button> |
|||
</view> |
|||
</view> |
|||
<view v-if="isShowSelect"> |
|||
<view class="uni-combox__selector" v-if="inputIsShow"> |
|||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll"> |
|||
<view class="uni-combox__selector-empty " v-if="loading"> |
|||
<view>加载中··· </view> |
|||
</view> |
|||
<view class="uni-combox__selector-empty " v-if="!loading && dataListLength === 0" @tap="closeDielog"> |
|||
<view>{{emptyTips}}</view> |
|||
</view> |
|||
<view class="uni-combox__selector-item" v-for="(item,index) in dataList" :key="index" @tap="onSelectorClick(index)"> |
|||
<text>{{item[showValue]}}</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'select', |
|||
props: { |
|||
// placeholder: { |
|||
// type: String, |
|||
// default: '请输入信息' |
|||
// }, |
|||
infoList: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
showValue: { |
|||
type: String, |
|||
default: 'name' |
|||
}, |
|||
emptyTips: { |
|||
type: String, |
|||
default: '暂无数据' |
|||
}, |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
btnStyleColor: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
uniShadow: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: 'primary' |
|||
}, |
|||
size: { |
|||
type: String, |
|||
default: 'medium' |
|||
}, |
|||
isShowSelect: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
inputIsShow: false, |
|||
inputVal: '', |
|||
dataList: [], |
|||
placeholder: '请输入信息', |
|||
isShowClearIcon: false |
|||
} |
|||
}, |
|||
computed: { |
|||
dataListLength() { |
|||
return this.dataList.length |
|||
} |
|||
}, |
|||
watch: { |
|||
value: { |
|||
handler(newVal) { |
|||
this.inputVal = newVal |
|||
}, |
|||
immediate: true |
|||
}, |
|||
infoList: { |
|||
handler(newVal) { |
|||
this.dataList = newVal |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
}, |
|||
inputVal(val) { |
|||
if(!val.length) { |
|||
this.isShowClearIcon = false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
closeDielog() { |
|||
this.inputIsShow = false |
|||
}, |
|||
onFocus() { |
|||
if(this.dataList.length) { |
|||
this.inputIsShow = true |
|||
this.isShowClearIcon = !!this.inputVal |
|||
} |
|||
}, |
|||
onSelectorClick(index) { |
|||
this.inputIsShow = false |
|||
this.isShowClearIcon = false |
|||
this.inputVal = this.dataList[index][this.showValue] |
|||
this.$emit('input', this.inputVal) |
|||
this.$emit('change', this.dataList[index]) |
|||
}, |
|||
onInput() { |
|||
this.$emit('input', this.inputVal) |
|||
}, |
|||
handleSearch() { |
|||
this.inputIsShow = true |
|||
this.$emit('handleSearch') |
|||
}, |
|||
clearInputValue() { |
|||
this.inputVal = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
// $selectWidth: 75%; // 下拉选择框宽度 |
|||
.small { |
|||
transform: scale(.9, .9); |
|||
} |
|||
.uni-primary { |
|||
background-color: $uni-color-primary; |
|||
} |
|||
.uni-success { |
|||
background-color: #67c23a; |
|||
} |
|||
.uni-warning { |
|||
background-color: $uni-color-warning; |
|||
} |
|||
.uni-error { |
|||
background-color: $uni-color-error; |
|||
} |
|||
.hover{ |
|||
transition: all .6s; |
|||
transform: scale(0.8,0.8); |
|||
} |
|||
.uni-flex{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10rpx 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.unishadow{ |
|||
box-shadow: 0rpx 1rpx 5rpx #DDDDDD; |
|||
} |
|||
.uni-search-form{ |
|||
position: relative; |
|||
width: 60%; |
|||
margin: 10rpx; |
|||
padding: 10rpx 80rpx; |
|||
font-size: 30rpx; |
|||
color: #999999; |
|||
} |
|||
.uniRound{ |
|||
border-radius: 5px; |
|||
} |
|||
.uni-circular{ |
|||
border-radius: 100rpx; |
|||
} |
|||
.uni-icon-position{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 26rpx; |
|||
transform: translate(0,-50%); |
|||
} |
|||
.uni-icon-clear{ |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 26rpx; |
|||
transform: translate(0,-50%); |
|||
} |
|||
.uni-background{ |
|||
background-color: #F5F5F5; |
|||
} |
|||
/* button */ |
|||
.uni-action{ |
|||
width:120rpx; |
|||
height: 66rpx; |
|||
} |
|||
.uni-cu-btn{ |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
border: none; |
|||
// background-color: $uni-color-primary; |
|||
} |
|||
.uni-shadow-blur{ |
|||
box-shadow: 0rpx 1rpx 10rpx #C8C7CC; |
|||
} |
|||
.uni-round{ |
|||
border-radius: 100rpx; |
|||
} |
|||
.uni-combox__selector { |
|||
position: absolute; |
|||
top: 100rpx; |
|||
left: 40rpx; |
|||
box-sizing: border-box; |
|||
width: 75%; // 下拉框宽度 |
|||
background-color: #FFFFFF; |
|||
border-radius: 6px; |
|||
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px; |
|||
z-index: 999; |
|||
} |
|||
.uni-combox__selector-scroll { |
|||
max-height: 200px; |
|||
box-sizing: border-box; |
|||
} |
|||
.uni-combox__selector::before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-bottom: solid 6px #FFFFFF; |
|||
border-right: solid 6px transparent; |
|||
border-left: solid 6px transparent; |
|||
left: 50%; |
|||
top: -6px; |
|||
margin-left: -6px; |
|||
} |
|||
.uni-combox__selector-empty{ |
|||
text-align: center; |
|||
color: #8F8F94; |
|||
padding: 20rpx 0; |
|||
font-size: 28rpx; |
|||
} |
|||
.uni-combox__selector-item { |
|||
/* #ifdef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
font-size: 24rpx; |
|||
margin: 0px 10px; |
|||
padding: 20rpx 10rpx; |
|||
color: #808080; |
|||
} |
|||
.uni-combox__selector-item:hover { |
|||
background-color: #DDDDDD; |
|||
} |
|||
.uni-combox__selector-empty:last-child, |
|||
.uni-combox__selector-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<view class="warpper"> |
|||
<image class="icon" src="/static/imgs/client-detail/no-data-icon.png"></image> |
|||
<view class="text"> |
|||
{{ title }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
title:{ |
|||
type: String, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.warpper { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
margin-top: 25%; |
|||
.icon { |
|||
width: 560rpx; |
|||
height: 320rpx; |
|||
} |
|||
.text { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,40 +1,254 @@ |
|||
<template> |
|||
<view class="content"> |
|||
mall |
|||
<view class="warpper"> |
|||
<uni-nav-bar> |
|||
<view slot="left" class="left-title">纸商城</view> |
|||
<view slot="right" class="right-title">分享</view> |
|||
</uni-nav-bar> |
|||
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> |
|||
<view class="top-box"> |
|||
<view class=""> |
|||
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
|||
</view> |
|||
<view class="center"> |
|||
<view class="title"> |
|||
东莞市隆兴纸业有限公司 |
|||
</view> |
|||
<view class="desc"> |
|||
全部商品 39 | 上新 9 |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="cut"> |
|||
切换商城 |
|||
<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image> |
|||
</view> |
|||
<view class="set"> |
|||
设置 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view v-for="(item,index) in 6" :key="index"> |
|||
<view class="content"> |
|||
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
|||
<view class=""> |
|||
<view class="title"> |
|||
<view class=""> |
|||
金蝶蓝白卡 |
|||
</view> |
|||
<view class=""> |
|||
<image class="icon" :src="1 === 1 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="sub-title"> |
|||
金桂/白卡纸/金蝶蓝 |
|||
</view> |
|||
<view class="desc"> |
|||
克重(价格)：200(3900) 235(3900) 255(390 |
|||
0)255(390 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="time"> |
|||
5分钟前 |
|||
</view> |
|||
<view class="btn"> |
|||
<view class=""> |
|||
编辑 |
|||
</view> |
|||
<view class="divide"></view> |
|||
<view class=""> |
|||
下架 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
</view> |
|||
|
|||
</scroll-list> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
|
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
export default { |
|||
components: { uGap }, |
|||
data() { |
|||
return { |
|||
option: { |
|||
size: 10, |
|||
auto: true, |
|||
emptyText: '暂无数据~', |
|||
background: '#F7F8FA', |
|||
disabled: false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
downCallback() {}, |
|||
upCallback() {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
<style lang="scss"> |
|||
.warpper { |
|||
width: 750rpx; |
|||
.left-title { |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
} |
|||
.right-title { |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
} |
|||
.top-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
justify-content: space-around; |
|||
height: 180rpx; |
|||
background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat; |
|||
background-size: 100%; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.right { |
|||
width: 140rpx; |
|||
} |
|||
.center { |
|||
position: relative; |
|||
left: -20rpx; |
|||
} |
|||
.title { |
|||
|
|||
font-size: 34rpx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 2rpx; |
|||
font-weight: 600; |
|||
margin-bottom: 12rpx; |
|||
|
|||
} |
|||
.desc { |
|||
opacity: 0.75; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
padding-right: 32rpx; |
|||
} |
|||
.cut { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
.cut-icon { |
|||
width: 29.42rpx; |
|||
height: 26.67rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
.set { |
|||
opacity: 0.75; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
position: relative; |
|||
top: 39rpx; |
|||
left: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.text-area { |
|||
.content { |
|||
background: #FFFFFF; |
|||
border-bottom: 2rpx solid #DDDDDD; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
padding: 24rpx 0rpx 24rpx 32rpx; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
flex: 0 0 100rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
.icon { |
|||
position: relative; |
|||
top: -22rpx; |
|||
width: 150rpx; |
|||
height: 50rpx; |
|||
} |
|||
} |
|||
.sub-title { |
|||
position: relative; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
top: -4rpx; |
|||
} |
|||
.desc { |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
padding-top: 10rpx; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
.other { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
padding: 0rpx 32rpx; |
|||
.time { |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.btn { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #007AFF; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 400; |
|||
} |
|||
.divide { |
|||
width: 2rpx; |
|||
height: 32rpx; |
|||
background: #d8d8d8; |
|||
margin: 0 32rpx; |
|||
} |
|||
.icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,667 @@ |
|||
<template> |
|||
<view class="submit-quotation"> |
|||
<view> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title=""> |
|||
<view class="submit-title">提交报价</view> |
|||
<view slot="left"></view> |
|||
<view slot="right"></view> |
|||
</uni-nav-bar> |
|||
</view> |
|||
<view class="submit-main"> |
|||
<view><text class="submit-main-title">交货要求</text></view> |
|||
<view> |
|||
<text class="submit-main-subTitle">询价客户：</text> |
|||
<text class="submit-main-subContant">东莞市隆兴纸业有限公司</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-main-subTitle">交货区域：</text> |
|||
<text class="submit-main-subContant">广东省/广州市/天河区</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-main-subTitle">交货时间：</text> |
|||
<text class="submit-main-subContant">2021/12/29 12:30</text> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-deadline"> |
|||
<view class="submit-text">报价截止</view> |
|||
<view class="submit-time"><text class="submit-time-text">12</text></view> |
|||
<view class="sbumit-colon">:</view> |
|||
<view class="submit-time"><text class="submit-time-text">12</text></view> |
|||
<view class="sbumit-colon">:</view> |
|||
<view class="submit-time"><text class="submit-time-text">12</text></view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-contant"> |
|||
<view class="submit-contant-head"> |
|||
<view class="submit-contant-title">丽品白卡｜200g｜787*1092｜5000张</view> |
|||
<view class="" @click="commodityModify()"><image class="submit-image" src="../../static/imgs/trade/myPrice.png" mode=""></image></view> |
|||
</view> |
|||
<view class="submit-contant-body"> |
|||
<view class=""> |
|||
<text class="submit-contant-body-title">重量(吨)：</text> |
|||
<text class="submit-contant-body-subtitle">1.6544</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-contant-body-title">单价(元/吨)：</text> |
|||
<text class="submit-contant-body-subtitle"> |
|||
1000 |
|||
<image @click="priceModify()" class="submit-image-price" src="../../static/imgs/trade/myPrice.png" mode=""></image> |
|||
</text> |
|||
</view> |
|||
<view> |
|||
<text class="submit-contant-body-title">小计(元)：</text> |
|||
<text class="submit-contant-body-subtitle">1.6544</text> |
|||
</view> |
|||
<view class="submit-contant-body-input"> |
|||
<uni-easyinput maxlength="100" class="submit-contant-body-inputClass" v-model="value" placeholder="请输入内容"></uni-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="submit-contant-order"> |
|||
<view class=""> |
|||
<text class="submit-contant-order-title">其他费用：</text> |
|||
<text class="submit-contant-order-subtitle">¥ 80.00</text> |
|||
</view> |
|||
<view class=""> |
|||
<text class="submit-contant-order-title">合计：</text> |
|||
<text class="submit-contant-order-money">¥ 13800.32</text> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-contant-time"> |
|||
<view class=""> |
|||
<text class="submit-contant-time-title">有效时间：</text> |
|||
<text class="submit-contant-time-title">24小时</text> |
|||
</view> |
|||
<view class="" @click="resetTime()"><text class="submit-contant-time-subtitle">设置</text></view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-contant-remark"> |
|||
<view class="submit-contant-remark-title">报价备注</view> |
|||
<view class=""><uni-easyinput maxlength="200" type="textarea" class="submit-contant-remark-input" v-model="value1" placeholder="请输入内容"></uni-easyinput></view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="submit-btnBg"><button class="submit-btn" type="primary">提交报价</button></view> |
|||
<view class=""> |
|||
<uni-popup ref="popup" :mask-click="false"> |
|||
<view class="submit-popup"> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"> |
|||
<view class="submit-popup-title">纸品名称：</view> |
|||
<view class="" @click="close()"><image class="submit-popup-close-image" src="../../static/imgs/client/close-icon.png" mode=""></image></view> |
|||
</view> |
|||
<view><uni-data-picker class="submit-popup-input" :border="false" :localdata="items" @change="onchange"></uni-data-picker></view> |
|||
</view> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"><view class="submit-popup-title">克重(g)</view></view> |
|||
<view class=""><uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="value" placeholder="请输入内容"></uni-easyinput></view> |
|||
</view> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"><view class="submit-popup-title">规格(mm)</view></view> |
|||
<view class="submit-popup-close"> |
|||
<view class=""> |
|||
<uni-easyinput |
|||
:inputBorder="false" |
|||
class="submit-popup-input submit-popup-specifications" |
|||
type="number" |
|||
v-model="value" |
|||
placeholder="请输入内容" |
|||
></uni-easyinput> |
|||
</view> |
|||
<view class="submit-popup-x">x</view> |
|||
<view class=""> |
|||
<uni-easyinput |
|||
:inputBorder="false" |
|||
class="submit-popup-input submit-popup-specifications" |
|||
type="number" |
|||
v-model="value" |
|||
placeholder="请输入内容" |
|||
></uni-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="submit-popup-close submit-number-box"> |
|||
<view class=""><view class="submit-popup-title">购买数量(张)</view></view> |
|||
<view class="submit-number-line"> |
|||
<uni-number-box v-model="vModelValue"></uni-number-box> |
|||
<text class="submit-number-text">预估重量：1.6346吨</text> |
|||
</view> |
|||
</view> |
|||
<view class=""><button class="submit-btn submit-number-btn" type="primary">确认修改纸品</button></view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<view class=""> |
|||
<uni-popup ref="popupPrice" :mask-click="false"> |
|||
<view class="submit-popup"> |
|||
<view class="submit-line"> |
|||
<view class="submit-popup-close"> |
|||
<view class="submit-popup-title"> |
|||
单价(元/吨) |
|||
<text class="submit-number-text submit-price-subTitle">预估重量：1.6346吨</text> |
|||
</view> |
|||
<view class="" @click="close()"><image class="submit-popup-close-image" src="../../static/imgs/client/close-icon.png" mode=""></image></view> |
|||
</view> |
|||
<view> |
|||
<view class=""> |
|||
<uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="value" placeholder="请输入内容"></uni-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="submit-number-box submit-price"> |
|||
<view class="submit-popup-close"><view class="submit-popup-title">其他费用(元)</view></view> |
|||
<view class=""><uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="value" placeholder="请输入内容"></uni-easyinput></view> |
|||
</view> |
|||
<view class="submit-price-total"> |
|||
<view class="submit-price-text">合计：</view> |
|||
<view class="submit-price-total-text">¥ 0</view> |
|||
</view> |
|||
<view class=""><button class="submit-btn submit-number-btn" type="primary">确认报价</button></view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<view class=""> |
|||
<uni-popup ref="popupTime" :mask-click="false"> |
|||
<view class="submit-check-time"> |
|||
<view class="submit-check-flex "> |
|||
<view class="submit-check-cancel" @click="pickerCancel()"> |
|||
取消 |
|||
</view> |
|||
<view class="submit-check-title"> |
|||
设置时间 |
|||
</view> |
|||
<view class="submit-check-sure" @click="pickerSure()"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="timeValue" @change="bindChange" class="picker-view"> |
|||
<picker-view-column> |
|||
<view class="item submit-check-text" v-for="(item, index) in years" :key="index">{{ item }}</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="item submit-check-text" v-for="(item, index) in months" :key="index">{{ item }}小时</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { back, go2 } from '@/utils/hook.js' |
|||
import qnHeader from '@/components/qn-header/qn-header.vue' |
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
export default { |
|||
components: { |
|||
qnHeader, |
|||
uGap |
|||
}, |
|||
data() { |
|||
const date = new Date() |
|||
const years = ['长期'] |
|||
const year = date.getFullYear() |
|||
const months = [] |
|||
const month = date.getMonth() + 1 |
|||
const day = date.getDate() |
|||
for (let i = 0; i <= 31; i++) { |
|||
years.push(i+'天') |
|||
} |
|||
for (let i = 1; i <= 12; i++) { |
|||
months.push(i) |
|||
} |
|||
return { |
|||
value: '', |
|||
value1: '', |
|||
vModelValue: '', |
|||
indicatorStyle: `height: 50px;`, |
|||
visible: true, |
|||
title: 'picker-view', |
|||
years, |
|||
year, |
|||
months, |
|||
month, |
|||
timeValue: [0, 1], |
|||
pickerValue:[], |
|||
items: [ |
|||
{ |
|||
text: '一年级', |
|||
value: '1-0' |
|||
}, |
|||
{ |
|||
text: '二年级', |
|||
value: '2-0' |
|||
}, |
|||
{ |
|||
text: '三年级', |
|||
value: '3-0' |
|||
}, |
|||
{ |
|||
text: '一年级', |
|||
value: '1-0' |
|||
}, |
|||
{ |
|||
text: '二年级', |
|||
value: '2-0' |
|||
}, |
|||
{ |
|||
text: '三年级', |
|||
value: '3-0' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
back, |
|||
// 商品操作按钮 |
|||
commodityModify(item) { |
|||
console.log(111) |
|||
this.$refs.popup.open('bottom') |
|||
}, |
|||
// 单价操作按钮 |
|||
priceModify() { |
|||
this.$refs.popupPrice.open('bottom') |
|||
}, |
|||
// 事件设置 |
|||
resetTime() { |
|||
this.$refs.popupTime.open('bottom') |
|||
}, |
|||
// 事件选择change事件 |
|||
bindChange(e) { |
|||
console.log(e.detail.value) |
|||
}, |
|||
close() { |
|||
this.$refs.popup.close() |
|||
this.$refs.popupPrice.close() |
|||
}, |
|||
// 纸张选择下拉change事件 |
|||
onchange(e) { |
|||
console.log(e) |
|||
this.pickerValue = e.detail.value |
|||
}, |
|||
// 时间设置取消 |
|||
pickerCancel(){ |
|||
this.$refs.popupTime.close() |
|||
}, |
|||
// 时间设置确认 |
|||
pickerSure(){ |
|||
this.$refs.popupTime.close() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.picker-view { |
|||
width: 750rpx; |
|||
height: 600rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
.item { |
|||
height: 50rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
padding-top: 30rpx; |
|||
} |
|||
.submit-quotation { |
|||
.submit-title { |
|||
width: 100%; |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
} |
|||
.submit-main { |
|||
width: 750rpx; |
|||
height: 260rpx; |
|||
padding: 24rpx 0rpx 0rpx 32rpx; |
|||
line-height: 52rpx; |
|||
background: #ffffff; |
|||
.submit-main-title { |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
} |
|||
.submit-main-subTitle { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.submit-main-subContant { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.submit-deadline { |
|||
width: 750rpx; |
|||
height: 75rpx; |
|||
background: #f4f9fc; |
|||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12); |
|||
display: flex; |
|||
justify-content: center; |
|||
.submit-text { |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
margin-top: 22rpx; |
|||
width: 130rpx; |
|||
} |
|||
.submit-time { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #ee0a24; |
|||
border-radius: 8rpx; |
|||
margin-top: 20rpx; |
|||
text-align: center; |
|||
} |
|||
.submit-time-text { |
|||
font-family: PingFangSC-Semibold; |
|||
font-size: 24rpx; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
.sbumit-colon { |
|||
width: 24rpx; |
|||
height: 32rpx; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 24rpx; |
|||
color: #ee0a24; |
|||
text-align: center; |
|||
line-height: 32rpx; |
|||
font-weight: 400; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
.submit-contant { |
|||
background-color: #ffffff; |
|||
// height: 368rpx; |
|||
border-bottom: 2rpx solid #dddddd; |
|||
padding-bottom: 20rpx; |
|||
.submit-contant-head { |
|||
line-height: 90rpx; |
|||
width: 750rpx; |
|||
height: 90rpx; |
|||
border-bottom: 2rpx dashed #d8d8d8; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.submit-contant-title { |
|||
font-family: PingFangSC-Semibold; |
|||
font-size: 30rpx; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 600; |
|||
padding: 0rpx 0rpx 0rpx 32rpx; |
|||
} |
|||
.submit-contant-body { |
|||
line-height: 68rpx; |
|||
padding-left: 32rpx; |
|||
.submit-contant-body-title { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-body-subtitle { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
float: right; |
|||
margin-right: 32rpx; |
|||
} |
|||
.submit-contant-body-input { |
|||
margin-right: 32rpx; |
|||
} |
|||
.submit-contant-body-inputClass { |
|||
background-color: #f7f8fa; |
|||
} |
|||
} |
|||
} |
|||
.submit-contant-order { |
|||
width: 750rpx; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
background: #ffffff; |
|||
display: flex; |
|||
padding-left: 32rpx; |
|||
padding-right: 32rpx; |
|||
justify-content: space-between; |
|||
.submit-contant-order-title { |
|||
width: 140rpx; |
|||
height: 40rpx; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-order-subtitle { |
|||
width: 101rpx; |
|||
height: 40rpx; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-order-money { |
|||
width: 172rpx; |
|||
height: 42rpx; |
|||
font-family: PingFangSC-Semibold; |
|||
font-size: 40rpx; |
|||
color: #f5222d; |
|||
letter-spacing: 0; |
|||
line-height: 42rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
.submit-contant-time { |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
background: #ffffff; |
|||
line-height: 88rpx; |
|||
display: flex; |
|||
padding-left: 32rpx; |
|||
padding-right: 32rpx; |
|||
justify-content: space-between; |
|||
.submit-contant-time-title { |
|||
width: 230rpx; |
|||
height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.submit-contant-time-subtitle { |
|||
width: 56rpx; |
|||
height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.submit-contant-remark { |
|||
width: 750rpx; |
|||
height: 336rpx; |
|||
background: #ffffff; |
|||
.submit-contant-remark-title { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
padding: 28rpx 0rpx 0rpx 32rpx; |
|||
} |
|||
.submit-contant-remark-input { |
|||
background: #f7f8fa; |
|||
border-radius: 20rpx; |
|||
margin: 10rpx 32rpx 32rpx 32rpx; |
|||
width: 686rpx; |
|||
} |
|||
} |
|||
.submit-btnBg { |
|||
width: 750rpx; |
|||
height: 120rx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12); |
|||
padding: 12rpx 32rpx 12rpx 32rpx; |
|||
} |
|||
.submit-btn { |
|||
width: 686rpx; |
|||
height: 96rpx; |
|||
background: #007aff; |
|||
border-radius: 10px; |
|||
} |
|||
.submit-image { |
|||
width: 24.38rpx; |
|||
height: 20.38rpx; |
|||
margin-right: 32rpx; |
|||
cursor: pointer; |
|||
} |
|||
.submit-image-price { |
|||
width: 24.38rpx; |
|||
height: 20.38rpx; |
|||
margin-left: 14rpx; |
|||
cursor: pointer; |
|||
} |
|||
.submit-popup { |
|||
width: 750rpx; |
|||
height: 960rpx; |
|||
background: #ffffff; |
|||
border-top-right-radius: 2rpx; |
|||
border-top-left-radius: 2rpx; |
|||
padding: 20rpx 32rpx 0rpx 32rpx; |
|||
// line-height: 124rpx; |
|||
.submit-popup-input { |
|||
background-color: #f5f5f5; |
|||
} |
|||
.submit-popup-close { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.submit-popup-close-image { |
|||
width: 24.38rpx; |
|||
height: 20.38rpx; |
|||
cursor: pointer; |
|||
} |
|||
.submit-popup-title { |
|||
font-size: 30rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
letter-spacing: 0; |
|||
text-align: left; |
|||
font-weight: 400; |
|||
} |
|||
.submit-popup-specifications { |
|||
width: 320rpx; |
|||
} |
|||
.submit-popup-x { |
|||
font-size: 32rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
font-weight: 400; |
|||
} |
|||
.submit-line { |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
padding-bottom: 32rpx; |
|||
height: 194rpx; |
|||
line-height: 72rpx; |
|||
} |
|||
.submit-number-box { |
|||
margin-top: 24rpx; |
|||
} |
|||
.submit-number-text { |
|||
font-size: 24rpx; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
font-weight: 400; |
|||
} |
|||
.submit-number-line { |
|||
line-height: 40rpx; |
|||
} |
|||
.submit-number-btn { |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
} |
|||
.submit-price { |
|||
line-height: 72rpx; |
|||
} |
|||
.submit-price-total { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 20rpx; |
|||
} |
|||
.submit-price-total-text { |
|||
font-size: 40rpx; |
|||
color: #f5222d; |
|||
letter-spacing: 0; |
|||
line-height: 42rpx; |
|||
font-weight: 600; |
|||
} |
|||
.submit-price-text { |
|||
font-size: 28rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
text-align: right; |
|||
font-weight: 400; |
|||
line-height: 40rpx; |
|||
} |
|||
.submit-price-subTitle { |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.submit-check-time{ |
|||
background-color: #FFFFFF; |
|||
padding: 28rpx 32rpx 0px 28rpx; |
|||
.submit-check-flex { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.submit-check-title{ |
|||
font-size: 32rpx; |
|||
color: #323233; |
|||
text-align: center; |
|||
line-height: 44rpx; |
|||
font-weight: 500; |
|||
} |
|||
.submit-check-cancel{ |
|||
font-size: 28rpx; |
|||
color: #969799; |
|||
line-height: 40rpx; |
|||
font-weight: 400; |
|||
cursor: pointer; |
|||
} |
|||
.submit-check-sure{ |
|||
font-size: 28rpx; |
|||
color: #007AFF; |
|||
line-height: 40rpx; |
|||
font-weight: 400; |
|||
cursor: pointer; |
|||
} |
|||
.submit-check-text{ |
|||
font-size: 36rpx; |
|||
color: #323233; |
|||
line-height: 48rpx; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 543 B |
| Before | After |
|---|---|
|
|
| Width: 560 | Height: 320 | Size: 41 KiB |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 184 | Size: 138 KiB |
| Before | After |
|---|---|
|
|
| Width: 24 | Height: 24 | Size: 382 B |
| Before | After |
|---|---|
|
|
| Width: 150 | Height: 50 | Size: 2.1 KiB |
| Before | After |
|---|---|
|
|
| Width: 150 | Height: 50 | Size: 2.7 KiB |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 180 | Size: 33 KiB |
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 794 B |
@ -0,0 +1,25 @@ |
|||
## 1.2.1（2021-11-22） |
|||
- 修复 vue3中某些scss变量无法找到的问题 |
|||
## 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-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box) |
|||
## 1.1.2（2021-11-09） |
|||
- 新增 提供组件设计资源，组件样式调整 |
|||
## 1.1.1（2021-07-30） |
|||
- 优化 vue3下事件警告的问题 |
|||
## 1.1.0（2021-07-13） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.7（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.0.6（2021-04-20） |
|||
- 修复 uni-number-box 浮点数运算不精确的 bug |
|||
- 修复 uni-number-box change 事件触发不正确的 bug |
|||
- 新增 uni-number-box v-model 双向绑定 |
|||
## 1.0.5（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
|
|||
## 1.0.7（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
- 新增 支持 v-model |
|||
- 新增 支持 focus、blur 事件 |
|||
- 新增 支持 PC 端 |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view class="uni-numbox"> |
|||
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}"> |
|||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text> |
|||
</view> |
|||
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" |
|||
v-model="inputValue" :style="{background, color}" /> |
|||
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}"> |
|||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
/** |
|||
* NumberBox 数字输入框 |
|||
* @description 带加减按钮的数字输入框 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=31 |
|||
* @property {Number} value 输入框当前值 |
|||
* @property {Number} min 最小值 |
|||
* @property {Number} max 最大值 |
|||
* @property {Number} step 每次点击改变的间隔大小 |
|||
* @property {String} background 背景色 |
|||
* @property {String} color 字体颜色（前景色） |
|||
* @property {Boolean} disabled = [true|false] 是否为禁用状态 |
|||
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value |
|||
* @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象 |
|||
* @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象 |
|||
*/ |
|||
|
|||
export default { |
|||
name: "UniNumberBox", |
|||
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], |
|||
props: { |
|||
value: { |
|||
type: [Number, String], |
|||
default: 1 |
|||
}, |
|||
modelValue: { |
|||
type: [Number, String], |
|||
default: 1 |
|||
}, |
|||
min: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
max: { |
|||
type: Number, |
|||
default: 100 |
|||
}, |
|||
step: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
background: { |
|||
type: String, |
|||
default: '#f5f5f5' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333' |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
inputValue: 0 |
|||
}; |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
this.inputValue = +val; |
|||
}, |
|||
modelValue(val) { |
|||
this.inputValue = +val; |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.value === 1) { |
|||
this.inputValue = +this.modelValue; |
|||
} |
|||
if (this.modelValue === 1) { |
|||
this.inputValue = +this.value; |
|||
} |
|||
}, |
|||
methods: { |
|||
_calcValue(type) { |
|||
if (this.disabled) { |
|||
return; |
|||
} |
|||
const scale = this._getDecimalScale(); |
|||
let value = this.inputValue * scale; |
|||
let step = this.step * scale; |
|||
if (type === "minus") { |
|||
value -= step; |
|||
if (value < (this.min * scale)) { |
|||
return; |
|||
} |
|||
if (value > (this.max * scale)) { |
|||
value = this.max * scale |
|||
} |
|||
} |
|||
|
|||
if (type === "plus") { |
|||
value += step; |
|||
if (value > (this.max * scale)) { |
|||
return; |
|||
} |
|||
if (value < (this.min * scale)) { |
|||
value = this.min * scale |
|||
} |
|||
} |
|||
|
|||
this.inputValue = (value / scale).toFixed(String(scale).length - 1); |
|||
this.$emit("change", +this.inputValue); |
|||
// TODO vue2 兼容 |
|||
this.$emit("input", +this.inputValue); |
|||
// TODO vue3 兼容 |
|||
this.$emit("update:modelValue", +this.inputValue); |
|||
}, |
|||
_getDecimalScale() { |
|||
|
|||
let scale = 1; |
|||
// 浮点型 |
|||
if (~~this.step !== this.step) { |
|||
scale = Math.pow(10, String(this.step).split(".")[1].length); |
|||
} |
|||
return scale; |
|||
}, |
|||
_onBlur(event) { |
|||
this.$emit('blur', event) |
|||
let value = event.detail.value; |
|||
if (!value) { |
|||
// this.inputValue = 0; |
|||
return; |
|||
} |
|||
value = +value; |
|||
if (value > this.max) { |
|||
value = this.max; |
|||
} else if (value < this.min) { |
|||
value = this.min; |
|||
} |
|||
const scale = this._getDecimalScale(); |
|||
this.inputValue = value.toFixed(String(scale).length - 1); |
|||
this.$emit("change", +this.inputValue); |
|||
this.$emit("input", +this.inputValue); |
|||
}, |
|||
_onFocus(event) { |
|||
this.$emit('focus', event) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
$box-height: 26px; |
|||
$bg: #f5f5f5; |
|||
$br: 2px; |
|||
$color: #333; |
|||
|
|||
.uni-numbox { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-numbox-btns { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 8px; |
|||
background-color: $bg; |
|||
/* #ifdef H5 */ |
|||
cursor: pointer; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-numbox__value { |
|||
margin: 0 2px; |
|||
background-color: $bg; |
|||
width: 40px; |
|||
height: $box-height; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border-left-width: 0; |
|||
border-right-width: 0; |
|||
color: $color; |
|||
} |
|||
|
|||
.uni-numbox__minus { |
|||
border-top-left-radius: $br; |
|||
border-bottom-left-radius: $br; |
|||
} |
|||
|
|||
.uni-numbox__plus { |
|||
border-top-right-radius: $br; |
|||
border-bottom-right-radius: $br; |
|||
} |
|||
|
|||
.uni-numbox--text { |
|||
// fix nvue |
|||
line-height: 20px; |
|||
|
|||
font-size: 20px; |
|||
font-weight: 300; |
|||
color: $color; |
|||
} |
|||
|
|||
.uni-numbox .uni-numbox--disabled { |
|||
color: #c0c0c0 !important; |
|||
/* #ifdef H5 */ |
|||
cursor: not-allowed; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
{ |
|||
"id": "uni-number-box", |
|||
"displayName": "uni-number-box 数字输入框", |
|||
"version": "1.2.1", |
|||
"description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。", |
|||
"keywords": [ |
|||
"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": ["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 @@ |
|||
|
|||
|
|||
## NumberBox 数字输入框 |
|||
> **组件名：uni-number-box** |
|||
> 代码块： `uNumberBox` |
|||
|
|||
|
|||
带加减按钮的数字输入框。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save