商品券相关优化更新

pagesOrder/components/orderInfoAfter.vue

@@ -53,40 +53,74 @@
 						<view>{{listinfo.orderInfo.seatAmount}}</view>
 					</view>
 				</view>
-				<view v-for="(item,indexe) in favorable" :key="indexe">
-					<view class="favorable" :class="{column:item.value.length>0&&item.type=='product'}" @click="goUrl(item)">
-						<view class="favorable_left"> 
-							<!-- <image class="icon" :src="item.url" mode="aspectFill"/> -->
-							<text class="name"> {{ item.name }} </text>
+				
+				<block v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'">
+					<view v-for="(item,indexe) in favorable" :key="indexe" >
+						<view v-if="!rechargeFreeChecked" class="favorable" :class="{column:item.value.length>0&&item.type=='product'}" @click="goUrl(item)">
+							<view class="favorable_left"> 
+								<!-- <image class="icon" :src="item.url" mode="aspectFill"/> -->
+								<text class="name"> {{ item.name }} </text>
+							</view>
+							<view class="favorable_right" v-if="item.type=='coupon'">
+								<text class="favorable_right_text">{{item.value}}</text> 
+								<u-icon name="arrow-right" color="#575B66" size="28" v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'"></u-icon>
+							</view>
+							<view class="favorable_right" :class="{column:item.value.length>0}" v-if="item.type=='product'">
+								<view class="favorable_right_text"  v-for="(items,indexs) in item.value" :key="indexs">
+									<text>{{items.name}}</text>
+									<text>X{{items.num}}</text>
+									<text>-￥{{items.discountAmount || 0}}</text>
+								</view> 
+								<u-icon v-if="item.value.length <= 0 && (listinfo.status == 'unpaid' ||  listinfo.status == 'paying')" name="arrow-right" color="#575B66" size="28"></u-icon>
+							</view>
+							<view class="favorable_right" v-if="item.type=='points'" @click.stop="pointsChange">
+								<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;" v-if="calcUsablePointsData.usable">
+									使用 {{ calcUsablePointsData.pointsNum}} 积分抵扣￥{{calcUsablePointsData.pointsNum/calcUsablePointsData.equivalentPoints}}
+								</text> 
+								<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;color: #DE4D3A;" v-else>
+									{{calcUsablePointsData.unusableReason}}
+								</text> 
+								
+								<u-checkbox-group iconPlacement="right" @change="pointsChange">
+								    <u-checkbox v-model="isPointsChecked" :disabled="freeCheck||!calcUsablePointsData.usable" :checked="isPointsChecked" activeColor="#E8AD7B" shape="circle" icon-size="36" size="36">
+									</u-checkbox>
+								</u-checkbox-group>
+							</view>
 						</view>
-						<view class="favorable_right" v-if="item.type=='coupon'">
-							<text class="favorable_right_text">{{item.value}}</text> 
-							<u-icon name="arrow-right" color="#575B66" size="28" v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'"></u-icon>
+						
+					</view>
+				</block>
+				<block v-else>
+					<block v-for="(item,index) in listinfo.orderInfo.couponInfoList.fullReductionCoupon" :key="index">
+						<view class="cell-item" v-if="item.type == 1">
+							<view class="label">优惠券</view>
+							<view class="val">
+								<view></view>
+								<view style="font-size: 28rpx;">-￥</view>
+								<view>{{item.discountAmount}}</view>
+							</view>
 						</view>
