code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-13 04:18:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 重构组件逻辑与样式优化

Browse Source 
- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。
- 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。
- 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。
- 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。
- 更新订单相关组件的按钮样式，提升视觉一致性与可用性。
This commit is contained in:
田香琪
2026-06-30 21:09:28 +08:00
parent ec948b5496
commit 28a857249a
121 changed files with 5122 additions and 2182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
seller/src/views/shop/modelConfig.js
View File

@@ -215,7 +215,7 @@ export const modelData = [
bgImg: {
img: require('@/assets/nav/decorate.png'),
url: '',
size: "1300*586"
size: "1300*585"
},
classification: [{
img: require('@/assets/nav/decorate2.jpeg'),

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

@@ -136,6 +136,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>
@@ -264,6 +265,7 @@ export default {
@import "./modelList/setup-box.scss";
.model-form {
width: 1500px;
max-width: 100%;
}
.model-content {
width: 1200px;
@@ -273,6 +275,8 @@ export default {
}
.model-form-list {
min-height: 500px;
padding-right: 110px;
box-sizing: border-box;
}
.top-fixed-advert {
display: flex;

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

@@ -14,43 +14,43 @@
</template>
<!-- 热门广告 -->
<template v-if="element.type == 'hotAdvert'">
<div class="setup-content">
<img
style="display: block"
:src="element.options.list[0].img"
@click="$router.push(element.options.list[0].url)"
width="1200"
alt=""
/>
<div class="setup-box">
<div>
<el-button
size="small"
@click.stop="handleSelectModel(element.options.list[0])"
>编辑</el-button
>
<div class="hot-advert">
<div class="hot-advert-banner setup-content">
<img
:src="element.options.list[0].img"
@click="$router.push(element.options.list[0].url)"
alt=""
/>
<div class="setup-box">
<div>
<el-button
size="small"
@click.stop="handleSelectModel(element.options.list[0])"
>编辑</el-button
>
</div>
</div>
</div>
</div>
<ul class="advert-list">
<template v-for="(item, index) in element.options.list">
<li
v-if="index !== 0"
@click="$router.push(item.url)"
class="setup-content"
:key="index"
>
<img :src="item.img" width="230" height="190" alt="" />
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel(item)"
>编辑</el-button
>
<ul class="advert-list">
<template v-for="(item, index) in element.options.list">
<li
v-if="index !== 0"
@click="$router.push(item.url)"
class="setup-content"
:key="index"
>
<img :src="item.img" alt="" />
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel(item)"
>编辑</el-button
>
</div>
</div>
</div>
</li>
</template>
</ul>
</li>
</template>
</ul>
</div>
</template>
<!-- 限时秒杀 待完善 -->
<template v-if="element.type == 'seckill'">
@@ -107,15 +107,15 @@
</template>
<!-- 好货推荐 -->
<template v-if="element.type == 'recommend'">
<recommend :data="element"></recommend>
<recommend :data="element" class="mb_20 width_1200_auto"></recommend>
</template>
<!-- 新品排行 -->
<template v-if="element.type == 'newGoodsSort'">
<new-goods-sort :data="element"></new-goods-sort>
<new-goods-sort :data="element" class="mb_20 width_1200_auto"></new-goods-sort>
</template>
<!-- 首页广告 -->
<template v-if="element.type == 'firstAdvert'">
<first-page-advert :data="element"></first-page-advert>
<first-page-advert :data="element" class="mb_20 width_1200_auto"></first-page-advert>
</template>
<!-- 商品模块 -->
<template v-if="element.type == 'goodsType'">
@@ -142,7 +142,7 @@
<div class="horizontal-advert setup-content">
<img
v-if="element.options.img"
width="1200"
class="banner-ad-img"
:src="element.options.img"
alt=""
/>
@@ -162,7 +162,7 @@
</div>
</template>
<template v-if="element.type == 'notEnough'">
<not-enough :data="element"></not-enough>
<not-enough :data="element" class="mb_20 width_1200_auto"></not-enough>
</template>
<div class="del-btn">
<el-button size="small" type="danger" @click="handleModelDelete">删除</el-button>
@@ -176,13 +176,13 @@
destroy-on-close
>
<div class="modal-top-advert">
<div>
<div class="modal-form-item modal-form-preview">
<!-- 热门广告两种图片尺寸 -->
<img
class="show-image"
width="600"
height="40"
v-if="selected.size && selected.size.indexOf('1200') >= 0"
v-if="selected.size && selected.size.indexOf('1200') >= 0 && selected.img"
:src="selected.img"
alt
/>
@@ -198,7 +198,7 @@
<img
class="show-image"
width="600"
height="300"
height="270"
v-if="selected.size && selected.size.indexOf('1300') >= 0"
:src="selected.img"
alt
@@ -220,26 +220,32 @@
alt
/>
</div>
<div class="tips">
建议尺寸：<span>{{ selected.size }}</span>
<div class="tips">建议尺寸：{{ selected.size }}</div>
<div class="modal-form-item modal-form-link">
<span class="modal-label">图片链接：</span>
<div class="modal-link-field">
<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
</div>
<div>
图片链接：<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
<div>
选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
<div class="modal-form-item">
<span class="modal-label">选择图片：</span>
<el-button size="small" type="primary" @click="handleSelectImg"
>选择图片</el-button
>
</div>
</div>
<template #footer>
<el-button @click="handleCancelModal">取消</el-button>
<el-button type="primary" @click="handleConfirmModal">确定</el-button>
</template>
</el-dialog>
<!-- 选择商品。链接 -->
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
@@ -249,6 +255,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>
@@ -296,14 +303,19 @@ export default {
data() {
return {
showModal: false, // modal显隐
selected: {}, // 已选数据
selected: {}, // 弹窗编辑草稿
editTarget: null, // 确定后写回的原数据
picModelFlag: false, // 图片选择器
};
},
methods: {
cloneItem(item) {
return JSON.parse(JSON.stringify(item || {}));
},
// 编辑模块
handleSelectModel(item) {
this.selected = item;
this.editTarget = item;
this.selected = this.cloneItem(item);
this.showModal = true;
},
// 删除模块
@@ -341,8 +353,22 @@ export default {
// 回显图片
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.selected.img = val.url;
},
handleCancelModal() {
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
handleConfirmModal() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
},
};
</script>
@@ -364,30 +390,68 @@ export default {
position: absolute;
right: -100px;
top: 0;
z-index: 10;
&:hover {
display: block;
}
}
/** 横幅广告 */
.horizontal-advert {
width: 1200px;
height: auto;
width: 100%;
max-width: 1200px;
overflow: hidden;
line-height: 0;
.banner-ad-img {
display: block;
width: 100%;
height: auto;
max-height: 166px;
object-fit: cover;
}
.default-con {
height: 100px;
padding-top: 30px;
text-align: center;
background: #ddd;
line-height: normal;
}
}
/** 热门广告 */
.hot-advert {
width: 1200px;
margin-right: -110px;
box-sizing: border-box;
overflow: hidden;
.hot-advert-banner {
line-height: 0;
img {
display: block;
width: 100%;
height: auto;
}
}
}
.advert-list {
width: 100%;
margin: 0;
padding: 5px 0;
list-style: none;
box-sizing: border-box;
background: $theme_color;
height: 200px;
display: flex;
justify-content: space-around;
padding: 3px 10px;
gap: 10px;
align-items: center;
> li {
flex: 0 0 calc((100% - 40px) / 5);
img {
display: block;
width: 100%;
height: 190px;
cursor: pointer;
border-radius: 10px;
transition: all 150ms ease-in-out;
@@ -414,11 +478,11 @@ export default {
}
.discountAdvert {
width: 1300px;
height: 566px;
height: 585px;
margin-left: -100px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: 1300px 566px;
background-size: 1300px 585px;
position: relative;
> div {
padding-left: 295px;
@@ -428,8 +492,11 @@ export default {
&:nth-child(1) img {
margin: 10px 10px 0 0;
}
&:nth-child(2) img {
margin: 0 10px 0 0;
&:nth-child(2) {
margin-top: 10px;
img {
margin: 0 10px 0 0;
}
}
}
}
@@ -535,11 +602,61 @@ export default {
/** 装修模态框 内部样式start */
.modal-top-advert {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
> * {
margin-bottom: 10px;
align-items: stretch;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
.modal-form-item {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 16px;
.modal-label {
flex-shrink: 0;
width: 100px;
text-align: right;
padding-right: 12px;
}
.el-input {
flex: 1;
}
}
.modal-form-preview {
justify-content: center;
margin-bottom: 8px;
}
.modal-form-link {
align-items: flex-start;
.modal-label {
padding-top: 8px;
}
.modal-link-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
.outsideUrl {
flex: 1;
min-width: 0;
}
}
}
.tips {
padding-left: 112px;
margin-bottom: 16px;
color: #999;
font-size: 12px;
}
}
</style>

1
seller/src/views/shop/modelList/carousel.vue
View File

@@ -122,6 +122,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>

2
seller/src/views/shop/modelList/carousel1.vue
View File

@@ -84,7 +84,7 @@
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
<!-- 选择图片 -->
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
</el-dialog>
</div>
</template>

2
seller/src/views/shop/modelList/carousel2.vue
View File

@@ -204,7 +204,7 @@
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
<!-- 选择图片 -->
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
</el-dialog>
</div>
</template>

211
seller/src/views/shop/modelList/firstPageAdvert.vue
View File

@@ -26,13 +26,13 @@
<el-dialog
v-model="showModal"
title="装修"
width="800"
width="800px"
:close-on-click-modal="false"
append-to-body destroy-on-close>
append-to-body
destroy-on-close
>
<div class="modal-top-advert">
<div>
<div class="modal-form-item modal-form-preview">
<img
class="show-image"
width="170"
@@ -41,42 +41,68 @@
alt
/>
</div>
<div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
<div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
<div class="tips">
建议尺寸：<span>{{ selected.size }}</span>
<div class="modal-form-item">
<span class="modal-label">图片主标题：</span>
<el-input v-model="selected.name" />
</div>
<div>
图片链接：<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
<div class="modal-form-item">
<span class="modal-label">图片描述：</span>
<el-input v-model="selected.describe" />
</div>
<div class="tips">建议尺寸：{{ selected.size }}</div>
<div class="modal-form-item modal-form-link">
<span class="modal-label">图片链接：</span>
<div class="modal-link-field">
<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
</div>
<div class="modal-form-item">
<span class="modal-label">渐变背景色：</span>
<div class="modal-color-field">
<el-input v-model="selected.fromColor" />
<el-color-picker
v-if="selected.fromColor"
v-model="selected.fromColor"
/>
</div>
</div>
<div class="modal-form-item">
<span class="modal-label">渐变背景色：</span>
<div class="modal-color-field">
<el-input v-model="selected.toColor" />
<el-color-picker
v-if="selected.toColor"
v-model="selected.toColor"
/>
</div>
</div>
<div class="modal-form-item modal-form-exhibition">
<div
:style="{
backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
}"
class="exhibition"
></div>
</div>
<div class="modal-form-item">
<span class="modal-label">选择图片：</span>
<el-button size="small" type="primary" @click="handleSelectImg"
>选择图片</el-button
>
</div>
<div>
<span>渐变背景色：</span><el-input v-model="selected.fromColor" />
<el-color-picker v-if="selected.fromColor" v-model="selected.fromColor" />
</div>
<div>
<span>渐变背景色：</span><el-input v-model="selected.toColor" />
<el-color-picker v-if="selected.toColor" v-model="selected.toColor" />
</div>
<div
:style="{
backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
}"
class="exhibition"
></div>
<div>
选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
>选择图片</el-button
>&nbsp;
</div>
</div>
<template #footer>
<el-button @click="handleCancelModal">取消</el-button>
<el-button type="primary" @click="handleConfirmModal">确定</el-button>
</template>
</el-dialog>
<!-- 选择商品。链接 -->
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
@@ -86,6 +112,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>
@@ -105,14 +132,19 @@ export default {
return {
options: this.data.options, // 当前类型数据
showModal: false, // modal显隐
selected: {}, // 已选数据
selected: {}, // 弹窗编辑草稿
editTarget: null, // 确定后写回的原数据
picModelFlag: false, // 图片选择器
};
},
methods: {
cloneItem(item) {
return JSON.parse(JSON.stringify(item || {}));
},
// 打开装修modal
handleSelectModel(item, type) {
this.selected = item;
this.editTarget = item;
this.selected = this.cloneItem(item);
this.showModal = true;
},
handleSelectLink(item, index) {
@@ -137,8 +169,22 @@ export default {
// 选择图片回调
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.selected.img = val.url;
},
handleCancelModal() {
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
handleConfirmModal() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
},
};
</script>
@@ -148,7 +194,8 @@ export default {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// margin-top: -10px;
width: 100%;
box-sizing: border-box;
.item {
width: 393px;
height: 170px;
@@ -192,12 +239,86 @@ export default {
width: 154px;
}
}
.modal-top-advert {
align-items: start;
padding: 0 30px;
.exhibition {
width: 300px;
height: 50px;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
.modal-form-item {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 16px;
.modal-label {
flex-shrink: 0;
width: 100px;
text-align: right;
padding-right: 12px;
}
.el-input {
flex: 1;
}
}
.modal-form-preview {
justify-content: center;
margin-bottom: 8px;
}
.modal-form-link {
align-items: flex-start;
.modal-label {
padding-top: 8px;
}
.modal-link-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
.outsideUrl {
flex: 1;
min-width: 0;
}
}
}
.modal-color-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
.el-input {
flex: 1;
}
}
.modal-form-exhibition {
padding-left: 112px;
box-sizing: border-box;
.exhibition {
width: 100%;
height: 50px;
border-radius: 4px;
}
}
.tips {
padding-left: 112px;
margin-bottom: 16px;
color: #999;
font-size: 12px;
}
}
</style>

1
seller/src/views/shop/modelList/forYour.vue
View File

@@ -169,6 +169,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>

1
seller/src/views/shop/modelList/mixModel.vue
View File

@@ -153,6 +153,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>

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

@@ -121,13 +121,13 @@
<el-dialog
v-model="showModal"
title="装修"
width="800"
width="800px"
:close-on-click-modal="false"
append-to-body destroy-on-close>
append-to-body
destroy-on-close
>
<div class="modal-top-advert">
<div>
<div class="modal-form-item modal-form-preview">
<img
class="show-image"
width="160"
@@ -145,65 +145,87 @@
alt
/>
</div>
<div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
<div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
<div class="tips">
建议尺寸：<span>{{ selected.size }}</span>
<div class="modal-form-item">
<span class="modal-label">图片主标题：</span>
<el-input v-model="selected.name" />
</div>
<div>
图片链接：<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
<div class="modal-form-item">
<span class="modal-label">图片描述：</span>
<el-input v-model="selected.describe" />
</div>
<div>
<div class="tips">建议尺寸：{{ selected.size }}</div>
<div class="modal-form-item modal-form-link">
<span class="modal-label">图片链接：</span>
<div class="modal-link-field">
<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
</div>
<div class="modal-form-item modal-form-actions">
<el-button size="small" type="primary" @click="handleSelectImg"
>选择图片</el-button
>&nbsp;
>
<el-button size="small" type="primary" @click="handleSelectGoods('')"
>选择商品</el-button
>
</div>
</div>
<template #footer>
<el-button @click="handleCancelModal">取消</el-button>
<el-button type="primary" @click="handleConfirmModal">确定</el-button>
</template>
</el-dialog>
<!-- 装修标题 -->
<el-dialog
v-model="showModal1"
title="装修"
width="800"
width="800px"
:close-on-click-modal="false"
append-to-body destroy-on-close>
append-to-body
destroy-on-close
>
<div class="modal-top-advert">
<div><span>主标题：</span><el-input v-model="selected.title" /></div>
<div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
<div>
<span
>副标题链接：<el-input
<div class="modal-form-item">
<span class="modal-label">主标题：</span>
<el-input v-model="selected.title" />
</div>
<div class="modal-form-item">
<span class="modal-label">副标题：</span>
<el-input v-model="selected.secondTitle" />
</div>
<div class="modal-form-item modal-form-link">
<span class="modal-label">副标题链接：</span>
<div class="modal-link-field">
<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://" /></span
><el-button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink"
>选择链接</el-button
>
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
</div>
<div>
<span>背景色：</span
><el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
<div class="modal-form-item">
<span class="modal-label">背景色：</span>
<div class="modal-color-field">
<el-input v-model="selected.bgColor" />
<el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
</div>
</div>
</div>
<template #footer>
<el-button @click="handleCancelModal1">取消</el-button>
<el-button type="primary" @click="handleConfirmModal1">确定</el-button>
</template>
</el-dialog>
<!-- 选择商品。链接 -->
<liliDialog
@@ -217,6 +239,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>
@@ -239,15 +262,19 @@ export default {
options: this.data.options, // 当前数据
showModal: false, // modal显隐
showModal1: false, // modal显隐
selected: {}, // 已选数据
selected: {}, // 弹窗编辑草稿
editTarget: null, // 确定后写回的原数据
picModelFlag: false, // 选择图片modal
};
},
methods: {
cloneItem(item) {
return JSON.parse(JSON.stringify(item || {}));
},
// 装修modal
handleSelectModel(item, type) {
this.selected = item;
console.warn(item);
this.editTarget = item;
this.selected = this.cloneItem(item);
if (type) {
this.showModal1 = true;
} else {
@@ -259,9 +286,10 @@ export default {
this.$refs.liliDialog.open("link");
},
handleSelectGoods(item) {
// 调起选择商品
console.warn(item);
if (item) this.selected = item;
if (item) {
this.editTarget = item;
this.selected = this.cloneItem(item);
}
this.$refs.liliDialog.open("goods", "single");
setTimeout(() => {
this.$refs.liliDialog.goodsData = [this.selected];
@@ -269,18 +297,24 @@ export default {
},
// 选择链接回调
selectedLink(val) {
if (!this.selected) return;
this.selected.url = this.$filters.formatLinkType(val);
this.selected.type =
val.___type === "other" && val.url === "" ? "link" : "other";
},
// 选择商品回调
selectedGoodsData(val) {
let goods = val[0];
console.log(this.selected);
if (!val?.length || !this.selected) return;
const goods = val[0];
this.selected.img = goods.thumbnail;
this.selected.price = goods.price;
this.selected.name = goods.goodsName;
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
if (this.editTarget && !this.showModal && !this.showModal1) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
this.editTarget = null;
this.selected = {};
}
},
handleSelectImg() {
// 选择图片
@@ -294,8 +328,35 @@ export default {
// 选择图片回显
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.selected.img = val.url;
},
handleCancelModal() {
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
handleConfirmModal() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
handleCancelModal1() {
this.editTarget = null;
this.selected = {};
this.showModal1 = false;
},
handleConfirmModal1() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showModal1 = false;
},
},
};
</script>
@@ -305,6 +366,8 @@ export default {
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
box-sizing: border-box;
> div {
width: 393px;
height: 440px;
@@ -573,7 +636,78 @@ export default {
}
}
.modal-top-advert {
align-items: start;
padding: 0 30px;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
.modal-form-item {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 16px;
.modal-label {
flex-shrink: 0;
width: 100px;
text-align: right;
padding-right: 12px;
}
.el-input {
flex: 1;
}
}
.modal-form-preview {
justify-content: center;
margin-bottom: 8px;
}
.modal-form-link {
align-items: flex-start;
.modal-label {
padding-top: 8px;
}
.modal-link-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
.outsideUrl {
flex: 1;
min-width: 0;
}
}
}
.modal-form-actions {
padding-left: 112px;
gap: 10px;
}
.modal-color-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
.el-input {
flex: 1;
}
}
.tips {
padding-left: 112px;
margin-bottom: 16px;
color: #999;
font-size: 12px;
}
}
</style>

219
seller/src/views/shop/modelList/notEnough.vue
View File

@@ -1,23 +1,24 @@
<template>
<div class="not-enough">
<ul class="nav-bar setup-content">
<li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
<p>{{item.title}}</p>
<p>{{item.desc}}</p>
</li>
<div class="setup-box" style="width:100px;left:1100px;">
<div class="nav-bar setup-content">
<ul class="nav-list">
<li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
<p>{{item.title}}</p>
<p>{{item.desc}}</p>
</li>
</ul>
<div class="setup-box nav-setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
</div>
</div>
</ul>
</div>
<div class="content" v-if="showContent">
<div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
<img :src="item.img" width="210" height="210" :alt="item.name">
<img class="goods-img" :src="item.img" :alt="item.name">
<p>{{item.name}}</p>
<p>
<span>{{ $filters.unitPrice(item.price, '￥') }}</span>
<!-- <span>{{ $filters.unitPrice(item.price, '￥') }}</span> -->
</p>
<div class="setup-box">
<div>
@@ -29,12 +30,12 @@
<el-dialog
v-model="showModal"
title="装修"
width="800"
:close-on-click-modal="false"
append-to-body destroy-on-close>
<div class="modal-tab-bar">
append-to-body
destroy-on-close
@close="handleCancelModal">
<div class="modal-tab-bar" v-if="draftNavList.length">
<el-button type="primary" size='small' @click="handleAddNav">添加分类</el-button>
<table cellspacing="0">
<thead>
@@ -45,7 +46,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in conData.options.navList" :key="index">
<tr v-for="(item, index) in draftNavList" :key="index">
<td><el-input v-model="item.title" /></td>
<td><el-input v-model="item.desc" /></td>
<td v-if="index!=0">
@@ -55,8 +56,40 @@
</tbody>
</table>
</div>
<template #footer>
<el-button @click="handleCancelModal">取消</el-button>
<el-button type="primary" @click="handleConfirmModal">确定</el-button>
</template>
</el-dialog>
<el-dialog
v-model="showGoodsModal"
title="装修"
width="600"
:close-on-click-modal="false"
append-to-body
destroy-on-close
@close="handleCancelGoodsModal">
<div class="modal-top-advert">
<div class="modal-form-item modal-form-preview" v-if="selected.img">
<img class="show-image goods-preview" :src="selected.img" alt />
</div>
<div class="modal-form-item" v-if="selected.name">
<span class="modal-label">商品名称：</span>
<span>{{ selected.name }}</span>
</div>
<div class="modal-form-item" v-if="selected.price">
<span class="modal-label">商品价格：</span>
<span>{{ $filters.unitPrice(selected.price, '￥') }}</span>
</div>
<div class="modal-form-item modal-form-actions">
<el-button size="small" type="primary" @click="handleOpenGoodsPicker">选择商品</el-button>
</div>
</div>
<template #footer>
<el-button @click="handleCancelGoodsModal">取消</el-button>
<el-button type="primary" @click="handleConfirmGoodsModal">确定</el-button>
</template>
</el-dialog>
<!-- 选择商品。链接 -->
<liliDialog
ref="liliDialog"
@selectedGoodsData="selectedGoodsData"
@@ -73,11 +106,15 @@ export default {
},
data() {
return {
currentIndex:0, // 当前商品index
conData:this.data, // 当前数据
selected:{}, // 已选数据
showModal:false, // modal显隐
showContent:true, // 选择后刷新数据用
currentIndex:0,
conData:this.data,
selected:{},
editTarget: null,
showModal:false,
showGoodsModal: false,
showContent:true,
draftNavList: [],
draftGoodsList: [],
}
},
watch:{
@@ -89,41 +126,46 @@ export default {
}
},
methods:{
// tab点击切换
cloneList(list) {
return JSON.parse(JSON.stringify(list || []));
},
cloneItem(item) {
return JSON.parse(JSON.stringify(item || {}));
},
changeCurr(index){
this.currentIndex = index;
},
// 编辑
handleSelectModel (item,type) {
this.selected = item;
this.showModal = true
handleSelectModel () {
this.draftNavList = this.cloneList(this.conData.options.navList);
this.draftGoodsList = this.cloneList(this.conData.options.list);
this.showModal = true;
},
handleSelectGoods(item) { // 调起选择商品弹窗
if(item) this.selected = item;
this.$refs.liliDialog.open('goods', 'single')
handleSelectGoods(item) {
this.editTarget = item;
this.selected = this.cloneItem(item);
this.showGoodsModal = true;
},
handleOpenGoodsPicker() {
this.$refs.liliDialog.open('goods', 'single');
setTimeout(() => {
this.$refs.liliDialog.goodsData = [this.selected]
this.$refs.liliDialog.goodsData = [this.selected];
}, 500);
},
// 选择商品回调
selectedGoodsData(val){
console.log(val)
let goods = val[0]
this.selected.img = goods.thumbnail
this.selected.price = goods.price
this.selected.name = goods.goodsName
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
if (!val?.length) return;
const goods = val[0];
this.selected.img = goods.thumbnail;
this.selected.price = goods.price;
this.selected.name = goods.goodsName;
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
},
handleDelNav(index){ // 删除导航
this.conData.options.navList.splice(index,1)
this.conData.options.list.splice(index,1)
handleDelNav(index){
this.draftNavList.splice(index,1);
this.draftGoodsList.splice(index,1);
},
handleAddNav(){ // 添加导航
this.conData.options.navList.push(
{title:'',desc:''}
)
this.conData.options.list.push(
[{ img:'', name:'', price:0, url:'' },
handleAddNav(){
this.draftNavList.push({ title:'', desc:'' });
this.draftGoodsList.push([
{ img:'', name:'', price:0, url:'' },
{ img:'', name:'', price:0, url:'' },
{ img:'', name:'', price:0, url:'' },
@@ -133,27 +175,66 @@ export default {
{ img:'', name:'', price:0, url:'' },
{ img:'', name:'', price:0, url:'' },
{ img:'', name:'', price:0, url:'' },
],
)
this.showContent = false
this.$nextTick(()=>{
{ img:'', name:'', price:0, url:'' },
]);
},
handleCancelModal() {
this.draftNavList = [];
this.draftGoodsList = [];
this.showModal = false;
},
handleConfirmModal() {
this.conData.options.navList = this.cloneList(this.draftNavList);
this.conData.options.list = this.cloneList(this.draftGoodsList);
this.draftNavList = [];
this.draftGoodsList = [];
this.showContent = false;
this.$nextTick(() => {
this.showContent = true;
})
});
this.showModal = false;
},
handleCancelGoodsModal() {
this.editTarget = null;
this.selected = {};
this.showGoodsModal = false;
},
handleConfirmGoodsModal() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showGoodsModal = false;
},
}
}
</script>
<style lang="scss" scoped>
@import './setup-box.scss';
.not-enough {
width: 100%;
}
.nav-bar{
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 10px;
background-color: rgb(218, 217, 217);
height: 60px;
align-items: center;
position: relative;
}
.nav-setup-box {
left: auto;
right: 0;
width: 100px;
}
.nav-list {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
li{
padding: 0 30px;
text-align: center;
@@ -161,11 +242,15 @@ export default {
font-size: 16px;
border-radius: 50px;
padding: 0 7px;
margin: 0;
line-height: 1.2;
}
p:nth-child(2){
font-size: 14px;
color: #999;
margin: 2px 0 0;
line-height: 1.2;
}
&:hover{
@@ -180,11 +265,9 @@ export default {
li:last-of-type{
border: none;
}
.curr{
p:nth-child(1){
background-color: $theme_color;
color: #fff;
}
p:nth-child(2){
@@ -194,17 +277,26 @@ export default {
}
.content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
width: 100%;
box-sizing: border-box;
>div{
padding: 10px;
box-sizing: border-box;
border: 1px solid #eee;
margin-bottom: 10px;
min-width: 0;
.goods-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
p:nth-of-type(1){
overflow: hidden;
width: 210px;
width: 100%;
white-space: nowrap;
text-overflow:ellipsis;
margin: 10px 0 5px 0;
@@ -223,4 +315,9 @@ export default {
}
}
}
</style>
.goods-preview {
width: 210px;
height: 210px;
object-fit: cover;
}
</style>

1
seller/src/views/shop/modelList/oneRowThreeColumns.vue
View File

@@ -55,6 +55,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>

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

@@ -77,10 +77,7 @@
:key="index"
class="setup-content"
>
<div
class="right-item"
:style="{ border: index === 2 || index === 3 ? 'none' : '' }"
>
<div class="right-item">
<div>
<span :style="{ background: msgRight.bgColor }">{{
item.name
@@ -104,13 +101,13 @@
<el-dialog
v-model="showModal"
title="装修"
width="800"
width="800px"
:close-on-click-modal="false"
append-to-body destroy-on-close>
append-to-body
destroy-on-close
>
<div class="modal-top-advert">
<div>
<div class="modal-form-item modal-form-preview">
<img
class="show-image"
width="160"
@@ -136,67 +133,86 @@
alt
/>
</div>
<div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
<div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
<div class="tips">
建议尺寸：<span>{{ selected.size }}</span>
<div class="modal-form-item">
<span class="modal-label">图片主标题：</span>
<el-input v-model="selected.name" />
</div>
<div>
图片链接：<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink"
>选择链接</el-button
>
<div class="modal-form-item">
<span class="modal-label">图片描述：</span>
<el-input v-model="selected.describe" />
</div>
<div>
<div class="tips">建议尺寸：{{ selected.size }}</div>
<div class="modal-form-item modal-form-link">
<span class="modal-label">图片链接：</span>
<div class="modal-link-field">
<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
</div>
<div class="modal-form-item modal-form-actions">
<el-button size="small" type="primary" @click="handleSelectImg"
>选择图片</el-button
>&nbsp;
>
<el-button size="small" type="primary" @click="handleSelectGoods"
>选择商品</el-button
>
</div>
</div>
<template #footer>
<el-button @click="handleCancelModal">取消</el-button>
<el-button type="primary" @click="handleConfirmModal">确定</el-button>
</template>
</el-dialog>
<el-dialog
v-model="showModal1"
title="装修"
width="800"
width="800px"
:close-on-click-modal="false"
append-to-body destroy-on-close>
append-to-body
destroy-on-close
>
<div class="modal-top-advert">
<div><span>主标题：</span><el-input v-model="selected.title" /></div>
<div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
<div>
<span
>副标题链接：<el-input
<div class="modal-form-item">
<span class="modal-label">主标题：</span>
<el-input v-model="selected.title" />
</div>
<div class="modal-form-item">
<span class="modal-label">副标题：</span>
<el-input v-model="selected.secondTitle" />
</div>
<div class="modal-form-item modal-form-link">
<span class="modal-label">副标题链接：</span>
<div class="modal-link-field">
<el-input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://" /></span
><el-button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink"
>选择链接</el-button
>
placeholder="https://"
/>
<el-button size="small" type="primary" @click="handleSelectLink"
>选择链接</el-button
>
</div>
</div>
<div>
<span>背景色：</span><el-input v-model="selected.bgColor" />
<el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
<div class="modal-form-item">
<span class="modal-label">背景色：</span>
<div class="modal-color-field">
<el-input v-model="selected.bgColor" />
<el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
</div>
</div>
</div>
<template #footer>
<el-button @click="handleCancelModal1">取消</el-button>
<el-button type="primary" @click="handleConfirmModal1">确定</el-button>
</template>
</el-dialog>
<!-- 选择商品。链接 -->
<liliDialog
@@ -210,6 +226,7 @@
@callback="callbackSelected"
:is-component="true"
:initialize="picModelFlag"
:max-select="1"
ref="ossManage"
/>
</el-dialog>
@@ -233,14 +250,19 @@ export default {
msgRight: this.data.options.contentRight, // 右侧数据
showModal: false, // modal显隐
showModal1: false, // modal显隐
selected: {}, // 已选数据
selected: {}, // 弹窗编辑草稿
editTarget: null, // 确定后写回的原数据
picModelFlag: false, // 图片选择
};
},
methods: {
cloneItem(item) {
return JSON.parse(JSON.stringify(item || {}));
},
// 编辑
handleSelectModel(item, type) {
this.selected = item;
this.editTarget = item;
this.selected = this.cloneItem(item);
if (type) {
this.showModal1 = true;
} else {
@@ -282,8 +304,35 @@ export default {
// 选择图片回调
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.selected.img = val.url;
},
handleCancelModal() {
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
handleConfirmModal() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showModal = false;
},
handleCancelModal1() {
this.editTarget = null;
this.selected = {};
this.showModal1 = false;
},
handleConfirmModal1() {
if (this.editTarget) {
Object.assign(this.editTarget, this.cloneItem(this.selected));
}
this.editTarget = null;
this.selected = {};
this.showModal1 = false;
},
},
};
</script>
@@ -292,6 +341,8 @@ export default {
.recommend {
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
.recommend-left {
width: 595px;
.content-left {
@@ -349,55 +400,78 @@ export default {
.recommend-right {
width: 595px;
height: 360px;
.head-recommend {
background: #a25684;
}
.content-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 360px;
padding-top: 10px;
box-sizing: border-box;
> div {
width: 50%;
width: 100%;
height: 100%;
text-align: center;
height: 180px;
padding-top: 10px;
padding: 0;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
box-sizing: border-box;
&:nth-child(2n) {
border-right: none;
}
&:nth-child(n + 3) {
border-bottom: none;
}
.right-item {
border-bottom: 1px solid #eee;
border-bottom: none;
display: flex;
margin-top: 30px;
margin-left: 5px;
margin-right: 5px;
height: 150px;
padding: 0 10px;
align-items: center;
justify-content: space-between;
height: 100%;
margin: 0;
padding: 10px 15px;
font-size: 12px;
box-sizing: border-box;
> div:nth-child(1) {
width: 130px;
margin-top: 30px;
flex: 1;
min-width: 0;
margin-top: 0;
text-align: left;
span:nth-child(1) {
color: #fff;
border-radius: 10px;
padding: 0 5px;
background-color: #a25684;
display: block;
width: 120px;
max-width: 120px;
overflow: hidden;
white-space: nowrap;
margin: 0 10px 10px 0;
margin: 0 0 10px;
}
span:nth-child(2) {
font-size: 12px;
color: #666;
display: block;
}
}
.right-img {
width: 100;
width: 100px;
height: 100px;
flex-shrink: 0;
text-align: center;
margin: 0 auto;
margin: 0;
img {
max-height: 100px;
max-width: 100px;
@@ -405,9 +479,6 @@ export default {
}
}
}
> div:nth-child(n + 1) {
border-right: 1px solid #eee;
}
}
}
@@ -429,7 +500,78 @@ export default {
}
.modal-top-advert {
align-items: start;
padding: 0 30px;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
.modal-form-item {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 16px;
.modal-label {
flex-shrink: 0;
width: 100px;
text-align: right;
padding-right: 12px;
}
.el-input {
flex: 1;
}
}
.modal-form-preview {
justify-content: center;
margin-bottom: 8px;
}
.modal-form-link {
align-items: flex-start;
.modal-label {
padding-top: 8px;
}
.modal-link-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
.outsideUrl {
flex: 1;
min-width: 0;
}
}
}
.modal-form-actions {
padding-left: 112px;
gap: 10px;
}
.modal-color-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
.el-input {
flex: 1;
}
}
.tips {
padding-left: 112px;
margin-bottom: 16px;
color: #999;
font-size: 12px;
}
}
</style>

353
seller/src/views/shop/modelList/seckill.vue
View File

@@ -1,32 +1,34 @@
<template>
<div class="seckill">
<div class="seckill-wrap">
<div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
<div class="aside">
<div class="title">{{ actName }}</div>
<div class="hour">
<span>{{ currHour }}:00</span>点场 倒计时
<div class="seckill">
<div class="aside">
<div class="title">{{ actName }}</div>
<div class="time-block">
<div class="hour">
<span>{{ currHour }}:00</span>点场 倒计时
</div>
<div class="count-down" v-if="actStatus === 1">
<span>{{ hours }}</span>
<span>{{ minutes }}</span>
<span>{{ seconds }}</span>
</div>
<div class="act-status" v-else>
{{ actStatus == 0 ? "未开始" : "已结束" }}
</div>
</div>
</div>
<div class="count-down" v-if="actStatus === 1">
<span>{{ hours }}</span
><span>{{ minutes }}</span
><span>{{ seconds }}</span>
</div>
<div class="act-status" v-else>
{{ actStatus == 0 ? "未开始" : "已结束" }}
</div>
</div>
<div class="section">
<div ref="swiperEl" class="swiper">
<div class="swiper-wrapper">
<div class="section">
<div class="seckill-list">
<div
class="swiper-slide"
class="seckill-item"
v-for="(item, index) in options.list[0].goodsList"
:key="index"
>
<div class="content">
<img :src="item.img" width="140" height="140" :alt="item.name" />
<div class="ellipsis">{{ item.name }}</div>
<div>
<div class="price-row">
<span>{{ $filters.unitPrice(item.price, "￥") }}</span>
<span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
</div>
@@ -38,8 +40,6 @@
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
export default {
props: {
data: {
@@ -49,26 +49,21 @@ export default {
},
data() {
return {
options: this.data.options, // 当前数据
actStatus: 0, // 0 未开始 1 进行中 2 已结束
options: this.data.options,
actStatus: 0,
actName: "限时秒杀",
currHour: "00", // 当前秒杀场
diffSeconds: 0, // 倒地时
hours: "00", // 小时
minutes: "00", // 分钟
seconds: "00", // 秒
interval: undefined, // 定时器
swiperInstance: null,
currHour: "00",
diffSeconds: 0,
hours: "00",
minutes: "00",
seconds: "00",
interval: undefined,
};
},
watch: {
diffSeconds(val) {
const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟
// 对60取模，超过小时数的分钟数
const minutes = Math.floor(val / 60) % 60;
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
const seconds = val % 60;
this.hours = hours < 10 ? "0" + hours : hours;
this.minutes = minutes < 10 ? "0" + minutes : minutes;
@@ -85,45 +80,20 @@ export default {
},
mounted() {
this.countDown(this.options.list);
this.initSwiper();
},
beforeUnmount() {
clearInterval(this.interval);
if (this.swiperInstance) {
this.swiperInstance.destroy(true, true);
this.swiperInstance = null;
}
},
methods: {
initSwiper() {
if (!this.$refs.swiperEl) {
return;
}
this.swiperInstance = new Swiper(this.$refs.swiperEl, {
slidesPerView: 5,
autoplay: true,
loop: true,
});
},
// 倒计时
countDown(list) {
/**
* 默认倒计时两小时
* 如果没有开始，则显示未开始
* 进行中显示倒计时
* 今天的秒杀结束则显示已结束
*/
let nowHour = new Date().getHours();
const nowHour = new Date().getHours();
if (nowHour < Number(list[0].time)) {
// 活动未开始
this.currHour = list[0].time;
this.actStatus = 0;
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
// 活动已结束
this.actStatus = 2;
this.currHour = list[list.length - 1].time;
} else {
// 活动进行中
this.actStatus = 1;
for (let i = 0; i < list.length; i++) {
if (nowHour == Number(list[i].time)) {
@@ -136,16 +106,13 @@ export default {
this.currHour = list[i].time;
}
}
// 当前0点时间戳
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
// 活动倒计时
const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
this.diffSeconds = Math.floor(
(zeroTime +
3600 * 1000 * (this.currHour + 2) -
new Date().getTime()) /
1000
);
const that = this;
this.interval = setInterval(() => {
this.diffSeconds--;
}, 1000);
@@ -155,140 +122,172 @@ export default {
};
</script>
<style lang="scss" scoped>
.seckill-wrap {
width: 100%;
}
.desc {
color: $theme_color;
font-size: 12px;
line-height: 1.5;
padding: 0 0 8px;
}
.seckill {
width: 100%;
height: 260px;
display: flex;
position: relative;
.desc{
position: absolute;
color: $theme_color;
left: 200px;
top: 5px;
background-color: #fff;
box-sizing: border-box;
}
.aside {
flex-shrink: 0;
overflow: hidden;
width: 190px;
height: 100%;
color: #fff;
background-image: url("../../../assets/seckillBg.png");
background-repeat: no-repeat;
background-position: center top;
.title {
width: 100%;
text-align: center;
font-size: 28px;
margin-top: 31px;
}
.aside {
overflow: hidden;
width: 190px;
height: 100%;
color: #fff;
background-image: url("../../../assets/seckillBg.png");
.title {
width: 100%;
text-align: center;
font-size: 28px;
margin-top: 31px;
.time-block {
margin-top: 78px;
text-align: center;
}
.hour {
text-align: center;
span {
font-size: 18px;
}
}
.hour {
margin-top: 90px;
.count-down {
margin-top: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
> span {
position: relative;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
span {
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
&::after {
content: ":";
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 18px;
width: 20px;
top: 0;
}
}
.count-down {
margin: 10px 0 0 30px;
> span {
position: relative;
float: left;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
&::after {
content: ":";
display: block;
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 18px;
width: 20px;
height: 100%;
top: 0;
}
}
> span:last-child::after {
> span:last-child {
margin-right: 0;
&::after {
content: "";
}
}
.act-status {
margin: 10px 0 0 65px;
font-size: 20px;
}
}
.section {
width: 1000px;
// background: #efefef;
.swiper-slide {
height: 260px;
.content {
width: 200px;
.act-status {
margin-top: 10px;
font-size: 20px;
}
}
.section {
flex: 1;
min-width: 0;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
background-color: #fff;
.seckill-list {
display: flex;
height: 100%;
min-width: min-content;
}
.seckill-item {
flex: 0 0 200px;
height: 100%;
.content {
width: 200px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
box-sizing: border-box;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 200px;
transform: translateY(-50%);
background: linear-gradient(180deg, white, #eeeeee, white);
}
img {
margin-top: 24px;
}
.ellipsis {
width: 160px;
margin-top: 10px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price-row {
width: 160px;
margin-top: 10px;
border: 1px solid $theme_color;
line-height: 24px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 200px;
transform: translateY(-50%);
background: linear-gradient(180deg, white, #eeeeee, white);
}
img {
margin-top: 30px;
}
> div {
width: 160px;
margin-top: 10px;
font-size: 12px;
position: relative;
}
> div:nth-of-type(1):hover {
color: $theme_color;
cursor: pointer;
}
> div:nth-of-type(2) {
border: 1px solid $theme_color;
line-height: 24px;
display: flex;
text-align: center;
text-align: center;
overflow: hidden;
span:nth-child(1) {
color: #fff;
font-size: 16px;
width: 92px;
background-color: $theme_color;
position: relative;
&::before {
content: " ";
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 8px 0 0;
position: absolute;
top: 0;
left: 84px;
}
}
span:nth-child(1) {
color: #fff;
font-size: 16px;
flex: 1;
min-width: 0;
background-color: $theme_color;
}
span:nth-child(2) {
color: #999;
width: 66px;
text-decoration: line-through;
}
span:nth-child(2) {
color: #999;
width: 66px;
flex-shrink: 0;
text-decoration: line-through;
}
}
}

16
seller/src/views/shop/modelList/setup-box.scss
View File

@@ -16,7 +16,8 @@
z-index: 99;
width: 100%;
height: 100%;
.ivu-btn{
.ivu-btn,
.el-button{
float: right;
margin-right: 5px;
margin-top: 5px;
@@ -46,17 +47,4 @@
tbody>tr:hover{
background-color: aliceblue;
}
}
.modal-top-advert{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
>*{
margin-bottom: 10px;
}
.ivu-input-wrapper{
width: 200px;
}
}

45
seller/src/views/shop/ossManage.scss
View File

@@ -161,6 +161,9 @@
box-sizing: border-box;
margin: 0 13px 8px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.card {
width: 120px;
height: 120px;
@@ -172,12 +175,19 @@
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkbox {
.card-checkbox {
position: absolute;
top: 10px;
right: 10px;
top: 8px;
right: 8px;
z-index: 1000;
height: auto;
margin: 0;
:deep(.el-checkbox__label) {
display: none;
}
}
.preview {
width: 100%;
@@ -226,35 +236,6 @@
display: flex;
flex-direction: row-reverse;
}
/* Checkbox默认的样式 */
.check-box {
.ivu-checkbox {
position: absolute;
right: 10px;
top: 10px;
z-index: 100;
}
}
/* 覆盖iView默认的Checkbox样式 */
.ivu-checkbox-wrapper {
/*font-size: 16px; !* 修改字体大小 *!*/
/*color: #495060; !* 修改文本颜色 *!*/
/* 添加其他需要的样式 */
}
.ivu-checkbox-inner {
/*width: 20px; !* 修改选框大小 *!*/
/*height: 20px;*/
/*border-color: #dcdee2; !* 修改边框颜色 *!*/
/* 添加其他需要的样式 */
}
/* 当Checkbox被选中时的样式 */
.ivu-checkbox-checked .ivu-checkbox-inner {
/*background-color: #2db7f5; !* 修改选中时的背景颜色 *!*/
}
/* 当Checkbox不可用时的样式 */
.ivu-checkbox-disabled .ivu-checkbox-inner {
/*background-color: #e9e9e9; !* 修改禁用状态下的背景颜色 *!*/
}
.demo-tree-render .ivu-tree-title{
width: 94%;

105
seller/src/views/shop/ossManages.vue
View File

@@ -94,6 +94,22 @@
<el-form-item>
<el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
<el-form-item v-if="canUploadImages">
<el-upload
ref="up"
:action="commonUrl + '/common/common/upload/file'"
:data="uploadData"
:headers="accessToken"
:before-upload="beforeUpload"
:on-error="handleError"
:on-success="handleSuccess"
:show-file-list="false"
multiple
style="display: inline-block"
>
<el-button>上传图片</el-button>
</el-upload>
</el-form-item>
</el-form>
</el-row>
</div>
@@ -136,25 +152,10 @@
</el-col>
<el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
<div class="pic-list">
<div>
<div v-if="!isComponent">
<div class="oss-operation padding-row" style="display: flex; flex-direction: row-reverse">
<div>
<el-upload
v-if="canUploadImages"
ref="up"
:action="commonUrl + '/common/common/upload/file'"
:data="uploadData"
:headers="accessToken"
:before-upload="beforeUpload"
:on-error="handleError"
:on-success="handleSuccess"
:show-file-list="false"
multiple
style="display: inline-block"
>
<el-button>上传图片</el-button>
</el-upload>
<el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
<el-button v-if="showType == 'list'" @click="removeAll">批量删除</el-button>
</div>
</div>
</div>
@@ -162,37 +163,39 @@
<el-checkbox-group v-model="selectedOss" @change="selectOssChange">
<div class="img-box">
<div v-for="(item, index) in data" :key="index" class="img-item">
<el-checkbox :value="item.id + ',' + item.url" class="check-box">
<div
class="card"
@mouseenter="onMouseOver(item, index)"
@mouseleave="onMouseOut(item, index)"
>
<img :src="item.url" alt="" />
<div v-if="item.isShowPreview" class="preview">
<div @click.prevent="download(item)">
<el-tooltip content="下载" placement="top">
<el-icon :size="18"><Download /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="remove(item)">
<el-tooltip content="删除" placement="top">
<el-icon :size="18"><Delete /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="showPic(item)">
<el-tooltip content="预览" placement="top">
<el-icon :size="22"><View /></el-icon>
</el-tooltip>
</div>
<div
class="card"
:class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
@mouseenter="onMouseOver(item, index)"
@mouseleave="onMouseOut(item, index)"
>
<el-checkbox
:value="item.id + ',' + item.url"
class="card-checkbox"
@click.stop
/>
<img :src="item.url" alt="" />
<div v-if="item.isShowPreview" class="preview">
<div @click.prevent="download(item)">
<el-tooltip content="下载" placement="top">
<el-icon :size="18"><Download /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="remove(item)">
<el-tooltip content="删除" placement="top">
<el-icon :size="18"><Delete /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="showPic(item)">
<el-tooltip content="预览" placement="top">
<el-icon :size="22"><View /></el-icon>
</el-tooltip>
</div>
</div>
</el-checkbox>
<div>
<el-tooltip :content="item.name" placement="bottom">
<div class="text">{{ item.name }}</div>
</el-tooltip>
</div>
<el-tooltip :content="item.name" placement="bottom">
<div class="text">{{ item.name }}</div>
</el-tooltip>
</div>
</div>
</el-checkbox-group>
@@ -533,7 +536,7 @@ export default {
name: "",
fileKey: "",
fileType: "",
userEnums: "MANAGER",
userEnums: "STORE",
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime", // 默认排序字段
@@ -972,7 +975,7 @@ export default {
return this.activeRoleTab === "MANAGER";
},
canUploadImages() {
return this.activeRoleTab === "MANAGER";
return this.activeRoleTab === "MANAGER" || this.activeRoleTab === "STORE";
},
uploadData() {
return {
@@ -985,10 +988,6 @@ export default {
methods: {
beforeUpload(file) {
if (!this.canUploadImages) {
this.$Message.warning("仅管理员模块支持上传图片");
return false;
}
const maxSize = 20480 * 1024;
if (file && file.size > maxSize) {
this.handleMaxSize(file);
@@ -1408,10 +1407,6 @@ export default {
},
// 上传成功回调
handleSuccess(res, file) {
if (!this.canUploadImages) {
this.$Message.warning("仅管理员模块支持上传图片");
return;
}
if (res.success) {
this.$Message.success("上传文件 " + file.name + " 成功");
this.getDataList();

1
seller/src/views/shop/renovation.vue
View File

@@ -237,6 +237,7 @@ export default {
.show-content {
flex: 1;
min-width: 0;
overflow-x: auto;
}
.ghost {
background: #fff;

35
seller/src/views/shop/system/clerk/clerkManage.vue
View File

@@ -118,7 +118,7 @@
</el-select>
</el-form-item>
<el-form-item label="所属部门">
<department-tree-choose @change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
<department-tree-choose @on-change="handleEditSelectDepTree" ref="editDepTree"></department-tree-choose>
</el-form-item>
</el-form>
@@ -166,7 +166,7 @@
</el-select>
</el-form-item>
<el-form-item label="所属部门" v-if="oldMember || newMember">
<department-tree-choose @change="handleSelectDepTree" ref="depTree"></department-tree-choose>
<department-tree-choose @on-change="handleSelectDepTree" ref="addDepTree"></department-tree-choose>
</el-form-item>
</el-form>
@@ -498,35 +498,36 @@ export default {
this.userModalVisible = true;
this.$nextTick(() => {
this.$refs.addForm?.resetFields();
this.$refs.depTree?.clearSelect?.();
this.$refs.addDepTree?.clearSelect?.();
});
},
// 编辑用户
edit(v) {
getClerk(v.id).then(res => {
this.mobile = res.result.mobile
this.clerkName = res.result.clerkName
this.editForm.isSuper = 0
this.editForm.id = res.result.id
if(res.result.isSuper){
this.editForm.isSuper = 1
if (!res.success || !res.result) {
return;
}
this.editForm.departmentId = res.result.departmentId
this.$refs.depTree.setData(res.result.departmentId, res.result.departmentTitle);
let selectRolesId = [];
this.mobile = res.result.mobile;
this.clerkName = res.result.clerkName;
this.editForm.isSuper = res.result.isSuper ? 1 : 0;
this.editForm.id = res.result.id;
this.editForm.departmentId = res.result.departmentId;
const selectRolesId = [];
if (res.result.roles) {
res.result.roles.forEach(function (e) {
selectRolesId.push(e.id);
});
}
this.editForm.roles = selectRolesId;
this.modalTitle = "修改店员";
this.userEditModalVisible = true;
})
this.$nextTick(() => {
this.$refs.editDepTree?.setData(
res.result.departmentId,
res.result.departmentTitle
);
});
});
},
// 启用
enable(v) {

26
seller/src/views/shop/system/department/storeDepartmentManage.vue
View File

@@ -24,12 +24,11 @@
<el-tree
ref="treeRef"
:data="data"
lazy
:load="loadNode"
:props="treeProps"
node-key="id"
show-checkbox
highlight-current
default-expand-all
:check-strictly="!strict"
:current-node-key="currentNodeKey"
@node-click="onNodeClick"
@@ -109,7 +108,6 @@
<script>
import {
initDepartment,
loadDepartment,
addDepartment,
editDepartment,
deleteDepartment,
@@ -176,23 +174,20 @@ export default {
initDepartment().then((res) => {
this.loading = false;
if (res.success) {
this.data = this.bubbleSort(res.result);
const list = Array.isArray(res.result) ? res.result : [];
this.data = this.bubbleSort(this.normalizeDepartmentTree(list));
}
});
},
loadNode(node, resolve) {
const id = node.data?.id;
if (id === undefined || id === null) {
resolve([]);
return;
}
loadDepartment(id).then((res) => {
this.loadingEdit = false;
if (res.success) {
resolve(res.result || []);
normalizeDepartmentTree(list) {
return list.map((item) => {
const node = { ...item };
if (Array.isArray(node.children) && node.children.length > 0) {
node.children = this.normalizeDepartmentTree(node.children);
} else {
resolve([]);
delete node.children;
}
return node;
});
},
onNodeClick(data) {
@@ -235,6 +230,7 @@ export default {
this.selectCount = checkedNodes.length;
},
bubbleSort(array) {
if (!Array.isArray(array)) return [];
const len = array.length;
if (len < 2) return array;
for (let i = 0; i < len; i++) {

47
seller/src/views/shop/wap/advertising.vue
View File

@@ -2,9 +2,9 @@
<div class="model-view">
<div class="model-view-content">
<div class="content">
<div class="wap-title">首页</div>
<div class="wap-title">??</div>
<div class="draggable">
<!-- 全屏 -->
<!-- ?? -->
<div class="full-shadow" v-if="type == 'full'">
<img :src="advertising[0].img" alt="" />
</div>
@@ -14,7 +14,7 @@
</div>
<div class="model-config">
<div class="decorate">
<div class="decorate-title">全屏广告</div>
<div class="decorate-title">????</div>
<div class="decorate-list">
<div
class="decorate-item"
@@ -22,12 +22,12 @@
:key="index"
>
<div class="decorate-item-title">
<div>设置</div>
<div>??</div>
</div>
<div class="decorate-item-box">
<!-- 选择照片 -->
<!-- ???? -->
<div class="decorate-view">
<div class="decorate-view-title">选择图片</div>
<div class="decorate-view-title">????</div>
<div>
<img class="show-image" :src="item.img" alt />
<input
@@ -38,7 +38,7 @@
:id="'files' + index"
/>
<div class="tips">
建议尺寸
????
<span>{{ item.size }}</span>
</div>
</div>
@@ -48,41 +48,41 @@
@click="handleClickFile(item, index)"
plain
type="primary"
>选择照片</el-button
>????</el-button
>
</div>
</div>
<!-- 选择连接 -->
<!-- ???? -->
<div class="decorate-view">
<div class="decorate-view-title">选择图片</div>
<div class="decorate-view-title">????</div>
<div>
<el-button
plain
type="primary"
size="small"
@click="clickLink(item)"
>选择链接</el-button
>????</el-button
>
</div>
</div>
<div class="decorate-view">
<div class="decorate-view-title">当前页面状态</div>
<div class="decorate-view-title">??????</div>
<div>
<el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
{{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
{{ result.pageShow === "OPEN" ? "??" : "??" }}
</el-tag>
</div>
</div>
</div>
</div>
</div>
<!-- <el-button type="primary" @click="addDecorate()" ghost>添加</el-button> -->
<!-- <el-button type="primary" @click="addDecorate()" ghost>??</el-button> -->
<liliDialog ref="liliDialog" @selectedLink="selectedLink" :types="linkType"></liliDialog>
</div>
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
</el-dialog>
</div>
</div>
@@ -97,10 +97,10 @@ export default {
data() {
return {
result:"",
picModelFlag: false, //图片选择器
type: "full", // 是否全屏
picModelFlag: false, //?????
type: "full", // ????
//全屏广告
//????
advertising: [
{
img:
@@ -109,7 +109,7 @@ export default {
},
],
selectedLinks: {},
linkType: "", // 选择类型
linkType: "", // ????
};
},
watch: {
@@ -144,17 +144,17 @@ export default {
this.result = res.result
});
},
// 点击链接
// ????
clickLink(item) {
this.$refs.liliDialog.open('link')
},
// 回调选择的链接
// ???????
selectedLink(val) {
this.selectedLinks.url = val;
this.advertising[0].config = val;
},
// 点击选择照片
// ??????
handleClickFile() {
this.picModelFlag = true;
this.$nextTick(() => {
@@ -162,9 +162,10 @@ export default {
this.$refs.ossManage.selectImage = true;
}
});
}, // 图片选择器回显
}, // ???????
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.advertising[0].img = val.url;
}
},

3
seller/src/views/shop/wap/alertAdvertising.vue
View File

@@ -85,7 +85,7 @@
></liliDialog>
</div>
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
</el-dialog>
</div>
</div>
@@ -156,6 +156,7 @@ export default {
// 图片选择器回显
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.advertising[0].img = val.url;
},
// 点击选择图片

37
seller/src/views/shop/wap/decorate.vue
View File

@@ -498,17 +498,29 @@
@selectedGoodsData="selectedGoodsData"
></liliDialog>
<el-dialog width="800px" title="选择分类" v-model="enableSelectCategory" append-to-body destroy-on-close>
<el-dialog
width="800px"
title="选择分类"
v-model="enableSelectCategory"
append-to-body
destroy-on-close
:close-on-click-modal="false"
@close="handleCancelCategoryModal"
>
<categoryTemplate
v-if="enableSelectCategory"
@selected="confirmCategory"
@selected="onCategorySelected"
/>
<template #footer>
<el-button @click="handleCancelCategoryModal">取消</el-button>
<el-button type="primary" @click="handleConfirmCategoryModal">确定</el-button>
</template>
</el-dialog>
<hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
<ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
</el-dialog>
</div>
</template>
@@ -542,6 +554,7 @@ export default {
selectedLinks: "", // 已选链接
modelList: "", // 装修列表
enableSelectCategory: false, //商品是否绑定分类
pendingCategory: null, // 选择分类弹窗草稿
goodsSelectedIndex: 0, //绑定商品分类的索引
};
},
@@ -553,7 +566,21 @@ export default {
},
props: ["res"],
methods: {
// 选择分类
// 选择分类（弹窗内暂存，确定后写回）
onCategorySelected(val) {
this.pendingCategory = val;
},
handleCancelCategoryModal() {
this.pendingCategory = null;
this.enableSelectCategory = false;
},
handleConfirmCategoryModal() {
if (this.pendingCategory?.length) {
this.confirmCategory(this.pendingCategory);
}
this.pendingCategory = null;
this.enableSelectCategory = false;
},
confirmCategory(val) {
let data = {
...this.res.options.list[0].titleWay[this.goodsSelectedIndex],
@@ -687,6 +714,7 @@ export default {
},
// 绑定分类
bindGoodsCategory(index, key) {
this.pendingCategory = null;
this.enableSelectCategory = true;
this.goodsSelectedIndex = index;
},
@@ -771,6 +799,7 @@ export default {
// 图片选择器回显
callbackSelected(val) {
this.picModelFlag = false;
if (!val?.url) return;
this.selectedGoods.img = val.url;
},
// 点击选择图片

80
seller/src/views/shop/wap/index.vue
View File

@@ -6,6 +6,8 @@
<draggable
class="model-view-menu-item"
:list="modelData"
:item-key="getModelKey"
:clone="cloneModel"
:move="handleMove"
v-bind="{
group: { name: 'model', pull: 'clone', put: false, animation: 150 },
@@ -13,14 +15,14 @@
ghostClass: 'ghost',
}"
>
<template v-for="(model, index) in modelData" :key="index">
<li
v-if="!model.drawer && !model.drawerPromotions"
class="model-item"
>
<img src alt />
<span>{{ model.name }}</span>
</li>
<template #item="{ element: model }">
<li
v-if="!model.drawer && !model.drawerPromotions"
class="model-item"
>
<img src alt />
<span>{{ model.name }}</span>
</li>
</template>
</draggable>
</div>
@@ -35,29 +37,28 @@
@add="handleContentlAdd"
@end="handleContentlEnd"
v-model="contentData.list"
:item-key="getContentItemKey"
>
<div
class="list"
v-for="(element, index) in contentData.list"
:key="element.key"
>
<component
class="component"
:class="{ active: selected == index }"
@click="handleComponent(element, index)"
:is="templates[element.type]"
:res="element.options"
></component>
<el-icon
v-if="selected == index"
@click="closeComponent(index)"
class="close"
:size="25"
color="#e1251b"
>
<CircleClose />
</el-icon>
</div>
<template #item="{ element, index }">
<div class="list">
<component
class="component"
:class="{ active: selected == index }"
@click="handleComponent(element, index)"
:is="templates[element.type]"
:res="element.options"
></component>
<el-icon
v-if="selected == index"
@click="closeComponent(index)"
class="close"
:size="25"
color="#e1251b"
>
<CircleClose />
</el-icon>
</div>
</template>
</draggable>
</div>
</div>
@@ -114,6 +115,21 @@ export default {
},
methods: {
getModelKey(model) {
return model.type || model.name;
},
getContentItemKey(element) {
return element.key || element.model || element.type;
},
cloneModel(model) {
const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
const cloned = JSON.parse(JSON.stringify(model));
return {
...cloned,
key,
model: cloned.type + "_" + key,
};
},
// 初始化数据
init() {
// 先读缓存，如果缓存有值则读缓存。
@@ -256,12 +272,14 @@ export default {
package(val, newIndex) {
this.contentData.list[newIndex] = "";
val = JSON.parse(JSON.stringify(val));
const key = val.key || Date.now() + "_" + Math.ceil(Math.random() * 99999);
this.contentData.list[newIndex] = {
...val,
options: {
...val.options,
},
model: val.type,
key,
model: val.model || val.type + "_" + key,
};
},
// 拖动