You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
424 lines
9.5 KiB
424 lines
9.5 KiB
<template>
|
|
<view class="bg">
|
|
<!-- 列表 -->
|
|
<view class="coupon-list" v-if="list.length>0">
|
|
<view class="coupon-item" v-for="(item, index) in list" :key="index">
|
|
<!-- 分割线上部分 -->
|
|
<view class="item-top">
|
|
<view class="top-left">
|
|
<view class="price" v-if="item.type == 1">
|
|
<span>{{item.discounts/100}}</span>元
|
|
</view>
|
|
<view class="price" v-else>
|
|
<span>{{getPecenet(item.percent)}}</span>折
|
|
</view>
|
|
<view class="subtitle">
|
|
满{{item.min_limit/100}}元可用
|
|
</view>
|
|
</view>
|
|
<view class="top-right">
|
|
<view class="title">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="time">
|
|
{{item.open_time.slice(0,10)}}-{{item.end_time.slice(0,10)}}可用
|
|
</view>
|
|
</view>
|
|
<image class="selected" v-if="item.selected" @click="selectCoupon(item,index)" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230418/c588002859433c217602260b0228b977.png" mode=""></image>
|
|
<view v-else class="yuan" @click="selectCoupon(item,index)"></view>
|
|
</view>
|
|
<!-- 分割线 -->
|
|
<view class="item-circle">
|
|
<view class="circle left"></view>
|
|
<view class="line"></view>
|
|
<view class="circle right"></view>
|
|
</view>
|
|
<!-- 分割线下部分 -->
|
|
<view class="item-bottom">
|
|
<view class="rules" @click="changeRules(item,index)">
|
|
<span v-if="!item.openRules">使用规则：{{item.content}}</span>
|
|
<view class="open" v-else>使用规则：{{item.content}}</view>
|
|
<image v-if="!item.openRules" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/6a7630c176f976bb16674dde482779fb.png" mode=""></image>
|
|
<image v-else src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/f0073b18b3ab88cac62de60411360fc1.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="noCoupon">
|
|
<img :src="showImg('/uploads/20240902/376de17481e3010f50305be570009745.png')" class="no-couPon">
|
|
<view>暂无优惠券</view>
|
|
</view>
|
|
|
|
<view class="bottom-btn" v-if="list.length>0">
|
|
<view class="left" v-if="item.percent == 0">
|
|
优惠：
|
|
<span style="font-size: 24rpx;color:#FC5109;margin-left: 19.33rpx;">￥</span>
|
|
<span style="font-size: 48rpx;color:#FC5109;font-weight: bold;">{{reducePrice}}</span>
|
|
</view>
|
|
<view class="left" v-else>
|
|
优惠：
|
|
<span style="font-size: 48rpx;color:#FC5109;font-weight: bold;">{{reducePrice}}</span>
|
|
</view>
|
|
<!-- <view class="sure" @click="setCoupon(reducePrice*100)"> -->
|
|
<view class="sure" @click="setCoupon(coupon)">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
openRules: false,
|
|
list:[],
|
|
couponSel:false,
|
|
allPrice:0,
|
|
sku_ids:'',
|
|
reducePrice: 0,
|
|
coupon:{},
|
|
needDefault:false
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getList();
|
|
},
|
|
onLoad(options) {
|
|
this.allPrice = (options.allprice) /100
|
|
this.sku_ids = options.sku_ids
|
|
this.needDefault = options.needDefault
|
|
console.log('11111',options);
|
|
},
|
|
methods: {
|
|
getPecenet:function (percent) {
|
|
if(percent>=100 || percent<=0) return "";
|
|
percent = 100 - percent;
|
|
if(percent%10==0){
|
|
percent = percent/10;
|
|
}
|
|
return percent
|
|
},
|
|
// 选择优惠券
|
|
selectCoupon(item,index) {
|
|
let list = this.list
|
|
list.forEach((Item, Index) => {
|
|
if (Index === index) {
|
|
Item.selected = !Item.selected
|
|
} else {
|
|
Item.selected = false
|
|
}
|
|
})
|
|
this.list = list
|
|
console.log('选中的',this.list[index].selected);
|
|
if(this.list[index].selected) {
|
|
if (item.type == 1) {
|
|
this.reducePrice = this.list[index].discounts/100+'元'
|
|
this.coupon = item
|
|
} else{
|
|
this.coupon = item
|
|
this.reducePrice = this.getPecenet(item.percent)+'折'
|
|
}
|
|
}else {
|
|
this.reducePrice = 0
|
|
this.coupon = {}
|
|
}
|
|
this.$forceUpdate()
|
|
|
|
},
|
|
// 打开使用规则
|
|
changeRules(item,index){
|
|
let coupons = this.list
|
|
coupons.forEach((Item, Index) => {
|
|
if (Index === index) {
|
|
Item.openRules = !Item.openRules
|
|
} else {
|
|
Item.openRules = false
|
|
}
|
|
})
|
|
this.list = coupons
|
|
this.$forceUpdate()
|
|
},
|
|
// 处理价格
|
|
showNoPriceNew(price) {
|
|
if (price && price > 0) {
|
|
return (price / 100)
|
|
} else {
|
|
return '0'
|
|
}
|
|
},
|
|
getList:function () {
|
|
this.Post({
|
|
money:this.allPrice,
|
|
sku_ids:this.sku_ids
|
|
}, "/api/coupon/use_coupon_list").then((res) => {
|
|
this.list = res.data
|
|
this.list.forEach(item => {
|
|
item.selected = false
|
|
})
|
|
if (this.needDefault) {
|
|
this.calMaxCost()
|
|
}
|
|
})
|
|
},
|
|
setCoupon(item) {
|
|
if (item.id) {
|
|
console.log('选择的优惠券',item);
|
|
this.$store.commit("choseCoupon",item);
|
|
} else{
|
|
this.$store.commit("choseCoupon","");
|
|
}
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
|
|
// 计算最大优惠的券
|
|
calMaxCost () {
|
|
let maxCost = {}
|
|
let maxCostPrice = 0
|
|
let index = -1
|
|
this.list.forEach((item,i)=>{
|
|
let reducePrice = 0
|
|
if (item.type == 1) {
|
|
reducePrice = item.discounts/100
|
|
} else{
|
|
reducePrice = this.allPrice * (100-item.percent)/100
|
|
}
|
|
|
|
if (reducePrice > maxCostPrice) {
|
|
maxCostPrice = reducePrice
|
|
maxCost = item
|
|
index = i
|
|
}
|
|
})
|
|
|
|
if (maxCost.id) {
|
|
this.selectCoupon(maxCost, index)
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg {
|
|
background: #F7F7F7;
|
|
min-height: 100vh;
|
|
}
|
|
.coupon-list .coupon-item .item-circle {
|
|
line-height: 1rpx;
|
|
height: 1rpx;
|
|
width: 652rpx;
|
|
}
|
|
|
|
.coupon-list .coupon-item .item-circle .line {
|
|
border-bottom: 1px dashed #ccc;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: .1rpx;
|
|
margin: auto;
|
|
z-index: 9;
|
|
}
|
|
|
|
.coupon-list .coupon-item .item-circle .circle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
background: #ccc;
|
|
width: .46rpx;
|
|
height: .46rpx;
|
|
z-index: 10;
|
|
}
|
|
.coupon-list .coupon-item .item-circle .circle.left{
|
|
left:-.23rpx;
|
|
}
|
|
.coupon-list .coupon-item .item-circle .circle.right{
|
|
right: -.23rpx;
|
|
}
|
|
|
|
.item-bottom {
|
|
padding: 16rpx 20rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-bottom .rules {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #999;
|
|
display: flex;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
.item-bottom .rules span {
|
|
width: 570rpx;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-bottom .rules image {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 20rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.open {
|
|
width: 570rpx;
|
|
min-height: 30rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
.coupon-item {
|
|
margin: 20.67rpx 26.67rpx;
|
|
background: #fff;
|
|
}
|
|
.coupon-list .coupon-item .item-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx 16rpx 24rpx 36rpx;
|
|
}
|
|
|
|
.coupon-item .item-top .price {
|
|
font-size: 25rpx;
|
|
font-weight: bold;
|
|
color: #FC5209;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
}
|
|
|
|
.coupon-item .item-top .price span {
|
|
font-size: 67rpx;
|
|
margin-right: 6.67rpx;
|
|
}
|
|
|
|
.top-left .subtitle {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #FC5209;
|
|
padding-left: 6rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.top-right {
|
|
width: 336rpx;
|
|
margin-left: 46.67rpx;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
color: #111;
|
|
}
|
|
|
|
.top-right .title {
|
|
margin-bottom: 26rpx;
|
|
font-size: 31rpx;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.item-bottom {
|
|
padding: 16rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-bottom .use {
|
|
width: 133rpx;
|
|
height: 47rpx;
|
|
border: 1px solid #FC5209;
|
|
border-radius: 23rpx;
|
|
text-align: center;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
color: #fc5209;
|
|
line-height: 47rpx;
|
|
}
|
|
.coupon-list{
|
|
background: #F7F7F7;
|
|
min-height: 100vh;
|
|
padding: 20rpx 20rpx 160rpx;
|
|
}
|
|
|
|
.coupon-list .coupon-item {
|
|
background: #ffffff;
|
|
border-radius: 13rpx;
|
|
}
|
|
.yuan {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
border: 1px solid #FC5209;
|
|
border-radius: 20rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.selected {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.bottom-btn {
|
|
/* width: 100%; */
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 22rpx 50rpx 64rpx 50.67rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.bottom-btn .left {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #393B3E;
|
|
}
|
|
.sure {
|
|
width: 250rpx;
|
|
height: 80rpx;
|
|
background: linear-gradient(270deg, #FC6712, #FD9526);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
.top-left {
|
|
width: 136rpx;
|
|
}
|
|
.top-left .price {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.noCoupon{
|
|
padding-top: 524rpx;
|
|
text-align: center;
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.no-couPon{
|
|
width: 173rpx;
|
|
height: 173rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
</style>
|
|
|