-						<view class="favorable_right" :class="{column:item.value.length>0}" v-if="item.type=='product'">
-							<view class="favorable_right_text"  v-for="(items,indexs) in item.value" :key="indexs">
-								<text>{{items.name}}</text>
-								<text>X{{items.num}}</text>
-								<text>-￥{{items.discountAmount || 0}}</text>
-							</view> 
-							<u-icon v-if="item.value.length <= 0 && (listinfo.status == 'unpaid' ||  listinfo.status == 'paying')" name="arrow-right" color="#575B66" size="28"></u-icon>
-						</view>
-						<view class="favorable_right" v-if="item.type=='points'" @click.stop="pointsChange">
-							<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;" v-if="calcUsablePointsData.usable">
-								使用 {{ calcUsablePointsData.pointsNum}} 积分抵扣￥{{calcUsablePointsData.pointsNum/calcUsablePointsData.equivalentPoints}}
-							</text> 
-							<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;color: #DE4D3A;" v-else>
-								{{calcUsablePointsData.unusableReason}}
-							</text> 
-							
-							<u-checkbox-group iconPlacement="right" @change="pointsChange">
-							    <u-checkbox v-model="isPointsChecked" :disabled="freeCheck||!calcUsablePointsData.usable" :checked="isPointsChecked" activeColor="#E8AD7B" shape="circle" icon-size="36" size="36">
-								</u-checkbox>
-							</u-checkbox-group>
+					</block>
+					<view class="cell-item column" v-if="listinfo.orderInfo.couponInfoList.productCoupon.length > 0">
+						<view class="label">商品券</view>
+						<view class="val column">
+							<view class="productCoupon" v-for="(item,index) in listinfo.orderInfo.couponInfoList.productCoupon" :key="index">
+								<view class="name">{{item.name}}</view>
+								<view class="num">X{{item.finalUseNum}}</view>
+								<view class="amount">-￥{{item.finalDiscountAmount}}</view>
+							</view>
 						</view>
 					</view>
-					
-				</view>
+					<view class="cell-item" v-if="listinfo.orderInfo && listinfo.orderInfo.pointsDiscountAmount && listinfo.orderInfo.pointsDiscountAmount > 0">
+						<view class="label">积分抵扣</view>
+						<view class="val">
+							<view></view>
+							<view style="font-size: 28rpx;">￥</view>
+							<view>{{listinfo.orderInfo.pointsDiscountAmount.toFixed(2)}}</view>
+						</view>
+					</view>
+				</block>
+				
 				<view class="total-wrap">
 					<view>总计￥</view>
 					<view class="price"> {{listinfo.payAmount}} </view>
@@ -139,13 +173,21 @@
 					{ name: "积分抵扣", type: "points",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/points.png" }
 				],
 				calcUsablePointsData: null,
+				isShow: false,
+				payAmount: 0,
 				isPointsChecked: false,
-				freeCheck: false,
-				freeDisabled: false,
 				userCouponInfos: [],
+				selectCouponData: [],
 			}
 		},
 		props:{
+			rechargeFreeChecked: {
+				type: Boolean
+			},
+			freeCheck: {
+				type: Boolean
+			},
+			
 			listinfo:{
 				type: Object
 			},
@@ -161,59 +203,93 @@
 					this.$forceUpdate()
 				}
 			},
