zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 新增im接口权限失效判定，优化买家显示样式以及卖家样式。

master
学习很差啦 2023-02-17 11:28:26 +08:00
parent 5d24dda4c1
commit 674c2352ef
8 changed files with 207 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
im/src/assets/css/global.less
View File

@ -6,6 +6,9 @@
-ms-user-select: none;
user-select: none;
}
.main-color{
color: #508afe;
}
.no-padding {
padding: 0;

9
im/src/components/chat/panel/OtherLink.vue
View File

@ -275,4 +275,13 @@ export default {
/deep/.el-tabs__nav-scroll{
min-width: 362px;
}
/deep/ .el-tabs__item{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/deep/ .el-tabs__header{
margin-bottom: 0;
}
</style>

82
im/src/components/chat/panel/TalkPanel.vue
View File

@ -98,22 +98,29 @@
<a> 订单号:{{ item.text.sn }} </a>
</el-tooltip>
</div>
<div class="baseTwo">
<img :src="item.text.groupImages" style="height: 100px;width: 100px;margin-top: 10px;" />
<div class="goods-shared-box">
<div>
<img :src="item.text.groupImages" style="height: 100px;width: 100px;" />
</div>
<div class="shared-goods">
<span class="orderGoodsName">{{ item.text.groupName }}</span>
<span class="orderGoodsTime">{{ item.text.paymentTime }}</span>
<div class="orderGoodsTime">{{ item.text.paymentTime }}</div>
<span class="orderFlowPrice">
订单金额：{{ item.text.flowPrice | unitPrice('￥') }}
</span>
<span class="order_status"
:style="{ 'color': item.text.orderStatus == 'CANCELLED' || item.text.orderStatus == 'UNPAID' || item.text.orderStatus == ' TAKE' ? '#5a606b' : '#f23030' }">{{
item.text.orderStatus == 'CANCELLED' ? '已取消' : item.text.orderStatus == 'UNPAID' ? '未付款' :
item.text.orderStatus ==
'PAID' ? '已付款' : item.text.orderStatus == 'UNDELIVERED' ? '待发货' : item.text.orderStatus ==
'DELIVERED'
? '已发货' : item.text.orderStatus == ' COMPLETED' ? '已完成' : item.text.orderStatus == ' TAKE' ?
'待校验' : ''
}}</span>
订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span>
</span>
<div class="order-status">
<el-tag
size="mini"
:type="item.text.orderStatus == 'CANCELLED' || item.text.orderStatus == 'UNPAID' || item.text.orderStatus == ' TAKE' ? 'info' : 'danger'">{{
item.text.orderStatus == 'CANCELLED' ? '已取消' : item.text.orderStatus == 'UNPAID' ? '未付款' :
item.text.orderStatus ==
'PAID' ? '已付款' : item.text.orderStatus == 'UNDELIVERED' ? '待发货' : item.text.orderStatus ==
'DELIVERED'
? '已发货' : item.text.orderStatus == ' COMPLETED' ? '已完成' : item.text.orderStatus == ' TAKE' ?
'待校验' : ''
}}</el-tag>
</div>
</div>
</div>
</div>
</div>
@ -841,25 +848,18 @@ export default {
};
</script>
<style lang="less" scoped>
.order_status {
height: 30px;
width: 60px;
background: #ffeded;
margin-right: 20px;
text-align: center;
line-height: 25px;
margin-left: 15px;
border-radius: 10px;
}
.oderStyle {
border: 1px solid #f2f2f2;
width: 330px;
border-radius: 4px;
padding: 8px;
.oedersn {
margin: 10px 0 10px 5px;
margin: 10px 0 10px 0;
width: 300px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -867,6 +867,7 @@ export default {
}
.goodsStyle {
cursor: pointer;
border: 1px solid #f2f2f2;
width: 300px;
height: 120px;
@ -893,7 +894,7 @@ export default {
}
.price {
color: #999;
color: red;
margin-top: 20px;
}
@ -913,21 +914,24 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
position: absolute;
margin-top: 10px;
margin-left: 10px;
font-size: 14px;
}
.orderGoodsTime {
margin-left: 10px;
font-size: 12px;
color: #999;
position: absolute;
margin-top: 70px;
}
.orderFlowPrice {
color: #999;
margin-bottom: 20px;
font-size: 12px;
>span{
color: red;
font-size: 18px;
}
}
.main-box {
@ -1242,4 +1246,16 @@ export default {
line-height: 25px;
}
}
.goods-shared-box{
display: flex;
>.shared-goods{
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.order-status{
text-align: right;
}
</style>

171
im/src/components/chat/panel/template/footPrint.vue
View File

@ -1,33 +1,29 @@
<template>
<div class="box" @scroll="scrollBottom">
<div class="box" :style="{height:toUser.storeFlag ? '858px' : '815px'}" @scroll="scrollBottom">
<div class="tab">
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
<el-tab-pane label="最近浏览" name="goods">
<dl>
<dd v-for="item in list" v-infinite-scroll="loadMore">
<dd :key="index" @click="linkToGoods(item.goodsId, item.id)" v-for="(item,index) in list" v-infinite-scroll="loadMore">
<div class="base">
<div>
<img style="width: 60px; height: 60px;margin-left: 40px;box-sizing: border-box;" :src="item.thumbnail"
<img style="width: 60px; height: 60px;margin-left:20px;box-sizing: border-box;" :src="item.thumbnail"
class="image" />
</div>
<div class="recent_views">
<el-tooltip class="item" effect="dark" :content="item.goodsName" placement="top-start">
<a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
</el-tooltip>
<a class="goods_name">{{ item.goodsName }}</a>
<div style="display: flex;">
<div style="margin-top: 20px;">
<span style="color: red;">{{ item.price | unitPrice("￥") }}</span>
<span class='goods-price'>{{ item.price | unitPrice("￥") }}</span>
<div class="goods_store_button">
<el-button type="danger" v-if="item.btnHide == 1 && toUser.storeFlag" size="mini"
@click="submitSendGoodsMessage(item)" plain>发送</el-button>
</div>
</div>
</div>
</div>
<div class="review"> <el-button v-if="item.btnHide == 1 && toUser.storeFlag" size="mini"
@click.stop="submitSendGoodsMessage(item)" plain>发送</el-button></div>
</div>
<div class="Underline"></div>
</dd>
</dl>
@ -35,25 +31,23 @@
<el-tab-pane label="订单列表" name="orders">
<dl>
<dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
<div class="orderlist">
<div class="order_top order_padding">
<span class="order_sn" @click="linkToOrders(item.sn)">订单号:{{ item.sn }}</span>
<div class="order-list">
<div class="order-top order-padding">
<span class="order-sn" @click="linkToOrders(item.sn)">订单号:{{ item.sn }}</span>
</div>
<div class="order_section order_padding">
<div class="order-section order-padding">
<img :src="item.groupImages" alt="">
<el-tooltip class="item" effect="dark" :content="item.groupName" placement="top-start">
<span class="orderGoodsName" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
</el-tooltip>
<div class="orderBtn ">
<el-button type="danger" class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag"
<span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
<div class="order-btn ">
<el-button class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag"
size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
</div>
</div>
<div class="order_footer order_padding">
<div class="order-footer order-padding">
<span> 订单金额： <span style="color: red;">{{
item.orderItems[0].goodsPrice | unitPrice("￥")
}}</span></span>
<el-tag :type="col[item.orderStatus]">{{
<el-tag size='mini' :type="col[item.orderStatus]">{{
item.orderStatus == 'STAY_PICKED_UP' ? '待自提'
: item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus
==
@ -64,7 +58,7 @@
</div>
</div>
<div class="Underline"></div>
</dd>
</dl>
</el-tab-pane>
@ -192,29 +186,15 @@ export default {
</script>
<style scoped lang="less">
.order_status {
height: 25px;
width: 60px;
background: #ffeded;
margin-right: 20px;
text-align: center;
line-height: 25px;
}
.Underline {
border: 1px solid silver;
// width: 90%;
margin: 0 auto;
}
.recent_views {
margin-left: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 232px;
width: 200px;
}
.box {
max-width: 362px;
@ -248,53 +228,44 @@ export default {
}
}
.Underline {
// border: 5px solid red;
}
.orderlist {
max-width: 352px;
.order-list {
padding: 9px;
transition: 0.35s;
cursor: pointer;
margin-bottom: 10px;
background: #fff;
color: #5a606b;
box-sizing: border-box;
}
.box::-webkit-scrollbar {
width: 0px !important;
}
.order_top {
border-bottom: 1px solid #f2f2f2;
.order_sn {}
}
.order_section {
border-bottom: 1px solid #f2f2f2;
height: 100px;
.order-section {
margin: 10px 0;
font-size: 12px;
img {
width: 60px;
height: 60px;
margin-top: 20px;
}
}
.order_footer {
border-bottom: 1px solid #f2f2f2;
.order-footer {
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.orderGoodsName {
.order-goods-name {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
margin-left: 10px;
margin-top: 10px;
font-weight: 500;
}
@ -304,18 +275,19 @@ export default {
white-space: nowrap
}
.orderBtn {
.order-btn {
display: flex;
justify-content: flex-end;
margin-right: 15px;
position: relative;
bottom: 55px;
}
.goods_name {
transition: .35s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
white-space: nowrap;
font-size:12px;
}
/deep/ .el-tabs__header {
@ -326,18 +298,6 @@ export default {
z-index: 2;
background: #ffffff;
}
// /deep/ .el-tabs__item.is-top:last-child {
// color: black;
// }
/deep/.is-active {
color: #f23030;
}
/deep/.el-tabs__active-bar {
background-color: #f23030;
}
/deep/ .el-tabs__nav.is-top {
height: 50px;
}
@ -351,54 +311,61 @@ export default {
/deep/.el-tabs__content {
margin-top: 50px;
}
/deep/ .el-tabs{
width: 100%;
}
.box {
height: 700px;
overflow: auto;
// margin-top: 50px;
// width: 350px;
}
.order_padding {
.order-padding {
padding: 0 10px;
}
.store-button {
background-color: white;
border-color: #F56C6C;
margin-top: 10px;
}
.goods_store_button {
display: inline;
background-color: white;
border-color: #F56C6C;
position: absolute;
left: 70%;
}
.base {
margin-top: 5px;
padding: 8px;
cursor: pointer;
transition: .35s;
height: 80px;
display: flex;
.price {
color: red;
margin-top: 15px;
}
.image {
height: 100px;
margin-top: 3px;
width: 100px;
}
>.review{
font-size: 12px;
display: flex;
align-items: center;
transition: 0.35s;
opacity: 0;
}
}
.base:hover,.order-list:hover{
background: #ededed;
padding-left: 14px;
>.review{
opacity: 1;
}
}
.goods-price{
transition: .35s;
font-size: 14px;
color:#f23030;
}
.separate {
margin-top: 8px;
}
.order-sn{
font-size: 12px;
}
// .el-tabs--card {
// height: calc(100vh - 110px);
// overflow-y: auto;

7
im/src/components/chat/panel/template/goodsLink.vue
View File

@ -1,5 +1,5 @@
<template>
<div style="max-width: 362px;">
<div class="current-preview">
当前浏览
<div class="base">
<div>
@ -16,7 +16,6 @@
</div>
</div>
</div>
<hr class="separate" />
</div>
</template>
@ -40,6 +39,7 @@ export default {
}),
},
mounted () {
console.log(this.goodsDetail)
this.btnHide = localStorage.getItem('btnHide')
},
components: {
@ -151,6 +151,9 @@ export default {
background-color: white;
border-color: #F56C6C;
}
.current-preview{
padding: 16px;
}
.base {
margin-top: 5px;

57
im/src/components/chat/panel/template/storeDetail.vue
View File

@ -4,31 +4,33 @@
<div>
<img :src="storeInfo.storeLogo" class="image" />
</div>
<div style="margin-left: 13px">
<div class="store-detail">
<div>
<div class="div-zoom">
<span class="title_left_name"> 店铺名称：</span> <span class="title_right_name">{{ storeInfo.storeName }}</span>
<span class="title_left_name"> 店铺名称:</span> <span class="title_right_name">{{ storeInfo.storeName }}</span>
<el-tag style="margin-left: 10px;" type="danger" v-if="storeInfo.selfOperated" size="mini">自营</el-tag>
</div>
<div>
<span class="title_left_name"> 联系方式:</span> <span class="title_right_name">{{ storeInfo.memberName }}</span>
</div>
</div>
<div>
<el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini"
<el-button class="store-button" @click="linkToStore(storeInfo.id)" size="mini"
plain>进入店铺</el-button>
</div>
</div>
</div>
<hr class="separate" />
<div class="separate">店铺评分: <el-rate v-model="storeInfo.serviceScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="separate">服务评分: <el-rate v-model="storeInfo.descriptionScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="separate">物流评分: <el-rate v-model="storeInfo.deliveryScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="wrapper">
<div class="separate">店铺评分: <el-rate v-model="storeInfo.serviceScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="separate">服务评分: <el-rate v-model="storeInfo.descriptionScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="separate">物流评分: <el-rate v-model="storeInfo.deliveryScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
</div>
</div>
</template>
@ -59,33 +61,40 @@ export default {
</script>
<style scoped lang="less">
.wrapper{
padding: 16px;
border-top: 1px solid #f5eeee;
}
.title_left_name {
font-size: 12px;
color: #a1a6af;
color: #999;
}
.title_right_name {
font-size: 12px;
color: #343036;
}
.store-button {
background-color: white;
border-color: #F56C6C;
}
.store-detail{
margin-left: 13px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.base {
padding: 16px;
margin-top: 5px;
height: 120px;
display: flex;
div {
margin-top: 8px;
}
.image {
height: 100px;
margin-top: 3px;
width: 100px
}
@ -96,6 +105,8 @@ export default {
// display: inline;
display: flex;
font-size: 12px;
align-items: center;
color: #a1a6af;
}
</style>

38
im/src/utils/request.js
View File

@ -2,7 +2,7 @@ import axios from "axios";
import config from "@/config/config";
import { getToken, removeAll } from "@/utils/auth";
import { Notification } from "element-ui";
import { Notification, MessageBox } from "element-ui";
import qs from "qs";
// 创建 axios 实例
@ -20,15 +20,46 @@ const request = axios.create({
* @param {*} error
*/
const errorHandler = (error) => {
console.log(error);
// 判断是否是响应错误信息
if (error.response) {
if (error.response.status == 401) {
removeAll();
location.reload();
} else {
} else if (error.response.status == 403) {
/**
* 403提示将重新从商家移动端进入当前页面
*/
MessageBox("当前登录已失效，请从商家管理后台重新登录。", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnPressEscape: false,
closeOnClickModal: false,
type: "warning",
})
.then(() => {
window.close();
Notification({
title:"登录失效提示",
message: "请手动关闭当前页面",
type:"error",
position: "top-right",
});
})
.catch(() => {
Notification({
title:"登录失效提示",
message: "请手动关闭当前页面",
type:"error",
position: "top-right",
});
});
} else if(error.response.status == 400){
Notification({
message: "网络异常,请稍后再试...",
message: error.response.data.message,
position: "top-right",
type:"error",
});
}
}
@ -39,6 +70,7 @@ const errorHandler = (error) => {
// 请求拦截器
request.interceptors.request.use((config) => {
const token = getToken();
if (token) {
config.headers["accessToken"] = `${token}`;
return config;

4
im/src/views/message/index.vue
View File

@ -653,7 +653,9 @@ export default {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden;
}
.user-status{
margin-left: 10px;
}
.aside-box {
position: relative;
border-right: 1px solid rgb(245, 245, 245);