chenkainan
1 year ago
13 changed files with 1214 additions and 341 deletions
@ -0,0 +1,424 @@ |
|||
<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="https://static.ticket.sz-trip.com/dongtai/images/user/noCoupon.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> |
|||
Loading…
Reference in new issue