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

Merge branch 'vue3' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui into vue3

Browse Source
This commit is contained in:
chc
2026-07-06 14:48:47 +08:00
parent fc5fb3832d bd9a5f75b0
commit 235362d5b0
84 changed files with 2455 additions and 1235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
buyer/src/App.vue
View File

@@ -46,10 +46,14 @@ export default {
getSite() {
getBaseSite().then((res) => {
if (res.success && res.result.settingValue) {
try {
const data = JSON.parse(res.result.settingValue);
this.applySiteInfo(data);
} catch {
// 站点配置解析失败时使用缓存
}
});
}
}).catch(() => {});
},
},
};

3
buyer/src/api/account.js
View File

@@ -44,7 +44,8 @@ export function editMemberInfo (params) {
url: '/buyer/passport/member/editOwn',
method: Method.PUT,
needToken: true,
data: params
data: params,
loading: false
})
}

9
buyer/src/api/address.js
View File

@@ -17,7 +17,8 @@ export function newMemberAddress (params) {
url: '/buyer/member/address',
needToken: true,
method: Method.POST,
data: params
data: params,
loading: false
});
}
@@ -27,7 +28,8 @@ export function editMemberAddress (params) {
url: '/buyer/member/address',
needToken: true,
method: Method.PUT,
params
params,
loading: false
});
}
@@ -36,7 +38,8 @@ export function delMemberAddress (id) {
return request({
url: `/buyer/member/address/delById/${id}`,
needToken: true,
method: Method.DELETE
method: Method.DELETE,
loading: false
});
}

3
buyer/src/api/cart.js
View File

@@ -20,7 +20,8 @@ export function cartGoodsAll () {
return request({
url: '/buyer/trade/carts/all',
method: Method.GET,
needToken: true
needToken: true,
loading: false
});
}

3
buyer/src/api/common.js
View File

@@ -38,7 +38,8 @@ export function getRegion (id) {
return request({
url: `${commonUrl}/common/common/region/item/${id}`,
needToken: true,
method: Method.GET
method: Method.GET,
loading: false
});
}

2
buyer/src/api/goods.js
View File

@@ -8,6 +8,7 @@ export function goodsList (params) {
url: '/buyer/goods/goods/es',
method: Method.GET,
needToken: false,
optionalToken: true,
params
});
}
@@ -18,6 +19,7 @@ export function filterList (params) {
url: '/buyer/goods/goods/es/related',
method: Method.GET,
needToken: false,
optionalToken: true,
params
});
}

3
buyer/src/api/member.js
View File

@@ -298,7 +298,8 @@ export function cancelAfterSale (afterSaleSn) {
return request({
url: `/buyer/order/afterSale/cancel/${afterSaleSn}`,
method: Method.POST,
needToken: true
needToken: true,
loading: false
});
}

16
buyer/src/components/Search.vue
View File

@@ -128,10 +128,14 @@ export default {
},
computed: {
promotionTags() {
if (this.$store.state.hotWordsList) {
return JSON.parse(this.$store.state.hotWordsList)
} else {
return []
const raw = this.$store.state.hotWordsList;
if (!raw) {
return [];
}
try {
return typeof raw === "string" ? JSON.parse(raw) : raw;
} catch {
return [];
}
}
},
@@ -145,12 +149,12 @@ export default {
if (!reloadTime) {
hotWords({count: 5}).then(res => {
if (res.success && res.result) storage.setItem('hotWordsList', res.result)
})
}).catch(() => {})
storage.setItem('hotWordsReloadTime', new Date().getTime())
} else if (reloadTime && time > reloadTime) {
hotWords({count: 5}).then(res => {
if (res.success && res.result) storage.setItem('hotWordsList', res.result)
})
}).catch(() => {})
storage.setItem('hotWordsReloadTime', new Date().getTime())
}
}

2
buyer/src/components/advertising/FixedTop.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- 头部广告 -->
<div class="advertising" v-if="show" :style="{'background-color': data.bgColor}">
<div class="advertising" v-if="show && data" :style="{'background-color': data.bgColor}">
<img :src="data.img" class="hover-pointer" @click="linkTo(data.url)"/>
<el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
</div>

2
buyer/src/components/global.js
View File

