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; -ms-user-select: none;
user-select: none; user-select: none;
} }
.main-color{
color: #508afe;
}
.no-padding { .no-padding {
padding: 0; padding: 0;

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

@ -275,4 +275,13 @@ export default {
/deep/.el-tabs__nav-scroll{ /deep/.el-tabs__nav-scroll{
min-width: 362px; 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> </style>

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

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

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

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

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

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

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

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

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

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

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

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