-
>
+
+ class="addr-bg"
>
-
+
- 新增收货地址
+ 新增收货地址
-
+
+
+
class="addr-bg whole"
>
-
+
-
- {{ userAddr.receiver }}
-
-
- {{ userAddr.mobile }}
-
+ {{ userAddr.receiver }}
+ {{ userAddr.mobile }}
- {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }}
+ {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }}
-
+
-
+ :key="index"
>
+ @tap="toOrderDetailPage"
>
-
+
- {{ item.prodName }}
+ {{ item.prodName }}
- {{ item.skuName }}
+ {{ item.skuName }}
-
- ￥
-
-
- {{ wxs.parsePrice(item.price)[0] }}
-
-
- .{{ wxs.parsePrice(item.price)[1] }}
-
-
-
- x{{ item.prodCount }}
+ ￥
+ {{ wxs.parsePrice(item.price)[0] }}
+ .{{ wxs.parsePrice(item.price)[1] }}
+ x{{ item.prodCount }}
+
-
- 共{{ totalCount }}件商品
-
+ 共{{ totalCount }}件商品
合计：
-
- ￥
-
-
- {{ wxs.parsePrice(total)[0] }}
-
-
- .{{ wxs.parsePrice(total)[1] }}
-
+ ￥
+ {{ wxs.parsePrice(total)[0] }}
+ .{{ wxs.parsePrice(total)[1] }}
@@ -104,96 +86,58 @@
-
+
>
-
- 优惠券：
-
-
- 暂无可用
-
-
- {{ coupons.totalLength ? coupons.totalLength : 0 }}张
-
-
+ 优惠券：
+ 暂无可用
+ {{ coupons.totalLength ? coupons.totalLength : 0 }}张
+
+
买家留言：
-
+
+ placeholder="给卖家留言"
+ />
+
-
- 订单总额：
-
+ 订单总额：
-
- ￥
-
-
- {{ wxs.parsePrice(total)[0] }}
-
-
- .{{ wxs.parsePrice(total)[1] }}
-
+ ￥
+ {{ wxs.parsePrice(total)[0] }}
+ .{{ wxs.parsePrice(total)[1] }}
-
- 运费：
-
+ 运费：
-
- ￥
-
-
- {{ wxs.parsePrice(transfee)[0] }}
-
-
- .{{ wxs.parsePrice(transfee)[1] }}
-
+ ￥
+ {{ wxs.parsePrice(transfee)[0] }}
+ .{{ wxs.parsePrice(transfee)[1] }}
-
- 优惠金额：
-
+ 优惠金额：
-
- -￥
-
-
- {{ wxs.parsePrice(shopReduce)[0] }}
-
-
- .{{ wxs.parsePrice(shopReduce)[1] }}
-
+ -￥
+ {{ wxs.parsePrice(shopReduce)[0] }}
+ .{{ wxs.parsePrice(shopReduce)[1] }}
小计：
-
- ￥
-
-
- {{ wxs.parsePrice(actualTotal)[0] }}
-
-
- .{{ wxs.parsePrice(actualTotal)[1] }}
-
+ ￥
+ {{ wxs.parsePrice(actualTotal)[0] }}
+ .{{ wxs.parsePrice(actualTotal)[1] }}
@@ -206,21 +150,14 @@
合计：
-
- ￥
-
-
- {{ wxs.parsePrice(actualTotal)[0] }}
-
-
- .{{ wxs.parsePrice(actualTotal)[1] }}
-
+ ￥
+ {{ wxs.parsePrice(actualTotal)[0] }}
+ .{{ wxs.parsePrice(actualTotal)[1] }}
-
@@ -228,69 +165,69 @@
-
class="popup-hide"
>
@@ -298,230 +235,309 @@
diff --git a/front-end/mall4uni/src/pages/user/user.scss b/front-end/mall4uni/src/pages/user/user.scss
index c5e82dc..22b29e6 100644
--- a/front-end/mall4uni/src/pages/user/user.scss
+++ b/front-end/mall4uni/src/pages/user/user.scss
@@ -1,222 +1,400 @@
+/* 定义容器样式 */
.container {
+ /* 设置背景颜色 */
background-color: #f7f7f7;
+ /* 设置底部内边距，以确保内容与底部有适当的空间 */
padding-bottom: 60rpx;
}
+
+/* 用户信息模块样式 */
.userinfo {
+ /* 设置相对定位，以便其子元素可以使用绝对定位 */
position: relative;
+ /* 占满整个宽度 */
width: 100%;
+ /* 设置白色背景 */
background: #fff;
+ /* 文本居中显示 */
text-align: center;
+ /* 上下内边距，左右无内边距 */
padding: 30rpx 0;
+
.userinfo-con {
+ /* 设置固定宽度，使用户信息框在页面中心对齐 */
width: 240rpx;
+ /* 水平居中 */
margin: auto;
+
.userinfo-avatar {
+ /* 确保超出部分不显示 */
overflow: hidden;
+ /* 块级显示 */
display: block;
+ /* 设置头像的尺寸 */
width: 160rpx;
height: 160rpx;
+ /* 圆形头像 */
border-radius: 50%;
+ /* 添加阴影效果 */
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+ /* 水平居中 */
margin: auto;
+
image {
+ /* 设置图像的尺寸 */
width: 160rpx;
height: 160rpx;
}
}
+
.userinfo-name {
+ /* 设置字体大小 */
font-size: 30rpx;
+ /* 加粗字体 */
font-weight: bold;
+ /* 与头像保持一定间距 */
margin-top: 20rpx;
+ /* 处理文本溢出 */
overflow: hidden;
+ /* 使用 WebKit 独有的多行文本截断 */
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
+ /* 当文本溢出时用省略号表示 */
text-overflow: ellipsis;
+ /* 允许单词内部断行 */
word-break: break-all;
}
}
}
+
+/* 未登录用户的提示信息样式 */
.userinfo-none {
+ /* 使用 Flexbox 布局，使子元素垂直和水平居中 */
display: flex;
+ /* 内边距 */
padding: 30rpx;
+ /* 白色背景 */
background: #fff;
+ /* 子元素垂直居中 */
align-items: center;
+
.default-pic {
+ /* 右侧内边距 */
padding-right: 30rpx;
+
image {
+ /* 设置图像的尺寸 */
width: 160rpx;
height: 160rpx;
}
}
}
+
+/* 未登录状态下的按钮和文本样式 */
.none-login {
button {
+ /* 按钮背景色为白色 */
background: #fff;
+
&::after {
+ /* 移除默认的按钮边框 */
border: 0;
}
}
+
.unlogin {
+ /* 设置字体大小 */
font-size: 30rpx;
+ /* 文本左对齐 */
text-align: left;
+ /* 移除上下内边距 */
padding: 0;
}
+
.click-login {
+ /* 设置较小的字体大小 */
font-size: 26rpx;
+ /* 颜色较深 */
color: #777;
+ /* 文本左对齐 */
text-align: left;
+ /* 移除上下内边距 */
padding: 0;
}
}
+
+/* 绑定手机号的样式 */
.binding-phone {
+ /* 相对定位 */
position: relative;
+ /* 白色背景 */
background: #fff;
+ /* 固定高度 */
height: 80rpx;
+ /* 行高与高度相同，使文本垂直居中 */
line-height: 80rpx;
+ /* 内边距 */
padding: 0 30rpx;
+ /* 上下边框 */
border-top: 2rpx solid #f7f7f7;
border-bottom: 2rpx solid #f7f7f7;
+
.show-tip {
+ /* 设置字体大小 */
font-size: 26rpx;
}
+
.gotobinding {
+ /* 设置圆角 */
border-radius: 8rpx;
+ /* 字体大小 */
font-size: 28rpx;
- color: #e24b4b;
+ /* 颜色为红色 */
+ color: #e24b42;
+ /* 加粗字体 */
font-weight: bold;
}
}
+
+/* 列表内容样式 */
.list-cont {
+ /* 占满整个宽度 */
width: 100%;
+ /* 背景颜色 */
background: #f7f7f7;
+ /* 顶部外边距 */
margin-top: 20rpx;
+
.total-order {
+ /* 白色背景 */
background: #fff;
+
.order-tit {
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 两端对齐 */
justify-content: space-between;
+ /* 固定高度 */
height: 80rpx;
+ /* 行高与高度相同，使文本垂直居中 */
line-height: 80rpx;
+ /* 字体大小 */
font-size: 30rpx;
+ /* 下边框 */
border-bottom: 1px solid #f7f7f7;
+ /* 内边距 */
padding: 0 30rpx;
+
.checkmore {
+ /* 较小的字体大小 */
font-size: 22rpx;
+ /* 颜色较暗 */
color: #80848f;
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 垂直居中 */
align-items: center;
}
}
+
.procedure {
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 项目均匀分布 */
justify-content: space-around;
+ /* 项目垂直居中 */
align-items: center;
+ /* 字体大小 */
font-size: 25rpx;
+ /* 固定高度 */
height: 160rpx;
+
.items {
+ /* 相对定位 */
position: relative;
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 项目垂直排列 */
flex-direction: column;
+ /* 项目水平居中 */
align-items: center;
+
image {
+ /* 设置图像的尺寸 */
width: 70rpx;
height: 70rpx;
+ /* 与下方文字保持间距 */
margin-bottom: 20rpx;
}
+
.num-badge {
+ /* 绝对定位 */
position: absolute;
+ /* 设置徽章位置 */
top: -15rpx;
right: -12rpx;
+ /* 颜色为红色 */
color: #eb2444;
+ /* 边框颜色为红色 */
border: 3rpx solid #eb2444;
+ /* 圆形 */
border-radius: 50rpx;
+ /* 白色背景 */
background: #fff;
+ /* 最小宽度 */
min-width: 30rpx;
+ /* 固定高度 */
height: 30rpx;
+ /* 行高与高度相同，使文本垂直居中 */
line-height: 30rpx;
+ /* 文本水平居中 */
text-align: center;
+ /* 内边距 */
padding: 2rpx;
+ /* 块级显示 */
display: block;
}
}
}
}
+
.my-menu {
+ /* 白色背景 */
background-color: #fff;
+ /* 顶部外边距 */
margin-top: 20rpx;
+
.memu-item {
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 项目垂直居中 */
align-items: center;
+ /* 项目两端对齐 */
justify-content: space-between;
+ /* 固定高度 */
height: 100rpx;
+ /* 下边框 */
border-bottom: 2rpx solid #f7f7f7;
+ /* 内边距 */
padding: 0 30rpx;
+
&:nth-child(1) {
+ /* 第一个项目的上边框 */
border-top: 2rpx solid #f7f7f7;
}
+
&:last-child {
+ /* 最后一个项目的下边框移除 */
border-bottom: none;
}
+
text {
+ /* 字体大小 */
font-size: 28rpx;
}
+
image {
+ /* 设置图像的尺寸 */
width: 50rpx;
height: 50rpx;
+ /* 与右侧文本保持间距 */
margin-right: 20rpx;
}
+
.i-name {
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 项目垂直居中 */
align-items: center;
}
}
}
}
+
+/* 箭头样式 */
.arrowhead {
+ /* 设置箭头的尺寸 */
width: 15rpx;
height: 15rpx;
+ /* 上边框 */
border-top: 2rpx solid #999;
+ /* 右边框 */
border-right: 2rpx solid #999;
+ /* 旋转45度形成箭头形状 */
transform: rotate(45deg);
+ /* 左侧外边距 */
margin-left: 10rpx;
}
+
+/* 产品栏样式 */
.prod-col {
+ /* 顶部外边距 */
margin-top: 20rpx;
+ /* 白色背景 */
background: #fff;
+ /* 使用 Flexbox 布局 */
display: flex;
+ /* 项目均匀分布 */
justify-content: space-around;
+ /* 内边距 */
padding: 30rpx 0 10rpx 0;
+ /* 字体大小 */
font-size: 12px;
+
.col-item {
+ /* 文本居中 */
text-align: center;
+
.num {
+ /* 字体较大且加粗 */
font-size: 16px;
font-weight: 700;
+ /* 颜色为蓝色 */
color: #3a86b9;
}
+
.tit {
+ /* 行高 */
line-height: 34px;
}
}
}
+
+/* 登出按钮样式 */
.log-out {
+ /* 内边距 */
padding: 20rpx;
+ /* 文本居中 */
text-align: center;
+ /* 顶部外边距 */
margin-top: 20rpx;
}
+
.log-out-n {
+ /* 字体大小 */
font-size: 30rpx;
+ /* 水平居中 */
margin: auto;
+ /* 固定宽度 */
width: 200rpx;
+ /* 内边距 */
padding: 20rpx;
+ /* 圆角 */
border-radius: 10rpx;
+ /* 红色背景 */
background: #e43130;
+ /* 白色文字 */
color: #ffffff;
}
+
+/* 自定义菜单按钮样式 */
button.memu-btn.memu-item {
+ /* 白色背景 */
background-color: #fff;
+
&:after {
+ /* 移除默认的按钮边框 */
border: 0;
}
}
diff --git a/front-end/mall4uni/src/pages/user/user.vue b/front-end/mall4uni/src/pages/user/user.vue
index 51aed0b..475bce8 100644
--- a/front-end/mall4uni/src/pages/user/user.vue
+++ b/front-end/mall4uni/src/pages/user/user.vue
@@ -1,221 +1,131 @@
-
-
+
+
+
+
+
{{ loginResult.nickName ? loginResult.nickName : "用户昵称" }}
-
-
+
+
+
-
-
-
+
+
+
-
+
-
+
-
- 我的订单
-
-
+ 我的订单
+
+
查看全部
+
-
+
+
待支付
-
- {{ orderAmount.unPay }}
-
+
+ {{ orderAmount.unPay }}
-
+
+
待发货
-
- {{ orderAmount.payed }}
-
+
+ {{ orderAmount.payed }}
-
+
+
待收货
-
- {{ orderAmount.consignment }}
-
+
+ {{ orderAmount.consignment }}
-
+
+
已完成
-
+
+
-
-
- {{ collectionCount }}
-
-
- --
-
-
- 我的收藏
-
+
+
+ {{ collectionCount }}
+ --
+ 我的收藏
-
-
- 5
-
-
- --
-
-
- 我的消息
-
+
+
+ 5
+ --
+ 我的消息
-
-
- 3
-
-
- --
-
-
- 我的足迹
-
+
+
+ 3
+ --
+ 我的足迹
+
diff --git a/front-end/mall4uni/src/utils/http.js b/front-end/mall4uni/src/utils/http.js
index f4dbb86..719c3ea 100644
--- a/front-end/mall4uni/src/utils/http.js
+++ b/front-end/mall4uni/src/utils/http.js
@@ -3,102 +3,108 @@
import loginMethods from './login'
const http = {
+ /**
+ * 发起HTTP请求
+ * @param {Object} params - 请求参数对象，包含url、data、method等
+ * @returns {Promise} - 返回一个Promise对象，解析或拒绝根据请求结果
+ */
request: async function (params) {
- // 请求参数处理
+ // 处理请求数据类型，确保数组和数字被正确序列化为字符串
if (Object.prototype.toString.call(params.data) === '[object Array]') {
params.data = JSON.stringify(params.data)
} else if (Object.prototype.toString.call(params.data) === '[object Number]') {
params.data = params.data + ''
}
- // 刷新token
+ // 如果不是登录请求且应用未完全启动（即未完成首次加载），并且不是刷新token的请求，则尝试刷新token
if (!params.login && !getApp()?.globalData.isLanding && !params.isRefreshing) {
await loginMethods.refreshToken()
}
- // 发起请求
+
+ // 发起请求，并返回Promise对象处理异步操作
return new Promise((resolve, reject) => {
uni.request({
dataType: 'json',
responseType: params.responseType === undefined ? 'text' : params.responseType,
header: {
- Authorization: uni.getStorageSync('Token')
+ Authorization: uni.getStorageSync('Token') // 设置请求头中的Authorization字段
},
- url: (params.domain ? params.domain : import.meta.env.VITE_APP_BASE_API) + params.url,
- data: params.data,
- method: params.method === undefined ? 'POST' : params.method,
+ url: (params.domain ? params.domain : import.meta.env.VITE_APP_BASE_API) + params.url, // 拼接完整的请求URL
+ data: params.data, // 请求体数据
+ method: params.method === undefined ? 'POST' : params.method, // 默认请求方法为POST
success: (res) => {
const responseData = res.data
- // 请求小程序码
+ // 特殊处理小程序码请求
if (params.responseType === 'arraybuffer' && res.statusCode === 200) {
return resolve(responseData)
}
- // 00000 请求成功
- // A00002 用于直接显示提示系统的成功,内容由输入决定
- if (responseData.code === '00000' || responseData.code === 'A00002') {
- resolve(responseData)
- }
- // A00004 未授权
- if (responseData.code === 'A00004') {
- // 重设登录后跳转地址
- loginMethods.setRouteUrlAfterLogin()
- uni.removeStorageSync('expiresTimeStamp')
- uni.removeStorageSync('loginResult')
- uni.removeStorageSync('Token')
- if (!params.dontTrunLogin) {
- uni.showModal({
- title: '提示',
- content: uni.getStorageSync('hadLogin') ? '登录已过期，请重新登陆！' : '请先进行登录！',
- cancelText: '取消',
- confirmText: '确定',
- success: res => {
- if (res.confirm) {
- uni.navigateTo({
- url: '/pages/accountLogin/accountLogin'
- })
- } else {
- const router = getCurrentPages()
- if (router[0].route === 'pages/basket/basket') {
- uni.switchTab({
- url: '/pages/index/index'
+ // 根据响应码处理不同情况
+ switch (responseData.code) {
+ case '00000': // 请求成功
+ case 'A00002': // 系统成功的提示信息
+ resolve(responseData)
+ break;
+ case 'A00004': // 未授权
+ // 重设登录后跳转地址，并清除相关存储
+ loginMethods.setRouteUrlAfterLogin()
+ uni.removeStorageSync('expiresTimeStamp')
+ uni.removeStorageSync('loginResult')
+ uni.removeStorageSync('Token')
+
+ // 如果允许转向登录页面，则显示模态框提示用户重新登录
+ if (!params.dontTrunLogin) {
+ uni.showModal({
+ title: '提示',
+ content: uni.getStorageSync('hadLogin') ? '登录已过期，请重新登陆！' : '请先进行登录！',
+ cancelText: '取消',
+ confirmText: '确定',
+ success: res => {
+ if (res.confirm) {
+ uni.navigateTo({
+ url: '/pages/accountLogin/accountLogin'
})
+ } else {
+ const router = getCurrentPages()
+ if (router[0].route === 'pages/basket/basket') {
+ uni.switchTab({
+ url: '/pages/index/index'
+ })
+ }
}
}
- }
- })
- }
- resolve(responseData)
- }
-
- // A00005 服务器出了点小差
- if (responseData.code === 'A00005') {
- this.onRequestFail(params, responseData)
- uni.showToast({
- title: '服务器出了点小差~',
- icon: 'none'
- })
- }
-
- // 其他异常码
- // A00001 用于直接显示提示用户的错误，内容由输入内容决定
- // A04001 社交账号未绑定
- // A00012 tempUid错误
- // A00006 验证码错误
- if (responseData.code === 'A04001' || responseData.code === 'A00001' || responseData.code === 'A00012' || responseData.code === 'A00006') {
- if (!params.hasCatch) {
+ })
+ }
+ resolve(responseData)
+ break;
+ case 'A00005': // 服务器错误
+ this.onRequestFail(params, responseData)
uni.showToast({
- title: responseData.msg || responseData.data || 'Error',
+ title: '服务器出了点小差~',
icon: 'none'
})
- }
- }
-
- if (responseData.code !== '00000') {
- reject(responseData)
+ break;
+ case 'A04001': // 社交账号未绑定
+ case 'A00001': // 直接显示提示用户的错误
+ case 'A00012': // tempUid错误
+ case 'A00006': // 验证码错误
+ if (!params.hasCatch) {
+ uni.showToast({
+ title: responseData.msg || responseData.data || 'Error',
+ icon: 'none'
+ })
+ }
+ reject(responseData)
+ break;
+ default:
+ if (responseData.code !== '00000') {
+ reject(responseData)
+ }
}
},
fail: (err) => {
+ // 请求失败时显示提示并拒绝Promise
uni.showToast({
title: '请求失败'
})
@@ -107,56 +113,70 @@ const http = {
})
})
},
+
+ /**
+ * 获取购物车商品数量，并更新tabBar徽章
+ */
getCartCount: () => {
if (!uni.getStorageSync('Token')) {
- util.removeTabBadge()
+ util.removeTabBadge() // 如果没有token，移除购物车徽章
return
}
http.request({
url: '/p/shopCart/prodCount',
method: 'GET',
- dontTrunLogin: true,
+ dontTrunLogin: true, // 不需要转向登录
data: {}
})
.then(({ data }) => {
if (data > 0) {
uni.setTabBarBadge({
- index: 2,
- text: data + ''
+ index: 2, // 假设购物车位于第三个tab
+ text: data + '' // 显示商品数量
})
- getApp().globalData.totalCartCount = data
+ getApp().globalData.totalCartCount = data // 更新全局购物车数量
} else {
uni.removeTabBarBadge({
- index: 2
+ index: 2 // 移除购物车徽章
})
getApp().globalData.totalCartCount = 0
}
})
},
+
+ /**
+ * 请求失败时的日志记录
+ * @param {Object} params - 请求参数
+ * @param {Object} responseData - 响应数据
+ */
onRequestFail: (params, responseData) => {
console.error('============== 请求异常 ==============')
console.log('接口地址: ', params.url)
console.log('异常信息: ', responseData)
console.error('============== 请求异常 end ==========')
},
+
/**
- * 登录成功后执行
- * @param {Object} result 登录成功返回的数据
- * @param {Object} fn 登录成功后的回调
+ * 登录成功后的处理逻辑
+ * @param {Object} result - 登录成功返回的数据
+ * @param {Function} fn - 登录成功后的回调函数
*/
loginSuccess: (result, fn) => {
- // 保存登陆信息
+ // 保存登录信息到本地存储
wx.setStorageSync('loginResult', result)
- // 保存成功登录标识,token过期判断
+ // 保存成功登录标识，用于判断token是否过期
wx.setStorageSync('hadLogin', true)
- const expiresTimeStamp = result.expiresIn * 1000 / 2 + new Date().getTime()
+ const expiresTimeStamp = result.expiresIn * 1000 / 2 + new Date().getTime() // 计算token过期时间
// 缓存token的过期时间
uni.setStorageSync('expiresTimeStamp', expiresTimeStamp)
- wx.setStorageSync('Token', result.accessToken) // 把token存入缓存，请求接口数据时要用
+ // 将accessToken保存到本地存储，以便后续请求使用
+ wx.setStorageSync('Token', result.accessToken)
+ // 执行登录成功后的回调函数
if (fn) {
fn()
}
}
}
+
export default http
diff --git a/front-end/mall4uni/src/utils/login.js b/front-end/mall4uni/src/utils/login.js
index 2a5a458..6b27192 100644
--- a/front-end/mall4uni/src/utils/login.js
+++ b/front-end/mall4uni/src/utils/login.js
@@ -1,37 +1,58 @@
const loginMethods = {
/**
* 刷新token
+ * 当用户的Token即将过期时，自动发起请求以获取新的Token。
+ * 这个过程会检查当前Token是否有效以及是否正在进行刷新操作，以避免重复请求。
*/
refreshToken: () => {
+ // 从本地存储中获取Token的过期时间戳
const expiresTimeStamp = uni.getStorageSync('expiresTimeStamp')
+
+ // 如果没有有效的Token或过期时间戳，则直接返回，不进行刷新
if (!uni.getStorageSync('Token') || !expiresTimeStamp) return
+
+ // 检查Token是否已经过期
const isExpires = expiresTimeStamp < new Date().getTime()
+
+ // 检查是否已经有刷新Token的操作正在进行
const isRefreshing = uni.getStorageSync('isRefreshingToken')
+
+ // 如果Token未过期或已有刷新操作正在进行，则直接返回
if (!isExpires || isRefreshing) {
return
}
+
+ // 设置标志位，表示正在刷新Token，防止并发刷新
uni.setStorageSync('isRefreshingToken', true)
+
+ // 发起刷新Token的请求
http.request({
- url: '/token/refresh',
- method: 'POST',
- login: true,
- isRefreshing: true,
- dontTrunLogin: true
+ url: '/token/refresh', // 刷新Token的API接口
+ method: 'POST', // 使用POST方法发送请求
+ login: true, // 标记这是一个与登录相关的请求
+ isRefreshing: true, // 标记这是刷新Token的请求
+ dontTrunLogin: true // 即使刷新失败也不跳转到登录页面
}).then(res => {
+ // 刷新成功后，更新本地存储中的Token过期时间
uni.setStorageSync('isRefreshingToken', false)
uni.setStorageSync('expiresTimeStamp', res.data * 1000 / 2 + new Date().getTime())
}).catch(() => {
+ // 刷新失败后，重置标志位
uni.setStorageSync('isRefreshingToken', false)
})
},
/**
* 设置登录后的跳转地址
+ * 在用户登录之前，记录当前页面的路径，以便在登录成功后能够返回到该页面。
*/
setRouteUrlAfterLogin: () => {
+ // 获取当前所有页面的栈
const pages = getCurrentPages()
- // 登录后的回跳地址
+
+ // 确保当前页面不是登录页面（避免循环跳转）
if (pages[pages.length - 1].route.indexOf('user-login') === -1) {
+ // 记录当前页面的完整路径，用于登录成功后的跳转
uni.setStorageSync('routeUrlAfterLogin', pages[pages.length - 1].$page.fullPath)
}
}
diff --git a/front-end/mall4uni/src/utils/util.js b/front-end/mall4uni/src/utils/util.js
index 553e5bb..616160f 100644
--- a/front-end/mall4uni/src/utils/util.js
+++ b/front-end/mall4uni/src/utils/util.js
@@ -1,34 +1,71 @@
const util = {
+ /**
+ * 格式化日期时间
+ * 将传入的Date对象格式化为"YYYY/MM/DD HH:MM:SS"的字符串形式。
+ * @param {Date} date - 要格式化的日期对象
+ * @returns {String} - 格式化后的日期时间字符串
+ */
formatTime: date => {
- const year = date.getFullYear()
- const month = date.getMonth() + 1
- const day = date.getDate()
- const hour = date.getHours()
- const minute = date.getMinutes()
- const second = date.getSeconds()
+ const year = date.getFullYear() // 获取年份
+ const month = date.getMonth() + 1 // 获取月份（注意：getMonth()返回的是0-11，所以需要加1）
+ const day = date.getDate() // 获取日期
+ const hour = date.getHours() // 获取小时
+ const minute = date.getMinutes() // 获取分钟
+ const second = date.getSeconds() // 获取秒
+
+ // 使用formatNumber方法确保所有时间部分都是两位数，并用'/'连接日期部分，':'连接时间部分
return [year, month, day].map(util.formatNumber).join('/') + ' ' + [hour, minute, second].map(util.formatNumber).join(':')
},
+ /**
+ * 格式化数字
+ * 确保传入的数字是两位数，如果不是，则在前面补零。
+ * @param {Number|String} n - 需要格式化的数字
+ * @returns {String} - 格式化后的两位数字符串
+ */
formatNumber: n => {
- n = n.toString()
- return n[1] ? n : '0' + n
+ n = n.toString() // 将数字转换为字符串
+ return n[1] ? n : '0' + n // 如果长度大于1则直接返回，否则在前面补零
},
+ /**
+ * 格式化HTML内容
+ * 对传入的HTML字符串进行样式调整，以适应移动端显示，特别是处理图片、表格等内容的宽度和布局。
+ * @param {String} content - 需要格式化的HTML字符串
+ * @returns {String} - 格式化后的HTML字符串
+ */
formatHtml: content => {
if (!content) {
- return
+ return // 如果没有内容，直接返回
}
+
+ // 替换标签，设置最大宽度、单词换行等样式
content = content.replace(/
标签，设置最大宽度、高度自适应、边距等样式
content = content.replace(/![]()
标签中的样式，确保内部样式不会覆盖外部样式
content = content.replace(/style="/gi, 'style="max-width:100% !important;table-layout:fixed;word-wrap:break-word;word-break:break-word;')
+
+ // 替换
标签，设置表格布局和单词换行等样式
content = content.replace(/标签，设置单元格间距、填充、边框等样式
content = content.replace(/ | ')
- return content
- },
+ return content // 返回格式化后的HTML字符串
+ }
+}
+
+export default util
/**
* 移除购物车Tabbar的数字
*/
diff --git a/front-end/mall4uni/vite.config.js b/front-end/mall4uni/vite.config.js
index d4a3b1f..30ff9c0 100644
--- a/front-end/mall4uni/vite.config.js
+++ b/front-end/mall4uni/vite.config.js
@@ -1,38 +1,42 @@
-import { defineConfig } from 'vite'
-import uni from '@dcloudio/vite-plugin-uni'
-import path from 'path'
-import AutoImport from 'unplugin-auto-import/vite'
-import h5ProdEffectPlugin from 'uni-vite-plugin-h5-prod-effect'
+import { defineConfig } from 'vite'; // 从 Vite 导入 defineConfig 函数，用于定义 Vite 配置
+import uni from '@dcloudio/vite-plugin-uni'; // 导入 Uni-App 的 Vite 插件，用于支持 Uni-App 项目
+import path from 'path'; // 导入 Node.js 的 path 模块，用于处理文件路径
+import AutoImport from 'unplugin-auto-import/vite'; // 导入 unplugin-auto-import 插件，用于自动导入常用模块
+import h5ProdEffectPlugin from 'uni-vite-plugin-h5-prod-effect'; // 导入 H5 生产环境打包时的特殊处理插件
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
- uni(),
+ uni(), // 启用 Uni-App 的 Vite 插件，确保 Vite 能够正确处理 Uni-App 项目
+
AutoImport({
imports: [
- 'vue',
- 'uni-app'
+ 'vue', // 自动导入 Vue 的全局 API
+ 'uni-app' // 自动导入 Uni-App 的全局 API
],
dirs: [
- 'src/utils',
- 'src/wxs/**'
+ 'src/utils', // 指定自动导入的目录，这里是 `src/utils` 目录下的所有文件
+ 'src/wxs/**' // 指定自动导入的目录，这里是 `src/wxs` 目录及其子目录下的所有文件
],
- dts: 'src/auto-imports.d.ts',
+ dts: 'src/auto-imports.d.ts', // 生成的类型声明文件路径，用于 TypeScript 支持
eslintrc: {
- enabled: true
+ enabled: true // 启用 ESLint 配置文件的自动生成，确保 ESLint 知道哪些模块是自动导入的
}
}),
- // 对h5 production环境打包时的特殊处理，否则uni-crazy-router在这个环境会异常
+
+ // 对 H5 生产环境打包时的特殊处理，确保 `uni-crazy-router` 在生产环境中正常工作
h5ProdEffectPlugin()
],
+
server: {
- host: true,
- port: 80,
- open: true
+ host: true, // 允许外部访问开发服务器，设置为 `true` 可以在局域网内访问
+ port: 80, // 设置开发服务器的端口号为 80
+ open: true // 启动开发服务器时自动打开浏览器
},
+
resolve: {
alias: {
- '@': path.resolve(__dirname, 'src')
+ '@': path.resolve(__dirname, 'src') // 设置别名 `@` 指向项目的 `src` 目录，方便路径引用
}
}
-})
+});