获取验证码
{{ count }} s
@@ -59,6 +59,17 @@ 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";
+
+const store = loginModel();
+// 隐藏登录框
+function close(bol){
+// 1，调用方法
+// store.changisShowLoginModelActions(bol);
+// 2，可直接修改isShowLoginMoldel的值
+store.isShowLoginModel = bol;
+}
// 控制表单盒子的显示和隐藏
let isShowForm = ref(true);
@@ -66,6 +77,7 @@ let isShowForm = ref(true);
let msge = ref("向右滑动");
// 用户输入的手机号
let phoneNum = ref("");
+let verifyCode = ref("")
// 控制倒计时的显示和隐藏
let isShowCount = ref(false);
// 倒计时的数字
@@ -86,7 +98,7 @@ function countDown() {
}
// 点击获取短信验证执行这里的的代码
-function getSMScode() {
+async function getSMScode() {
// 1 验证用户输入的手机号码格式是否正确, 如果不正确,就return
// if(!正则对象.test(用户输入的信息)){
@@ -102,6 +114,9 @@ function getSMScode() {
}
// 3 发送短信验证码---就是一个请求, 把倒计时显示出来
+ const res = await sendSMSApi({phone:phoneNum.value});
+ console.log(res);
+
// 显示倒计时
isShowCount.value = true;
// 进行倒计时
@@ -122,8 +137,13 @@ function onRefresh() {
msge.value = "再试一次";
}
+import { loginStatus } from "../store/modules/loginStatus"
+const storeLoginStatus = loginStatus();
+
+import { userInfos } from "../store/modules/userInfos";
+const storeUserInfo = userInfos()
-function submitLogin() {
+async function submitLogin() {
// 点击登录按钮执行的代码
// 1 手机号码的验证
@@ -137,9 +157,26 @@ function submitLogin() {
alert("请滑动滑块至正确位置!");
return;
}
- // 通过验证
- alert("滑动滑块已经验证通过");
+
// 做登录
+ const res = await phoneReginAPI({
+ 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();
+ }
}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ca48c76..0c0d25d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,11 @@ import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
+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')
diff --git a/src/request/api.js b/src/request/api.js
index 77943e3..10a81fb 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -6,3 +6,26 @@ 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',
+ data,
+ 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'
+ }
+ }
+)
+// 获取用户信息
+// /shop/userProfiles
+export const userProfilesAPI = () =>request.get("/shop/userProfiles")
\ No newline at end of file
diff --git a/src/request/request.js b/src/request/request.js
index 643915d..5ee052d 100644
--- a/src/request/request.js
+++ b/src/request/request.js
@@ -13,8 +13,11 @@ const instance = axios.create({
instance.interceptors.request.use(config=>{
// 每次发送请求的时候，先经过请求拦截器拦截，然后再发送到服务器
// config：包含关于本次请求的相关信息
- console.log("请求拦截器的配置config",config);
// 要返回config
+ const myToken = localStorage.getItem("x-auth-token");
+ config.headers['x-auth-token'] = myToken;
+ console.log("请求拦截器的配置config",config);
+
return config;
},err=>{
// 请求失败的时候执行
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..9333ebe
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,10 @@
+import {createPinia} from 'pinia'
+// 创建pinia实例对象
+const pinia = createPinia()
+// 导出
+
+// 引入插件
+import piniaPluginPersist from 'pinia-plugin-persist'
+// 使用插件
+pinia.use(piniaPluginPersist)
+export default pinia;
\ No newline at end of file
diff --git a/src/store/modules/loginModel.js b/src/store/modules/loginModel.js
new file mode 100644
index 0000000..7a9f90b
--- /dev/null
+++ b/src/store/modules/loginModel.js
@@ -0,0 +1,23 @@
+import {defineStore} from "pinia"
+
+export const loginModel = defineStore("loginModel", {
+ // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
+ // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
+ // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
+ state: () => {
+ return {
+ isShowLoginModel: false
+ }
+ },
+ getters: {
+
+ },
+ actions: {
+ changisShowLoginModelActions(val){
+ this.isShowLoginModel=val;
+ }
+ }
+ // 2. 使用容器中的 state
+ // 3. 通过 getter 修改 state
+ // 4. 使用容器中的 action 同步和异步请求
+ })
\ No newline at end of file
diff --git a/src/store/modules/loginStatus.js b/src/store/modules/loginStatus.js
new file mode 100644
index 0000000..ce3cf66
--- /dev/null
+++ b/src/store/modules/loginStatus.js
@@ -0,0 +1,19 @@
+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
diff --git a/src/store/modules/userInfos.js b/src/store/modules/userInfos.js
new file mode 100644
index 0000000..7aff794
--- /dev/null
+++ b/src/store/modules/userInfos.js
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import headImg from '../../assets/img/userImg.f8bbec5e.png'
+import { userProfilesAPI } from '../../request/api'
+
+export const userInfos = defineStore('userInfos', {
+ state() {
+ return {
+ // 购物车数量
+ cartTotal: 0,
+ // 用户信息
+ userInfo: {
+ nickName: "昵称",
+ coin: 0,
+ headImg
+ }
+ }
+ },
+ getters: {
+ initUserInfo(state) {
+ return state.userInfo = {
+ nickName: "昵称",
+ coin: 0,
+ headImg
+ }
+ }
+ },
+ 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
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..4120482
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,7 @@
+// 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)
+}
+
+
diff --git a/src/views/Detail.vue b/src/views/Detail.vue
index 7ca27a7..c392c24 100644
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
@@ -1,6 +1,6 @@
-
+
@@ -39,13 +39,13 @@
数量 *礼品库存99件数量
*礼品库存{{productInfo.stock}}件
@@ -74,17 +74,16 @@
-
-
-
-
+
+
+
兑换后运费如何收取？
@@ -126,6 +125,7 @@ let nav = ref([]);
let themYouCanBuy = ref([]);
// “商品详情”模块数据
let productInfo = ref([]);
+let flag=ref(true);
async function getDetailData(id){
const res = await DetailAPI(id);
@@ -133,6 +133,8 @@ nav.value = res.data.nav;
themYouCanBuy.value = res.data.themYouCanBuy;
productInfo.value = res.data.productInfo;
console.log(nav,themYouCanBuy,productInfo);
+productInfo.value.description =
+productInfo.value.description.replaceAll('upload','https://sc.wolfcode.cn'+'/upload')
}
getDetailData(route.query.id)
@@ -162,6 +164,22 @@ function changImg(src){
productInfo.value.coverImg = src
}
+let stepNum = ref(1);
+// 步进器
+function stepFn(val) {
+// 分析：
+// 越界判断
+// 如果val = -1，说明是减号，stepMum为1后，不能再减
+// 如果val = 1，说明是加号，stepMum大于等于库存量后，不能再加
+if ((val == -1 && stepNum.value == 1) ||(val == 1 && stepNum.value >=
+productInfo.value.stock)) {
+return;
+}else{
+stepNum.value += val
+}
+}
+
+
\ No newline at end of file
+
\ No newline at end of file
--
Gitee
+