@@ -6,6 +6,7 @@ import Footer from "@/components/footer/Footer.vue";
import Search from "@/components/Search.vue";
import card from "@/components/card/index.vue";
import cateNav from "@/components/nav/CateNav.vue";
import UserCenterLayout from "@/components/userCenter/Layout.vue";
export function registerGlobalComponents(app) {
app.component("empty", empty);
@@ -15,5 +16,6 @@ export function registerGlobalComponents(app) {
app.component("BaseFooter", Footer);
app.component("Search", Search);
app.component("card", card);
app.component("UserCenterLayout", UserCenterLayout);
app.component("cateNav", cateNav);
}

38
buyer/src/components/header/Header.vue
View File

@@ -29,7 +29,7 @@
</div>
<transition name='fade'>
<ul class="drop-items">
<li @click="goUserCenter('/home')">我的主页</li>
<li @click="goUserCenter('/home/MyOrder')">我的主页</li>
<li @click="goUserCenter('/home/Coupons')">优惠券</li>
<li @click="goUserCenter('/home/Favorites')">我的收藏</li>
<li @click="signOutFun">退出登录</li>
@@ -40,14 +40,17 @@
<li @click="goUserCenter('/home/MyOrder')"><span class="nav-item">我的订单</span></li>
<li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
<li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
<li v-if="$route.name !== 'Cart'" style="position:relative;">
<el-dropdown placement="bottom-start" trigger="hover" @visible-change="handleCartDropdownVisible">
<router-link to="/cart" target="_blank">
<span class="nav-item">
<li v-if="$route.name !== 'Cart'" class="cart-nav-item">
<el-dropdown
class="cart-nav-dropdown"
placement="bottom-start"
trigger="hover"
@visible-change="handleCartDropdownVisible"
>
<span class="nav-item" @click="goToPay">
<el-icon :size="18"><ShoppingCart /></el-icon>
购物车（{{ cartNum < 100 ? cartNum : '99' }}）
</span>
</router-link>
<template #dropdown>
<div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
<el-icon class="cart-null-icon"><ShoppingCart /></el-icon>
@@ -128,7 +131,7 @@ export default {
},
myInfo() { // 跳转会员中心
let url = this.$router.resolve({
path: '/home'
path: '/home/MyOrder'
});
window.open(url.href, '_blank');
},
@@ -258,6 +261,27 @@ export default {
.nav-item {
padding-left: 20px;
gap: 4px;
}
.cart-nav-item {
:deep(.cart-nav-dropdown),
:deep(.el-dropdown) {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 36px;
}
:deep(.el-tooltip__trigger),
:deep(.el-dropdown-selfdefine),
:deep([aria-expanded="true"]) {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
}
.location a {

4
buyer/src/components/indexDecorate/ModelFormItem.vue
View File

@@ -229,11 +229,11 @@ export default {
.advert-list {
width: 100%;
margin: 0;
padding: 5px 0;
padding: 10px;
list-style: none;
box-sizing: border-box;
background: $theme_color;
height: 200px;
height: 210px;
display: flex;
gap: 10px;
align-items: center;

68
buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
View File

@@ -57,13 +57,15 @@
class="hover-pointer"
@click="linkTo(item.url)"
>
<div class="img-wrap">
<img :src="item.img" alt="" />
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
</div>
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
</div>
</div>
</div>
</div>
@@ -220,42 +222,37 @@ export default {
flex-direction: column;
align-items: center;
overflow: hidden;
img {
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
.img-wrap {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
line-height: 16px;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
:nth-child(3) {
color: $theme_color;
margin-top: 2px;
line-height: 1.2;
flex-shrink: 0;
}
.jiaobiao {
position: absolute;
width: 23px;
height: 23px;
top: 6px;
right: 6px;
background: url(../../../assets/images/festival_icon.png);
top: 0;
right: 0;
margin: 0;
padding: 0;
max-height: none;
overflow: visible;
display: block;
background: url(../../../assets/images/festival_icon.png) no-repeat;
color: #fff;
text-align: center;
line-height: 23px;
font-size: 12px;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
.jiaobiao1,
.jiaobiao4 {
@@ -270,6 +267,25 @@ export default {
background-position: -60px -30px;
}
}
> p:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
line-height: 16px;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
> p:nth-child(3) {
color: $theme_color;
margin-top: 2px;
line-height: 1.2;
flex-shrink: 0;
}
}
> div:nth-child(3n) {
border-right: none;
}

16
buyer/src/components/indexDecorate/modelList/Recommend.vue
View File

@@ -83,12 +83,17 @@ export default {
width: 595px;
.content-left {
display: flex;
align-items: stretch;
padding-top: 10px;
font-size: 12px;
box-sizing: content-box;
> div:nth-child(1) {
width: 189px;
border-right: 1px solid #eee;
height: 360px;
display: flex;
flex-direction: column;
box-sizing: border-box;
img {
margin: 40px 0 0 15px;
}
@@ -106,15 +111,20 @@ export default {
color: #999;
}
.view-btn {
margin-left: 15px;
margin-top: 10px;
align-self: center;
width: 145px;
margin-top: auto;
margin-bottom: 15px;
color: #fff;
}
}
> div:nth-child(2) {
width: 405px;
height: 360px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
box-sizing: border-box;
> div {
display: flex;
align-items: center;
@@ -145,7 +155,7 @@ export default {
grid-template-rows: repeat(2, 1fr);
height: 360px;
padding-top: 10px;
box-sizing: border-box;
box-sizing: content-box;
> div {
width: 100%;

38
buyer/src/components/indexDecorate/modelList/forYour.vue
View File

@@ -2,14 +2,14 @@
<div class="model" v-if="data">
<div class="for-your">{{ data.options.title }}</div>
<div class="flex card">
<div class="left">
<div class="left hover-pointer" @click="linkTo(data.options.data.image.url)">
<img :src="data.options.data.image.src" alt="" />
</div>
<div class="right flex">
<!-- 商品区 -->
<div class="goods-list">
<div class="for-your-goods-list">
<div
class="goods-item"
class="for-your-goods-item"
:key="index"
v-for="(item, index) in data.options.data.list"
@click="linkTo(item.url)"
@@ -65,14 +65,18 @@ export default {
</script>
<style scoped lang="scss">
.goods-list {
.for-your-goods-list {
display: flex;
flex: 0 0 558px;
width: 558px;
flex-wrap: wrap;
column-gap: 0;
}
.goods-item {
.for-your-goods-item {
flex: 0 0 278px;
width: 278px;
height: 277px;
min-width: 0;
text-align: center;
box-sizing: border-box;
cursor: pointer;
@@ -84,10 +88,8 @@ export default {
border-top: 1.4px solid #e2e2e2;
}
&:hover {
:deep .goods-name {
color: $theme_color;
}
:deep .goods-desc {
.goods-name,
.goods-desc {
color: $theme_color;
}
}
@@ -105,10 +107,12 @@ export default {
color: #333333;
}
.goods-img {
display: block;
width: 190px;
height: 156px;
margin-top: 19px;
margin: 19px auto 0;
border-radius: 10px;
object-fit: contain;
}
.goods-desc {
font-size: 14px;
@@ -137,6 +141,8 @@ export default {
background: #ffffff;
border-radius: 10px;
position: relative;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0px 1px 13px 0px #E5E5E5;
&:hover {
@@ -159,20 +165,27 @@ export default {
}
}
.left {
flex: 0 0 346px;
width: 346px;
height: 554px;
border-radius: 9.8px 0px 0px 9.8px;
overflow: hidden;
> img {
max-width: 100%;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.right {
flex: 0 0 839px;
width: 839px;
height: 554px;
border-radius: 0px 9.8px 9.8px 0px;
overflow: hidden;
}
.hot-list {
flex: 0 0 279px;
width: 279px;
}
.hot-title {
@@ -201,8 +214,11 @@ export default {
}
> img {
flex-shrink: 0;
display: block;
width: 76.3px;
height: 77.7px;
object-fit: contain;
}
}
.hot-goods {

1
buyer/src/components/indexDecorate/modelList/mixModel.vue
View File

@@ -49,5 +49,6 @@ export default {
background: #FFFFFF;
box-shadow: 0px 1px 13px 0px #E5E5E5;
position: relative;
overflow: hidden;
}
</style>

169
buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
View File

@@ -1,20 +1,23 @@
<template>
<div class="flex" v-if="data.options.right.model == 'brand'">
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
<img :src="data.options.right.data.image.src" alt="">
<div class="mix-panel flex" v-if="data.options.right.model == 'brand'">
<div class="left-side hover-pointer" @click="linkTo(data.options.right.data.image.url)">
<img :src="data.options.right.data.image.src" alt="" />
</div>
<div class="right-side">
<div class="badge-box flex">
<div class="round">
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<div class="flex goods-list">
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
<div
class="goods-item flex hover-pointer"
@click="linkTo(item.url)"
:key="index"
v-for="(item, index) in data.options.right.data.list"
>
<div class="goods-thumbnail">
<img :src="item.img" alt="">
<img :src="item.img" alt="" />
</div>
</div>
</div>
@@ -23,63 +26,60 @@
</template>
<script>
import { ArrowRight } from '@element-plus/icons-vue';
import { ArrowRight } from "@element-plus/icons-vue";
export default {
name: "mix-goods",
data() {
return {}
},
name: "mix-brand",
components: { ArrowRight },
props: {
data: {
type: Object,
default: {}
}
default: () => ({}),
},
components: { ArrowRight },
mounted() {
},
methods: {}
}
};
</script>
<style scoped lang="scss">
.right-side{
width: 330px;
.mix-panel {
height: 100%;
align-items: stretch;
overflow: hidden;
}
.goods-detail-title{
font-size: 13px;
font-weight: normal;
line-height: 16px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.goods-detail-price{
font-size: 14px;
font-weight: normal;
line-height: 17px;
letter-spacing: 0px;
color: $theme_color;
margin-top: 8px;
margin-bottom:10px;
}
.goods-thumbnail{
margin-left: 7px;
display: flex;
align-items: center;
>img{
width:90px;
height: 90px;
.left-side {
flex-shrink: 0;
width: 254px;
height: 344px;
> img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9.8px 0 0 9.8px;
}
}
.badge-box{
margin-top: 33px;
justify-content:right;
>.round{
.right-side {
flex: 1;
min-width: 0;
height: 344px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
.badge-box {
margin-top: 24px;
margin-bottom: 8px;
justify-content: flex-end;
flex-shrink: 0;
> .round {
width: 17.5px;
height: 17.5px;
opacity: 1;
border-radius: 50%;
text-align: center;
line-height: 17.5px;
@@ -87,47 +87,48 @@ export default {
margin-right: 17.5px;
}
}
.goods-list{
width: 330px;
.goods-list {
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
justify-content:space-between;
padding: 0 16px;
justify-content: space-between;
align-content: flex-start;
padding: 0 16px 12px;
gap: 8px 0;
flex: 1;
min-height: 0;
overflow: hidden;
}
.goods-item{
.goods-item {
display: flex;
align-items: center;
justify-content: center;
width:50%;
height: 85px;
flex: 0 0 calc(50% - 4px);
width: calc(50% - 4px);
height: 82px;
border-radius: 9.8px;
opacity: 1;
transition: .35s;
background: #FFFFFF;
margin-bottom:9px;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
transition: 0.35s;
cursor: pointer;
}
.left-side {
>img{
width: 254px;
height: 344px;
border-radius: 9.8px 0px 0px 9.8px;
opacity: 1;
.goods-thumbnail {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
> img {
max-width: 80px;
max-height: 76px;
width: auto;
height: auto;
object-fit: contain;
}
}
.badge {
width: 50px;
height: 27px;
line-height:27px;
border-radius: 13.3px 0px 0px 13.3px;
opacity: 1;
background: #F31947;
font-size: 12.6px;
font-weight: normal;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 26px;
margin-bottom:17px;
}
</style>

140
buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
View File

@@ -1,22 +1,26 @@
<template>
<div class="flex" v-if="data.options.left.model == 'goods'">
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
<img :src="data.options.left.data.image.src" alt="">
<div class="mix-panel flex" v-if="data.options.left.model == 'goods'">
<div class="left-side hover-pointer" @click="linkTo(data.options.left.data.image.url)">
<img :src="data.options.left.data.image.src" alt="" />
</div>
<div class="right-side">
<div class="badge-box flex">
<div class="badge" @click="linkTo(data.options.right.data.image.url)">
{{data.options.left.data.badge.label}}
<div class="badge hover-pointer" @click="linkTo(data.options.left.data.badge.url)">
{{ data.options.left.data.badge.label }}
</div>
</div>
<div class="flex goods-list">
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.left.data.list">
<div
class="goods-item flex hover-pointer"
@click="linkTo(item.url)"
:key="index"
v-for="(item, index) in data.options.left.data.list"
>
<div class="goods-thumbnail">
<img :src="item.img" alt="">
<img :src="item.img" alt="" />
</div>
<div class="goods-detail">
<div class="goods-detail-title">{{item.title}}</div>
<div class="goods-detail-title">{{ item.title }}</div>
<div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
</div>
</div>
@@ -28,100 +32,118 @@
<script>
export default {
name: "mix-goods",
data() {
return {}
},
props: {
data: {
type: Object,
default: {}
}
default: () => ({}),
},
components: {},
mounted() {
},
methods: {}
}
};
</script>
<style scoped lang="scss">
.right-side{
width: 387px;
.mix-panel {
height: 100%;
align-items: stretch;
overflow: hidden;
}
.goods-detail-title{
.left-side {
flex-shrink: 0;
width: 196.7px;
height: 344px;
> img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px 0 0 10px;
}
}
.right-side {
flex: 1;
min-width: 0;
height: 344px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
}
.goods-detail-title {
font-size: 13px;
font-weight: normal;
line-height: 16px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.goods-detail-price{
.goods-detail-price {
font-size: 14px;
font-weight: normal;
line-height: 17px;
letter-spacing: 0px;
color: #F31947;
color: #f31947;
margin-top: 8px;
margin-bottom:10px;
}
.goods-thumbnail{
.goods-thumbnail {
margin-left: 7px;
display: flex;
align-items: center;
>img{
width:90px;
flex-shrink: 0;
> img {
width: 90px;
height: 90px;
object-fit: contain;
}
}
.badge-box{
justify-content:right;
.badge-box {
justify-content: flex-end;
flex-shrink: 0;
}
.goods-list{
width: 387px;
.goods-list {
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
justify-content:space-between;
justify-content: space-between;
padding: 0 16px;
gap: 9px 0;
}
.goods-item{
.goods-item {
cursor: pointer;
display: flex;
align-items: center;
width: 173.6px;
flex: 0 0 calc(50% - 4px);
width: calc(50% - 4px);
height: 119px;
border-radius: 9.8px;
opacity: 1;
transition: .35s;
background: #FFFFFF;
margin-bottom:9px;
&:hover{
box-shadow: 0px 1px 6px 0px #E5E5E5;
}
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
transition: 0.35s;
}
.left-side {
>img{
border-radius: 10px 0px 0px 10px;
display: block;
width: 196.7px;
height: 343.7px;
&:hover {
box-shadow: 0 1px 6px 0 #e5e5e5;
}
}
.badge {
width: 50px;
height: 27px;
line-height:27px;
border-radius: 13.3px 0px 0px 13.3px;
opacity: 1;
background: #F31947;
line-height: 27px;
border-radius: 13.3px 0 0 13.3px;
background: #f31947;
font-size: 12.6px;
font-weight: normal;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
color: #ffffff;
margin-top: 26px;
margin-bottom:17px;
margin-bottom: 17px;
}
</style>

19
buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="line flex flex-a-c flex-j-sb">
<div class="column" v-for="(item,index) in data.options.list" :key="index">
<img :src="item.img" class="three-column-img">
<div
class="column hover-pointer"
v-for="(item, index) in data.options.list"
:key="index"
@click="linkTo(item.url)"
>
<img :src="item.img" class="three-column-img" alt="" />
</div>
</div>
</template>
@@ -25,12 +30,18 @@ export default {
</script>
<style scoped lang="scss">
.column{
.line {
width: 100%;
}
.column {
width: 385px;
height: 165px;
>img{
cursor: pointer;
> img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>

2
buyer/src/components/nav/CateNav.vue
View File

@@ -184,7 +184,7 @@ export default {
// 存放分类信息
localStorage.setItem("category", JSON.stringify(res.result));
}
});
}).catch(() => {});
},
showDetail(index) {
// 展示全部分类

144
buyer/src/components/userCenter/Layout.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div class="user-center-page">
<div class="user-center-title">{{ title }}</div>
<div class="user-center-panel">
<div v-if="showToolbar" class="user-center-toolbar">
<div class="user-center-tabs">
<div
v-for="(item, index) in tabs"
:key="index"
class="user-center-tab"
:class="{ active: activeTab === index }"
@click="$emit('tab-change', index)"
>
{{ item }}
</div>
</div>
<div class="user-center-extra">
<slot name="extra">
<el-button v-if="moreText" type="primary" @click="handleMore">{{ moreText }}</el-button>
</slot>
</div>
</div>
<div class="user-center-content">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
name: "UserCenterLayout",
props: {
title: {
type: String,
required: true,
},
tabs: {
type: Array,
default: () => [],
},
activeTab: {
type: Number,
default: 0,
},
moreText: {
type: String,
default: "",
},
moreTo: {
type: [String, Object],
default: "",
},
},
emits: ["tab-change", "more"],
computed: {
showToolbar() {
return this.tabs.length || this.moreText || this.$slots.extra;
},
},
methods: {
handleMore() {
this.$emit("more");
if (!this.moreTo) return;
if (typeof this.moreTo === "string") {
this.$router.push(this.moreTo);
} else {
this.$router.push(this.moreTo);
}
},
},
};
</script>
<style scoped lang="scss">
.user-center-page {
margin-bottom: 40px;
}
.user-center-title {
height: 54px;
line-height: 54px;
padding: 0 20px;
margin-bottom: 12px;
background: #fff;
border: 1px solid #eee;
color: #333;
font-size: 16px;
font-weight: 600;
}
.user-center-panel {
padding: 0 16px 16px;
background: #fff;
border: 1px solid #eee;
}
.user-center-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 54px;
border-bottom: 1px solid #eee;
}
.user-center-tabs {
display: flex;
align-items: center;
height: 54px;
}
.user-center-tab {
position: relative;
height: 54px;
line-height: 54px;
margin-right: 28px;
color: #333;
cursor: pointer;
&:hover,
&.active {
color: $theme_color;
}
&.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: $theme_color;
}
}
.user-center-extra {
display: flex;
align-items: center;
}
.user-center-content {
padding-top: 14px;
}
</style>

1
buyer/src/main.js
View File

@@ -33,6 +33,7 @@ app.config.globalProperties.Cookies = storage;
app.config.globalProperties.$inputMaxLength = inputMaxLength;
app.config.globalProperties.linkTo = function (url) {
if (!url) return;
if (url.substr(0, 1) === "/") {
window.open(location.origin + url, "_blank");
} else {

6
buyer/src/pages/GoodsDetail.vue
View File

@@ -12,9 +12,9 @@
</el-breadcrumb>
<div class="store-collect" v-if="!takeDownSale && goodsMsg.data">
<span class="mr_10" v-if="goodsMsg.data">
<router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
goodsMsg.data.storeName
}}</router-link>
<router-link
:to="{ path: '/merchant', query: { id: goodsMsg.data.storeId } }"
>{{ goodsMsg.data.storeName }}</router-link>
</span>
<span @click="collect">
<el-icon :color="storeCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>

26
buyer/src/pages/GoodsList.vue
View File

@@ -67,16 +67,16 @@
已有<span>{{ item.commentNum || 0 }}</span>人评价
</div>
<div class="goods-show-seller">
<span class="text-bottom" style="color: #e4393c">{{
item.storeName
}}</span>
<span
class="text-bottom hover-pointer"
style="color: #e4393c"
@click.stop="goShopPage(item.storeId)"
>{{ item.storeName }}</span>
</div>
<div class="goods-show-right">
<el-tag
class="goods-show-tag goods-show-tag-self"
color="red"
effect="dark"
v-if="item.selfOperated"
>
自营
@@ -200,6 +200,17 @@ export default {
});
window.open(routeUrl.href, "_blank");
},
goShopPage(id) {
if (!id) {
this.$Message.warning("店铺信息不存在");
return;
}
const routeUrl = this.$router.resolve({
path: "/merchant",
query: { id },
});
window.open(routeUrl.href, "_blank");
},
// 分页 修改页码
changePageNum(val) {
this.params.pageNumber = val;
@@ -279,6 +290,11 @@ export default {
}
.goods-show-tag-self {
--el-tag-bg-color: #fa2c19;
--el-tag-border-color: #fa2c19;
--el-tag-text-color: #fff;
background-color: #fa2c19;
border-color: #fa2c19;
color: #fff;
:deep(.el-tag__content) {

33
buyer/src/pages/Index.vue
View File

@@ -125,7 +125,6 @@ export default {
}
},
getcps(){
console.log(123123)
let data = new Date()
let datas = data.getDate()
getAutoCoup().then(res=>{ //调用自动发券
@@ -146,27 +145,34 @@ export default {
}
storage.setItem('getTimes',datas)//存储缓存
}
})
}).catch(() => {});
},
handleReachBottom(){
} ,
getIndexData () {
if(this.pageData){
this.parsePageData(JSON.stringify(this.pageData))
this.parsePageData(JSON.stringify(this.pageData)).catch(() => {});
}
else{
// 获取首页装修数据
indexData({ clientType: 'PC' }).then(async (res) => {
if (res.success && res.result) {
this.parsePageData(res.result.pageData)
if (res.success && res.result?.pageData) {
try {
await this.parsePageData(res.result.pageData);
} catch {
// 装修数据解析失败时保持默认空楼层
}
});
}
}).catch(() => {});
}
},
async parsePageData(pageData){
let dataJson = JSON.parse(pageData);
const dataJson = typeof pageData === "string" ? JSON.parse(pageData) : pageData;
if (!dataJson?.list?.length) {
return;
}
// 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
// 轮播图根据不同轮播，样式不同
for (let i = 0; i < dataJson.list.length; i++) {
@@ -182,18 +188,25 @@ export default {
}
}
this.modelForm = dataJson;
if (dataJson.list[1]) {
storage.setItem('navList', dataJson.list[1])
}
this.showNav = true
if (dataJson.list[0]) {
this.topAdvert = dataJson.list[0];
}
},
async getListByDay () { // 当天秒杀活动
try {
const res = await seckillByDay()
if (res.success && res.result.length) {
if (res.success && res.result?.length) {
return res.result
} else {
return []
}
} catch {
// 秒杀接口失败时不影响首页其他模块
}
return []
}
},
components: { Search,

178
buyer/src/pages/Merchant.vue
View File

@@ -2,18 +2,35 @@
<div class="merchant">
<BaseHeader/>
<!-- 搜索栏 -->
<Search :storeId="storeMsg.storeId" @search="search"></Search>
<Search :storeId="storeMsg.storeId || $route.query.id" @search="search"></Search>
<!-- 店铺logo -->
<div class="shop-logo">
<div>
<p>{{ storeMsg.storeName || '店铺' }}</p>
<p :alt="storeMsg.storeDesc" class="ellipsis" v-html="storeMsg.storeDesc"></p>
<div class="shop-logo-inner">
<div class="shop-info">
<p class="shop-name">{{ storeMsg.storeName || '店铺' }}</p>
<p
v-if="storeMsg.storeDesc"
:alt="storeMsg.storeDesc"
class="shop-desc ellipsis"
v-html="storeMsg.storeDesc"
></p>
</div>
<div>
<span class="hover-pointer" @click="collect"><el-icon :color="storeCollected ? '#ed3f14' : '#fff'"><StarFilled /></el-icon>{{
<div class="shop-actions">
<span class="hover-pointer store-collect-btn" @click="collect">
<el-icon :color="storeCollected ? '#ffc107' : '#fff'">
<StarFilled />
</el-icon>
<span>{{
storeCollected ? '已收藏店铺' : '收藏店铺'
}}</span>
<span class="hover-pointer ml_10" style="width:80px" @click="IMService(storeMsg.storeId,null,null)"><i class="icomoon icon-customer-service"></i>联系客服</span>
</span>
<span
class="hover-pointer store-service-btn"
@click="IMService(storeMsg.storeId, null, null)"
>
<i class="icomoon icon-customer-service"></i>联系客服
</span>
</div>
</div>
</div>
<div class="store-category">
@@ -101,7 +118,11 @@
import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
import {getCateById, getDetailById} from "@/api/shopentry";
import {cancelStoreCollect, collectStore} from "@/api/member";
import {
cancelStoreCollect,
collectStore,
isStoreCollection,
} from "@/api/member";
import {goodsList} from "@/api/goods";
import Search from "@/components/Search";
import ModelForm from "@/components/indexDecorate/ModelForm";
@@ -145,10 +166,15 @@ export default {
},
created() {
this.getStoreMsg();
window.onscroll = () => {
const top =
document.documentElement.scrollTop || document.body.scrollTop;
this.topSearchShow = top > 300;
};
},
methods: {
isFloorEnabled() {
const pageShow = this.storeMsg.pageShow;
const pageShow = this.storeMsg && this.storeMsg.pageShow;
return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
},
loadStoreGoodsView() {
@@ -205,54 +231,44 @@ export default {
},
// getStoreMsg () { // 店铺信息
// getDetailById(this.$route.query.id).then(res => {
// if (res.success) {
// this.storeMsg = res.result
// document.title = this.storeMsg.storeName
// if (this.Cookies.getItem('userInfo')) {
// isCollection('STORE', this.storeMsg.storeId).then(res => {
// if (res.success && res.result) {
// this.storeCollected = true;
// }
// })
// }
// }
// })
// },
// async getListByDay() {
// // 当天秒杀活动
// const res = await seckillByDay();
// if (res.success && res.result.length) {
// return res.result;
// } else {
// return [];
// }
// },
checkStoreCollectionStatus() {
const storeId = this.storeMsg && this.storeMsg.storeId;
if (!storeId || !this.Cookies.getItem("userInfo")) {
return;
}
isStoreCollection("STORE", storeId)
.then((res) => {
if (res.success && res.result) {
this.storeCollected = true;
}
})
.catch(() => {});
},
getStoreMsg() {
// 店铺信息
getDetailById(this.$route.query.id).then((res) => {
if (res.success) {
const storeId = this.$route.query.id;
if (!storeId) {
this.$Message.warning("店铺不存在");
return;
}
getDetailById(storeId)
.then((res) => {
if (res.success && res.result) {
this.storeMsg = res.result;
document.title = this.storeMsg.storeName || "店铺";
this.checkStoreCollectionStatus();
if (this.isFloorEnabled()) {
this.getIndexData();
} else {
this.loadStoreGoodsView();
}
let that = this;
window.onscroll = function () {
let top =
document.documentElement.scrollTop || document.body.scrollTop;
if (top > 300) {
that.topSearchShow = true;
} else {
that.topSearchShow = false;
}
};
this.storeMsg = { storeId };
this.loadStoreGoodsView();
}
})
.catch(() => {
this.storeMsg = { storeId };
this.loadStoreGoodsView();
});
},
getCateList() {
@@ -318,17 +334,26 @@ export default {
this.$router.push("/login");
return;
}
try {
if (this.storeCollected) {
let cancel = await cancelStoreCollect("STORE", storeId);
const cancel = await cancelStoreCollect("STORE", storeId);
if (cancel.success) {
this.$Message.success("已取消收藏");
this.storeCollected = false;
}
} else {
let collect = await collectStore("STORE", storeId);
if (collect.code === 200) {
const collect = await collectStore("STORE", storeId);
if (collect.success || collect.code === 200) {
this.storeCollected = true;
this.$Message.success(
"收藏店铺成功,可以前往个人中心我的收藏查看"
);
}
}
} catch (err) {
const msg = err?.message || err?.data?.message || "";
if (msg.includes("重复收藏")) {
this.storeCollected = true;
this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
}
}
},
@@ -350,31 +375,56 @@ export default {
padding: 4px;
color: #fff;
> div {
.shop-logo-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 1200px;
margin: 0 auto;
}
.shop-info {
display: flex;
flex-direction: row;
align-items: center;
> div:nth-child(2) {
margin-left: 10px;
flex: 1;
gap: 12px;
min-width: 0;
}
> div:nth-child(3) {
width: 200px;
}
}
p:nth-child(1) {
.shop-name {
margin: 0;
font-size: 20px;
flex-shrink: 0;
}
p:nth-child(2) {
.shop-desc {
margin: 0;
font-size: 14px;
max-height: 40px;
max-width: 400px;
}
.shop-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.store-collect-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.store-service-btn {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 80px;
}
}
.store-category {

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

@@ -1,28 +1,35 @@
<template>
<div class="wrapper">
<card _Title="账户安全"/>
<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">
<div class="safeItem safeItem-connect">
<div class="safeItem-main">
<div class="safeItem-icon">
<el-icon :size="40"><Link /></el-icon>
</div>
<div :span="16">
<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 class="connectList">
<div class="connectRow">
<div class="connectRowLeft">
@@ -34,12 +41,8 @@
<el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
</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>
</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;

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

@@ -1,7 +1,7 @@
<template>
<div class="add-eval">
<UserCenterLayout title="订单投诉" :tabs="['订单投诉']">
<div class="title">
<card _Title="订单投诉" :_Size="16"></card>
<p>
<span class="fontsize_16 global_color">{{ statusLabel[detail.complainStatus] }}</span>
<span class="color999 ml_20">创建时间：</span><span>{{ detail.createTime }}</span>
@@ -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;

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

@@ -1,8 +1,12 @@
<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>
<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">
@@ -35,6 +39,42 @@
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
<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;
}
}

20
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"
<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]"
small
layout="total, prev, pager, next, jumper"></el-pagination>
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>

17
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"
<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]"
small
layout="total, prev, pager, next, jumper"></el-pagination>
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>

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

@@ -1,26 +1,33 @@
<template>
<div class="wrapper">
<card _Title="用户信息" />
<UserCenterLayout title="用户信息" :tabs="['用户信息']">
<el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
<el-form-item label="头像">
<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-upload-list="false"
:show-file-list="false"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:action="action"
:headers="accessToken"
>
<el-button class="mt_10">上传头像</el-button>
<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">
@@ -33,6 +40,7 @@
</el-form-item>
</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>

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

@@ -1,7 +1,7 @@
<template>
<div class="add-eval">
<UserCenterLayout title="订单评价" :tabs="['订单评价']">
<div class="title">
<card _Title="订单评价" :_Size="16"></card>
<p>
<span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
<span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
@@ -10,10 +10,10 @@
<!-- 物流评分、服务评分 -->
<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;

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

@@ -1,7 +1,7 @@
<template>
<div class="add-eval">
<UserCenterLayout title="评价详情" :tabs="['评价详情']">
<div class="title">
<card _Title="评价详情" :_Size="16"></card>
<p>
<span class="color999">创建人：</span><span>{{ $filters.secrecyMobile( orderGoods.createBy ) }}</span>
<span class="color999 ml_20">{{ orderGoods.createTime }}</span>
@@ -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>

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

@@ -1,6 +1,11 @@
<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-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
@@ -24,18 +29,19 @@
<el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
<el-table-column prop="createTime" label="发送时间" align="left" width="240" />
</el-table>
<div class="msg-pagination">
<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"
/>
</div>
</UserCenterLayout>
</div>
</template>
<script>
import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
@@ -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) => {
if (res.success) {
this.loading = false;
if (res.success) {
this.$router.push("/home/MyAddress");
}
})
@@ -96,8 +95,8 @@ export default {
} else {
newMemberAddress(params)
.then((res) => {
if (res.success) {
this.loading = false;
if (res.success) {
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;
}

66
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,7 +42,8 @@
<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="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">
@@ -51,18 +52,21 @@
</div>
</div>
<el-upload
:show-upload-list="false"
class="upload-trigger"
:show-file-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="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="退款方式">
<div>{{info.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</div>
@@ -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>

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

@@ -1,8 +1,8 @@
<template>
<div class="add-eval">
<UserCenterLayout title="商品投诉" :tabs="['商品投诉']">
<div class="title">
<card _Title="商品投诉" :_Size="16"></card>
<p>
<span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
<span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
@@ -16,14 +16,15 @@
</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="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">
@@ -32,25 +33,30 @@
</div>
</div>
<el-upload
:show-upload-list="false"
class="upload-trigger"
:show-file-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="">
>
<div class="hover-pointer icon-upload">
<el-icon :size="20"><Camera /></el-icon>
</div>
</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>

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

@@ -1,6 +1,9 @@
<template>
<div>
<card _Title="收货地址" _More="添加新地址" _Src="/home/addAddress"></card>
<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>
@@ -28,12 +31,12 @@
</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;
.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 {

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

@@ -1,19 +1,25 @@
<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">
<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
class="width_300"
v-model="params.keywords"
@keyup.enter="getList"
placeholder="请输入订单号搜索"
placeholder="输入订单号搜索"
/>
<el-button type="primary" @click="getList">搜索</el-button>
</div>
</div>
</template>
<!-- 订单列表 -->
<empty v-if="orderList.length === 0" />
<div class="order-content" v-else>
@@ -74,11 +80,74 @@
</div>
<el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
</div>
<!-- 分页 -->
<div class="page-size" v-if="!homePage">
<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>
<!-- 个人中心首页订单列表 -->
<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"
: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>
<!-- 选择售后商品 -->
<el-dialog v-model="afterSaleModal" title="请选择申请售后的商品">
@@ -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>

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

@@ -1,6 +1,11 @@
<template>
<div class="wrapper">
<card _Title="优惠券列表" :_Tabs="statusNameList" @_Change="change" />
<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">
@@ -30,13 +35,17 @@
<i class="circle-bottom"></i>
</li>
</ul>
<el-pagination :total="total"
<div class="pageration">
<el-pagination
:total="total"
@current-change="changePageNum"
class="pageration"
@size-change="changePageSize"
:page-size="params.pageSize"
layout="total, sizes, prev, pager, next"></el-pagination>
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 {

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

@@ -1,8 +1,9 @@
<template>
<div class="wrapper">
<!-- 卡片组件 -->
<card _Title="我的足迹" :_Size="16"></card>
<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>

139
buyer/src/pages/shopEntry/FirstApply.vue
View File

@@ -90,36 +90,42 @@
/>
</el-form-item>
<el-form-item prop="licencePhoto" label="营业执照电子版">
<div class="upload-wrap">
<el-upload
ref="uploadLicence"
:show-upload-list="false"
:show-file-list="false"
:on-success="handleSuccess"
:format="['jpg', 'jpeg', 'png', 'gif']"
:max-size="2048"
accept=".jpg,.jpeg,.png,.gif"
:before-upload="beforeUpload"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:on-error="uploadErr"
multiple
:disabled="form.licencePhoto.length >= 1"
:action="action"
:headers="accessToken"
>
<el-button type="info" :loading="uploadLoading">证照上传</el-button>
<el-button
type="info"
:loading="uploadLoading"
:disabled="form.licencePhoto.length >= 1"
>证照上传</el-button
>
</el-upload>
<div class="describe">
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败，仅可上传1张
</div>
<div class="img-list-wrap">
<div
class="img-list"
v-for="(item, index) in form.licencePhoto"
:key="index"
>
<img :src="item" width="100" alt="" />
<img :src="item" alt="" />
<div class="cover">
<el-icon @click="handleView(item)"><View /></el-icon>
<el-icon @click="handleRemove(index, 'licencePhoto')"><Delete /></el-icon>
</div>
</div>
</div>
</div>
</el-form-item>
<h4>法人信息</h4>
@@ -139,15 +145,13 @@
/>
</el-form-item>
<el-form-item prop="legalPhoto" label="法人证件电子版">
<div class="upload-wrap">
<el-upload
ref="uploadLegal"
:show-upload-list="false"
:show-file-list="false"
:on-success="handleSuccess1"
:before-upload="beforeUpload1"
:max-size="2048"
:format="['jpg', 'jpeg', 'png', 'gif']"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
accept=".jpg,.jpeg,.png,.gif"
:on-error="uploadErr"
multiple
:action="action"
@@ -158,17 +162,20 @@
<div class="describe">
请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
</div>
<div class="img-list-wrap">
<div
class="img-list"
v-for="(item, index) in form.legalPhoto"
:key="index"
>
<img :src="item" width="100" alt="" />
<img :src="item" alt="" />
<div class="cover">
<el-icon @click="handleView(item)"><View /></el-icon>
<el-icon @click="handleRemove(index, 'legalPhoto')"><Delete /></el-icon>
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loading" @click="next"
@@ -194,6 +201,7 @@ const FIRST_APPLY_DRAFT_KEY = 'shopEntryFirstDraft';
export default {
components: { multipleMap, View, Delete },
emits: ['change'],
props: {
content: {
default: {},
@@ -290,7 +298,7 @@ export default {
this.loading = true;
let params = JSON.parse(JSON.stringify(this.form));
params.legalPhoto = this.form.legalPhoto.toString();
params.licencePhoto = this.form.licencePhoto.toString();
params.licencePhoto = this.normalizeLicencePhoto(this.form.licencePhoto);
applyFirst(params)
.then((res) => {
this.loading = false;
@@ -309,25 +317,47 @@ export default {
},
// 上传之前
beforeUpload () {
beforeUpload (file) {
this.uploadLoading = true;
if (this.form.licencePhoto.length >= 3) {
this.$Message.warning('最多上传三张图片')
if (this.form.licencePhoto.length >= 1) {
this.$Message.warning('最多上传一张图片')
this.uploadLoading = false;
return false;
}
return this.validateUploadFile(file);
},
// 上传之前
beforeUpload1 () {
beforeUpload1 (file) {
this.uploadLoading1 = true;
if (this.form.legalPhoto.length >= 2) {
this.$Message.warning('最多上传两张图片')
this.uploadLoading1 = false;
return false;
}
return this.validateUploadFile(file);
},
validateUploadFile (file) {
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
const isAllowedType = allowedTypes.includes(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isAllowedType) {
this.uploadLoading = false;
this.uploadLoading1 = false;
this.$Message.warning('上传文件格式不正确');
return false;
}
if (!isLt2M) {
this.uploadLoading = false;
this.uploadLoading1 = false;
this.$Message.warning('文件大小不能超过2M');
return false;
}
return true;
},
// 上传成功回调
handleSuccess (res, file) {
this.uploadLoading = false;
this.form.licencePhoto.push(res.result);
this.form.licencePhoto = [res.result];
},
// 上传成功回调
handleSuccess1 (res, file) {
@@ -366,6 +396,12 @@ export default {
handleRemove (index, listName) {
this.form[listName].splice(index, 1);
},
normalizeLicencePhoto (value) {
if (Array.isArray(value)) {
return value.length ? value[0] : '';
}
return value ? String(value).split(',').filter(Boolean)[0] || '' : '';
},
initFormFromContent(content) {
if (!content || !Object.keys(content).length) return;
this.form = JSON.parse(JSON.stringify(content));
@@ -373,7 +409,7 @@ export default {
? String(content.legalPhoto).split(',').filter(Boolean)
: [];
this.form.licencePhoto = content.licencePhoto
? String(content.licencePhoto).split(',').filter(Boolean)
? String(content.licencePhoto).split(',').filter(Boolean).slice(0, 1)
: [];
this.contentInitialized = true;
},
@@ -388,7 +424,9 @@ export default {
...parsed,
};
this.form.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
this.form.licencePhoto = Array.isArray(parsed.licencePhoto) ? parsed.licencePhoto : [];
this.form.licencePhoto = Array.isArray(parsed.licencePhoto)
? parsed.licencePhoto.slice(0, 1)
: [];
} catch (e) {
sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
}
@@ -434,26 +472,45 @@ h4 {
.el-input {
width: 300px;
}
.img-list-wrap {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
.img-list {
display: inline-block;
margin: 10px;
display: block;
flex-shrink: 0;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border: 1px solid #eee;
box-sizing: border-box;
background-color: #f5f5f5;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
width: inherit;
height: inherit;
align-items: center;
justify-content: space-around;
i {
:deep(.el-icon) {
color: #fff;
font-size: 30px;
font-size: 24px;
cursor: pointer;
}
}
@@ -461,7 +518,27 @@ h4 {
display: flex;
}
}
.upload-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
:deep(.el-upload) {
display: block;
}
:deep(.el-upload-list) {
display: none;
}
}
.describe {
display: block;
width: 100%;
margin-top: 8px;
margin-bottom: 0;
line-height: 1.5;
font-size: 12px;
color: #999;
}

1
buyer/src/pages/shopEntry/SecondApply.vue
View File

@@ -43,6 +43,7 @@
<script>
import { applySecond } from '@/api/shopentry';
export default {
emits: ['change'],
props: {
content: {
default: {},

1
buyer/src/pages/shopEntry/ShopEntry.vue
View File

@@ -172,6 +172,7 @@ export default {
},
// 下一步
nextPage(step) {
if (typeof step !== "number") return;
this.currentIndex = step;
if (step > 0 && step < 3) {
this.refreshApplyData();

167
buyer/src/pages/shopEntry/ThirdApply.vue
View File

@@ -11,46 +11,49 @@
</el-form-item>
<el-form-item prop="storeLogo" label="店铺logo">
<div class="upload-wrap">
<el-upload
ref="uploadLogo"
:show-upload-list="false"
:show-file-list="false"
:on-success="handleSuccess"
:format="['jpg', 'jpeg', 'png', 'gif']"
:max-size="2048"
accept=".jpg,.jpeg,.png,.gif"
:before-upload="beforeUpload"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:on-error="uploadErr"
multiple
:disabled="form.storeLogo.length >= 1"
:action="action"
:headers="accessToken"
>
<el-button type="info" :loading="uploadLoading">上传logo</el-button>
<el-button type="info" :loading="uploadLoading" :disabled="form.storeLogo.length >= 1">上传logo</el-button>
</el-upload>
<div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
<div class="describe">请压缩图片在2M以内，格式为gif，jpg，png，仅可上传1张</div>
<div class="img-list-wrap">
<div
class="img-list"
v-for="(item, index) in form.storeLogo"
:key="index"
>
<img :src="item" width="100" height="" alt="" />
<img :src="item" alt="" />
<div class="cover">
<el-icon @click="handleView(item)"><View /></el-icon>
<el-icon @click="handleRemove(index, 'storeLogo')"><Delete /></el-icon>
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item prop="goodsManagementCategory" label="店铺经营类目">
<el-select
v-model="form.goodsManagementCategory"
multiple
placeholder="请选择"
style="width: 300px"
>
<el-option v-for="item in categoryList"
:value="item.id"
<el-option
v-for="item in categoryList"
:key="item.id"
>{{ item.name }}</el-option
>
:label="item.name"
:value="normalizeCategoryId(item.id)"
/>
</el-select>
</el-form-item>
@@ -102,6 +105,7 @@ import multipleMap from "@/components/map/multiple-map";
export default {
emits: ['change'],
props: {
content: {
default: {},
@@ -119,7 +123,8 @@ export default {
visible: false, // 图片预览
form: { // 表单数据
storeLogo: []
storeLogo: [],
goodsManagementCategory: [],
},
rules: { // 验证规则
goodsManagementCategory: [
@@ -159,33 +164,35 @@ export default {
});
},
// 上传之前
beforeUpload () {
beforeUpload (file) {
this.uploadLoading = true;
if (this.form.storeLogo.length >= 3) {
this.$Message.warning('最多上传三张图片')
if (this.form.storeLogo.length >= 1) {
this.$Message.warning('最多上传一张图片')
this.uploadLoading = false;
return false;
}
return this.validateUploadFile(file);
},
validateUploadFile (file) {
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
const isAllowedType = allowedTypes.includes(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isAllowedType) {
this.uploadLoading = false;
this.$Message.warning('上传文件格式不正确');
return false;
}
if (!isLt2M) {
this.uploadLoading = false;
this.$Message.warning('文件大小不能超过2M');
return false;
}
return true;
},
// 上传成功回调
handleSuccess (res, file) {
this.uploadLoading = false;
this.form.storeLogo.push(res.result);
},
// 上传格式错误
handleFormatError (file) {
this.uploadLoading = false;
this.$Notice.warning({
title: 'The file format is incorrect',
desc: '上传文件格式不正确'
});
},
// 上传大小限制
handleMaxSize (file) {
this.uploadLoading = false;
this.$Notice.warning({
title: 'Exceeding file size limit',
desc: '文件大小不能超过2M'
})
this.form.storeLogo = [res.result];
},
// 上传失败
uploadErr () {
@@ -219,26 +226,37 @@ export default {
// 获取商品分类
getCategoryList () {
getCategory(0).then((res) => {
if (res.success) this.categoryList = res.result;
if (res.success) {
this.categoryList = res.result || [];
this.syncCategorySelection();
}
});
},
normalizeCategoryId (id) {
return id == null ? '' : String(id);
},
syncCategorySelection () {
if (!Array.isArray(this.form.goodsManagementCategory)) {
this.form.goodsManagementCategory = [];
return;
}
this.form.goodsManagementCategory = this.form.goodsManagementCategory.map(
(id) => this.normalizeCategoryId(id)
);
},
},
mounted () {
this.accessToken.accessToken = storage.getItem('accessToken');
this.getCategoryList();
if (this.content && Object.keys(this.content).length) {
this.form = JSON.parse(JSON.stringify(this.content));
if (this.form.storeLogo) {
this.form.storeLogo = String(this.content.storeLogo).split(',').filter(Boolean);
this.form.goodsManagementCategory = String(this.content.goodsManagementCategory || '')
.split(',')
.filter(Boolean);
} else {
this.form.storeLogo = [];
}
this.form.storeLogo = this.content.storeLogo
? String(this.content.storeLogo).split(',').filter(Boolean)
: [];
this.form.goodsManagementCategory = this.content.goodsManagementCategory
? String(this.content.goodsManagementCategory).split(',').filter(Boolean)
: [];
}
this.getCategoryList();
}
};
</script>
@@ -257,27 +275,45 @@ h4 {
.el-input {
width: 300px;
}
.img-list-wrap {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
.img-list {
display: inline-block;
margin: 10px;
display: block;
flex-shrink: 0;
width: 100px;
height: auto;
height: 100px;
position: relative;
overflow: hidden;
border: 1px solid #eee;
box-sizing: border-box;
background-color: #f5f5f5;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
width: inherit;
height: inherit;
align-items: center;
justify-content: space-around;
i {
:deep(.el-icon) {
color: #fff;
font-size: 30px;
font-size: 24px;
cursor: pointer;
}
}
@@ -285,7 +321,28 @@ h4 {
display: flex;
}
}
.upload-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
:deep(.el-upload) {
display: block;
}
:deep(.el-upload-list) {
display: none;
}
}
.describe {
display: block;
width: 100%;
margin-top: 8px;
margin-bottom: 0;
line-height: 1.5;
font-size: 12px;
color: #999;
}

2
buyer/src/pages/user/Home.vue
View File

@@ -40,9 +40,7 @@
</el-menu>
</el-aside>
<el-main class="content ml_10">
<transition mode="out-in">
<router-view></router-view>
</transition>
</el-main>
</div>
</div>

43
buyer/src/plugins/request.js
View File

@@ -53,7 +53,12 @@ service.interceptors.request.use(
});
}
if (typeof window !== "undefined" && loading !== false) {
const method = (config.method || "get").toLowerCase();
const isReadRequest = method === "get" || method === "head";
const shouldShowLoading =
loading === true || (!isReadRequest && loading !== false);
if (typeof window !== "undefined" && shouldShowLoading) {
config.loading = ElLoading.service({ fullscreen: true });
}
@@ -65,8 +70,9 @@ service.interceptors.request.use(
config.headers["uuid"] = uuid;
const accessToken = Storage.getItem("accessToken");
if (accessToken && config.needToken) {
if (accessToken && (config.needToken || config.optionalToken)) {
config.headers["accessToken"] = accessToken;
try {
const jwtData = JSON.parse(
decodeURIComponent(
escape(
@@ -76,7 +82,11 @@ service.interceptors.request.use(
)
);
if (jwtData.exp < Math.round(new Date() / 1000)) {
refresh(config);
refresh({ response: { config } });
}
} catch {
Storage.removeItem("accessToken");
Storage.removeItem("refreshToken");
}
}
@@ -85,15 +95,23 @@ service.interceptors.request.use(
(error) => Promise.reject(error)
);
function buildRejectError(error, errorData = {}) {
const message =
errorData.message ||
(error?.code === "ECONNABORTED" ? "连接超时，请稍候再试！" : "网络错误，请稍后再试！");
return Object.assign(new Error(message), { data: errorData });
}
async function refresh(error) {
const getTokenRes = await refreshToken();
if (getTokenRes === "success") {
if (isRefreshToken === 1) {
if (error?.response?.config) {
error.response.config.headers.accessToken = Storage.getItem("accessToken");
return service(error.response.config);
}
router.go(0);
} else {
return new Promise(() => {});
}
Storage.removeItem("accessToken");
Storage.removeItem("refreshToken");
Storage.removeItem("userInfo");
@@ -119,7 +137,7 @@ async function refresh(error) {
Modal.remove();
},
});
}
return Promise.reject(new Error("登录已过期"));
}
service.interceptors.response.use(
@@ -140,19 +158,22 @@ service.interceptors.response.use(
) {
isRefreshToken++;
if (isRefreshToken === 1) {
refresh(error);
isRefreshToken = 0;
return refresh(error);
}
} else if (errorResponse.status === 404) {
// skip
} else if (error.message) {
return Promise.reject(buildRejectError(error, errorData));
}
if (errorResponse.status === 404) {
return Promise.reject(buildRejectError(error, { message: "请求的资源不存在" }));
}
if (error.message) {
const _message =
error.code === "ECONNABORTED"
? "连接超时，请稍候再试！"
: "网络错误，请稍后再试！";
Message.error(errorData.message || _message);
}
return Promise.reject(errorData);
return Promise.reject(buildRejectError(error, errorData));
}
);

8
buyer/src/router/index.js
View File

@@ -52,7 +52,6 @@ const MyGiftCards = () => import("@/pages/home/userCenter/MyGiftCards");
const Home = () => import("@/pages/user/Home");
const Merchant = () => import("@/pages/Merchant");
const UserMain = () => import("@/pages/home/Main");
const topic = () => import("@/pages/Topic");
const ShopEntry = () => import("@/pages/shopEntry/ShopEntry");
@@ -179,13 +178,8 @@ export const router = createRouter({
{
path: "/home",
component: Home,
redirect: { name: "MyOrder" },
children: [
{
path: "/",
name: "Home",
component: UserMain,
meta: { title: "会员中心" },
},
{
path: "MyTracks",
name: "MyTracks",

22
buyer/src/utils/message.js
View File

@@ -1,7 +1,8 @@
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
let loadingInstance = null;
const MESSAGE_OFFSET = 36;
let loadingInstance = null;
export const Spin = {
show(options = {}) {
Spin.hide();
@@ -28,19 +29,18 @@ export const Spin = {
export const Message = {
success(content) {
return ElMessage.success(normalize(content));
return showMessage("success", content);
},
error(content) {
return ElMessage.error(normalize(content));
return showMessage("error", content);
},
warning(content) {
return ElMessage.warning(normalize(content));
return showMessage("warning", content);
},
info(content) {
return ElMessage.info(normalize(content));
return showMessage("info", content);
},
};
export const Notice = {
open(options = {}) {
const fn = Message[options.type] || Message.info;
@@ -95,8 +95,14 @@ export const Modal = {
},
};
function normalize(content) {
if (typeof content === "string") return content;
function showMessage(type, content) {
return ElMessage[type]({
message: normalize(content),
offset: MESSAGE_OFFSET,
});
}
function normalize(content) { if (typeof content === "string") return content;
if (content && content.content) return content.content;
return String(content ?? "");
}

9
buyer/src/vuex/store.js
View File

@@ -12,7 +12,14 @@ export default createStore({
storage.getItem("logoImg") || require("@/assets/images/logo2.png"),
siteName: storage.getItem("siteName") || "lilishop",
hotWordsList: storage.getItem("hotWordsList"),
category: JSON.parse(localStorage.getItem("category")),
category: (() => {
try {
const raw = localStorage.getItem("category");
return raw ? JSON.parse(raw) : null;
} catch {
return null;
}
})(),
},
getters,
actions,

8
manager/src/components/lili-dialog/goods-dialog.vue
View File

@@ -260,6 +260,14 @@ export default {
background-position: right;
background-size: 10%;
}
.pageration {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 16px;
padding-right: 8px;
box-sizing: border-box;
}
</style>
<style lang="scss">
.goods-dialog-cascader-popper {

8
manager/src/components/lili-dialog/style.scss
View File

@@ -67,8 +67,12 @@
}
.pageration {
text-align: right;
padding-right: 20px;
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 16px;
padding-right: 8px;
box-sizing: border-box;
}
.wap-content-item {

55
manager/src/components/lili-dialog/template/category.vue
View File

@@ -23,6 +23,8 @@
</template>
<script>
import { getCategoryTree } from "@/api/goods.js";
export default {
data() {
return {
@@ -39,10 +41,32 @@ export default {
this.init();
},
methods: {
loadCategoryFromCache() {
try {
const raw = localStorage.getItem("category");
if (!raw) {
return null;
}
const parsed = JSON.parse(raw);
return Array.isArray(parsed) ? parsed : null;
} catch {
return null;
}
},
applyCategoryList(category) {
if (!Array.isArray(category)) {
this.categoryList = [];
return;
}
category.forEach((item) => {
item.___type = "category";
});
this.categoryList = category;
},
// 点击一级
handleClickChild(item, index) {
this.parentIndex = index;
this.secondLevel = item.children;
this.secondLevel = item.children || [];
item.___type = "category";
item.allId = item.id;
@@ -59,7 +83,7 @@ export default {
second.allId = `${second.parentId},${second.id}`
this.secondIndex = index;
this.thirdLevel = second.children;
this.thirdLevel = second.children || [];
this.thirdIndex = '';
this.$emit("selected", [second]);
// this.handleClickthirdChild(second.children[0], 0);
@@ -72,24 +96,17 @@ export default {
this.thirdIndex = index;
},
init() {
let category = JSON.parse(localStorage.getItem('category'))
if (category) {
category.forEach((item) => {
item.___type = "category";
});
this.categoryList = category;
// this.handleClickChild(category[0], 0);
} else {
setTimeout(() => {
category = JSON.parse(localStorage.getItem('category'))
category.forEach((item) => {
item.___type = "category";
});
this.categoryList = category;
// this.handleClickChild(category[0], 0);
},3000)
const cached = this.loadCategoryFromCache();
if (cached) {
this.applyCategoryList(cached);
return;
}
getCategoryTree().then((res) => {
if (res.success && Array.isArray(res.result)) {
localStorage.setItem("category", JSON.stringify(res.result));
this.applyCategoryList(res.result);
}
});
},
},
};

16
manager/src/utils/filters.js
View File

@@ -1,3 +1,5 @@
import { getRouter } from "@/libs/router-holder";
/**
* 金钱单位置换 2999 --> 2,999.00
* @param val
@@ -32,11 +34,13 @@ export function enCode(v1) {
return v1;
}
import {router} from "@/router/index";
/**
* 自定义跳转
*/
export function customRouterPush(push){
const router = getRouter();
if (!router) return;
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
if(setting.isUseTabsRouter){
@@ -142,8 +146,14 @@ let timeout = null;
* @returns {string}
*/
export function formatPrice(price) {
if (typeof price !== 'number') return price
return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
if (price === null || price === undefined || price === "") {
return "0.00";
}
const num = typeof price === "number" ? price : Number(price);
if (Number.isNaN(num)) {
return "0.00";
}
return String(num.toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
/**

74
manager/src/views/home/home.scss
View File

@@ -15,7 +15,8 @@ h4 {
margin-right: 40px;
}
.count-item,
.todo-item {
.todo-item,
.today-item {
height: 84px;
display: flex;
@@ -60,6 +61,12 @@ h4 {
cursor: pointer;
color: #fff;
justify-content: flex-start;
> div:first-child {
margin-left: 40px;
margin-right: 20px;
flex-shrink: 0;
}
}
.count-item:nth-of-type(1) {
background-image: linear-gradient(109.6deg, rgba($color: #ff7171, $alpha: 0.6) 11.2%, #ff7171 100.2%);
@@ -93,7 +100,10 @@ h4 {
.flow-list {
height: 330px;
min-height: 330px;
align-items: stretch;
flex-wrap: wrap;
gap: 20px;
}
.svg {
width: 20px;
@@ -101,7 +111,8 @@ h4 {
}
.flow-item {
display: flex;
flex: 1;
flex: 1 1 620px;
min-width: 0;
}
.flow {
background: #ebebeb88 !important;
@@ -131,28 +142,36 @@ h4 {
}
}
.flow-box {
padding-top: 20px;
width: 400px;
padding: 37px;
width: 100%;
box-sizing: border-box;
justify-content: space-between;
margin: 10px 0 20px;
gap: 20px;
> .flow-box-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 15px;
margin: 0 20px;
> div {
margin: 4px 0;
}
}
}
.flow-splice {
width: 100%;
gap: 20px;
}
.flow-box-splice {
background: #fff;
width: 190px;
flex: 1;
min-width: 0;
margin-right: 20px;
padding: 20px;
padding: 36px;
font-weight: bold;
display: flex;
align-items: center;
@@ -182,24 +201,44 @@ h4 {
.flow-wrapper {
background: #fff;
padding: 0 30px;
flex: 1;
min-width: 0;
}
.today-box {
flex: 3;
flex: 1 1 380px;
min-width: 380px;
align-self: flex-start;
background: #fff;
margin-left: 20px;
padding: 0 30px;
padding: 0 30px 20px;
display: flex;
flex-direction: column;
box-sizing: border-box;
> h4 {
margin: 20px 0;
}
}
.today-item {
width: 30%;
margin-bottom: 20px;
border-radius: 0.4em;
font-weight: bold;
box-sizing: border-box;
flex: 1 1 calc(50% - 8px);
min-width: calc(50% - 8px);
margin-right: 0;
flex-direction: column;
justify-content: space-between;
background: #ebebeb88;
padding: 20px;
padding: 16px 20px;
> div {
word-break: break-word;
font-size: 14px;
line-height: 1.3;
}
> span {
color: $theme_color;
font-size: 21px;
margin-top: 8px;
word-break: break-all;
line-height: 1.2;
}
}
@@ -214,6 +253,7 @@ h4 {
}
.today-list {
justify-content: space-between;
display: flex;
flex-wrap: wrap;
gap: 16px;
}

8
manager/src/views/page-decoration/modelFormItem.vue
View File

@@ -448,16 +448,16 @@ export default {
.advert-list {
width: 100%;
margin: 0;
padding: 5px 6px;
padding: 10px;
list-style: none;
box-sizing: border-box;
background: $theme_color;
height: 200px;
height: 210px;
display: flex;
gap: 6px;
gap: 10px;
align-items: center;
> li {
flex: 0 0 calc((100% - 24px) / 5);
flex: 0 0 calc((100% - 40px) / 5);
img {
display: block;
width: 100%;

79
manager/src/views/page-decoration/modelList/mixModel.vue
View File

@@ -32,23 +32,16 @@
append-to-body destroy-on-close>
<div v-if="current">
<div class="modal-tab-bar">
<div>
<div class="current-module-row">
当前模块 :
<el-button-group>
<el-button :type="current.model == 'goods' ? 'primary' : 'default'"
>商品</el-button
>
<el-button :type="current.model == 'brand' ? 'primary' : 'default'"
>品牌</el-button
>
</el-button-group>
<el-tag>{{ current.model === "goods" ? "商品" : "品牌" }}</el-tag>
</div>
<div class="flex">
<div class="flex image-row">
<div>图片 :</div>
<div>
<div class="image-config">
<img class="image" :src="current.data.image.src" alt="" />
<div>
<div class="image-config-detail">
<div>推荐尺寸：{{ current.data.image.size }}</div>
<div class="link-src">
链接地址：
@@ -74,7 +67,7 @@
</div>
</div>
</div>
<div class="flex" v-if="current.model == 'goods'">
<div class="flex badge-row" v-if="current.model == 'goods'">
<div>标签 :</div>
<el-input
style="width: 200px"
@@ -82,14 +75,13 @@
v-model="current.data.badge.label"
/>
<el-input
style="width: 100px; margin-left: 10px"
style="width: 100px"
disabled
type="text"
v-model="current.data.badge.url"
/>
<el-button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('badge')"
>选择链接
@@ -101,7 +93,7 @@
:key="index"
class="draggable"
>
<div class="flex">
<div class="flex column-item">
<img :src="item.img" class="column-img" />
<el-button
size="small"
@@ -111,7 +103,7 @@
@click="handleSelectGoods('list', index)"
>选择商品
</el-button>
<div>
<div class="column-item-config">
<div v-if="current.model == 'brand'" style="margin-bottom: 10px">
<el-input disabled v-model="item.url" />
</div>
@@ -235,11 +227,12 @@ export default {
// 选择商品回调
selectedGoodsData(val) {
if (!val?.length || !this.current) return;
const goods = val[0];
const item = this.current.data.list[this.goodsIndex];
item.img = val[0].thumbnail;
item.title = val[0].goodsName;
item.price = val[0].price;
item.url = val[0].url;
item.img = goods.thumbnail;
item.title = goods.goodsName;
item.price = goods.price;
item.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
},
// 选择链接回调
selectedLink(val) {
@@ -279,6 +272,45 @@ export default {
margin: 10px 0;
}
.current-module-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.image-row {
align-items: flex-start;
gap: 10px;
}
.badge-row {
align-items: center;
gap: 10px;
margin: 10px 0;
}
.image-config {
display: flex;
gap: 12px;
align-items: flex-start;
}
.image-config-detail {
flex: 1;
min-width: 0;
}
.column-item {
align-items: center;
gap: 12px;
}
.column-item-config {
flex: 1;
min-width: 0;
}
.mix-model {
display: flex;
justify-content: space-between;
@@ -293,6 +325,7 @@ export default {
background: #ffffff;
box-shadow: 0px 1px 13px 0px #e5e5e5;
position: relative;
overflow: hidden;
&:hover {
.setup-box {
@@ -326,8 +359,6 @@ export default {
}
.draggable {
> .flex {
align-items: center;
}
margin-bottom: 10px;
}
</style>

165
manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
View File

@@ -1,20 +1,22 @@
<template>
<div class="flex" v-if="data.options.right.model == 'brand'">
<div class="left-side" >
<img :src="data.options.right.data.image.src" alt="">
<div class="mix-panel flex" v-if="data.options.right.model == 'brand'">
<div class="left-side">
<img :src="data.options.right.data.image.src" alt="" />
</div>
<div>
<div class="right-side">
<div class="badge-box flex">
<div class="round">
<el-icon><ArrowRight /></el-icon>
</div>
</div>
<div class="flex goods-list">
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
<div
class="goods-item flex"
:key="index"
v-for="(item, index) in data.options.right.data.list"
>
<div class="goods-thumbnail">
<img :src="item.img" alt="">
<img :src="item.img" alt="" />
</div>
</div>
</div>
@@ -24,63 +26,59 @@
<script>
import { ArrowRight } from "@element-plus/icons-vue";
export default {
name: "mix-goods",
name: "mix-brand",
components: { ArrowRight },
data() {
return {}
},
props: {
data: {
type: Object,
default: {}
}
default: () => ({}),
},
components: {},
mounted() {
},
methods: {}
}
};
</script>
<style scoped lang="scss">
.goods-detail{
.mix-panel {
height: 100%;
align-items: stretch;
overflow: hidden;
}
}
.goods-detail-title{
font-size: 13px;
font-weight: normal;
line-height: 16px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.goods-detail-price{
font-size: 14px;
font-weight: normal;
line-height: 17px;
letter-spacing: 0px;
color: #F31947;
margin-top: 8px;
margin-bottom:10px;
}
.goods-thumbnail{
margin-left: 7px;
display: flex;
align-items: center;
>img{
width:90px;
height: 90px;
.left-side {
flex-shrink: 0;
width: 254px;
height: 344px;
> img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9.8px 0 0 9.8px;
}
}
.badge-box{
margin-top: 33px;
justify-content:right;
>.round{
.right-side {
flex: 1;
min-width: 0;
height: 344px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
.badge-box {
margin-top: 24px;
margin-bottom: 8px;
justify-content: flex-end;
flex-shrink: 0;
> .round {
width: 17.5px;
height: 17.5px;
opacity: 1;
border-radius: 50%;
text-align: center;
line-height: 17.5px;
@@ -88,46 +86,47 @@ export default {
margin-right: 17.5px;
}
}
.goods-list{
.goods-list {
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
justify-content:space-between;
padding: 0 16px;
justify-content: space-between;
align-content: flex-start;
padding: 0 16px 12px;
gap: 8px 0;
flex: 1;
min-height: 0;
overflow: hidden;
}
.goods-item{
.goods-item {
display: flex;
align-items: center;
justify-content: center;
width:50%;
height: 85px;
flex: 0 0 calc(50% - 4px);
width: calc(50% - 4px);
height: 82px;
border-radius: 9.8px;
opacity: 1;
transition: .35s;
background: #FFFFFF;
margin-bottom:9px;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
transition: 0.35s;
}
.left-side {
>img{
width: 254px;
height: 344px;
border-radius: 9.8px 0px 0px 9.8px;
opacity: 1;
.goods-thumbnail {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
> img {
max-width: 80px;
max-height: 76px;
width: auto;
height: auto;
object-fit: contain;
}
}
.badge {
width: 50px;
height: 27px;
line-height:27px;
border-radius: 13.3px 0px 0px 13.3px;
opacity: 1;
background: #F31947;
font-size: 12.6px;
font-weight: normal;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 26px;
margin-bottom:17px;
}
</style>

137
manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
View File

@@ -1,21 +1,25 @@
<template>
<div class="flex" v-if="data.options.left.model == 'goods'">
<div class="left-side" >
<img :src="data.options.left.data.image.src" alt="">
<div class="mix-panel flex" v-if="data.options.left.model == 'goods'">
<div class="left-side">
<img :src="data.options.left.data.image.src" alt="" />
</div>
<div>
<div class="right-side">
<div class="badge-box flex">
<div class="badge">
{{data.options.left.data.badge.label}}
{{ data.options.left.data.badge.label }}
</div>
</div>
<div class="flex goods-list">
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
<div
class="goods-item flex"
:key="index"
v-for="(item, index) in data.options.left.data.list"
>
<div class="goods-thumbnail">
<img :src="item.img" alt="">
<img :src="item.img" alt="" />
</div>
<div class="goods-detail">
<div class="goods-detail-title">{{item.title}}</div>
<div class="goods-detail-title">{{ item.title }}</div>
<div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
</div>
</div>
@@ -27,98 +31,117 @@
<script>
export default {
name: "mix-goods",
data() {
return {}
},
props: {
data: {
type: Object,
default: {}
}
default: () => ({}),
},
components: {},
mounted() {
},
methods: {}
}
};
</script>
<style scoped lang="scss">
.goods-detail{
.mix-panel {
height: 100%;
align-items: stretch;
overflow: hidden;
}
.goods-detail-title{
.left-side {
flex-shrink: 0;
width: 196.7px;
height: 344px;
> img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px 0 0 10px;
}
}
.right-side {
flex: 1;
min-width: 0;
height: 344px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
}
.goods-detail-title {
font-size: 13px;
font-weight: normal;
line-height: 16px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.goods-detail-price{
.goods-detail-price {
font-size: 14px;
font-weight: normal;
line-height: 17px;
letter-spacing: 0px;
color: #F31947;
color: #f31947;
margin-top: 8px;
margin-bottom:10px;
}
.goods-thumbnail{
.goods-thumbnail {
margin-left: 7px;
display: flex;
align-items: center;
>img{
width:90px;
flex-shrink: 0;
> img {
width: 90px;
height: 90px;
object-fit: contain;
}
}
.badge-box{
justify-content:right;
.badge-box {
justify-content: flex-end;
flex-shrink: 0;
}
.goods-list{
.goods-list {
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
justify-content:space-between;
justify-content: space-between;
padding: 0 16px;
gap: 9px 0;
}
.goods-item{
.goods-item {
display: flex;
align-items: center;
width: 173.6px;
flex: 0 0 calc(50% - 4px);
width: calc(50% - 4px);
height: 119px;
border-radius: 9.8px;
opacity: 1;
transition: .35s;
background: #FFFFFF;
margin-bottom:9px;
&:hover{
box-shadow: 0px 1px 6px 0px #E5E5E5;
}
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
transition: 0.35s;
}
.left-side {
>img{
border-radius: 10px 0px 0px 10px;
display: block;
width: 196.7px;
height: 343.7px;
&:hover {
box-shadow: 0 1px 6px 0 #e5e5e5;
}
}
.badge {
width: 50px;
height: 27px;
line-height:27px;
border-radius: 13.3px 0px 0px 13.3px;
opacity: 1;
background: #F31947;
line-height: 27px;
border-radius: 13.3px 0 0 13.3px;
background: #f31947;
font-size: 12.6px;
font-weight: normal;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
color: #ffffff;
margin-top: 26px;
margin-bottom:17px;
margin-bottom: 17px;
}
</style>

68
manager/src/views/page-decoration/modelList/newGoodsSort.vue
View File

@@ -101,12 +101,14 @@
v-for="(item, index) in options.right.list"
:key="index"
>
<div class="img-wrap">
<img :src="item.img" alt="" />
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
</div>
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectGoods(item)"
@@ -497,42 +499,37 @@ export default {
flex-direction: column;
align-items: center;
overflow: hidden;
img {
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
.img-wrap {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
line-height: 16px;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
:nth-child(3) {
color: $theme_color;
margin-top: 2px;
line-height: 1.2;
flex-shrink: 0;
}
.jiaobiao {
position: absolute;
width: 23px;
height: 23px;
top: 6px;
right: 6px;
background: url("../../../assets/festival_icon.png");
top: 0;
right: 0;
margin: 0;
padding: 0;
max-height: none;
overflow: visible;
display: block;
background: url("../../../assets/festival_icon.png") no-repeat;
color: #fff;
text-align: center;
line-height: 23px;
font-size: 12px;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
.jiaobiao1,
.jiaobiao4 {
@@ -547,6 +544,25 @@ export default {
background-position: -60px -30px;
}
}
> p:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
line-height: 16px;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
> p:nth-child(3) {
color: $theme_color;
margin-top: 2px;
line-height: 1.2;
flex-shrink: 0;
}
}
> div:nth-child(3n) {
border-right: none;
}

11
manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
View File

@@ -121,15 +121,26 @@ export default {
selectedGoodsData(val) {
if (!val?.length || !this.draftList) return;
val.forEach((item) => {
if (this.isGoodsInDraftList(item)) return;
this.draftList.push({
img: item.thumbnail,
price: item.price,
title: item.goodsName,
desc: "",
skuId: item.id,
goodsId: item.goodsId,
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
});
});
},
isGoodsInDraftList(goods) {
const targetUrl = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
return this.draftList.some(
(draft) =>
(draft.skuId && String(draft.skuId) === String(goods.id)) ||
(draft.url && draft.url === targetUrl)
);
},
// 选择链接回调
selectedLink(val) {
if (!this.draftList?.length) return;

16
manager/src/views/page-decoration/modelList/recommend.vue
View File

@@ -345,12 +345,17 @@ export default {
width: 595px;
.content-left {
display: flex;
align-items: stretch;
padding-top: 10px;
font-size: 12px;
box-sizing: content-box;
> div:nth-child(1) {
width: 189px;
border-right: 1px solid #eee;
height: 360px;
display: flex;
flex-direction: column;
box-sizing: border-box;
img {
margin: 40px 0 0 15px;
}
@@ -368,15 +373,20 @@ export default {
color: #999;
}
.view-btn {
margin-left: 15px;
margin-top: 10px;
align-self: center;
width: 145px;
margin-top: auto;
margin-bottom: 15px;
color: #fff;
}
}
> div:nth-child(2) {
width: 405px;
height: 360px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
box-sizing: border-box;
> div {
display: flex;
align-items: center;
@@ -408,7 +418,7 @@ export default {
grid-template-rows: repeat(2, 1fr);
height: 360px;
padding-top: 10px;
box-sizing: border-box;
box-sizing: content-box;
> div {
width: 100%;

50
manager/src/views/seller/shop/shopDetail.vue
View File

@@ -26,9 +26,10 @@
</p>
<p>
<el-switch
v-model="storeInfo.storeDisable"
v-model="storeEnabled"
:active-value="true"
:inactive-value="false"
:loading="storeStatusChanging"
active-text="启用"
inactive-text="禁用"
@change="shopStatusChange"
@@ -301,7 +302,7 @@
</el-form-item>
<el-form-item label="下单时间">
<el-date-picker
v-model="selectDate"
v-model="orderSelectDate"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
clearable
@@ -427,7 +428,7 @@
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="selectDate"
v-model="refundGoodsSelectDate"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
clearable
@@ -573,7 +574,7 @@
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="selectDate"
v-model="refundSelectDate"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
clearable
@@ -696,8 +697,12 @@ export default {
categories: [],
loading: true,
storeInfo: {},
storeEnabled: false,
storeStatusChanging: false,
checkAllGroup: [],
selectDate: null,
orderSelectDate: null,
refundGoodsSelectDate: null,
refundSelectDate: null,
orderData: [],
orderTotal: 0,
orderSearchForm: {
@@ -833,7 +838,7 @@ export default {
getStoreInfo() {
API_Store.getShopDetailData(this.id).then((res) => {
this.storeInfo = res.result;
this.storeInfo.storeDisable = this.storeInfo.storeDisable === "OPEN" ? true : false;
this.storeEnabled = this.storeInfo.storeDisable === "OPEN";
if (this.storeInfo.goodsManagementCategory != null) {
this.checkAllGroup = this.storeInfo.goodsManagementCategory
.split(",")
@@ -843,11 +848,23 @@ export default {
});
},
shopStatusChange(v) {
if (v) {
API_Store.enableBrand(this.id).then((res) => {});
this.storeStatusChanging = true;
const request = v ? API_Store.enableBrand(this.id) : API_Store.disableShop(this.id);
request
.then((res) => {
if (res.success) {
this.$Message.success("操作成功");
this.getStoreInfo();
} else {
API_Store.disableShop(this.id).then((res) => {});
this.storeEnabled = !v;
}
})
.catch(() => {
this.storeEnabled = !v;
})
.finally(() => {
this.storeStatusChanging = false;
});
},
getOrderData() {
this.loading = true;
@@ -922,21 +939,30 @@ export default {
this.getOrderData();
},
selectDateRange(v) {
if (v) {
if (v && v.length === 2) {
this.orderSearchForm.startDate = v[0];
this.orderSearchForm.endDate = v[1];
} else {
this.orderSearchForm.startDate = "";
this.orderSearchForm.endDate = "";
}
},
selectRefundGoodsDateRange(v) {
if (v) {
if (v && v.length === 2) {
this.refundGoodsOrderSearchForm.startDate = v[0];
this.refundGoodsOrderSearchForm.endDate = v[1];
} else {
this.refundGoodsOrderSearchForm.startDate = "";
this.refundGoodsOrderSearchForm.endDate = "";
}
},
selectRefundDateRange(v) {
if (v) {
if (v && v.length === 2) {
this.refundOrderSearchForm.startDate = v[0];
this.refundOrderSearchForm.endDate = v[1];
} else {
this.refundOrderSearchForm.startDate = "";
this.refundOrderSearchForm.endDate = "";
}
},
},

6
manager/src/views/sys/message/sms.scss
View File

@@ -1,9 +1,3 @@
.card {
width: 100%;
height: 100%;
position: fixed;
}
.cardBox {
display: inline-block;
border-radius: 2px;

13
manager/src/views/sys/oss-manage/ossManage.scss
View File

@@ -193,17 +193,21 @@
width: 100%;
height: 26px;
background-color: #ffffff;
text-align: center;
line-height: 30px;
color: #666666;
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
> div {
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
}
}
@@ -211,6 +215,9 @@
.custom-checkbox-card-checked {
border: 2px solid #ff5c58;
}
.oss-card-selectable {
cursor: pointer;
}
.text {
width: 120px;
height: 36px;

23
manager/src/views/sys/oss-manage/ossManage.vue
View File

@@ -182,9 +182,13 @@
<div v-for="(item, index) in data" :key="index" class="img-item">
<div
class="card"
:class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
:class="{
'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url),
'oss-card-selectable': isComponent && selectImage,
}"
@mouseenter="onMouseOver(item, index)"
@mouseleave="onMouseOut(item, index)"
@click="handleCardClick(item, $event)"
>
<el-checkbox
:value="item.id + ',' + item.url"
@@ -1103,6 +1107,23 @@ export default {
this.$emit("selected", e);
}
},
handleCardClick(item, event) {
if (!(this.isComponent && this.selectImage)) return;
if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
return;
}
const key = `${item.id},${item.url}`;
let next;
if (this.maxSelect === 1) {
next = this.selectedOss.includes(key) ? [] : [key];
} else if (this.selectedOss.includes(key)) {
next = this.selectedOss.filter((k) => k !== key);
} else {
next = [...this.selectedOss, key];
}
this.selectedOss = next;
this.selectOssChange(next);
},
// 页码改变时回调
pageChange(value) {
this.selectedOss = [];

4
manager/src/views/sys/setting-manage/smsSettingManage.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-card class="card">
<el-card class="sms-setting-card">
<div class="cardBox">
<div class="methodItem">
<img src="../../../assets/aliyun.png" height="172" width="440" />
@@ -82,7 +82,7 @@ export default {
};
</script>
<style lang="scss">
.card {
.sms-setting-card {
width: 100%;
height: 100%;
position: fixed;

1
seller/src/views/order/order/orderDetail.vue
View File

@@ -784,6 +784,7 @@ export default {
this.partDeliveryForm.deliveryNumMap = map;
},
refreshPartDeliveryAfterSubmit() {
this.partDeliveryModal = false;
this.loading = true;
return Promise.all([
API_Order.getOrderDetail(this.sn).then((res) => {

3
seller/src/views/shop/modelForm.vue
View File

@@ -272,11 +272,12 @@ export default {
margin: 0 auto;
background: #fff;
min-height: 1200px;
overflow-x: visible;
}
.model-form-list {
min-height: 500px;
padding-right: 110px;
box-sizing: border-box;
overflow: visible;
}
.top-fixed-advert {
display: flex;

44
seller/src/views/shop/modelFormItem.vue
View File

@@ -377,20 +377,34 @@ export default {
.model-item {
position: relative;
margin-bottom: 20px;
width: 100%;
box-sizing: border-box;
overflow: visible;
&:hover {
.del-btn {
display: block;
}
}
}
.model-item :deep(.width_1200_auto) {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.del-btn {
width: 100px;
height: 100px;
display: none;
position: absolute;
right: -100px;
left: 100%;
right: auto;
top: 0;
z-index: 10;
width: auto;
white-space: nowrap;
display: none;
z-index: 100;
&:hover {
display: block;
}
@@ -420,38 +434,41 @@ export default {
}
/** 热门广告 */
.hot-advert {
width: 1200px;
margin-right: -110px;
width: 100%;
box-sizing: border-box;
overflow: hidden;
.hot-advert-banner {
line-height: 0;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
}
}
.advert-list {
width: 100%;
margin: 0;
padding: 5px 0;
padding: 10px;
list-style: none;
box-sizing: border-box;
background: $theme_color;
height: 200px;
height: 210px;
display: flex;
gap: 10px;
align-items: center;
> li {
flex: 0 0 calc((100% - 40px) / 5);
flex: 1 1 0;
min-width: 0;
img {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
cursor: pointer;
border-radius: 10px;
transition: all 150ms ease-in-out;
@@ -473,16 +490,17 @@ export default {
}
/** 折扣广告 */
.discountAdvert-wrap {
width: 1200px;
width: 100%;
position: relative;
overflow: hidden;
}
.discountAdvert {
width: 1300px;
height: 585px;
height: 596px;
margin-left: -100px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: 1300px 585px;
background-size: 1300px 596px;
position: relative;
> div {
padding-left: 295px;

68
seller/src/views/shop/modelList/newGoodsSort.vue
View File

@@ -101,12 +101,14 @@
v-for="(item, index) in options.right.list"
:key="index"
>
<div class="img-wrap">
<img :src="item.img" alt="" />
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
</div>
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectGoods(item)"
@@ -499,42 +501,37 @@ export default {
flex-direction: column;
align-items: center;
overflow: hidden;
img {
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
.img-wrap {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
line-height: 16px;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
:nth-child(3) {
color: $theme_color;
margin-top: 2px;
line-height: 1.2;
flex-shrink: 0;
}
.jiaobiao {
position: absolute;
width: 23px;
height: 23px;
top: 6px;
right: 6px;
background: url("../../../assets/festival_icon.png");
top: 0;
right: 0;
margin: 0;
padding: 0;
max-height: none;
overflow: visible;
display: block;
background: url("../../../assets/festival_icon.png") no-repeat;
color: #fff;
text-align: center;
line-height: 23px;
font-size: 12px;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
.jiaobiao1,
.jiaobiao4 {
@@ -549,6 +546,25 @@ export default {
background-position: -60px -30px;
}
}
> p:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
line-height: 16px;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
> p:nth-child(3) {
color: $theme_color;
margin-top: 2px;
line-height: 1.2;
flex-shrink: 0;
}
}
> div:nth-child(3n) {
border-right: none;
}

18
seller/src/views/shop/modelList/recommend.vue
View File

@@ -341,18 +341,21 @@ export default {
.recommend {
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
.recommend-left {
width: 595px;
.content-left {
display: flex;
align-items: stretch;
padding-top: 10px;
font-size: 12px;
box-sizing: content-box;
> div:nth-child(1) {
width: 189px;
border-right: 1px solid #eee;
height: 360px;
display: flex;
flex-direction: column;
box-sizing: border-box;
img {
margin: 40px 0 0 15px;
}
@@ -370,15 +373,20 @@ export default {
color: #999;
}
.view-btn {
margin-left: 15px;
margin-top: 10px;
align-self: center;
width: 145px;
margin-top: auto;
margin-bottom: 15px;
color: #fff;
}
}
> div:nth-child(2) {
width: 405px;
height: 360px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
box-sizing: border-box;
> div {
display: flex;
align-items: center;
@@ -410,7 +418,7 @@ export default {
grid-template-rows: repeat(2, 1fr);
height: 360px;
padding-top: 10px;
box-sizing: border-box;
box-sizing: content-box;
> div {
width: 100%;

3
seller/src/views/sys/oss-manage/ossManage.scss
View File

@@ -211,6 +211,9 @@
.custom-checkbox-card-checked {
border: 2px solid #ff5c58;
}
.oss-card-selectable {
cursor: pointer;
}
.text {
width: 120px;
height: 36px;

23
seller/src/views/sys/oss-manage/ossManage.vue
View File

@@ -176,9 +176,13 @@
<div v-for="(item, index) in data" :key="index" class="img-item">
<div
class="card"
:class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
:class="{
'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url),
'oss-card-selectable': isComponent && selectImage,
}"
@mouseenter="onMouseOver(item, index)"
@mouseleave="onMouseOut(item, index)"
@click="handleCardClick(item, $event)"
>
<el-checkbox
:value="item.id + ',' + item.url"
@@ -1097,6 +1101,23 @@ export default {
this.$emit("selected", e);
}
},
handleCardClick(item, event) {
if (!(this.isComponent && this.selectImage)) return;
if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
return;
}
const key = `${item.id},${item.url}`;
let next;
if (this.maxSelect === 1) {
next = this.selectedOss.includes(key) ? [] : [key];
} else if (this.selectedOss.includes(key)) {
next = this.selectedOss.filter((k) => k !== key);
} else {
next = [...this.selectedOss, key];
}
this.selectedOss = next;
this.selectOssChange(next);
},
// 页码改变时回调
pageChange(value) {
this.selectedOss = [];