From b762f14305cb67c4fcc77f427ae1917a7005cc79 Mon Sep 17 00:00:00 2001 From: ov <1010618168@qq.com> Date: Wed, 20 Sep 2023 22:54:33 +0800 Subject: [PATCH] ovi --- package-lock.json | 2 +- package.json | 2 +- src/App.vue | 45 +++--- src/components/Login.vue | 78 +++++----- src/components/Topbar.vue | 117 ++++++++------- src/components/user/Cart.vue | 74 ++++++++-- src/request/api.js | 67 ++++----- src/request/request.js | 44 +++--- src/router/index.js | 76 +++++----- src/store/modules/userInfos.js | 84 +++++------ src/views/Detail.vue | 254 +++++++++++++++++---------------- src/views/Goods.vue | 11 +- src/views/Home.vue | 109 +++++++------- 13 files changed, 515 insertions(+), 448 deletions(-) diff --git a/package-lock.json b/package-lock.json index da756ae..49bbd74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", "less": "^4.2.0", - "vite": "^4.4.5" + "vite": "^4.4.9" } }, "node_modules/@babel/parser": { diff --git a/package.json b/package.json index 5991d64..15bca99 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,6 @@ "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", "less": "^4.2.0", - "vite": "^4.4.5" + "vite": "^4.4.9" } } diff --git a/src/App.vue b/src/App.vue index 6429d39..d48e818 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,37 +1,30 @@ - - - \ No newline at end of file + diff --git a/src/components/Login.vue b/src/components/Login.vue index cf24921..163d49f 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -2,7 +2,12 @@
- +
- +
获取验证码 {{ count }} s @@ -59,16 +68,16 @@ import { validatePhoneNumber } from "../utils"; // 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小 import SlideVerify from "vue3-slide-verify"; import "vue3-slide-verify/dist/style.css"; -import {sendSMSApi,phoneReginAPI} from "../request/api" -import {loginModel} from "../store/modules/loginModel"; +import { sendSMSApi, phoneReginAPI } from "../request/api"; +import { loginModel } from "../store/modules/loginModel"; const store = loginModel(); // 隐藏登录框 -function close(bol){ -// 1，调用方法 -// store.changisShowLoginModelActions(bol); -// 2，可直接修改isShowLoginMoldel的值 -store.isShowLoginModel = bol; +function close(bol) { + // 1，调用方法 + // store.changisShowLoginModelActions(bol); + // 2，可直接修改isShowLoginMoldel的值 + store.isShowLoginModel = bol; } // 控制表单盒子的显示和隐藏 @@ -77,7 +86,7 @@ let isShowForm = ref(true); let msge = ref("向右滑动"); // 用户输入的手机号 let phoneNum = ref(""); -let verifyCode = ref("") +let verifyCode = ref(""); // 控制倒计时的显示和隐藏 let isShowCount = ref(false); // 倒计时的数字 @@ -99,7 +108,6 @@ function countDown() { // 点击获取短信验证执行这里的的代码 async function getSMScode() { - // 1 验证用户输入的手机号码格式是否正确, 如果不正确,就return // if(!正则对象.test(用户输入的信息)){ if (!validatePhoneNumber(phoneNum.value)) { @@ -108,13 +116,13 @@ async function getSMScode() { } // 2 验证滑块拼图验证码, 如果不通过, 就return - if(msge.value==="再试一次" || msge.value==="向右滑动"){ - alert("请滑动滑块至正确位置!"); - return + if (msge.value === "再试一次" || msge.value === "向右滑动") { + alert("请滑动滑块至正确位置!"); + return; } // 3 发送短信验证码---就是一个请求, 把倒计时显示出来 - const res = await sendSMSApi({phone:phoneNum.value}); + const res = await sendSMSApi({ phone: phoneNum.value }); console.log(res); // 显示倒计时 @@ -137,17 +145,17 @@ function onRefresh() { msge.value = "再试一次"; } -import { loginStatus } from "../store/modules/loginStatus" +import { loginStatus } from "../store/modules/loginStatus"; const storeLoginStatus = loginStatus(); import { userInfos } from "../store/modules/userInfos"; -const storeUserInfo = userInfos() +const storeUserInfo = userInfos(); async function submitLogin() { // 点击登录按钮执行的代码 // 1 手机号码的验证 - if (!validatePhoneNumber(phoneNum.value)) { + if (!validatePhoneNumber(phoneNum.value)) { alert("请输入正确的手机号码！"); return; } @@ -160,26 +168,26 @@ async function submitLogin() { // 做登录 const res = await phoneReginAPI({ - verifyCode:verifyCode.value, - phone:phoneNum.value - }) - console.log(res); + verifyCode: verifyCode.value, + phone: phoneNum.value, + }); + // console.log(res); - if (res.code==0) { -// 1、提示登录成功 - alert("登录成功！") - // 2、保存token值到localStorage---用来区分用户是否登录 - localStorage.setItem("x-auth-token",res["x-auth-token"]); - // 3、隐藏登录模态窗口 - close(false); - // 4、登录状态按钮的切换---购物车按钮 - storeLoginStatus.changIsLogined(true); - // 5、登录成功，修改用户默认数据数据 - storeUserInfo.changUserProfilesData(); + if (res.code == 0) { + // 1、提示登录成功 + alert("登录成功！"); + // 2、保存token值到localStorage---用来区分用户是否登录 + localStorage.setItem("x-auth-token", res["x-auth-token"]); + // 3、隐藏登录模态窗口 + close(false); + // 4、登录状态按钮的切换---购物车按钮 + storeLoginStatus.changIsLogined(true); + // 5、登录成功，修改用户默认数据数据 + storeUserInfo.changUserProfilesData(); } } - \ No newline at end of file + diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue index 3e4f9ff..5a53888 100644 --- a/src/components/Topbar.vue +++ b/src/components/Topbar.vue @@ -6,17 +6,23 @@
  • - 用户名：{{userInfo.nickName}} + 用户名：{{ userInfo.nickName }}
    • -
  • 我的鸡腿：{{userInfo.coin}}
    • +
  • 我的鸡腿：{{ userInfo.coin }}
  • 获取鸡腿
  • 叩丁狼官网
    • - -
  • - +
    • +
  • + 购物车 - {{cartTotal}} -
    • + {{ cartTotal }} +
@@ -24,60 +30,63 @@ - - \ No newline at end of file + diff --git a/src/components/user/Cart.vue b/src/components/user/Cart.vue index 3aba174..6f39def 100644 --- a/src/components/user/Cart.vue +++ b/src/components/user/Cart.vue @@ -17,7 +17,7 @@ 操作 - +
- 列表图片 + 列表图片
-
叩丁狼定制T恤
-

颜色、版本:XL

+
{{ item.title }}
+

{{ item.versionDescription }}

- 5000鸡腿 + {{ item.coin }}
- - - - + + + + {{ item.total }} +
- 5000鸡腿 + {{ item.coin * item.total }} 删除 @@ -60,15 +57,62 @@
提交
+ + \ No newline at end of file + diff --git a/src/request/api.js b/src/request/api.js index 66f5e22..8899913 100644 --- a/src/request/api.js +++ b/src/request/api.js @@ -1,42 +1,43 @@ // 统一管理项目中所有的请求路径 // 引入request -import request from "./request" +import request from "./request"; // 首页精品的地址 -export const JingpinAPI = () =>request.get("/products/recommend") -export const HotAPI = () =>request.get("/products/hot") -export const DetailAPI = (id) =>request.get(`products/${id}`) -export const sendSMSApi = (data) => request( - { - method:'POST', - url:'sendSMS', +export const JingpinAPI = () => request.get("/products/recommend"); +export const HotAPI = () => request.get("/products/hot"); +export const DetailAPI = (id) => request.get(`products/${id}`); +export const sendSMSApi = (data) => + request({ + method: "POST", + url: "sendSMS", data, - headers:{ - 'Content-Type': 'application/x-www-form-urlencoded' - } - } - ) -export const phoneReginAPI = (data) => request( - { - method:'POST', - url:'phoneRegin', + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + }); +export const phoneReginAPI = (data) => + request({ + method: "POST", + url: "phoneRegin", data, - headers:{ - 'Content-Type': 'application/x-www-form-urlencoded' - } - } -) + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + }); // 获取用户信息 // /shop/userProfiles -export const userProfilesAPI = () =>request.get("/shop/userProfiles") - -export const cartAddAPI = (data) => request( - { - method:'POST', - url:'/shop/carts/add', +export const userProfilesAPI = () => request.get("/shop/userProfiles"); +// 加入购物车 +// /shop/carts/add +export const cartAddAPI = (data) => + request({ + method: "POST", + url: "/shop/carts/add", data, - headers:{ - 'Content-Type': 'application/x-www-form-urlencoded' - } - } - ) \ No newline at end of file + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + }); + +// 获取购物车内的商品 +export const cartAPI = () => request.get("/shop/carts"); diff --git a/src/request/request.js b/src/request/request.js index 5ee052d..d925888 100644 --- a/src/request/request.js +++ b/src/request/request.js @@ -1,41 +1,47 @@ // 引入axios -import axios from "axios" +import axios from "axios"; // 创建axios对象 const instance = axios.create({ - // 基础地址 - baseURL:'http://tech.wolfcode.cn:8881/cms', - // 超时处理 - timeout:5000 -}) + // 基础地址 + baseURL: "http://tech.wolfcode.cn:8881/cms", + // 超时处理 + timeout: 5000, +}); // 请求拦截器 -instance.interceptors.request.use(config=>{ +instance.interceptors.request.use( + (config) => { // 每次发送请求的时候，先经过请求拦截器拦截，然后再发送到服务器 // config：包含关于本次请求的相关信息 // 要返回config const myToken = localStorage.getItem("x-auth-token"); - config.headers['x-auth-token'] = myToken; - console.log("请求拦截器的配置config",config); + config.headers["x-auth-token"] = myToken; + // console.log("请求拦截器的配置config",config); return config; -},err=>{ + }, + (err) => { // 请求失败的时候执行 - return Promise.reject -}) + return Promise.reject; + } +); // 响应拦截器 -instance.interceptors.response.use(res=>{ +instance.interceptors.response.use( + (res) => { // 后端返回数据的时候执行 // res:是本次的响应对象 // res.data：是后端给我们的真正数据 - console.log("响应拦截器中的res",res); + // console.log("响应拦截器中的res",res); // 以后拿数据就可以直接获取到res.data了，不需要每次拿数据都写res.data - console.log(res.data); + // console.log(res.data); return res.data; -},err=>{ - return Promise.reject -}) + }, + (err) => { + return Promise.reject; + } +); // 导出对象 -export default instance \ No newline at end of file +export default instance; diff --git a/src/router/index.js b/src/router/index.js index 86c37bc..ccbc1ab 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,43 +1,43 @@ -import {createRouter,createWebHashHistory} from "vue-router" +import { createRouter, createWebHashHistory } from "vue-router"; // 定义路由规则 const routes = [ -{ -path:"/", -redirect:"/home" -}, -{ -path:"/home", -component:()=>import("../views/Home.vue") -}, -{ -path:"/goods", -component:()=>import("../views/Goods.vue") -}, -{ -path:"/user", -component:()=>import("../views/User.vue"), -children:[ - { path:"cart",component: () => import('../components/user/Cart.vue')} - ] -}, -{ -path:"/order", -component:()=>import("../views/Order.vue") -}, -{ -path:"/free", -component:()=>import("../views/Free.vue") -}, -{ - path:"/detail", - component:()=>import("../views/Detail.vue") -} -] + { + path: "/", + redirect: "/home", + }, + { + path: "/home", + component: () => import("../views/Home.vue"), + }, + { + path: "/goods", + component: () => import("../views/Goods.vue"), + }, + { + path: "/user", + component: () => import("../views/User.vue"), + children: [ + { path: "cart", component: () => import("../components/user/Cart.vue") }, + ], + }, + { + path: "/order", + component: () => import("../views/Order.vue"), + }, + { + path: "/free", + component: () => import("../views/Free.vue"), + }, + { + path: "/detail", + component: () => import("../views/Detail.vue"), + }, +]; // 创建router对象 const router = createRouter({ -// 历史模式不能缺少 -history:createWebHashHistory(), -routes -}) + // 历史模式不能缺少 + history: createWebHashHistory(), + routes, +}); // 导出router -export default router \ No newline at end of file +export default router; diff --git a/src/store/modules/userInfos.js b/src/store/modules/userInfos.js index 1cc22bd..f8e661f 100644 --- a/src/store/modules/userInfos.js +++ b/src/store/modules/userInfos.js @@ -1,46 +1,48 @@ -import { defineStore } from 'pinia' -import headImg from '../../assets/img/userImg.f8bbec5e.png' -import { userProfilesAPI } from '../../request/api' +import { defineStore } from "pinia"; +import headImg from "../../assets/img/userImg.f8bbec5e.png"; +import { userProfilesAPI, cartAddAPI } from "../../request/api"; +// import { cartAddAPI } from "../../request" -export const userInfos = defineStore('userInfos', { - state() { - return { - // 购物车数量 - cartTotal: 0, - // 用户信息 - userInfo: { +export const userInfos = defineStore("userInfos", { + state() { + return { + // 购物车数量 + cartTotal: 0, + // 用户信息 + userInfo: { nickName: "昵称", coin: 0, - headImg - } - } + headImg, + }, + }; + }, + getters: { + initUserInfo(state) { + return (state.userInfo = { + nickName: "昵称", + coin: 0, + headImg, + }); }, - - getters: { - initUserInfo(state) { - return state.userInfo = { - nickName: "昵称", - coin: 0, - headImg - } - }, - - initCartTotal(state){ - return (val) => state.cartTotal = val; - }, + // 修改购物车的数量 + initCartTotal(state) { + return (val) => state.cartTotal == val; + }, + // 减少购物车的数量 + // outitCartTotal() {}, + }, + actions: { + // 修改用户信息 + async changUserProfilesData() { + // 获取用户信息 + const res = await userProfilesAPI(); + // 修改数据 + // console.log(res); + this.cartTotal = res.data.cartTotal; + this.userInfo = res.data.userInfo; }, - actions: { - // 修改用户信息 - async changUserProfilesData() { - // 获取用户信息 - const res = await userProfilesAPI(); - // 修改数据 - console.log(res); - this.cartTotal =res.data.cartTotal; - this.userInfo = res.data.userInfo; - } - }, - persist: { - enabled: true, // 开启数据缓存 - } -}) \ No newline at end of file + }, + persist: { + enabled: true, // 开启数据缓存 + }, +}); diff --git a/src/views/Detail.vue b/src/views/Detail.vue index 6fe6bf5..62866f5 100644 --- a/src/views/Detail.vue +++ b/src/views/Detail.vue @@ -1,52 +1,55 @@ - - \ No newline at end of file +} + diff --git a/src/views/Goods.vue b/src/views/Goods.vue index f2b5fe9..fac395e 100644 --- a/src/views/Goods.vue +++ b/src/views/Goods.vue @@ -18,11 +18,11 @@ - + - - \ No newline at end of file + diff --git a/src/views/Home.vue b/src/views/Home.vue index e372caa..0890006 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,45 +1,44 @@ @@ -74,38 +73,32 @@ const imgs = reactive([ jifenImg4, ]); - - - -import {JingpinAPI,HotAPI} from "../request/api" +import { JingpinAPI, HotAPI } from "../request/api"; // 精品推荐数据 -- 这里不能用reactive，数据会不响应 let jingpinArr = ref([]); // 获取精品推荐的数据 -async function getJingpinData(){ -const res = await JingpinAPI(); -jingpinArr.value = res.data.data.records; -// console.log(jingpinArr) +async function getJingpinData() { + const res = await JingpinAPI(); + jingpinArr.value = res.data.data.records; + // console.log(jingpinArr) } -getJingpinData() +getJingpinData(); let remenArr = ref([]); // 获取热门兑换数据 -async function getHotData(){ -const res = await HotAPI(); -// console.log(res); -remenArr.value = res.data.data.records; +async function getHotData() { + const res = await HotAPI(); + // console.log(res); + remenArr.value = res.data.data.records; } -getHotData() - - +getHotData(); - - -- Gitee