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

<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>