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

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

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

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>

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

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

@@ -1,124 +1,147 @@
<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 class="right-side">
<div class="badge-box flex">
<div class="badge">
{{ data.options.left.data.badge.label }}
</div>
</div>
<div>
<div class="badge-box flex">
<div class="badge">
{{data.options.left.data.badge.label}}
</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-thumbnail">
<img :src="item.img" alt="" />
</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-thumbnail">
<img :src="item.img" alt="">
</div>
<div class="goods-detail">
<div class="goods-detail-title">{{item.title}}</div>
<div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
</div>
</div>
<div class="goods-detail">
<div class="goods-detail-title">{{ item.title }}</div>
<div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<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>

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

@@ -101,12 +101,14 @@
v-for="(item, index) in options.right.list"
:key="index"
>
<img :src="item.img" alt="" />
<div class="img-wrap">
<img :src="item.img" alt="" />
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
</div>
<p>{{ item.name }}</p>
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectGoods(item)"
@@ -497,16 +499,52 @@ 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;
display: block;
object-fit: cover;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.jiaobiao {
position: absolute;
width: 23px;
height: 23px;
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 {
background-position: -2px -30px;
}
.jiaobiao2,
.jiaobiao5 {
background-position: -31px -30px;
}
.jiaobiao3,
.jiaobiao6 {
background-position: -60px -30px;
}
}
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
:nth-child(2) {
> p:nth-child(2) {
width: 100%;
height: auto;
max-height: 32px;
@@ -518,34 +556,12 @@ export default {
-webkit-box-orient: vertical;
text-align: center;
}
:nth-child(3) {
> p: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");
color: #fff;
text-align: center;
}
.jiaobiao1,
.jiaobiao4 {
background-position: -2px -30px;
}
.jiaobiao2,
.jiaobiao5 {
background-position: -31px -30px;
}
.jiaobiao3,
.jiaobiao6 {
background-position: -60px -30px;
}
}
> 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%;

54
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) => {});
} else {
API_Store.disableShop(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 {
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 = "";
}
},
},

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 = [];