起初想法来源于某程序的设计 照搬逻辑可能连你自己都看不懂
所以自己设计一套属于自己的逻辑想法
vue加PHP
CREATE TABLE IF NOT EXISTS `qh_shop` ( `id` int(5) NOT NULL AUTO_INCREMENT, `type` int(5) NOT NULL COMMENT '产品类型', `virtually` int(5) NOT NULL COMMENT '1为虚拟物品', `title` varchar(255) NOT NULL COMMENT '标题', `content` text NOT NULL COMMENT '内容', `thumbs` text NOT NULL COMMENT '图片', `keywords` varchar(255) NOT NULL COMMENT '关键词', `description` varchar(255) NOT NULL COMMENT '描述', `groupids_view` text NOT NULL COMMENT '会员组权限', `discount` int(5) NOT NULL COMMENT '折扣', `click` int(5) NOT NULL, `inputtime` varchar(255) NOT NULL COMMENT '时间', `specs` text NOT NULL COMMENT '规格', `status` int(5) NOT NULL COMMENT '状态', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;
字段有了以后 设计表单 分析一下 图片肯定得是多图 规格必须是多个规格 用户权限也是得多选
那其他的就无所谓
我设计的表单类似于下图
后端处理 多图多规格肯定是数组类型 我们再添加控制器当中判断处理
首先判断是否为数组 如果是就按数组处理方法 如果不是 就直接添加 不处理数据
foreach($data as $_k=>$_v) {
$data[$_k] = !is_array($data[$_k]) ? $_v : $this->content_dispose($_v);
} 怎么处理就是把数组化为字符串 存进数据库 具体代码官方有示例
图片也是一样的处理方法 添加后数据库中的数据就是这样
那后台发布处理基本完成
我们在前端调用列表 那肯定需要处理数据 把字符串转为数组
通过使用遍历的方法 修改把字符串转为数据 官方有示例 具体代码你可以去研究
那我们在请求数据的时候 返回一组数据这样的
很明显 就是我们想要的效果
拿到数据 直接v-for="(item, index) 循环specs 得到规格
循环图片 得到一组图片
那如何实现添加切换套餐效果 如果你循环了 是不是每一组数据都有一个index下标
那就是他键值 写一个点击函数 通过点击函数 获取到下标值 然后查找对象 this.show = this.list.specs[key]
key就是他的键 点击获取到一组规格 通过判断键值是否相等实现 套餐类型高亮
点击后库存数量也会随之改变 选择图片也是一样的道理
已售就是查询你的支付订单中该商品的数量 这个简单 过
弹出我用的是子组件做的 父组件通过传值 控制子组件显示 子组件通过输入行为后传给父组件
使用该方法this.$emit('close', {f:false,t:this.text})
父组件拿到邮箱的值了
我定义了两组数据分别右边【0000】左边【0000】
lefts: [0, 0, 0, 0],
rights: [0, 0, 0, 0],
定义状态提示
lotterydesc:[{text:'两边数字相等，代表中奖！',status:false}],
监听子组件 父组件发出指令后 子组件执行操作 定义为数字类型 方便重复执行逻辑
props: {
lot: {
type: Number,
},
},
监听函数
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
如果你有二开方面的不懂 可以随时咨询我！如果你有看不懂的地方 也是随时咨询！
