起初想法來源于某程序的設計 照搬邏輯可能連你自己都看不懂
所以自己設計一套屬于自己的邏輯想法
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
如果你有二開方面的不懂 可以隨時咨詢我！如果你有看不懂的地方 也是隨時咨詢！
