Commit 7a7e3a5b authored by 潘永坪's avatar 潘永坪

单产品下单,优惠券开发

parent 470be20f
...@@ -68,7 +68,6 @@ export default { ...@@ -68,7 +68,6 @@ export default {
<style scoped="scoped"> <style scoped="scoped">
.son-wrap{ .son-wrap{
position: relative;
height:80vh; height:80vh;
display: flex; display: flex;
flex-direction:column; flex-direction:column;
......
<template> <template>
<!----------------适用于订单选择券的时候展示券列表--------------------------> <!-- -----------------------适用于下单页面选择券的时候展示券列表-------------------------- -->
<u-popup :show="show" :round="20" closeable @close="show=false"> <u-popup :show="showPop" :round="20" closeable @close="showPop=false">
<view class="title"> <view class="son-wrap">
<view class="titleContent" v-for="(item,index) of navTitle" :key="index" :class="{on:active==index}" @click="navClick(index)"> <view class="head">
<view style="position: relative;top:15rpx;">{{item}}</view> <view class="headlist" v-for="(item,index) of navTitle" :key="index" :class="{on:active==index}" @click="navClick(index)">
<view v-show="active==index"> <text>
<text></text> {{item}}
</view> </text>
</view> </view>
</view> </view>
<!----------------------------------------------------可用------------------------------------------> <!------------------------------------可用-------------------------------------->
<view v-show="active==0"> <view class="middle" v-if="active==0">
<view class="middle"> <checkbox-group @change="checkboxChange" v-if="masterSlaveCouponList&&masterSlaveCouponList.length>0">
<checkbox-group @change="checkboxChange" v-if="couponList.masterSlaveCouponList&&couponList.masterSlaveCouponList.length>0"> <view v-for="(item,index) of masterSlaveCouponList" :key="index" class="list-box">
<view v-for="(item,index) of couponList.masterSlaveCouponList" :key="index" class="listBox"> <label>
<label class="listLabel">
<view> <view>
{{item.couponName}} {{item.couponName}}
<checkbox :value="item.couponId" :checked="item.couponId==chooseCoupon.couponId" /> <checkbox :value="JSON.stringify(item)" :checked="item.couponId==chooseCoupon.couponId" class="blue" />
</view> </view>
<view> <view>
{{item.couponRule}} {{item.couponRule}}
...@@ -33,17 +31,14 @@ ...@@ -33,17 +31,14 @@
</label> </label>
</view> </view>
</checkbox-group> </checkbox-group>
</view> <view class="empty" v-else>
<view class="empty" v-if="!couponList.masterSlaveCouponList||couponList.masterSlaveCouponList.length==0">
空空如也... 空空如也...
</view> </view>
</view> </view>
<!-- -------------------------------不可用-------------------------------- -->
<!--------------------------------------不可用------------------------------------------------------------> <view v-if="active==1" class="middle">
<view v-show="active==1"> <view v-if="unusableCouponList&&unusableCouponList.length>0">
<view class="middle" v-if="couponList.unusableCouponList&&couponList.unusableCouponList.length>0"> <view v-for="(item,index) of unusableCouponList" :key="index" class="list-box">
<view v-for="(item,index) of couponList.unusableCouponList" :key="index" class="listBox">
<view> <view>
{{item.couponName}} {{item.couponName}}
</view> </view>
...@@ -59,10 +54,14 @@ ...@@ -59,10 +54,14 @@
</view> </view>
</view> </view>
</view> </view>
<view class="empty" v-if="!couponList.unusableCouponList||couponList.unusableCouponList.length==0"> <view class="empty" v-else>
空空如也... 空空如也...
</view> </view>
</view> </view>
</view>
<view class="bottom-sure" @click="showPop=false">
确定
</view>
</u-popup> </u-popup>
</template> </template>
...@@ -72,16 +71,25 @@ ...@@ -72,16 +71,25 @@
export default{ export default{
props:['couponData','chooseCouponObj'], props:['couponData','chooseCouponObj'],
watch: { watch: {
couponData:{// couponData:{//劵列表
handler(newValue, oldValue){ handler(newValue, oldValue){
if(newValue){ if(newValue){
this.couponList=this.couponData //可用优惠券去重
this.masterSlaveCouponList=[]
if(newValue.masterSlaveCouponList){
newValue.masterSlaveCouponList.forEach(item=>{
if(!this.masterSlaveCouponList.find(item2=>item2.couponId==item.couponId)){
this.masterSlaveCouponList.push(item)
}
})
}
this.unusableCouponList=newValue.unusableCouponList
} }
}, },
deep:true, deep:true,
immediate:true immediate:true
}, },
chooseCouponObj:{// chooseCouponObj:{//选中的券
handler(newValue, oldValue){ handler(newValue, oldValue){
if(newValue){ if(newValue){
this.chooseCoupon=this.chooseCouponObj this.chooseCoupon=this.chooseCouponObj
...@@ -94,36 +102,26 @@ export default{ ...@@ -94,36 +102,26 @@ export default{
data(){ data(){
return{ return{
active:0,//导航栏下标 active:0,//导航栏下标
show:false,//控制弹窗显示隐藏 showPop:false,//控制弹窗显示隐藏
current:0,//控制选项卡默认显示第几个 masterSlaveCouponList:[],//可用优惠券列表
couponList:'',//券列表 unusableCouponList:[],//不可用优惠券列表
chooseCoupon:'',//选中的劵 chooseCoupon:'',//选中的劵
navTitle:['可用','不可用'],//导航标题 navTitle:['可用','不可用'],//导航标题
} }
}, },
methods:{ methods:{
navClick(index){//------------------------------------------导航栏点击 //---导航栏点击
navClick(index){
this.active=index this.active=index
}, },
showCoupon(){//----------------------------------------展示弹窗
this.show=true
},
//---多选框值变化 //---多选框值变化
checkboxChange(evt){ checkboxChange(e){
if(evt.detail.value.length==2){ let value=e.detail.value
//删除第一个 if(value.length>0){
evt.detail.value.splice(0,1) let obj=JSON.parse(value[value.length-1])
//获取选中券,传值给父组件 this.$emit('couponChoose',obj)
this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{ }
return item.couponId==evt.detail.value[0] if(value.length==0){
})
this.$emit('couponChoose',this.chooseCoupon)
}else if(evt.detail.value.length==1){
this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{
return item.couponId==evt.detail.value[0]
})
this.$emit('couponChoose',this.chooseCoupon)
}else if(evt.detail.value.length==0){
this.$emit('couponChoose','') this.$emit('couponChoose','')
} }
} }
...@@ -133,19 +131,80 @@ export default{ ...@@ -133,19 +131,80 @@ export default{
</script> </script>
<style scoped="scoped" lang="scss"> <style scoped="scoped" lang="scss">
.title{display: flex;height: 80rpx;} .son-wrap{
.titleContent{flex:1;text-align: center;font-size:30rpx;} height:80vh;
.titleContent.on{color: $theme;font-weight: bold;} display: flex;
.titleContent view text{width: 40rpx;height: 6rpx;background:$theme;border-radius:6rpx;display:inline-block;position: relative;top:-10rpx;} flex-direction:column;
.middle{padding:24rpx;background:#f5f5f5;} }
.listBox{background: #FFFFFF;padding:24rpx;border-radius:10rpx;} .head{
.middle .listBox:not(:first-child){margin-top:20rpx;} display: flex;
.middle view view:not(:first-child){margin-top:20rpx;} }
.middle view view{display: flex;justify-content: space-between;} .headlist{
.middle view view:first-child{font-weight: bold;} width: 50%;
.middle view view:nth-child(2){font-size:24rpx;} height: 90rpx;
.middle view view:last-child{color: #666666;font-size:24rpx;} line-height: 90rpx;
.middle view text{color:#f9690e;font-size:30rpx;font-weight: bolder;} text-align: center;
.middle view text text{font-size:24rpx;font-weight: 400;} font-size:30rpx;
.empty{padding:100rpx 0;text-align: center;background: #f5f5f5;} }
.headlist.on text{
border-bottom: 6rpx solid $theme;
color: $theme;
font-weight: bold;
}
.middle{
padding:24rpx 24rpx 100rpx 24rpx;
background:#f5f5f5;
flex: 1;
overflow-y: scroll;
}
.list-box{
background: #FFFFFF;
padding:24rpx;
border-radius:10rpx;
}
.middle .list-box:not(:first-child){
margin-top:20rpx;
}
.list-box view:not(:first-child){
margin-top:20rpx;
}
.list-box view{
display: flex;
justify-content: space-between;
}
.list-box view:first-child{
font-weight: bold;
}
.list-box view:last-child{
color: #999999;
font-size:24rpx;
}
.list-box text{
color:#f9690e;
font-size:32rpx;
font-weight: bold;
}
.list-box text text{
font-size:24rpx;
font-weight: 400;
}
.empty{
padding:160rpx 0;
text-align: center;
color: $red;
}
.bottom-sure{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
background:$theme;
font-size:32rpx;
font-weight: bold;
color: #ffffff;
}
</style> </style>
...@@ -364,7 +364,7 @@ export default { ...@@ -364,7 +364,7 @@ export default {
}, },
showCoupon() { showCoupon() {
//---展示券列表 //---展示券列表
this.$refs.orderCoupon.showCoupon() this.$refs.orderCoupon.showPop=true
}, },
//---初始化获取商家名称,大商家 //---初始化获取商家名称,大商家
initMerchant() { initMerchant() {
......
...@@ -257,7 +257,7 @@ export default { ...@@ -257,7 +257,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #3688ff; background:$theme;
font-size:32rpx; font-size:32rpx;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
......
...@@ -83,7 +83,6 @@ export default { ...@@ -83,7 +83,6 @@ export default {
display: flex; display: flex;
flex-direction:column; flex-direction:column;
} }
.time-title{ .time-title{
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
...@@ -91,44 +90,32 @@ export default { ...@@ -91,44 +90,32 @@ export default {
padding: 30rpx 24rpx; padding: 30rpx 24rpx;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
} }
.time-content { .time-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.time-list { .time-list {
width: 30%; width:30%;
height: 80rpx; height: 90rpx;
text-align: center;
line-height: 30rpx; line-height: 30rpx;
color: #666666; text-align: center;
background: rgb(242, 242, 242); margin-right:5%;
border-radius: 16rpx; border-radius: 15rpx;
margin-right: 5%; display: inline-block;
margin-top: 30rpx; background:#f2f2f2;
} position: relative;
padding-bottom: 8rpx;
.time-list view:first-child {
margin-top: 10rpx;
} }
.time-list view { .time-list view {
width: 100%; margin-top: 10rpx;
text-align: center;
} }
.time-content view:nth-child(3n) { .time-content view:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
.time-list.on { .time-list.on {
background: none;
color: $theme;
border: 1px solid $theme; border: 1px solid $theme;
box-sizing: border-box; background: #DAE6F6;
} }
.time-sure{ .time-sure{
margin-top:60rpx; margin-top:60rpx;
text-align: center; text-align: center;
......
This diff is collapsed.
...@@ -34,6 +34,6 @@ $red:#FC6703; ...@@ -34,6 +34,6 @@ $red:#FC6703;
$grey:#999; $grey:#999;
// 分割线颜色 // 分割线颜色
$divider:#DBDBDB; $divider:#f3f3f3;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment