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

- 在 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

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 {

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;

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>

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>

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;

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;
}
}

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>

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>

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>

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>

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;

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>

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>