zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优惠券

Browse Source
This commit is contained in:
@fawn-nine
2024-10-17 16:58:54 +08:00
parent 3cb0b4c990
commit d46f419846
6 changed files with 501 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
components/orderCoupon.vue Normal file
View File

@@ -0,0 +1,255 @@
<template>
<view>
<!-- 优惠券弹出 -->
<u-popup :show="youhuiShow" :round="10" @close="closePup">
<view class="tanchu">
<view class="dp_title">请选择优惠券</view>
<view v-if="list.length > 0">
<view style="max-height: 40vh;overflow-y: scroll;" :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
v-for="(item,index) in list" :key="index" @click="choseYouhui(index)">
<view style="width: 25%;color:#fd6004;text-align: center;">
<text>￥</text>
<b style="font-size: 45rpx;">{{item.couponEntity.couponAmount}}</b>
<text
style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">满{{item.couponEntity.useLevel}}元可用</text>
</view>
<view style="width: 68%;padding-left: 5%;">
<view>
<text style="display: inline-block; margin-right: 6rpx;">{{item.couponEntity.couponName}}</text>
<text class="border_radius_10" style="font-size: 24rpx; background-color: #fad4bd; color: #666;">{{item.couponEntity.couponRange | couponType}}</text>
</view>
<text
style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间：{{item.effectType == 0 ? '永久有效' : item.endTime}}</text>
<text
style="display: block;font-size: 20rpx;color: #999;margin-top: 4rpx;">说明：{{item.couponEntity.remark}}</text>
</view>
<view style="width: 7%;">
<view class="" style="background-color: #d9d9d9; border-radius: 10rpx; 0 0 10rpx; text-align: center;" v-if="sumMeony < item.couponEntity.useLevel">
<text
style="color: #999; "
>不可用</text>
</view>
<template v-else>
<text
style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
v-if="youhuiIndex !== index"></text>
<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
</u-icon>
</template>
</view>
<br clear="both">
</view>
<view class="btnBox flex_box flex_between">
<view class="" style="width: 48%;">
<button type="default" @click="confirmCoupon('none')">不使用优惠券</button>
</view>
<view class="" style="width: 48%;">
<button type="primary" @click="confirmCoupon()">选好了</button>
</view>
</view>
<!-- <view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view> -->
</view>
<view class="" v-else>
<u-divider text="暂无可用优惠券哦"></u-divider>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
name: "orderCoupon",
props: ['list', 'curCouponId','sumMeony'],
data() {
return {
youhuiShow: true,
youhuiIndex: undefined
};
},
mounted() {
console.log('进入了', this.curCouponId, this.sumMeony);
if (this.curCouponId) {
this.youhuiIndex = this.list.findIndex(item => item.couponEntity.id === this.curCouponId);
console.log('查找后的结果', this.youhuiIndex);
}
},
filters:{
couponType(type){
// 0无限制 1课程卷 2课程品类卷
var str = ''
switch (type){
case 0:
str = '全场通用'
break;
case 1:
str = '指定课程可用'
break;
case 2:
str = '指定课程品类可用'
break;
}
return str
}
},
computed: {
},
methods: {
closePup() {
this.youhuiIndex = undefined
this.$emit('close')
},
// 确定选中优惠券
confirmCoupon(str) {
console.log(str, '6666');
if (str && str == 'none') {
// 清空优惠券操作
this.$emit('confirmCoupon')
setTimeout(() => {
this.closePup()
}, 300)
return
}
if (this.youhuiIndex == 0 || this.youhuiIndex) {
this.$emit('confirmCoupon', this.list[this.youhuiIndex])
setTimeout(() => {
this.closePup()
}, 300)
} else {
uni.showToast({
title: '请选择您要使用的优惠券',
icon: "none"
})
}
},
// 选择优惠券
choseYouhui(e) {
if(this.list[e].couponEntity.useLevel > this.sumMeony ){
return
}
console.log('选中优惠券e', e);
this.youhuiIndex = e
},
}
}
</script>
<style lang="scss" scoped>
.btnBox {
margin-top: 20rpx;
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
// max-height: 60vh;
// overflow-y: scroll;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_add {
position: absolute;
top: 40rpx;
right: 30rpx;
font-size: 22rpx;
background-color: #fd6004;
color: #fff;
border-radius: 10rpx;
padding: 5rpx 10rpx;
.u-icon {
display: inline-block;
margin-right: 5rpx;
}
}
.addressItem {
border: 2px dashed #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
.addrContent {
margin-left: 40rpx;
flex: 1;
.addrContentTop {
display: flex;
align-items: flex-end;
margin: 0 0 15rpx 0;
position: relative;
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
.chooseCheck {
position: absolute;
top: 3rpx;
right: 6rpx;
}
}
.addrContentBottom {
font-size: 32rpx;
}
}
}
.addressItem.addItem_style {
border-color: #fd6004;
}
.youhuiItem {
border: 1px solid #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
font-size: 30rpx;
}
.youhuiItem>view {
float: left;
}
.youhuiItem.youItem_style {
border-color: #fd6004;
}
}
</style>