min-shenze-applet-master/components/common/k-discountPop/index.vue

<template>
	<view class="">
		<u-popup :customStyle="{ backgroundColor: '#f4f4f4' }" :show="popShow" :round="10" mode="bottom" @close="popClose" closeable>
			<view class="popCon o-plr-30 o-pt-20 o-pb-40">
				<view class="l-flex-center c-text-20">请输入优惠码</view>
				<view class="content">
					<scroll-view scroll-y="true" style="max-height: 70vh;">
						<u--form :model="discountForm" ref="uForm" :rules="rules">
							<u-form-item v-for="(item, index) in discountList" labelWidth="0" label=" ">
								<view class="itemCon l-flex-between">
									<view class="numCicle">{{ index + 1 }}</view>
									<u-input
										type="number"
										@change="
											e => {
												discountChg(e, item, index);
											}
										"
										clearable
										:customStyle="{ backgroundColor: '#fff', border: !!messageList[index] ? '1px solid red !important' : '' }"
										v-model="discountForm[item]"
										:placeholder="'请输入优惠码' + (index + 1)"
									>
										<template #suffix>
											<view class="l-flex-RC" v-if="!!messageList[index]">
												<u--text color="#f43530" text="无效"></u--text>
												<u-icon name="info-circle-fill" color="#f43530" size="20"></u-icon>
											</view>
										</template>
									</u-input>
								</view>
							</u-form-item>
						</u--form>
					</scroll-view>
					<view class="btnCon l-f l-flex-j-a o-mt-20"><u-button type="primary" text="确定" @click="confirmClk"></u-button></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 * discountPop 优惠码弹窗组件
 * @description 本组件主要是优惠码弹窗。
 *
 * @property {Boolean}			popShow				是否展示弹窗
 *
 */
