如何实现产品模块随机抽奖功能

监听函数

    watch: {
		lot(val) {
			if(val) {
				this.startRandom()
			}
		}
    },

父组件发出 子组件调用startRandom函数

代码示例

props: {
	lot: {
		type: Number,
	},
},
data() {
	return {
		lefts: [0, 0, 0, 0],
		rights: [0, 0, 0, 0],
		lotterydesc: [{
			text: '两边数字相等，代表中奖！',
			status: false
		}],
		lottery: this.lot,

	}
},
mounted() {

},
watch: {
	lot(val) {
		if (val) {
			this.startRandom()
		}
	}
},
methods: {
	startRandom() {
		if (this.timer) {
			clearInterval(this.timer);
		}
		this.lotterydesc[0].status = false this.lotterydesc[0].text = '正在抽奖中...'this.generateRandom();
		setTimeout(() = >{
			clearInterval(this.timer);
			this.checkEquality();
		},
		1000);
	},
	generateRandom() {
		const duration = 1000; // 变动持续时间
		const interval = 100; // 数字变动的时间间隔
		const steps = duration / interval; // 变动的步数
		const leftsTarget = Array.from({
			length: 4
		},
		() = >Math.floor(Math.random() * 10));
		const rightsTarget = Array.from({
			length: 4
		},
		() = >Math.floor(Math.random() * 10));
		let stepCount = 0;

		this.timer = setInterval(() = >{
			stepCount++;
			this.lefts = this.animateDigits(this.lefts, leftsTarget, steps, stepCount);
			this.rights = this.animateDigits(this.rights, rightsTarget, steps, stepCount);

			if (stepCount === steps) {
				clearInterval(this.timer);
			}
		},
		interval);
	},
	animateDigits(currentDigits, targetDigits, steps, stepCount) {
		const animatedDigits = [];
		for (let i = 0; i < currentDigits.length; i++) {
			const currentDigit = currentDigits[i];
			const targetDigit = targetDigits[i];
			const diff = targetDigit - currentDigit;
			const step = Math.ceil(diff / steps * stepCount);
			const animatedDigit = currentDigit + step;
			animatedDigits.push(animatedDigit);
		}
		return animatedDigits;
	},
	checkEquality() {
		let isEqual = true;
		for (let i = 0; i < this.lefts.length; i++) {
			if (this.lefts[i] !== this.rights[i]) {
				isEqual = false;
				break;
			}
		}

		if (isEqual) {
			// 两个数组相等，执行操作
			console.log("两个数组相等，执行操作");
		} else {
			// 两个数组不相等，执行操作
			this.lotterydesc[0].status = true;
			this.lotterydesc[0].text = '运气稍微差了一点，再接再厉';
			this.lottery = false;
			console.log(this.lefts.toString());
		}
	},

}

checkEquality() 函数判断两组数据是否相等

animateDigits 实现了动画效果

代码执行完后将信息渲染到html上 用户看到了反馈信息

当然在实现抽奖时 需要支付积分 在后端书写控制器 

接受积分的参数 获取登录用户的id 书写扣去积分操作 扣除成功 返回状态200

父组件发出现指令给子组件 子组件执行完毕 渲染信息 抽奖结束 

还逻辑代码 官方封装了一个模型 直接调用 输入积分 用户等信息 一键完成 还是比较方便的 具体你们可以看看 支付控制器的代码

购物车官方举例

购物车其实就是一张数据表 添加购物车相当于是向数据表中插入了一条关于用户信息的产品信息

里面字段有产品ID 产品参数 产品单价 产品数量

前端点击加号 实现给数量加一 数据库中数量就变更了 然后你再通过遍历相加所有的价格 

得到了总价 反馈信息到前端

那么减 就是一样的道理 

清空就是删除数据表中用户的ID 按条件删除 清空了就没有了 结算就是付款总价 插入订单 删除购物车用户ID

如果你有二开方面的不懂 可以随时咨询我！如果你有看不懂的地方 也是随时咨询！