You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
5.4 KiB
Vue
276 lines
5.4 KiB
Vue
<template>
|
|
<view class="wholeSales">
|
|
<view class="top">
|
|
<text>批发规格</text>
|
|
<view>
|
|
<u-picker
|
|
ref='uPicker'
|
|
:show="show"
|
|
:columns="columns"
|
|
@cancel="show = false"
|
|
@confirm="confirm"
|
|
>
|
|
</u-picker>
|
|
<view @click="show = true" class="openBtn">
|
|
{{columns[0][index]}}
|
|
<u-icon name="arrow-down-fill"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="body">
|
|
<view class="item" v-for="item in clist">
|
|
<view class="type-price">
|
|
<text class="ctype">{{item.type}}</text>
|
|
<text class="price">{{item.price}}</text>
|
|
</view>
|
|
<view class="bottom">
|
|
<text class="bottom-text">批发重量（斤）</text>
|
|
<u-number-box v-model="item.value" @change='valChange' button-size="30" ></u-number-box>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="wholeSales-bottom">
|
|
<view class="tip">
|
|
当前未满足 50 斤最低起批量，无法下单
|
|
</view>
|
|
<view class="inputBtnCon">
|
|
<view class="left">
|
|
<view class="left-top">
|
|
共<text class="allValue">{{allValue}}</text>斤
|
|
</view>
|
|
<view class="left-bottom">共计金额</view>
|
|
</view>
|
|
<view class="allPrice">
|
|
<text >{{allPrice}}</text>
|
|
</view>
|
|
<button class="inputBtn">批发下单</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import index from '../../../uni_modules/uview-ui'
|
|
export default {
|
|
data(){
|
|
return{
|
|
clist:[{
|
|
type:'6.0公',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'5.5公',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'5.0公',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'6.0母',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'6.0公',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'6.0公',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'6.0公',
|
|
price:'50.60',
|
|
value:0
|
|
},
|
|
{
|
|
type:'6.0公',
|
|
price:'50.60',
|
|
value:0
|
|
}],
|
|
allValue:28888,
|
|
allPrice:28888.888,
|
|
show:false,
|
|
columns:[
|
|
["50规格","49规格","38规格"],
|
|
],
|
|
index:0
|
|
|
|
}
|
|
},
|
|
methods:{
|
|
valChange(e){
|
|
// console.log('当前值为：' + e.value)
|
|
},
|
|
confirm(e){
|
|
// console.log('confirm', e)
|
|
this.show = false
|
|
this.index=e.indexs[0]
|
|
// console.log('confirm.indexs', e.indexs[0])
|
|
// console.log('数组的当前值', this.columns[0][index])
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wholeSales{
|
|
min-height: 100vh;
|
|
width: 750rpx;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
.top{
|
|
height: 92rpx;
|
|
display: flex;
|
|
>text{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #AFAFAF;
|
|
margin: 32rpx 0 0 32rpx;
|
|
}
|
|
.openBtn{
|
|
width: 220rpx;
|
|
height: 56rpx;
|
|
background: #EDEEEF;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8rpx 20rpx;
|
|
margin: 24rpx 0 12rpx 18rpx;
|
|
box-sizing: border-box;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.body{
|
|
padding-left: 38rpx;
|
|
.item{
|
|
margin: 0 auto;
|
|
width: 676rpx;
|
|
height: 140rpx;
|
|
border-bottom: 2rpx solid rgba(0,0,0,0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-top: 24rpx;
|
|
padding-bottom: 28rpx;
|
|
box-sizing: border-box;
|
|
.type-price{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.ctype{
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
width: 90rpx;
|
|
text-align-last: justify;
|
|
}
|
|
.price{
|
|
font-family: OPPOSans, OPPOSans;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FF0000;
|
|
&::before{
|
|
content: '¥';
|
|
font-size: 24rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.bottom{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.bottom-text{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #AFAFAF;
|
|
margin-top: 34rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.wholeSales-bottom{
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
}
|
|
.tip{
|
|
width: 750rpx;
|
|
height: 72rpx;
|
|
background: #FFF7E8;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
border: 0rpx solid #FFF7E8;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FF7D00;
|
|
justify-content: center;
|
|
padding: 16rpx 0 16rpx 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.inputBtnCon{
|
|
width: 750rpx;
|
|
height: 184rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 36rpx;
|
|
box-sizing: border-box;
|
|
.left{
|
|
height: 74rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: rgba(0,0,0,0.3);
|
|
margin-top: 42rpx;
|
|
text-align-last:justify;
|
|
.left-top{
|
|
.allValue{
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
.allPrice{
|
|
margin-top: 46rpx;
|
|
height: 68rpx;
|
|
font-weight: 500;
|
|
font-size: 48rpx;
|
|
color: #FF2D46;
|
|
line-height: 67rpx;
|
|
text-align: right;
|
|
&::before{
|
|
content: '¥';
|
|
font-size: 24rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
.inputBtn{
|
|
width: 280rpx;
|
|
height: 92rpx;
|
|
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
|
|
border-radius: 24rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 24rpx;
|
|
margin-left: 4rpx;
|
|
margin-right: 36rpx;
|
|
padding-top: 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style> |