czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增角色模板优化店铺装修

Browse Source
This commit is contained in:
gyq
2025-12-09 17:34:06 +08:00
parent 9f4cec00ee
commit cb13753928
9 changed files with 520 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/views/online-shop/index.vue
View File

@@ -1,13 +1,8 @@
<template>
<div class="app-container">
<div class="btn_wraps">
<div
class="btn"
:class="{ active: tableActive == item.autoKey }"
v-for="item in tableData"
:key="item.autoKey"
@click="selectItemChange(item.autoKey)"
>
<div class="btn" :class="{ active: tableActive == item.autoKey }" v-for="item in tableData" :key="item.autoKey"
@click="selectItemChange(item.autoKey)">
{{ item.name }}
</div>
</div>
@@ -15,17 +10,16 @@
<div class="preview_wrap">
<div class="phone_wrap">
<div class="index_bg" v-if="tableActive == 'index_bg'">
<img class="bg" :src="selectItem.value" />
<el-carousel height="500px">
<el-carousel-item v-for="item in JSON.parse(selectItem.value)">
<img class="bg" :src="item" />
</el-carousel-item>
</el-carousel>
<div class="menu_wrap">
<div class="menu_wrap_div">
<div class="left">
<div class="icon_wrap">
<SvgIcon
style="margin-right: 0"
color="rgb(0,0,0)"
size="30"
iconClass="Coffee"
></SvgIcon>
<SvgIcon style="margin-right: 0" color="rgb(0,0,0)" size="30" iconClass="Coffee"></SvgIcon>
</div>
<div class="info">
<div class="t1">点餐</div>
@@ -34,24 +28,14 @@
</div>
<div class="right">
<div class="btn">
<SvgIcon
style="margin-right: 0"
size="30"
color="rgb(0,0,0)"
iconClass="postcard"
></SvgIcon>
<SvgIcon style="margin-right: 0" size="30" color="rgb(0,0,0)" iconClass="postcard"></SvgIcon>
<div class="info">
<div class="t1">会员</div>
<div class="t2">入会享权益</div>
</div>
</div>
<div class="btn">
<SvgIcon
style="margin-right: 0"
color="rgb(0,0,0)"
size="30"
iconClass="wallet"
></SvgIcon>
<SvgIcon style="margin-right: 0" color="rgb(0,0,0)" size="30" iconClass="wallet"></SvgIcon>
<div class="info">
<div class="t1">充值</div>
<div class="t2">充值享更多优惠</div>
@@ -171,7 +155,11 @@
</div>
</div>
<div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
<img class="bg" :src="selectItem.value" />
<el-carousel height="120px">
<el-carousel-item v-for="item in JSON.parse(selectItem.value)">
<img class="bg" :src="item" />
</el-carousel-item>
</el-carousel>
<div class="shop_name">{{ shopName }}</div>
<img class="content" src="@/assets/images/shop_editor_bg.png" alt="" />
</div>
@@ -203,10 +191,19 @@
<div class="t2">注：点击图片更换</div>
</div>
<div class="form_item">
<SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</SingleImageUpload>
<div class="upload_wrap" style="display: flex;flex-direction: column;gap: 28px;"
v-if="isJsonArrayString(selectItem.value)">
<MultiImageUpload v-model="imgList" @upDataEvent="MultiOnSuccess" />
<div>
<el-button type="primary" size="large" @click="doSubmit">确认修改</el-button>
</div>
</div>
<div v-else>
<SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</SingleImageUpload>
</div>
<!-- <el-upload
:headers="headers"
class="avatar-uploader"
@@ -237,6 +234,7 @@ export default {
tableData: [],
selectItem: {},
imageUrl: "",
imgList: []
};
},
mounted() {
@@ -255,14 +253,53 @@ export default {
});
this.getList();
},
// 单图上传成功
onSuccess(response) {
this.doSubmit();
},
// 多图上传成功
async MultiOnSuccess(response) {
if (!response && this.imgList.length > 0) {
console.log(this.imgList);
await nextTick()
this.selectItem.value = JSON.stringify(this.imgList)
console.log('onSuccess.selectItem.value', this.selectItem.value);
}
},
/**
* 判断字符串是否为合法的 JSON 数组
* @param {string} str - 待判断的字符串
* @returns {boolean} true=是JSON数组字符串 / false=普通字符串/其他
*/
isJsonArrayString(str) {
// 1. 非字符串直接返回 false
if (typeof str !== 'string') {
return false;
}
// 2. 空字符串返回 false（根据业务可调整）
if (str.trim() === '') {
return false;
}
try {
// 3. 尝试解析 JSON
const parsed = JSON.parse(str);
// 4. 校验解析结果是否为数组
return Array.isArray(parsed);
} catch (e) {
// 解析失败（普通字符串/非法 JSON）→ 返回 false
return false;
}
},
// 切换类型
selectItemChange(key) {
this.tableActive = key;
const { autoKey, id, name, value } = this.tableData.find((item) => item.autoKey == key);
this.selectItem = { autoKey, id, name, value };
if (this.isJsonArrayString(value)) {
this.imgList = JSON.parse(value)
}
console.log(this.selectItem);
},
// 获取装修数据
@@ -319,6 +356,7 @@ export default {
.index_bg {
padding-bottom: 50px;
.bg {
width: 100%;
height: 500px;