From 90f3e391f8eb77cafbafedfaf14c8021d13ec3a7 Mon Sep 17 00:00:00 2001 From: ov <1010618168@qq.com> Date: Thu, 21 Sep 2023 13:34:10 +0800 Subject: [PATCH] oc --- src/assets/vue.svg | 7 ++- src/components/Crumb.vue | 54 +++++++++---------- src/components/Footer.vue | 10 ++-- src/components/Header.vue | 22 ++++---- src/components/home/JfTitle.vue | 24 ++++----- src/components/home/List.vue | 42 +++++++-------- src/components/user/Cart.vue | 91 ++++++++++++++++++++++++++------ src/main.js | 14 ++--- src/request/api.js | 3 +- src/store/index.js | 10 ++-- src/store/modules/loginModel.js | 36 ++++++------- src/store/modules/loginStatus.js | 35 ++++++------ src/store/modules/userInfos.js | 8 +-- src/style.css | 21 ++++---- src/utils/index.js | 11 ++-- src/views/Free.vue | 16 +++--- src/views/Order.vue | 11 ++-- src/views/User.vue | 21 +++----- vite.config.js | 6 +-- 19 files changed, 239 insertions(+), 203 deletions(-) diff --git a/src/assets/vue.svg b/src/assets/vue.svg index 770e9d3..e6534fe 100644 --- a/src/assets/vue.svg +++ b/src/assets/vue.svg @@ -1 +1,6 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Crumb.vue b/src/components/Crumb.vue index 5d31a32..81a4c08 100644 --- a/src/components/Crumb.vue +++ b/src/components/Crumb.vue @@ -1,33 +1,31 @@ - - - - + + + - \ No newline at end of file + } +} + diff --git a/src/components/Footer.vue b/src/components/Footer.vue index ee92e79..2c9aae4 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -28,11 +28,9 @@ - - - \ No newline at end of file + diff --git a/src/components/Header.vue b/src/components/Header.vue index 38b0984..40ec489 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -10,8 +10,8 @@ @@ -28,15 +28,15 @@ - - \ No newline at end of file + diff --git a/src/components/home/JfTitle.vue b/src/components/home/JfTitle.vue index 4103044..74d4ae2 100644 --- a/src/components/home/JfTitle.vue +++ b/src/components/home/JfTitle.vue @@ -12,21 +12,21 @@ - - \ No newline at end of file + diff --git a/src/components/home/List.vue b/src/components/home/List.vue index c860749..bffa6f1 100644 --- a/src/components/home/List.vue +++ b/src/components/home/List.vue @@ -2,41 +2,37 @@ - - \ No newline at end of file + diff --git a/src/components/user/Cart.vue b/src/components/user/Cart.vue index 5857553..0a48b3c 100644 --- a/src/components/user/Cart.vue +++ b/src/components/user/Cart.vue @@ -14,7 +14,7 @@ 礼品信息 兑换分数 数量 - 小计 (鸡腿) + 小计(鸡腿) 操作 @@ -45,23 +45,63 @@ {{ item.coin }}
- - + - {{ item.total }} - + + +
{{ item.coin * item.total }} - 删除 + 删除 -
- 总计：{{ sum }}鸡腿 + +
+
+ 总计：{{ sum }}鸡腿 +
+
提交
+
+ +
+
购物车内暂无商品
-
提交
@@ -97,6 +137,8 @@ let shopGoods = ref([]); // stepNum.value += val; // } // } +// 判断有无商品 +let flag = false; // 商品长度 let lengthGoods = ref(0); // 全选 @@ -115,21 +157,29 @@ async function showYourGoods() { shopGoods.value = res.data; // 获取购物车商品列表长度 lengthGoods.value = res.data.length; + // 判断购物车内是否有商品 + if (res.data.length > 0) { + flag = true; + } else { + flag = false; + } } showYourGoods(); // 修改商品数量 -async function modifyCart(id, num) { +async function modifyCart(id, num, checkStatus, coin, status) { if (num > 0) { const res = await cartAddAPI({ productId: id, total: num, modified: 1, }); - if (res.code == 0) { - storeuserInfos.initCartTotal(res.data.total); - } else { - alert(res.message); + if (status == false) { + storeuserInfos.initCartTotal(1); + if (checkStatus) sum += coin; + } else if (status == true) { + storeuserInfos.subCartTotal(1); + if (checkStatus) sum -= coin; } } else { alert("商品数量不能减少了哟~"); @@ -138,13 +188,14 @@ async function modifyCart(id, num) { } // 删除商品 -async function deleteCart(id) { +async function deleteCart(id, status, coin, num) { const res = await deleteCartAPI(id); if (res.code == 0) { - storeuserInfos.initCartTotal(res.data.total); + storeuserInfos.subCartTotal(num); } else { alert(res.message); } + if (status) sum -= coin; showYourGoods(); } // 全选 @@ -152,11 +203,19 @@ function selectAll() { checkAll.value = !checkAll.value; if (checkAll.value == true) { for (const i = ref(0); i.value < lengthGoods.value; i.value++) { - checkList[i.value] = true; + if (checkList[i.value] != true) { + checkList[i.value] = true; + // console.log(i.value); + sum += shopGoods.value[i.value].coin * shopGoods.value[i.value].total; + } } } else { for (const i = ref(0); i.value < lengthGoods.value; i.value++) { - checkList[i.value] = false; + if (checkList[i.value] != false) { + checkList[i.value] = false; + // console.log(i.value); + sum -= shopGoods.value[i.value].coin * shopGoods.value[i.value].total; + } } } } diff --git a/src/main.js b/src/main.js index 0c0d25d..62c4625 100644 --- a/src/main.js +++ b/src/main.js @@ -1,12 +1,12 @@ -import { createApp } from 'vue' -import './style.css' -import App from './App.vue' +import { createApp } from "vue"; +import "./style.css"; +import App from "./App.vue"; import router from "./router"; -import pinia from './store' +import pinia from "./store"; //第二步：将createApp(App)通过一个变量提收 const app = createApp(App); //第三步：在app中使用rouer app.use(router); -app.use(pinia) -app.config.globalProperties.img = 'https://sc.wolfcode.cn' -app.mount('#app') +app.use(pinia); +app.config.globalProperties.img = "https://sc.wolfcode.cn"; +app.mount("#app"); diff --git a/src/request/api.js b/src/request/api.js index 3fd6e6f..34f3b0c 100644 --- a/src/request/api.js +++ b/src/request/api.js @@ -42,4 +42,5 @@ export const cartAddAPI = (data) => // 获取购物车内的商品 export const cartAPI = () => request.get("/shop/carts"); -export const deleteCartAPI = (id) => request.delete(`/shop/carts?productIds=${id}`); +export const deleteCartAPI = (id) => + request.delete(`/shop/carts?productIds=${id}`); diff --git a/src/store/index.js b/src/store/index.js index 9333ebe..6ffe063 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,10 +1,10 @@ -import {createPinia} from 'pinia' +import { createPinia } from "pinia"; // 创建pinia实例对象 -const pinia = createPinia() +const pinia = createPinia(); // 导出 // 引入插件 -import piniaPluginPersist from 'pinia-plugin-persist' +import piniaPluginPersist from "pinia-plugin-persist"; // 使用插件 -pinia.use(piniaPluginPersist) -export default pinia; \ No newline at end of file +pinia.use(piniaPluginPersist); +export default pinia; diff --git a/src/store/modules/loginModel.js b/src/store/modules/loginModel.js index 7a9f90b..efc35a6 100644 --- a/src/store/modules/loginModel.js +++ b/src/store/modules/loginModel.js @@ -1,23 +1,21 @@ -import {defineStore} from "pinia" +import { defineStore } from "pinia"; export const loginModel = defineStore("loginModel", { - // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求 - // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染 - // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导 - state: () => { + // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求 + // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染 + // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导 + state: () => { return { - isShowLoginModel: false - } + isShowLoginModel: false, + }; + }, + getters: {}, + actions: { + changisShowLoginModelActions(val) { + this.isShowLoginModel = val; }, - getters: { - - }, - actions: { - changisShowLoginModelActions(val){ - this.isShowLoginModel=val; - } - } - // 2. 使用容器中的 state - // 3. 通过 getter 修改 state - // 4. 使用容器中的 action 同步和异步请求 - }) \ No newline at end of file + }, + // 2. 使用容器中的 state + // 3. 通过 getter 修改 state + // 4. 使用容器中的 action 同步和异步请求 +}); diff --git a/src/store/modules/loginStatus.js b/src/store/modules/loginStatus.js index ce3cf66..9e3d5d8 100644 --- a/src/store/modules/loginStatus.js +++ b/src/store/modules/loginStatus.js @@ -1,19 +1,16 @@ -import {defineStore} from 'pinia' -export const loginStatus = defineStore('loginStatus',{ -state(){ -return { -// 先从本地获取登录凭证x-auth-token，如果有，说明用户登录，否则用户没有登录 -isLogined:localStorage.getItem("x-auth-token")?true:false - - -} -}, -getters:{ -}, -actions:{ -// 修改isLogined的值 -changIsLogined(val){ -this.isLogined = val -} -} -}) \ No newline at end of file +import { defineStore } from "pinia"; +export const loginStatus = defineStore("loginStatus", { + state() { + return { + // 先从本地获取登录凭证x-auth-token，如果有，说明用户登录，否则用户没有登录 + isLogined: localStorage.getItem("x-auth-token") ? true : false, + }; + }, + getters: {}, + actions: { + // 修改isLogined的值 + changIsLogined(val) { + this.isLogined = val; + }, + }, +}); diff --git a/src/store/modules/userInfos.js b/src/store/modules/userInfos.js index f8e661f..09702b3 100644 --- a/src/store/modules/userInfos.js +++ b/src/store/modules/userInfos.js @@ -26,10 +26,12 @@ export const userInfos = defineStore("userInfos", { }, // 修改购物车的数量 initCartTotal(state) { - return (val) => state.cartTotal == val; + return (val) => (state.cartTotal += val); + }, + //减少购物车的数量 + subCartTotal(state) { + return (val) => (state.cartTotal -= val); }, - // 减少购物车的数量 - // outitCartTotal() {}, }, actions: { // 修改用户信息 diff --git a/src/style.css b/src/style.css index 51e9980..8fed1dd 100644 --- a/src/style.css +++ b/src/style.css @@ -1,16 +1,17 @@ -*{ +* { margin: 0; padding: 0; box-sizing: border-box; - } - a{ +} +a { text-decoration: none; color: #333; - } - li{ +} +li { list-style: none; - } - input,button{ - border: 0; - outline: none; - } +} +input, +button { + border: 0; + outline: none; +} diff --git a/src/utils/index.js b/src/utils/index.js index 4120482..dc27dd3 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,7 +1,6 @@ // validatePhoneNumber这个方法用来验证手机号是否符合规则 -export const validatePhoneNumber = value =>{ - let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; - return reg.test(value) -} - - +export const validatePhoneNumber = (value) => { + let reg = + /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; + return reg.test(value); +}; diff --git a/src/views/Free.vue b/src/views/Free.vue index 6323bac..6eba4aa 100644 --- a/src/views/Free.vue +++ b/src/views/Free.vue @@ -1,11 +1,7 @@ - - - - \ No newline at end of file +
专属福利
+ + + + + diff --git a/src/views/Order.vue b/src/views/Order.vue index 8818b45..02f86b5 100644 --- a/src/views/Order.vue +++ b/src/views/Order.vue @@ -1,12 +1,7 @@ - - - \ No newline at end of file + diff --git a/src/views/User.vue b/src/views/User.vue index d09eeb2..18a26f2 100644 --- a/src/views/User.vue +++ b/src/views/User.vue @@ -1,7 +1,7 @@