效果图
uview
<template>
<view class="addbox">
<view class="order bgf u-m-b-200">
<view class="common_title u-p-b-30">
<text></text> 商品清单
</view>
<view class="shangpinbox u-m-b-20" v-for="(item,i) in list" :key="i">
<view class="flex_rowreverse" @click.stop="closeFun(i)">
<image src="@/static/images/close.png" mode="" class="u-w-32 u-h-32"></image>
</view>
<view class="u-p-x-30 u-p-t-20 u-p-b-20 flex_align_center" @click="showFun(i)">
<view class="u-w-150 u-color-666">品牌：</view>
<view class="xuanzebox p u-border-b flex_spacebetween u-w-480 " >
<view class="u-w-400 u-color-input" v-if="item.v1">{{ item.v1 }}</view>
<view class="u-w-400 u-color-placeholder" v-else>请选择品牌</view>
<image src="@/static/images/down2.png" mode="" class="u-w-20 u-h-10"></image>
</view>
</view>
<view class="u-p-x-30 u-p-b-20 flex_align_center" @click="pinleiShowFun(i)">
<view class="u-w-150 u-color-666">品类：</view>
<view class="xuanzebox p u-border-b flex_spacebetween u-w-480" >
<view class="u-w-400 u-color-input" v-if="item.v2">{{ item.v2 }}</view>
<view class="u-w-400 u-color-placeholder" v-else>请选择品类</view>
<image src="@/static/images/down2.png" mode="" class="u-w-20 u-h-10"></image>
</view>
</view>
<view class="u-p-x-30 u-p-b-20 flex_align_center" @click="shangpinShowFun(i)">
<view class="u-w-150 u-color-666">商品名称：</view>
<view class="xuanzebox p u-border-b flex_spacebetween u-w-480 " >
<view class="u-w-400 u-color-input" v-if="item.v3">{{ item.v3 }}</view>
<view class="u-w-400 u-color-placeholder" v-else>请选择商品</view>
<image src="@/static/images/down2.png" mode="" class="u-w-20 u-h-10"></image>
</view>
</view>
<view class="u-p-x-30 u-p-b-20 flex_align_center">
<view class="u-w-150 u-color-666">售价：</view>
<view class="xuanzebox flex_spacebetween u-border-b u-w-480" >
<text>￥</text>
<u--input
placeholder="请输入商品价格"
border="none"
v-model="item.val"
>
</u--input>
</view>
</view>
</view>
<view class="flex_rowreverse" @click="addFun">
<view class="zengjia">+增加</view>
</view>
</view>
<view class="u-bottombox flex_spacebetween">
<view>合计总价： <text class="u-color-FF8 weight u-f-s-30">￥90.00</text> </view>
<view class="btn_common btn">选好了，下一步</view>
</view>
<!-- 品牌 -->
<u-picker
:show="show"
:columns="columns"
keyName="label"
closeOnClickOverlay
@confirm='confirm'
@cancel='show = false'
@close='show = false'>
</u-picker>
<!-- 品类 -->
<u-picker
:show="pinleiShow"
:columns="pinleiColumns"
keyName="label"
closeOnClickOverlay
@confirm='pinleiConfirm'
@cancel='pinleiShow = false'
@close='pinleiShow = false'>
</u-picker>
<!-- 商品名称 -->
<u-picker
:show="shangpinShow"
:columns="shangpinColumns"
keyName="label"
closeOnClickOverlay
@confirm='shangpinConfirm'
@cancel='shangpinShow = false'
@close='shangpinShow = false'>
</u-picker>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
value:'',
date: [],
info:{
siteAddress: '',
},
list:[
{v1:'',v2:'',v3:'',val:''},
{v1:'',v2:'',v3:'',val:''},
],
index:'',
show: false,
columns: [[
{label: '格力',id:0},
{label: '美的',id:1},
]],
pinleiShow: false,
pinleiColumns: [[
{label: '格力品类',id:0},
{label: '美的品类',id:1},
]],
shangpinShow: false,
shangpinColumns: [[
{label: '格力商品',id:0},
{label: '美的商品',id:1},
]],
}
},
onLoad(option) {},
methods:{
showFun(i){
this.show = true;
this.index = i;
},
pinleiShowFun(i){
this.pinleiShow = true;
this.index = i;
},
shangpinShowFun(i){
this.shangpinShow = true;
this.index = i;
},
confirm(e) {
this.list[this.index].v1 = e.value[0].label;
this.show = false;
},
pinleiConfirm(e) {
this.list[this.index].v2 = e.value[0].label;
this.pinleiShow = false;
},
shangpinConfirm(e) {
this.list[this.index].v3 = e.value[0].label;
this.shangpinShow = false;
},
addFun(){
this.list.push({
v1:'',
v2:'',
v3:'',
val:''
});
},
closeFun(i){
this.list.splice(i,1);
}
},
}
</script>
<style lang='scss'>
page {
background: #AAAAAA;
}
</style>
<style lang='scss' scoped>
.btn_common{
color: #fff;
text-align: center;
width: 630rpx;
height: 88rpx;
line-height: 88rpx;
background: #508FF9;
border-radius: 44rpx;
}
.addbox{
.order{
margin-bottom: 16rpx;
padding: 30rpx;
box-sizing: border-box;
.pickerbox{
box-sizing: border-box;
}
.xuanzebox{
box-sizing: border-box;
font-size: 30rpx;
padding: 12rpx 18rpx;
}
.xuanzebox.p{
padding-left:48rpx !important;
}
}
.shangpinbox{
width: 690rpx;
height: 430rpx;
background: #F6F6F6;
border-radius: 10rpx;
}
.zengjia{
width: 130rpx;
height: 60rpx;
background: #508FF9;
border-radius: 10rpx;
font-size: 30rpx;
color: #FFFFFF;
line-height: 60rpx;
text-align: center;
}
.u-bottombox{
box-sizing: border-box;
position: fixed;
bottom:0rpx;
z-index:1009;
width: 750rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(212,212,212,0.3);
padding:0 30rpx;
.btn{
width: 250rpx;
height: 76rpx;
line-height: 76rpx;
background: #508FF9;
border-radius: 38rpx;
font-size: 30rpx;
color: #FFFFFF;
}
}
}
.bgf{
background-color: #fff;
}
.u-m-b-200{
margin-bottom:200rpx;
}
.u-m-b-20{
margin-bottom:20rpx;
}
.u-p-b-30{
padding-bottom:30rpx;
}
.flex_rowreverse{
display: flex;
flex-direction: row-reverse;
}
.flex_align_center{
display: flex;
align-items: center;
}
.flex_spacebetween{
display:flex;
align-items:center;
justify-content:space-between;
}
.u-w-480{
width:480rpx;
}
.u-w-400{
width:400rpx;
}
.u-w-150{
width:150rpx;
}
.u-w-20{
width:20rpx;
}
.u-w-32{
width:32rpx;
}
.u-h-32{
height:32rpx;
}
.u-h-10{
height:10rpx;
}
.u-p-x-30{
padding-left:30rpx;
padding-right:30rpx;
}
.u-p-t-20{
padding-top:20rpx;
}
.u-color-666{
color: #666;
}
.u-color-placeholder{
color:#c0c4cc;
}
.u-color-input{
color: #303133;
}
.u-color-FF8{
color: #FF8A00;
}
.u-border-b{
border-bottom: 2rpx solid #E5E5E5;
}
.weight{
font-weight: 500;
}
.common_title{
font-size: 30rpx;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
}
.common_title text{
width: 5rpx;
height: 30rpx;
background: #508FF9;
border-radius: 3rpx;
margin-right: 20rpx;
color: #508FF9;
}
</style>```
3221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