// 引入辅助函数
import { mapGetters } from 'vuex';
// 导入接口
import { API_getCode } from '@/common/api.js';
export default {
	data() {
		return {
			// isCar：1购物车2单个商品
			isCar: 1,
			// 定时器
			timer: null,
			// 是否展示弹窗
			popShow: false,
			// 优惠的商品
			discountParam: {},
			// 优惠码组合
			discountForm: {
				discount1: ''
			},
			// 优惠码组合参数
			discountList: [],
			// 错误信息集合
			messageList: [],
			rules: {}
		};
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		// 使用辅助函数
		...mapGetters(['GETT_clientId', 'GETT_discountCodeList', 'GETT_singleBye_shopCarts']),
		// 获取vuex中购物车的数据
		$S_tabbar_shopCarts() {
			return this.$M_GS('common', '$S_tabbar_shopCarts');
		}
	},
	methods: {
		// 清除错误信息提示
		discountChg(e, row, idx) {
			this.messageList[idx] = '';
		},
		// 点击确定按钮
		async confirmClk() {
			console.log('this.discountForm', this.discountForm);
			// 步骤一：首先判断页面填写的优惠码有没有重复
			// 获取所有填写的优惠码
			let codeList = Object.values(this.discountForm);
			console.log('codeList', codeList);
			let codeLists = {};
			if (codeList.length > 0) {
				// 将优惠码以key:优惠码，value:优惠码出现次数存在对象中
				codeList.forEach(item => {
					if (!codeLists[item]) {
						codeLists[item] = 1;
					} else {
						codeLists[item]++;
					}
				});
			}
			// 重复的优惠码
			let pageRepeats = [];
			for (let key in codeLists) {
				if (codeLists[key] > 1) {
					pageRepeats.push(key);
				}
			}
			// 判断页面填写的有没有重复
			if (pageRepeats[0] && pageRepeats[0] != 0) {
				uni.$u.toast(`${pageRepeats.join(',')}优惠码已被使用`, 3000);
				return;
			}

			// 步骤二：判断页面填写的优惠码有没有跟vuex存的优惠码集合重复情况
			// 1、如果vuex存在比如123优惠码，当前商品之前没有绑定123优惠码，但是其他商品有绑定123优惠码
			// 拿到优惠码集合
			let discountCodeList = this.GETT_discountCodeList;
			// 重复的优惠码集合
			let repeatCode = [];
			if (codeList.length > 0) {
				codeList.forEach(item => {
					if (discountCodeList.length > 0) {
						discountCodeList.forEach(item1 => {
							if (item === item1) {
								repeatCode.push(item);
							}
						});
					}
				});
			}

			// 判断如果当前商品的优惠码集合跟重复的优惠码集合有没有交集
			let mixCodeList = [];
			if (repeatCode.length > 0) {
				repeatCode.forEach(item => {
					if (this.discountParam.codeList.length > 0) {
						this.discountParam.codeList.forEach(item1 => {
							// 2、如果vuex存在123优惠码，当前商品之前有绑定123优惠码
							if (item === item1) {
								mixCodeList.push(item);
							}
						});
					}
				});
			}
			// 如果当前商品的优惠码集合跟重复的优惠码集合有交集
			// 如果存在重复的优惠码集合而且之前没有绑定的，则是重复了
			if (repeatCode.length > 0 && mixCodeList.length == 0) {
				uni.$u.toast(`${repeatCode.join(',')}优惠码已被使用`, 3000);
				return;
			}
			// 如果有填写了优惠码的，但是请求接口没有找到对应的信息
			let isDiscount = this.messageList.some(item => item === '没有找到优惠码' || item === '已使用');
			// 如果页面没有报错信息
			if (!isDiscount) {
				// 判断有没有一个优惠码都没有填写
				let hasVal = codeList.some(item => !!item);
				if (!hasVal) {
					uni.$u.toast('请先填写优惠码！！！');
					return;
				}
				// 储存优惠码接口返回的信息
				let dataList = [];
				// 遍历优惠码
				for (let i = 0; i < codeList.length; i++) {
					dataList[i] = {};
					if (!!codeList[i]) {
						// 调用优惠码接口
						let res = await API_getCode(
							{
								code: codeList[i],
								clientId: this.GETT_clientId
							},
							{
								catch: true
							}
						);
						dataList[i] = res;
					}
				}
				// 重新整合优惠码，无效的要变成0
				let list = [];
				// 整合无效的提示信息
				let messageList = [];
				dataList.forEach((item, index) => {
					messageList[index] = '';
					list[index] = 0;
					// 如果优惠码有效
					if (item.code === '00000') {
						list[index] = item.data.code + '';
					} else {
						messageList[index] = item.message;
					}
				});
				this.messageList = messageList;
				// 处理每件商品的优惠价
				this.handleGood(list, dataList);
				// 如果有填写了优惠码的，但是请求接口没有找到对应的信息
				let isDiscount = messageList.some(item => item === '没有找到优惠码' || item === '已使用');
				// 如果页面没有报错信息
				if (!isDiscount) {
					this.init();
					this.popShow = false;
				}
			}
		},
		// 处理当前商品的优惠码和优惠价集合
		handleGood(codeList, dataList) {
			let shopCarts;
			// 如果是购物车进来的
			if (this.isCar === 1) {
				// 获取购物车数据
				shopCarts = this.$S_tabbar_shopCarts;
				// 把优惠码添加到购物车数据里面去
				shopCarts[this.discountParam['imgId']]['codeList'] = codeList;
			} else {
				// 获取购物车数据
				shopCarts = this.GETT_singleBye_shopCarts;
				// 把优惠码添加到购物车数据里面去
				shopCarts['codeList'] = codeList;
			}
			// 遍历优惠码查询返回的数据，组合优惠价
			let discountList = [];
			dataList.forEach((item, index) => {
				discountList[index] = 0;
				if (item.code === '00000') {
					let price = 0;
					// 如果是折扣价优惠码
					if (item.data.type == 1) {
						price = item.data.discount;
					} else {
						// 计算打完折后的价格
						let discountPrice = this.$M_Big(item.data.discount)
							.mul(0.1)
							.mul(this.discountParam.rmbPrice)
							.toNumber();
						// 实际优惠了多少
						price = this.$M_Big(this.discountParam.rmbPrice)
							.sub(discountPrice)
							.toNumber();
					}
					discountList[index] = price;
				}
			});
			console.log('discountList',discountList)
			// 如果是购物车进来的
			if (this.isCar === 1) {
				// 把优惠价添加到购物车数据里面去
				shopCarts[this.discountParam['imgId']]['discountList'] = discountList;
				// 重新保存购物车数据
				this.$M_Dp('ACTI_SHOPCARTS', shopCarts);
			} else {
				// 把优惠价添加到购物车数据里面去
				shopCarts['discountList'] = discountList;
				// 重新保存购物车数据
				this.$M_Cm('MUTA_SINGSHOPCARTS', shopCarts);
			}
			console.log('shopCarts', shopCarts);
			// 处理优惠码集合
			this.handleDiscList();
		},
		// 集合所有的优惠码
		handleDiscList() {
			let shopCarts = {};
			let codes = [];
			// 如果是购物车进来的
			if (this.isCar === 1) {
				// 获取购物车数据
				shopCarts = this.$S_tabbar_shopCarts;
				// 重新组合优惠码
				for (let key in shopCarts) {
					codes = [...new Set(codes.concat(shopCarts[key]['codeList']))];
				}
			}
			// 商品详情页面
			// 情况1:
			// 用户支付用了优惠码,再次使用肯定是重复了
			// 情况2:
			// 用户查询了优惠码,绑定到了当前商品,但是没有支付,直接加入购物车,再次使用肯定是重复使用了
			// 情况3:
			// 用户查询了优惠码,绑定到了当前商品,但是没有支付,也没有加入购物车,那再次使用,没有重复使用
			// 综上所述,下面这步要放到情况1和2中使用
			// else {
			// 	// 获取购物车数据
			// 	shopCarts = this.GETT_singleBye_shopCarts;
			// 	// 重新组合优惠码
			// 	codes = [...new Set(codes.concat(shopCarts['codeList']))];
			// }
			// 储存优惠码，用来校验重复问题
			this.$M_Cm('MUTA_DISCOUNTCODE', codes);
		},
		// 初始化状态
		init() {
			// 初始化
			this.discountList = [];
			this.messageList = [];
			this.$refs.uForm.resetFields();
			for (let key in this.discountForm) {
				this.discountForm[key] = '';
			}
		},
		// 关闭弹窗
		popClose() {
			this.init();
			this.popShow = false;
		},
		// 开启弹窗
		popOpen(discountParam, isCar) {
			this.isCar = isCar;
			// 一种商品有几件，就有几个优惠码
			let discountForm = {};
			for (let i = 1; i <= discountParam.nums; i++) {
				// 把原来有的优惠码显示在上面
				discountForm[`discount${i}`] = discountParam.codeList[i - 1] != 0 ? discountParam.codeList[i - 1] : '';
			}
			this.discountForm = discountForm;
			this.discountList = Object.keys(discountForm);
			this.discountParam = discountParam;
			this.popShow = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.popCon {
	.content {
		.numCicle {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: #3c9cff;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
			margin-right: 20rpx;
		}
	}
}
</style>