code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-09-22 04:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 增强错误处理与组件逻辑优化

Browse Source 
- 在 App.vue 中添加 JSON 解析错误处理，确保站点信息获取的稳定性。
- 更新多个 API 请求，添加 loading 状态管理，提升用户体验。
- 在 Search.vue 中优化热词列表的解析逻辑，增强容错性。
- 改进购物车、地址管理等 API 请求参数，确保一致性与可用性。
- 新增用户中心布局组件，提升用户界面的一致性与可读性。
This commit is contained in:
田香琪
2026-07-03 18:29:41 +08:00
parent 99de0d4722
commit bd9a5f75b0
79 changed files with 2382 additions and 1207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
buyer/src/pages/home/memberCenter/AccountSafe.vue
View File

@@ -1,45 +1,48 @@
<template>
<div class="wrapper">
<card _Title="账户安全"/>
<div class="safeList">
<UserCenterLayout title="账户安全" :tabs="['账户安全']">
<div class="safeList">
<!-- 密码 -->
<div class="safeItem">
<div :span="2">
<div class="safeItem-icon">
<el-icon :size="40"><Key /></el-icon>
</div>
<div :span="16">
<div class="safeItem-content">
<div class="setDivItem">登录密码</div>
<div class="setDivItem theme">互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</div>
</div>
<div :span="4">
<div class="safeItem-action">
<el-button @click="modifyPwd">修改密码</el-button>
</div>
</div>
<div class="safeItem">
<div :span="2">
<el-icon :size="40"><Link /></el-icon>
</div>
<div :span="16">
<div class="setDivItem">第三方账户绑定</div>
<div class="setDivItem theme">绑定后可使用第三方账号快捷登录。</div>
<div class="connectList">
<div class="connectRow">
<div class="connectRowLeft">
<span class="connectName">{{ wechatConnect.label }}</span>
<el-tag v-if="isBound(wechatConnect.type)" color="success">已绑定</el-tag>
<el-tag v-else>未绑定</el-tag>
</div>
</div>
<el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
<div class="safeItem safeItem-connect">
<div class="safeItem-main">
<div class="safeItem-icon">
<el-icon :size="40"><Link /></el-icon>
</div>
<div class="safeItem-content">
<div class="setDivItem">第三方账户绑定</div>
<div class="setDivItem theme">绑定后可使用第三方账号快捷登录。</div>
</div>
<div class="safeItem-action">
<el-button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</el-button>
<el-button v-else @click="confirmUnbind(wechatConnect)">解绑</el-button>
</div>
</div>
<div :span="4">
<el-button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</el-button>
<el-button v-else @click="confirmUnbind(wechatConnect)">解绑</el-button>
<div class="connectList">
<div class="connectRow">
<div class="connectRowLeft">
<span class="connectName">{{ wechatConnect.label }}</span>
<el-tag v-if="isBound(wechatConnect.type)" color="success">已绑定</el-tag>
<el-tag v-else>未绑定</el-tag>
</div>
</div>
<el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
</div>
</div>
</div>
</div>
</UserCenterLayout>
<el-dialog
v-model="bindModalVisible"
@@ -266,12 +269,6 @@ export default {
</script>
<style scoped lang="scss">
.safeItem > div:first-child,
.safeItem > div:last-child {
text-align: center;
color: $theme_color;
}
.theme {
color: $theme_color;
}
@@ -281,17 +278,47 @@ export default {
}
.safeItem {
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid $border_color;
padding: 16px 0;
}
> div {
padding: 8px 0;
}
.safeItem-connect {
display: block;
}
.safeItem-main {
display: flex;
align-items: center;
gap: 16px;
}
.safeItem-icon {
flex-shrink: 0;
width: 56px;
display: flex;
align-items: center;
justify-content: center;
color: $theme_color;
}
.safeItem-content {
flex: 1;
min-width: 0;
}
.safeItem-action {
flex-shrink: 0;
display: flex;
align-items: center;
}
.connectList {
position: relative;
margin-top: 8px;
margin-left: 72px;
}
.connectRow {

29
buyer/src/pages/home/memberCenter/CommentList.vue
View File

@@ -1,14 +1,15 @@
<template>
<div class="wrapper">
<card _Title="评论/晒单" />
<UserCenterLayout title="评论/晒单" :tabs="['评论/晒单']">
<div class="order">
<div class="order-title">
<div class="order-row title">
<div span="12">订单详情</div>
<div span="10" class="order-detail-title">订单详情</div>
<div span="4">收货人</div>
<div span="4">评价</div>
<div span="6"></div>
<div span="4">评价等级</div>
<div span="4">评价内容</div>
<div span="2"></div>
</div>
</div>
<empty v-if="list.length === 0" />
@@ -21,7 +22,7 @@
<span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
</div>
<div class="order-item-view">
<div span="12" class="item-view-name">
<div span="10" class="item-view-name">
<div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
<img :src="item.goodsImage" alt="" />
</div>
@@ -43,6 +44,7 @@
</template>
</el-tooltip>
</div>
<div span="2"></div>
</div>
</div>
</div>
@@ -52,8 +54,9 @@
<div class="page-size">
<el-pagination :total="total" @current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
:page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</UserCenterLayout>
</div>
</template>
@@ -158,11 +161,21 @@ export default {
max-width: 50%;
}
> [span='10'] {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
> [span='4'] {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
> [span='2'] {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
> [span='6'] {
flex: 0 0 25%;
max-width: 25%;
@@ -182,6 +195,10 @@ export default {
padding: 10px 0;
text-align: center;
}
.order-detail-title {
text-align: left;
padding-left: 20px !important;
}
.content {
color: #999;
max-height: 60px;

7
buyer/src/pages/home/memberCenter/ComplainDetail.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="add-eval">
<div class="title">
<card _Title="订单投诉" :_Size="16"></card>
<UserCenterLayout title="订单投诉" :tabs="['订单投诉']">
<div class="title">
<p>
<span class="fontsize_16 global_color">{{ statusLabel[detail.complainStatus] }}</span>
<span class="color999 ml_20">创建时间：</span><span>{{ detail.createTime }}</span>
<span class="color999 ml_20">{{ detail.createTime }}</span>
</p>
</div>
</div>
<el-alert class="l_title" show-icon type="warning">我的申诉信息</el-alert>
<table cellspacing="0" cellpadding='0' border="1">
@@ -118,6 +118,7 @@
<el-dialog title="View Image" v-model="visible">
<img :src="previewImage" v-if="visible" style="width: 100%">
</el-dialog>
</UserCenterLayout>
</div>
</template>
<script>

52
buyer/src/pages/home/memberCenter/ComplainList.vue
View File

@@ -1,14 +1,15 @@
<template>
<div class="wrapper">
<card _Title="我的投诉" />
<UserCenterLayout title="我的投诉" :tabs="['我的投诉']">
<div class="order">
<div class="order-title">
<div class="order-row title">
<div class="col-12">商品信息</div>
<div class="col-4">投诉状态</div>
<div class="col-4">投诉主题</div>
<div class="col-4">投诉内容</div>
<div span="10" class="order-detail-title">商品信息</div>
<div span="4">投诉状态</div>
<div span="4">投诉主题</div>
<div span="4">投诉内容</div>
<div span="2"></div>
</div>
</div>
<empty v-if="list.length === 0" />
@@ -22,7 +23,7 @@
<span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" @click="cancel(item.id)">取消投诉</span>
</div>
<div class="order-item-view">
<div class="col-12 item-view-name">
<div span="10" class="item-view-name">
<div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
<img :src="item.goodsImage" alt="" />
</div>
@@ -30,11 +31,11 @@
{{item.goodsName}}
</div>
</div>
<div class="col-4">{{statusLabel[item.complainStatus]}}</div>
<div class="col-4">
<div span="4">{{statusLabel[item.complainStatus]}}</div>
<div span="4">
<div class="content">{{item.complainTopic}}</div>
</div>
<div class="col-4">
<div span="4">
<el-tooltip>
<div class="content">{{item.content}}</div>
<template #content>
@@ -44,6 +45,7 @@
</template>
</el-tooltip>
</div>
<div span="2"></div>
</div>
</div>
</div>
@@ -53,8 +55,9 @@
<div class="page-size">
<el-pagination :total="total" @current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
:page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</UserCenterLayout>
</div>
</template>
@@ -163,29 +166,30 @@ export default {
.order-item-view {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
box-sizing: border-box;
padding: 10px 20px;
.col-12,
.col-4 {
> [span] {
box-sizing: border-box;
padding: 0 8px;
}
.col-12 {
flex: 0 0 50%;
max-width: 50%;
> [span='10'] {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-4 {
> [span='4'] {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
> [span='2'] {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
}
.order-item-view {
padding: 10px 20px;
align-items: flex-start;
}
.order-item {
@@ -194,8 +198,13 @@ export default {
margin: 10px 0;
}
.order-row {
padding: 10px 0;
text-align: center;
}
.order-detail-title {
text-align: left;
padding-left: 20px !important;
}
.content {
color: #999;
max-height: 60px;
@@ -214,6 +223,7 @@ export default {
}
}
.page-size{
text-align: right;
display: flex;
justify-content: flex-end;
}
</style>

9
buyer/src/pages/home/memberCenter/Distribution.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<card _Title="我的分销" />
<UserCenterLayout title="我的分销" :tabs="['我的分销']">
<!-- 分销申请 -->
<div v-if="status === 0">
@@ -103,7 +103,6 @@
:total="goodsData.total"
:page-size="params.pageSize"
@current-change="changePage"
small
layout="total, prev, pager, next, jumper"></el-pagination>
</div>
</el-tab-pane>
@@ -141,7 +140,6 @@
:total="goodsData.total"
:page-size="params.pageSize"
@current-change="changePage"
small
layout="total, prev, pager, next, jumper"></el-pagination>
</div>
</el-tab-pane>
@@ -178,7 +176,6 @@
:total="logData.total"
:page-size="logParams.pageSize"
@current-change="changePageLog"
small
layout="total, prev, pager, next, jumper"></el-pagination>
</div>
</el-tab-pane>
@@ -254,6 +251,7 @@
<div class="mt_10" style="margin-top: 100px;">
商品链接：<el-input style="width: 600px" v-model="qrcode"></el-input>
</div></el-dialog>
</UserCenterLayout>
</div>
</template>
@@ -510,8 +508,9 @@ export default {
margin: 20px 0;
}
.page-size {
display: flex;
justify-content: flex-end;
margin: 15px 0px;
text-align: right;
}
.account-price {
font-weight: bold;

125
buyer/src/pages/home/memberCenter/Favorites.vue
View File

@@ -1,40 +1,80 @@
<template>
<div class="wrapper">
<card _Title="近期收藏" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" :_Size="16" v-if="!homePage" />
<card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" _More="全部收藏" _Src="/home/Favorites" v-else>
</card>
<div v-if="list.length">
<div v-for="(item, index) in list" :key="index">
<div class="goodsItem" :key="item.skuId">
<div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
<img :src="item.image" />
</div>
<div class="goodsImg hover-pointer" v-else>
<img :src="item.storeLogo" />
</div>
<div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
{{ item.goodsName }}
</div>
<div v-else class="goodsTitle hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
{{ item.storeName }}
<el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
</div>
<div class="goodsPrice">
<span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
<UserCenterLayout
v-if="!homePage"
title="近期收藏"
:tabs="favoriteWay"
:active-tab="activeTabIndex"
@tab-change="change"
>
<div v-if="list.length">
<div v-for="(item, index) in list" :key="index">
<div class="goodsItem" :key="item.skuId">
<div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
<img :src="item.image" />
</div>
<div class="goodsImg hover-pointer" v-else>
<img :src="item.storeLogo" />
</div>
<div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
{{ item.goodsName }}
</div>
<div v-else class="goodsTitle hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
{{ item.storeName }}
<el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
</div>
<div class="goodsPrice">
<span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
</div>
<div class="goodsBuy">
<el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
v-if="params.type === 'GOODS'">立即购买</el-button>
<el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
<el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
<el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
</div>
<div class="goodsBuy">
<el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
v-if="params.type === 'GOODS'">立即购买</el-button>
<el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
<el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
<el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
</div>
</div>
</div>
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
<empty v-else />
<empty v-else />
</UserCenterLayout>
<template v-else>
<card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" _More="全部收藏" _Src="/home/Favorites"></card>
<div v-if="list.length">
<div v-for="(item, index) in list" :key="index">
<div class="goodsItem" :key="item.skuId">
<div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
<img :src="item.image" />
</div>
<div class="goodsImg hover-pointer" v-else>
<img :src="item.storeLogo" />
</div>
<div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
{{ item.goodsName }}
</div>
<div v-else class="goodsTitle hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
{{ item.storeName }}
<el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
</div>
<div class="goodsPrice">
<span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
</div>
<div class="goodsBuy">
<el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
v-if="params.type === 'GOODS'">立即购买</el-button>
<el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
<el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
<el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
</div>
</div>
</div>
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
<empty v-else />
</template>
</div>
</template>
@@ -183,14 +223,15 @@ export default {
.goodsItem {
display: flex;
align-items: center;
height: 60px;
line-height: 60px;
margin-bottom: 10px;
>.goodsImg {
width: 60px;
height: 60px;
overflow: hidden;
flex-shrink: 0;
>img {
width: 100%;
@@ -200,12 +241,15 @@ export default {
>.goodsPrice,
.goodsShop {
width: 150px;
width: 120px;
flex-shrink: 0;
text-align: center;
}
>.goodsTitle {
width: 400px;
flex: 1;
min-width: 0;
line-height: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -213,10 +257,17 @@ export default {
}
.goodsBuy {
margin-left: 80px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
gap: 8px;
width: 170px;
margin-left: 16px;
line-height: normal;
>* {
margin: 0 4px;
:deep(.el-button) {
margin: 0;
}
}

32
buyer/src/pages/home/memberCenter/MemberGrade.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="memberGrade">
<card _Title="我的等级"/>
<UserCenterLayout title="我的等级" :tabs="['我的等级']">
<div class="summary">
<div class="gradeCard">
<div class="gradeLeft">
@@ -24,7 +24,7 @@
</div>
</div>
<el-tabs value="rules">
<el-tabs v-model="activeGradeTab">
<el-tab-pane label="获取经验值方式" name="rules">
<el-table v-loading="rulesLoading" :data="ruleList">
<el-table-column label="获取方式" min-width="720">
@@ -65,17 +65,20 @@
</template>
</el-table-column>
</el-table>
<el-pagination style="float:right;margin-top:10px"
:current-page="params.pageNumber"
:total="experienceLogs.total || 0"
:page-size="params.pageSize"
@current-change="changePage"
@size-change="changePageSize"
:page-sizes="[10, 20, 50]"
small
layout="total, prev, pager, next, jumper"></el-pagination>
<div class="grade-pagination">
<el-pagination
:current-page="params.pageNumber"
:total="experienceLogs.total || 0"
:page-size="params.pageSize"
@current-change="changePage"
@size-change="changePageSize"
:page-sizes="[10, 20, 50]"
layout="total, prev, pager, next, jumper"
/>
</div>
</el-tab-pane>
</el-tabs>
</UserCenterLayout>
</div>
@@ -98,6 +101,7 @@ export default {
currentExperience: 0,
currentGradeId: '',
selectedRuleKey: '',
activeGradeTab: 'rules',
logLoading: false,
gradeLoading: false,
params: {
@@ -405,4 +409,10 @@ h3 {
font-weight: 600;
}
.grade-pagination {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
</style>

3
buyer/src/pages/home/memberCenter/ModifyPwd.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<card _Title="账户安全"/>
<UserCenterLayout title="账户安全" :tabs="['账户安全']">
<!-- 手机号验证 -->
<el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
v-if="(status == 2 || status == 3) && !showPwd">
@@ -69,6 +69,7 @@
<div v-if="showPwd" style="text-align: center;width: 50%">
<el-button type="primary" class="ml_10" @click="setPassword">设置</el-button>
</div>
</UserCenterLayout>
</div>
</template>

29
buyer/src/pages/home/memberCenter/Point.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="point">
<card _Title="我的积分"/>
<UserCenterLayout title="我的积分" :tabs="['我的积分']">
<div class="point-content">
<span>剩余积分：<span>{{ pointObj.point || 0 }}</span></span>
<span>累计获得：<span>{{ pointObj.totalPoint || 0 }}</span></span>
@@ -18,15 +18,18 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination style="float:right;margin-top:10px"
:current-page="params.pageNumber"
:total="logData.total"
:page-size="params.pageSize"
@current-change="changePage"
@size-change="changePageSize"
:page-sizes="[10, 20, 50]"
small
layout="total, prev, pager, next, jumper"></el-pagination>
<div class="point-pagination">
<el-pagination
:current-page="params.pageNumber"
:total="logData.total"
:page-size="params.pageSize"
@current-change="changePage"
@size-change="changePageSize"
:page-sizes="[10, 20, 50]"
layout="total, prev, pager, next, jumper"
/>
</div>
</UserCenterLayout>
</div>
</template>
<script>
@@ -92,4 +95,10 @@ h3 {
}
}
}
.point-pagination {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
</style>

70
buyer/src/pages/home/memberCenter/Profile.vue
View File

@@ -1,26 +1,33 @@
<template>
<div class="wrapper">
<card _Title="用户信息" />
<el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
<el-form-item label="头像">
<el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />
<el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>
<el-upload
:show-upload-list="false"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
<UserCenterLayout title="用户信息" :tabs="['用户信息']">
<el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
<el-form-item label="头像" class="avatar-form-item">
<div class="avatar-upload">
<el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />
<el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>
<el-upload
:show-file-list="false"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
>
<el-button class="mt_10">上传头像</el-button>
</el-upload>
<el-button>上传头像</el-button>
</el-upload>
</div>
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
<el-input class="profile-field" v-model="formItem.nickName" placeholder="" />
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></el-date-picker>
<el-date-picker
class="profile-field"
type="date"
placeholder="选择您的生日"
v-model="formItem.birthday"
/>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="formItem.sex" type="button" button-style="solid">
@@ -32,7 +39,8 @@
<el-button type="primary" @click="save">确认修改</el-button>
</el-form-item>
</el-form>
</el-form>
</UserCenterLayout>
</div>
</template>
@@ -113,5 +121,35 @@ export default {
</script>
<style scoped lang="scss">
.avatar-form-item {
:deep(.el-form-item__label) {
height: 90px;
line-height: 90px;
display: flex;
align-items: center;
}
}
.avatar-upload {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
:deep(.el-avatar) {
margin-top: 10px;
}
:deep(.el-upload) {
display: block;
}
}
.profile-field {
width: 187px;
}
:deep(.profile-field.el-date-editor) {
width: 187px;
}
</style>

49
buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="add-eval">
<div class="title">
<card _Title="订单评价" :_Size="16"></card>
<UserCenterLayout title="订单评价" :tabs="['订单评价']">
<div class="title">
<p>
<span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
<span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
</p>
</div>
</div>
<!-- 物流评分、服务评分 -->
<div class="delivery-rate">
<div class="fontsize_16">物流服务评价：</div>
<div class="color999">
<span>物流评价：<el-rate v-model="form.deliveryScore" /></span>
<span>服务评价：<el-rate v-model="form.serviceScore" /></span>
<span>描述评价：<el-rate v-model="form.descriptionScore" /></span>
<div class="color999 rate-list">
<span class="rate-item">物流评价：<el-rate v-model="form.deliveryScore" /></span>
<span class="rate-item">服务评价：<el-rate v-model="form.serviceScore" /></span>
<span class="rate-item">描述评价：<el-rate v-model="form.descriptionScore" /></span>
</div>
</div>
<!-- 添加订单评价 左侧商品详情 右侧评价框 -->
@@ -26,13 +26,15 @@
</div>
<div class="eval-con">
<div>
<span class="color999">商品评价：</span>
<div class="goods-grade-row">
<span class="color999 goods-grade-label">商品评价：</span>
<el-radio-group v-model="orderGoods.grade">
<el-radio-button value="GOOD">好评</el-radio-button>
<el-radio-button value="MODERATE">中评</el-radio-button>
<el-radio-button value="WORSE">差评</el-radio-button>
</el-radio-group>
</div>
<div>
<el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
</div>
<div style="display:flex;align-items:center;">
@@ -59,10 +61,13 @@
</div>
</li>
</ul>
<el-button type="primary" class="mt_10" :loading="loading" @click="save">发表</el-button>
<div class="submit-row">
<el-button type="primary" :loading="loading" @click="save">发表</el-button>
</div>
<el-dialog title="View Image" v-model="visible">
<img :src="previewImage" v-if="visible" style="width: 100%">
</el-dialog>
</UserCenterLayout>
</div>
</template>
<script>
@@ -188,6 +193,16 @@ export default {
font-weight: bold;
}
}
.rate-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
}
.rate-item {
display: inline-flex;
align-items: center;
}
.goods-eval li{
display: flex;
border-bottom: 1px solid #eee;
@@ -206,6 +221,20 @@ export default {
padding: 20px;
}
}
.goods-grade-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.goods-grade-label {
flex-shrink: 0;
}
.submit-row {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.demo-upload-list{
display: inline-block;

7
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="add-eval">
<div class="title">
<card _Title="评价详情" :_Size="16"></card>
<UserCenterLayout title="评价详情" :tabs="['评价详情']">
<div class="title">
<p>
<span class="color999">创建人：</span><span>{{ $filters.secrecyMobile( orderGoods.createBy ) }}</span>
<span class="color999 ml_20">{{ orderGoods.createTime }}</span>
</p>
</div>
</div>
<!-- 物流评分、服务评分 -->
<div class="delivery-rate">
<div class="fontsize_16">物流服务评价：</div>
@@ -84,6 +84,7 @@
<el-dialog title="View Image" v-model="visible">
<img :src="previewImage" v-if="visible" style="width: 100%" />
</el-dialog>
</UserCenterLayout>
</div>
</template>
<script>

51
buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
View File

@@ -1,8 +1,13 @@
<template>
<div class="msg-list">
<card _Title="我的消息" :_Tabs="status" :_Size="16" @_Change="statusChange"/>
<UserCenterLayout
title="我的消息"
:tabs="status"
:active-tab="activeStatusIndex"
@tab-change="statusChange"
>
<el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
<el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
<el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
<el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
<el-table-column prop="createTime" label="发送时间" align="left" width="240" />
@@ -18,23 +23,24 @@
<el-button type="danger" size="small" @click="removeMessage(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-table v-else :data="messageData.records || []">
</el-table>
<el-table v-else :data="messageData.records || []">
<el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
<el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
<el-table-column prop="createTime" label="发送时间" align="left" width="240" />
</el-table>
<el-pagination
style="float:right;margin-top:10px"
:current-page="params.pageNumber"
:total="messageData.total"
:page-size="params.pageSize"
@current-change="changePage"
@size-change="changePageSize"
:page-sizes="[10, 20, 50]"
small
layout="total, prev, pager, next, jumper"
/>
</el-table>
<div class="msg-pagination">
<el-pagination
:current-page="params.pageNumber"
:total="messageData.total"
:page-size="params.pageSize"
@current-change="changePage"
@size-change="changePageSize"
:page-sizes="[10, 20, 50]"
layout="total, prev, pager, next, jumper"
/>
</div>
</UserCenterLayout>
</div>
</template>
<script>
@@ -51,6 +57,13 @@ export default {
},
}
},
computed: {
activeStatusIndex () {
const map = ['UN_READY', 'ALREADY_READY', 'ALREADY_REMOVE'];
const index = map.indexOf(this.params.status);
return index > -1 ? index : 0;
}
},
methods: {
statusChange (index) {
if (index === 0) { this.params.status = 'UN_READY' }
@@ -103,5 +116,9 @@ export default {
}
</script>
<style lang="scss" scoped>
.msg-pagination {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
</style>

10
buyer/src/pages/home/orderCenter/AddAddress.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<card _Title="收货地址" />
<UserCenterLayout title="收货地址" :tabs="['收货地址']">
<div class="add-box">
<el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
<el-form-item label="收件人" prop="name">
@@ -30,14 +30,13 @@
<el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
<el-button @click="$router.back()">返回</el-button>
</div>
</UserCenterLayout>
<multipleMap ref="map" @callback="getAddress" />
</div>
</template>
<script>
import card from "@/components/card";
import multipleMap from "@/components/map/multiple-map";
import * as RegExp from "@/plugins/RegExp.js";
import {
@@ -85,8 +84,8 @@ export default {
if (this.$route.query.id) {
editMemberAddress(params)
.then((res) => {
this.loading = false;
if (res.success) {
this.loading = false;
this.$router.push("/home/MyAddress");
}
})
@@ -96,8 +95,8 @@ export default {
} else {
newMemberAddress(params)
.then((res) => {
this.loading = false;
if (res.success) {
this.loading = false;
this.$router.push("/home/MyAddress");
}
})
@@ -145,7 +144,6 @@ export default {
if (id) this.getAddrById(id);
},
components: {
card,
multipleMap
},
};

13
buyer/src/pages/home/orderCenter/AfterSale.vue
View File

@@ -1,10 +1,7 @@
<template>
<div class="wrapper">
<!-- 卡片组件 -->
<card _Title="我的售后" :_Size="16"></card>
<!-- 搜索 筛选 -->
<div class="mb_20 box">
<div class="global_float_right">
<UserCenterLayout title="我的售后" :tabs="['我的售后']">
<template #extra>
<el-input
class="width_300"
@@ -13,8 +10,7 @@
@keyup.enter="getList"
placeholder="请输入订单号搜索"
/>
</div>
</div>
</template>
<!-- 列表 -->
<empty v-if="orderList.length === 0"/>
<div class="order-content" v-else>
@@ -76,8 +72,9 @@
<div class="page-size">
<el-pagination :total="total" @current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize" layout="sizes, prev, pager, next"></el-pagination>
:page-size="params.pageSize" layout="sizes, prev, pager, next, jumper"></el-pagination>
</div>
</UserCenterLayout>
<el-dialog v-model="logisticsShow" width="530">
<template #header><p>
<span>提交物流信息</span>

25
buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="order-detail">
<card _Title="售后详情" :_Size="16"></card>
<UserCenterLayout title="售后详情" :tabs="['售后详情']">
<!-- 操作按钮 -->
<el-card class="mb_10" shadow="never" v-if="(afterSale.serviceStatus == 'PASS' &&
afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
@@ -11,8 +11,10 @@
<div class="order-card">
<h3>{{afterSale.serviceName}}</h3>
<p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
<p>售后单号：{{ afterSale.sn }} &nbsp;&nbsp;&nbsp;订单号：{{afterSale.orderSn}}</p>
<div style="color:#999;" class="operation-time">创建时间：{{afterSale.createTime}}</div>
<p class="order-meta">
<span>售后单号：{{ afterSale.sn }} &nbsp;&nbsp;&nbsp;订单号：{{ afterSale.orderSn }}</span>
<span class="order-meta-time">创建时间：{{ afterSale.createTime }}</span>
</p>
<div class="service-after">
<div>
本次售后服务由<span>{{afterSale.storeName}}</span>为您提供
@@ -104,6 +106,7 @@
<el-button type="primary" :loading="submitLoading" @click="submitDelivery">提交</el-button>
</div></template>
</el-dialog>
</UserCenterLayout>
</div>
</template>
<script>
@@ -243,15 +246,21 @@ export default {
color: #999;
margin: 3px;
}
.order-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
.order-meta-time {
flex-shrink: 0;
white-space: nowrap;
}
}
h3 {
font-weight: normal;
font-size: 16px;
}
.operation-time {
position: absolute;
right: 20px;
top: 10px;
}
&:last-child{
border: none;
}

94
buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="apply-after-sale">
<card _Title="申请售后"></card>
<UserCenterLayout title="申请售后" :tabs="['申请售后']">
<el-table :data="goodsData" border>
<el-table-column label="商品名称">
<template #default="{ row }">
@@ -42,26 +42,30 @@
<el-input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
</el-form-item>
<el-form-item label="图片信息">
<div style="display:flex;align-items:center;">
<div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
<img :src="img">
<div class="demo-upload-list-cover">
<el-icon @click="handleView(img)"><View /></el-icon>
<el-icon @click="handleRemove(index)"><Delete /></el-icon>
</div>
</div>
<el-upload
:show-upload-list="false"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
style="display: inline-block;width:58px;">
<div class="hover-pointer icon-upload" style="">
<el-icon :size="20"><Plus /></el-icon>
<div class="upload-section">
<div class="upload-row">
<div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
<img :src="img">
<div class="demo-upload-list-cover">
<el-icon @click="handleView(img)"><View /></el-icon>
<el-icon @click="handleRemove(index)"><Delete /></el-icon>
</div>
</el-upload>
</div>
<el-upload
class="upload-trigger"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
>
<div class="hover-pointer icon-upload">
<el-icon :size="20"><Camera /></el-icon>
</div>
</el-upload>
</div>
<div class="describe">上传售后凭证，最多5张</div>
</div>
</el-form-item>
<el-form-item label="退款方式">
@@ -89,16 +93,17 @@
<img :src="previewImage" v-if="visible" style="width: 100%">
</el-dialog>
</div>
</UserCenterLayout>
</div>
</template>
<script>
import { Delete, Plus, View } from '@element-plus/icons-vue';
import { Camera, Delete, View } from '@element-plus/icons-vue';
import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
import { commonUrl } from '@/plugins/request.js';
import storage from '@/plugins/storage';
import * as RegExp from '@/plugins/RegExp'
export default {
components: { Delete, Plus, View },
components: { Camera, Delete, View },
data () {
const checkNum = (rule, value, callback) => {
if (value === '') {
@@ -228,7 +233,7 @@ export default {
}
}
.demo-upload-list{
display: inline-block;
display: block;
width: 60px;
height: 60px;
text-align: center;
@@ -239,8 +244,7 @@ export default {
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
margin-top: 10px;
flex-shrink: 0;
}
.demo-upload-list img{
width: 100%;
@@ -265,17 +269,43 @@ export default {
margin: 0 2px;
}
.icon-upload {
width: 58px;
height:58px;
line-height: 58px;
text-align:center;
display: inline-block;
border:1px dashed #999;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #999;
border-radius: 4px;
margin-top: 10px;
box-sizing: border-box;
&:hover{
cursor: pointer;
border-color: $theme_color;
}
}
.upload-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.upload-trigger {
display: inline-flex;
align-items: center;
flex-shrink: 0;
:deep(.el-upload) {
display: inline-flex;
align-items: center;
}
}
.describe {
font-size: 12px;
color: #999;
margin-top: 8px;
}
</style>

111
buyer/src/pages/home/orderCenter/Complain.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="add-eval">
<div class="title">
<card _Title="商品投诉" :_Size="16"></card>
<UserCenterLayout title="商品投诉" :tabs="['商品投诉']">
<div class="title">
<p>
<span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
<span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
</p>
</div>
</div>
<div class="goods-eval">
<div class="goods-con">
<img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
@@ -16,41 +16,47 @@
</div>
<div class="eval-con">
<div>
<div class="eval-form">
<span class="color999">投诉主题：</span>
<el-select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
<el-option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</el-option>
</el-select>
<el-input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
</div>
<div style="display:flex;align-items:center;">
<div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
<img :src="img">
<div class="demo-upload-list-cover">
<el-icon @click="handleView(img)"><View /></el-icon>
<el-icon @click="handleRemove(index)"><Delete /></el-icon>
<div class="upload-section">
<div class="upload-row">
<div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
<img :src="img">
<div class="demo-upload-list-cover">
<el-icon @click="handleView(img)"><View /></el-icon>
<el-icon @click="handleRemove(index)"><Delete /></el-icon>
</div>
</div>
</div>
<el-upload
:show-upload-list="false"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
style="display: inline-block;width:58px;">
<div class="hover-pointer icon-upload" style="">
<el-upload
class="upload-trigger"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
>
<div class="hover-pointer icon-upload">
<el-icon :size="20"><Camera /></el-icon>
</div>
</el-upload>
</el-upload>
</div>
<div class="describe">上传投诉凭证，最多5张</div>
</div>
<div class="submit-bar">
<el-button type="primary" :loading="loading" @click="save">提交</el-button>
</div>
</div>
</div>
<el-button type="primary" class="mt_10" :loading="loading" @click="save">提交</el-button>
<el-dialog title="View Image" v-model="visible">
<img :src="previewImage" v-if="visible" style="width: 100%">
</el-dialog>
</UserCenterLayout>
</div>
</template>
<script>
@@ -170,11 +176,18 @@ export default {
.eval-con {
width: 70%;
padding: 20px;
box-sizing: border-box;
}
.eval-form {
:deep(.el-textarea) {
width: 100%;
}
}
}
.demo-upload-list{
display: inline-block;
display: block;
width: 60px;
height: 60px;
text-align: center;
@@ -185,8 +198,7 @@ export default {
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
margin-top: 10px;
flex-shrink: 0;
}
.demo-upload-list img{
width: 100%;
@@ -211,24 +223,53 @@ export default {
margin: 0 2px;
}
.icon-upload {
width: 58px;
height:58px;
line-height: 58px;
text-align:center;
display: inline-block;
border:1px dashed #999;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #999;
border-radius: 4px;
margin-top: 10px;
box-sizing: border-box;
&:hover{
cursor: pointer;
border-color: $theme_color;
}
}
.upload-section {
margin-top: 10px;
}
.upload-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.upload-trigger {
display: inline-flex;
align-items: center;
flex-shrink: 0;
:deep(.el-upload) {
display: inline-flex;
align-items: center;
}
}
.describe{
font-size: 12px;
color: #999;
position:relative;
top: 46px;
left: -60px;
margin-top: 8px;
}
.submit-bar {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
</style>

94
buyer/src/pages/home/orderCenter/MyAddress.vue
View File

@@ -1,39 +1,42 @@
<template>
<div>
<card _Title="收货地址" _More="添加新地址" _Src="/home/addAddress"></card>
<div class="address-box" v-for="(item, index) in list" :key="index">
<div class="address-header">
<span>
{{ item.name }}
<el-tag class="ml_10 default-address-tag" v-if="item.isDefault">默认地址</el-tag>
<el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
</span>
<div class="address-action">
<span @click="edit(item.id)"><el-icon><Edit /></el-icon>修改</span>
<span @click="del(item.id)"><el-icon><Delete /></el-icon>删除</span>
<div class="wrapper">
<UserCenterLayout title="收货地址" :tabs="['收货地址']" more-text="添加新地址" more-to="/home/addAddress">
<template #extra>
<el-button type="primary" @click="add">添加新地址</el-button>
</template>
<div class="address-box" v-for="(item, index) in list" :key="index">
<div class="address-header">
<span>
{{ item.name }}
<el-tag class="ml_10 default-address-tag" v-if="item.isDefault">默认地址</el-tag>
<el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
</span>
<div class="address-action">
<span @click="edit(item.id)"><el-icon><Edit /></el-icon>修改</span>
<span @click="del(item.id)"><el-icon><Delete /></el-icon>删除</span>
</div>
</div>
<div class="address-content">
<p>
<span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
</p>
<p>
<span class="address-content-title">收货地区:</span>{{ $filters.unitAddress(item.consigneeAddressPath) }}
</p>
<p>
<span class="address-content-title">详细地址:</span> {{ item.detail }}
</p>
<p>
<span class="address-content-title">手机号码:</span> {{ item.mobile }}
</p>
</div>
</div>
<div class="address-content">
<p>
<span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
</p>
<p>
<span class="address-content-title">收货地区:</span>{{ $filters.unitAddress(item.consigneeAddressPath) }}
</p>
<p>
<span class="address-content-title">详细地址:</span> {{ item.detail }}
</p>
<p>
<span class="address-content-title">手机号码:</span> {{ item.mobile }}
</p>
</div>
</div>
</UserCenterLayout>
</div>
</template>
<script>
import { Delete, Edit } from '@element-plus/icons-vue';
import card from '@/components/card';
import { memberAddress, delMemberAddress } from '@/api/address.js';
export default {
@@ -46,6 +49,9 @@ export default {
};
},
methods: {
add () {
this.$router.push('/home/addAddress');
},
edit (id) {
// 编辑地址
this.$router.push({ path: '/home/addAddress', query: { id: id } });
@@ -85,11 +91,17 @@ export default {
</script>
<style scoped lang="scss">
.wrapper {
margin-bottom: 40px;
}
.address-box {
padding: 15px;
margin: 15px;
margin: 0;
border-bottom: 1px solid $border_color;
&:last-child {
border-bottom: 0;
}
}
.address-header {
@@ -114,11 +126,23 @@ export default {
}
.address-action span {
margin-left: 15px;
font-size: 14px;
color: $theme_color;
cursor: pointer;
.address-action {
display: flex;
align-items: center;
gap: 15px;
span {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: $theme_color;
cursor: pointer;
.el-icon {
font-size: 14px;
}
}
}
.default-address-tag {

144
buyer/src/pages/home/orderCenter/MyOrder.vue
View File

@@ -1,22 +1,97 @@
<template>
<div class="wrapper">
<!-- 卡片组件 -->
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" v-if="!homePage"></card>
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-else></card>
<!-- 搜索 筛选 -->
<div class="order-search-bar" v-if="!homePage">
<div class="global_float_right">
<el-input
class="width_300"
v-model="params.keywords"
@keyup.enter="getList"
placeholder="请输入订单号搜索"
/>
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-if="homePage"></card>
<UserCenterLayout
v-if="!homePage"
title="我的订单"
:tabs="changeWay"
:active-tab="activeOrderTab"
@tab-change="change"
>
<template #extra>
<div class="order-search">
<el-input
v-model="params.keywords"
@keyup.enter="getList"
placeholder="输入订单号搜索"
/>
<el-button type="primary" @click="getList">搜索</el-button>
</div>
</template>
<!-- 订单列表 -->
<empty v-if="orderList.length === 0" />
<div class="order-content" v-else>
<div
class="order-list"
v-for="(order, onderIndex) in orderList"
:key="onderIndex"
>
<div class="order-header">
<div>
<div>{{ filterOrderStatus(order.orderStatus) }}</div>
<div>
订单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}}
</div>
</div>
<div>
<el-button v-if="order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></el-button>
<span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
</div>
</div>
<div class="order-body">
<div class="goods-list">
<div
v-for="(goods, goodsIndex) in order.orderItems"
:key="goodsIndex"
>
<img
@click="goodsDetail(goods.skuId, goods.goodsId)"
class="hover-color"
:src="goods.image"
alt=""
/>
<div>
<div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
<div class="mt_10">
<span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }} </span>x {{ goods.num }}
<span style="margin-left: 10px;color: #ff9900;">{{refundPriceList(goods.isRefund)}}</span>
</div>
<el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</el-button>
<el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
</div>
</div>
</div>
<div>
<span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
</div>
<div class="order-actions">
<!-- 订单基础操作 -->
<el-button @click="orderDetail(order.sn)" type="warning" size="small">订单详情</el-button>
<el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
<el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
<el-button @click="received(order.sn)" size="small" type="primary" v-if="order.allowOperationVO.rog">确认收货</el-button>
<!-- 售后 -->
<el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
@click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
</div>
</div>
</div>
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
</div>
<!-- 订单列表 -->
<empty v-if="orderList.length === 0" />
<div class="order-content" v-else>
<!-- 分页 -->
<div class="page-size">
<el-pagination :total="total" @current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</UserCenterLayout>
<!-- 个人中心首页订单列表 -->
<empty v-if="homePage && orderList.length === 0" />
<div class="order-content" v-else-if="homePage">
<div
class="order-list"
v-for="(order, onderIndex) in orderList"
@@ -74,12 +149,6 @@
</div>
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
<!-- 分页 -->
<div class="page-size" v-if="!homePage">
<el-pagination :total="total" @current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
</div>
<!-- 选择售后商品 -->
<el-dialog v-model="afterSaleModal" title="请选择申请售后的商品">
<div>
@@ -135,6 +204,7 @@ export default {
// 状态数组
orderStatusList,
changeWay: ['全部订单', '待付款', '待收货', '已完成'], // 订单状态
activeOrderTab: 0,
total: 0, // 数据总数
spinShow: false, // 加载状态
afterSaleModal: false, // 选择售后商品模态框
@@ -173,6 +243,8 @@ export default {
},
// 切换订单状态
change (index) {
this.activeOrderTab = index;
this.params.pageNumber = 1;
switch (index) {
case 0:
this.params.tag = 'ALL'
@@ -306,14 +378,30 @@ export default {
.wrapper {
margin-bottom: 40px;
}
.order-search-bar {
margin-top: 16px;
margin-bottom: 16px;
overflow: hidden;
.order-search {
display: flex;
align-items: center;
width: 330px;
:deep(.el-input) {
flex: 1;
}
:deep(.el-button) {
margin-left: 8px;
}
}
.order-content {
padding-top: 14px;
}
.page-size {
margin: 15px 0px;
text-align: right;
margin: 15px 0;
display: flex;
justify-content: flex-end;
:deep(.el-pagination) {
justify-content: flex-end;
}
}
/** 订单列表 */
.order-list {

3
buyer/src/pages/home/orderCenter/OrderDetail.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="order-detail" v-if="order.order">
<card _Title="订单详情" :_Size="16"></card>
<UserCenterLayout title="订单详情" :tabs="['订单详情']">
<el-card
class="mb_10"
shadow="never"
@@ -317,6 +317,7 @@
<el-button @click="logisticsModal = false">取消</el-button>
</div></template>
</el-dialog>
</UserCenterLayout>
</div>
</template>

40
buyer/src/pages/home/userCenter/Coupons.vue
View File

@@ -1,8 +1,13 @@
<template>
<div class="wrapper">
<card _Title="优惠券列表" :_Tabs="statusNameList" @_Change="change" />
<empty v-if="list.length == 0" />
<ul class="coupon-list" v-else>
<UserCenterLayout
title="优惠券列表"
:tabs="statusNameList"
:active-tab="activeStatusIndex"
@tab-change="change"
>
<empty v-if="list.length == 0" />
<ul class="coupon-list" v-else>
<li v-for="(item, index) in list" class="coupon-item" :key="index">
<div class="c-left">
<div>
@@ -29,14 +34,18 @@
<i class="circle-top"></i>
<i class="circle-bottom"></i>
</li>
</ul>
<el-pagination :total="total"
@current-change="changePageNum"
class="pageration"
@size-change="changePageSize"
:page-size="params.pageSize"
layout="total, sizes, prev, pager, next"></el-pagination>
<el-skeleton v-if="loading" fix></el-skeleton>
</ul>
<div class="pageration">
<el-pagination
:total="total"
@current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
<el-skeleton v-if="loading" fix></el-skeleton>
</UserCenterLayout>
</div>
</template>
@@ -64,6 +73,12 @@ export default {
list: [], // 优惠券列表
};
},
computed: {
activeStatusIndex() {
const index = this.statusList.indexOf(this.params.memberCouponStatus);
return index > -1 ? index : 0;
},
},
methods: {
getList() {
// 获取优惠券列表
@@ -204,6 +219,7 @@ export default {
}
.pageration {
text-align: right;
display: flex;
justify-content: flex-end;
}
</style>

32
buyer/src/pages/home/userCenter/MoneyManagement.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<card _Title="资金管理"/>
<UserCenterLayout title="资金管理" :tabs="['资金管理']">
<div class="box">
<div class="mb_20 account-price">
@@ -90,7 +90,7 @@
<!-- 余额日志 -->
<el-tabs v-model="activeWalletTab" @tab-click="(tab) => tabPaneChange(tab.paneName)">
<el-tab-pane label="余额日志" name="log">
<el-table :data="logColumnsData.records || []">
<el-table ref="logTable" :data="logColumnsData.records || []">
<el-table-column prop="createTime" label="时间" width="190" />
<el-table-column label="金额" width="180">
<template #default="{ row }">
@@ -106,15 +106,14 @@
:page-size="walletForm.pageSize"
:page-sizes="[10, 20, 50]"
:total="logColumnsData.total"
small
@current-change="changePage"
@size-change="changePageSize"
layout="total, sizes, prev, pager, next"></el-pagination>
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</el-tab-pane>
<!-- 充值记录 -->
<el-tab-pane label="充值记录" name="recharge">
<el-table :data="rechargeListData.records || []">
<el-table ref="rechargeTable" :data="rechargeListData.records || []">
<el-table-column prop="createTime" label="充值时间" width="168" />
<el-table-column prop="rechargeSn" label="支付单号" width="200" />
<el-table-column label="充值金额">
@@ -145,15 +144,14 @@
:page-size="rechargeForm.pageSize"
:page-sizes="[10, 20, 50]"
:total="rechargeListData.total"
small
@current-change="rechargeChangePage"
@size-change="rechargeChangePageSize"
layout="total, sizes, prev, pager, next"></el-pagination>
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="提现记录" name="withdrawApply">
<el-table :data="withdrawApplyColumnsListData.records || []">
<el-table ref="withdrawTable" :data="withdrawApplyColumnsListData.records || []">
<el-table-column prop="createTime" label="申请时间" width="168" />
<el-table-column prop="sn" label="提现单号" width="200" />
<el-table-column label="提现金额" width="110">
@@ -180,13 +178,13 @@
:page-size="withdrawApplyForm.pageSize"
:page-sizes="[10, 20, 50]"
:total="withdrawApplyColumnsListData.total"
small
@current-change="withdrawChangePage"
@size-change="withdrawChangePageSize"
layout="total, sizes, prev, pager, next"></el-pagination>
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</UserCenterLayout>
</div>
</template>
@@ -281,6 +279,7 @@ export default {
getDepositLog(this.walletForm).then((res) => {
if (res.message === 'success') {
this.logColumnsData = res.result;
this.refreshActiveTableLayout();
}
});
},
@@ -297,12 +296,14 @@ export default {
if (v === 'withdrawApply') {
this.getWithdrawApplyData();
}
this.refreshActiveTableLayout();
},
// 充值记录
getRechargeData() {
getRecharge(this.rechargeForm).then((res) => {
if (res.message === 'success') {
this.rechargeListData = res.result;
this.refreshActiveTableLayout();
}
});
},
@@ -311,9 +312,20 @@ export default {
getWithdrawApply(this.withdrawApplyForm).then((res) => {
if (res.message === 'success') {
this.withdrawApplyColumnsListData = res.result;
this.refreshActiveTableLayout();
}
});
},
refreshActiveTableLayout() {
this.$nextTick(() => {
const tableMap = {
log: this.$refs.logTable,
recharge: this.$refs.rechargeTable,
withdrawApply: this.$refs.withdrawTable
};
tableMap[this.activeWalletTab]?.doLayout?.();
});
},
// 余额日志
changePage(v) {
this.walletForm.pageNumber = v;

9
buyer/src/pages/home/userCenter/MyGiftCards.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="wrapper my-gift-cards">
<card _Title="我的礼品卡" />
<UserCenterLayout title="我的礼品卡" :tabs="['我的礼品卡']">
<div class="bind-section mb_20">
<div class="section-title">兑换礼品卡</div>
@@ -77,10 +77,9 @@
:page-size="params.pageSize"
:page-sizes="[10, 20, 50]"
:total="total"
small
@current-change="changePage"
@size-change="changePageSize"
layout="total, sizes, prev, pager, next" />
layout="total, sizes, prev, pager, next, jumper" />
</div>
<el-dialog v-model="noticeModal" title="使用须知" footer-hide width="520">
@@ -90,6 +89,7 @@
<div class="gcc-notice-footer">
<el-button type="primary" @click="noticeModal = false">我知道了</el-button>
</div></el-dialog>
</UserCenterLayout>
</div>
</template>
@@ -441,8 +441,9 @@ export default {
background: #f7f7f7;
}
.page-size {
display: flex;
justify-content: flex-end;
margin-top: 20px;
text-align: right;
}
}
.gcc-notice-text {

10
buyer/src/pages/home/userCenter/MyTracks.vue
View File

@@ -1,8 +1,9 @@
<template>
<div class="wrapper">
<!-- 卡片组件 -->
<card _Title="我的足迹" :_Size="16"></card>
<el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
<UserCenterLayout title="我的足迹" :tabs="['我的足迹']">
<template #extra>
<el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
</template>
<!-- 订单列表 -->
<empty v-if="list.length === 0" />
<ul class="track-list" v-else>
@@ -25,8 +26,9 @@
@current-change="changePageNum"
@size-change="changePageSize"
:page-size="params.pageSize"
layout="sizes, prev, pager, next"></el-pagination>
layout="sizes, prev, pager, next, jumper"></el-pagination>
</div>
</UserCenterLayout>
</div>
</template>