+			rechargeFreeChecked:{
+				immediate: true,
+				handler (newVal) {
+					console.log(this.isPointsChecked)
+					if ( newVal ) {
+						
+						// let couponList = this.userCouponInfos.filter(v => v.type == 1);
+						// this.listinfo.payAmount = (couponList.length > 0 ? Number(this.listinfo.payAmount) + couponList[0].discountAmount : this.listinfo.payAmount)
+						// let productList = this.userCouponInfos.filter(v => v.type == 2);
+						// productList.map(item=> {
+						// 	this.listinfo.payAmount += item.productPayAmount
+						// })
+						this.isPointsChecked = false
+						
+						this.$emit("setPayAmount",{
+							payAmount: this.listinfo.payAmount,
+							userCouponInfos: this.userCouponInfos,
+							freeCheck: this.freeCheck,
+							calcUsablePointsData: this.calcUsablePointsData,
+							isPointsChecked: this.isPointsChecked,
+						})
+					}
+					
+					// this.userCouponInfos = []
+				}
+			},
 		},
 		mounted() {
+			this.payAmount = this.listinfo.payAmount;
+			uni.cache.set('selectCouponData',[])
+			this.isShow = true;
 		},
 		methods: {
 			childOnShow() {
-				console.log(222)
-			    uni.$on('couponItem',this.changeCoupon)
-			    this.getCalcUsablePoints()
+				this.getCalcUsablePoints()
+				if (!this.isShow ) {
+					return;
+				}
+			    // uni.$on('couponItem',this.changeCoupon)
+				this.userCouponInfos = [];
+				this.favorable[0].value = ""
+				this.favorable[1].value = []
+				this.listinfo.payAmount = this.payAmount
+				this.selectCouponData = uni.cache.get('selectCouponData') || []
+				this.changeCoupon();
 			},
 			/**
 			 * 监听优惠券/商品券选择
 			 * @param {Object} data
 			 */
 			changeCoupon ( data ) {
-				let _this = this;
-				// uni.$off('couponItem')
-				let couponData = JSON.parse(data)
-				console.log('监听到事件来自返回的参数：' , couponData);
-				if ( couponData.type == 1 ) { //满减优惠券
-					let couponList = _this.userCouponInfos.filter(v => v.type == 1);
+				
+				// 优惠券数据
+				let couponList = this.selectCouponData.filter(v => v.type == 1);
+				// 商品券列表
+				let productList = this.selectCouponData.filter(v => v.type == 2);
+				
+				// 优惠券处理
+				if ( couponList.length > 0 ) {
+					let couponData = couponList[0]
 					//不包含优惠券的金额
-					let currentPayAmount = (couponList.length > 0 ? Number(_this.listinfo.payAmount) + couponList[0].discountAmount : _this.listinfo.payAmount)
+					let currentPayAmount = (this.userCouponInfos.filter(v => v.type == 1).length > 0 ? Number(this.listinfo.payAmount) + couponData.discountAmount : this.listinfo.payAmount)
 					// 判断优惠金额不能大于支付金额
 					if ( couponData.discountAmount < currentPayAmount) {
-						_this.listinfo.payAmount = ( currentPayAmount - couponData.discountAmount).toFixed(2)
-						_this.favorable[0].value = ('-￥'+couponData.discountAmount)
-						if ( couponList.length > 0) {
-							_this.userCouponInfos.map(item => {
-								if ( item.type == 1 ) {
-									item.userCouponId = couponData.id
-									item.type = couponData.type
-									item.discountAmount = couponData.discountAmount
-									item.num = couponData.type == 1 ? 1 : couponData.num
-								}
-							})
+						
+						if ( this.isPointsChecked ) {
+							this.listinfo.payAmount = (this.listinfo.payAmount-(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
 						} else {
-							_this.favorable[0].value = ('-￥'+couponData.discountAmount)
-							_this.userCouponInfos.push({
+							this.listinfo.payAmount = (Number(this.listinfo.payAmount)+(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
+						}
+						this.listinfo.payAmount = ( currentPayAmount - couponData.discountAmount).toFixed(2)
+						this.favorable[0].value = ('-￥'+couponData.discountAmount)
+					
+						this.userCouponInfos.push({
 								userCouponId: couponData.id,
 								type: couponData.type,
 								discountAmount: couponData.discountAmount,
 								num: couponData.type == 1 ? 1 : couponData.num,
 							})
-						}
-						console.log(currentPayAmount)
-						console.log(_this.listinfo.payAmount)
-						if ( _this.isPointsChecked ) {
-							_this.pointsChange()
-							_this.getCalcUsablePoints()
+						if ( this.isPointsChecked ) {
+							this.isPointsChecked = !this.isPointsChecked
+							this.getCalcUsablePoints()
 						}
 						this.$emit("setPayAmount",{
 							payAmount: this.listinfo.payAmount,
 							userCouponInfos: this.userCouponInfos,
+							freeCheck: this.freeCheck,
 							calcUsablePointsData: this.calcUsablePointsData,
 							isPointsChecked: this.isPointsChecked,
 						})
@@ -223,76 +299,65 @@
 							icon: "none",
 						})
 					}
-				} else {  //商品券
-					//不包含商品券的金额
-					let currentPayAmount = 0;
-					// 筛选选中商品券商品列表
-					let couponList = _this.listinfo.details.filter(v => v.productId == couponData.proId);
-					//金额从小到大排序
-					let minCouponList = couponList.sort((a, b) => (a.memberPrice > 0 ? a.memberPrice : a.salePrice) - (b.memberPrice > 0 ? b.memberPrice : b.salePrice))
-					let productTicketList = _this.userCouponInfos.filter(v => v.productId == couponData.proId);
-					//商品券抵扣的数量
-					let productNum = couponData.num;
-					// 使用数量
-					let num = 0;
-					let productPayAmount = 0;
-					let productTicketNum = 0;
-					let productNumber = 0;
-					productTicketList.map((item,index) => {
-						console.log(item)
-						productTicketNum += item.num
-						_this.listinfo.payAmount = Number(_this.listinfo.payAmount) + item.discountAmount
-					})
-					console.log(productTicketNum)
-					let productTicketNumber = 0;
-					minCouponList.map((item,index) => {
-						// productNumber += item.num 
-						console.log("productTicketNum==",productTicketNum)
-						if ( productNum > 0 && productTicketNum > 0) {
-							productTicketNumber = productTicketNum
-							productTicketNum = (item.num - productTicketNum) <= 0 ? (productTicketNum - item.num) : item.num - productTicketNum
-							console.log("item.num - productTicketNumber===",item.num - productTicketNumber)
-							
-						}
-						if ( productNum > 0 && productTicketNum > 0) {
-							item.num = (item.num - productTicketNumber) <= 0 ? 0 : (item.num - productTicketNumber)
-						}
-						console.log("productTicketNum==",productTicketNum)
-						console.log("item.num===",item.num)
-						if ( productNum > 0 && item.num > 0) {
-							console.log("index===",index)
-							let num = productNum >= item.num ? item.num : productNum
-							productNum = (productNum - item.num) >= 0 ? (productNum - item.num) : 0;
-							
-							productPayAmount = productPayAmount + (num*(item.memberPrice > 0 ? item.memberPrice : item.price))
-						}
-					})
-					if ( productPayAmount > _this.listinfo.payAmount) {
-						
-					}
-					_this.userCouponInfos.push({
-						userCouponId: couponData.id,
-						type: couponData.type,
-						productId: couponData.proId,
-						discountAmount: productPayAmount,
-						num: productNum == 0 ? couponData.num : (couponData.num - productNum),
-					})
-					_this.favorable[1].value.push({
-						userCouponId: couponData.id,
-						name: couponData.name,
-						type: couponData.type,
-						productId: couponData.proId,
-						discountAmount: productPayAmount,
-						num: productNum == 0 ? couponData.num : (couponData.num - productNum),
-					})
-					console.log(productNum)
-					if ( _this.isPointsChecked) {
-						_this.pointsChange()
-					} 
+				} 
+				
+				// 商品券处理
+				if ( productList.length > 0 ) {
+					//商品券使用数量
 					
-					_this.setPayAmount()
-				}
-				uni.$off('couponItem')
+					// 商品数量
+					let productAllNum = 0;
+					
+					productList.map((item,index)=>{
+						// 筛选选中商品券商品列表
+						let productDetails = this.listinfo.details.filter(v => v.productId == item.proId);
+						//金额从小到大排序
+						let minCouponList = productDetails.sort((a, b) => (a.memberPrice > 0 ? a.memberPrice : a.salePrice) - (b.memberPrice > 0 ? b.memberPrice : b.salePrice))
+						let productNum = 0;
+						let productPayAmount = 0;
+						let productDetailsNum = 0;
+						productDetails.map((v,indexs) => {
+							productDetailsNum += v.num;
+						})
+						
+						minCouponList.map((v,indexs) => {
+							for (let i = 0; i < v.num; i++){
+								if ( productAllNum < productDetailsNum && productNum < item.num  && ((v.memberPrice > 0 ? v.memberPrice : v.price) < (this.listinfo.payAmount - productPayAmount) )) {
+									productNum++
+									productAllNum++
+									productPayAmount += v.memberPrice > 0 ? v.memberPrice : v.price
+								} 
+								
+							}
+							
+						})
+						
+						if ( productNum > 0 ) {
+							this.userCouponInfos.push({
+								userCouponId: item.id,
+								type: item.type,
+								productId: item.proId,
+								discountAmount: productPayAmount,
+								num: productNum ,
+							})
+							this.favorable[1].value.push({
+								userCouponId: item.id,
+								name: item.name,
+								type: item.type,
+								productId: item.proId,
+								discountAmount: productPayAmount,
+								num: productNum,
+							})
+						}
+						
+					})
+					if ( this.isPointsChecked) {
+						this.isPointsChecked = !this.isPointsChecked
+						this.getCalcUsablePoints()
+					} 
+				} 
+				this.setPayAmount()
+				
 			},
 			setPayAmount ( cartLists ) {
 				let tableFee;
@@ -302,11 +367,7 @@
 				if ( this.userCouponInfos.length > 0 ) {
 					console.log(this.userCouponInfos)
 					this.userCouponInfos.forEach(item => {
-						if ( item.type == 1 ) {
-							// if ( item.discountAmount && item.discountAmount > 0 ) {
-							// 	this.listinfo.payAmount = (this.listinfo.payAmount - item.discountAmount).toFixed(2)
-							// }
-						} else {
+						if ( item.type == 2 ) {
 							if ( item.discountAmount && item.discountAmount > 0 ) {
 								this.listinfo.payAmount = (this.listinfo.payAmount - item.discountAmount).toFixed(2)
 							}
@@ -320,6 +381,7 @@
 				this.$emit("setPayAmount",{
 					payAmount: this.listinfo.payAmount,
 					userCouponInfos: this.userCouponInfos,
+					freeCheck: this.freeCheck,
 					calcUsablePointsData: this.calcUsablePointsData,
 					isPointsChecked: this.isPointsChecked,
 				})
@@ -333,17 +395,16 @@
 				}
 				this.isPointsChecked = !this.isPointsChecked
 				if ( this.isPointsChecked ) {
-					this.freeDisabled = true
-					
 					this.listinfo.payAmount = (this.listinfo.payAmount-(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
 				} else {
-					this.freeDisabled = false
 					this.listinfo.payAmount = (Number(this.listinfo.payAmount)+(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
 				}
 				console.log(this.listinfo.payAmount)
 				this.$emit("setPayAmount",{
 					payAmount: this.listinfo.payAmount,
 					userCouponInfos: this.userCouponInfos,
+					freeDisabled: this.freeDisabled,
+					freeCheck: this.freeCheck,
 					calcUsablePointsData: this.calcUsablePointsData,
 					isPointsChecked: this.isPointsChecked,
 				})
@@ -359,16 +420,17 @@
 							}
 							
 							uni.pro.navigateTo('/pages/user/coupon', {
-								type: "confirm_order_coupon",
+								type: "orderInfo_coupon",
 								shopId: this.listinfo.shopId,
 								payAmount: payAmount,
-								shoppingCart: JSON.stringify(this.listinfo.details)
+								shoppingCart: JSON.stringify(this.listinfo.details),
+								productList: JSON.stringify(couponList)
 							})
 							break;
 						case 'product':
 							let productList = this.userCouponInfos.filter(v => v.type == 2);
 							uni.pro.navigateTo('/pages/user/coupon', {
-								type: "confirm_order_product",
+								type: "orderInfo_product",
 								shopId: this.listinfo.shopId,
 								payAmount: this.listinfo.payAmount,
 								shoppingCart: JSON.stringify(this.listinfo.details),
@@ -624,6 +686,33 @@
 						color: #333333;
 					}
 				}
+				.val.column{
+					display: flex;
+					flex-direction: column;
+					.productCoupon{
+						display: flex;
+						align-items: flex-end;
+						margin: 0 0 10rpx 0;
+						.name{
+							font-weight: 400;
+							font-size: 26rpx;
+							color: #999;
+							margin: 0;
+						}
+						.num{
+							font-weight: 400;
+							font-size: 26rpx;
+							color: #999;
+							margin: 0 30rpx;
+							line-height: 20rpx;
+						}
+						.amount{
+							font-weight: bold;
+							font-size: 26rpx;
+							color: #333;
+						}
+					}
+				}
 			}
 			
 			.favorable{
@@ -684,7 +773,9 @@
 			.favorable.column{
 				align-items: flex-start;
 			}
-				
+			.cell-item.column{
+				align-items: flex-start;
+			}	
 			.total-wrap {
 				width: 100%;
 				display: flex;