flavorOfTimeSz/subPackages/order/orderCoupon.vue

<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.activity.discount_type == 'pricebreak'">
							<span>{{item.activity.money/100}}</span>元
						</view>
						<view class="price" v-else>
							<span>{{item.activity.fold}}</span>折
						</view>
						<view class="subtitle">
							满{{item.activity.mini_money/100}}元可用
						</view>
					</view>
					<view class="top-right">
						<view class="title">
							{{item.activity.name}}
						</view>
						<view class="time">
							{{item.get_date.slice(0,10)}}-{{item.end_time.slice(0,10)}}可用
						</view>
					</view>
					<image class="selected" v-if="item.selected" @click="selectCoupon(item,index)" src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/selectCoupon.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.activity.use_rule_text}}</span>
						<view class="open" v-else>使用规则：{{item.activity.use_rule_text}}</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/tongli/images/user/couponNo.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:#6A8A2D;margin-left: 19.33rpx;">￥</span>
				<span style="font-size: 48rpx;color:#6A8A2D;font-weight: bold;">{{reducePrice}}</span>
			</view>
			<view class="left" v-else>
				优惠：
				<span style="font-size: 48rpx;color:#6A8A2D;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
			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(item.selected) {
					if (item.activity.discount_type == 'pricebreak') {
						this.reducePrice = item.activity.money/100+'元'
						this.coupon = item
					} else{
						this.coupon = item
						this.reducePrice = item.activity.fold+'折'
					}
				}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.activity.discount_type == 'pricebreak') {
						reducePrice = item.activity.money/100
					} else{
						reducePrice = this.allPrice * item.activity.fold
					}
					
					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: #6A8A2D;
	  	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: #6A8A2D;
	  	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 #6A8A2D;
	  	border-radius: 23rpx;
	  	text-align: center;
	  	font-size: 25rpx;
	  	font-weight: 500;
	  	color: #6A8A2D;
	  	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 #999999;
		  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: #6A8A2D;
		  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>