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 19:07:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

升级Vue3，iView替换ElementPlus

Browse Source 
- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
lifenlong
2026-06-05 17:49:43 +08:00
parent 615ee91511
commit 832fda813b
322 changed files with 25693 additions and 24453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,39 +1,27 @@
<template>
<div class="renovation">
<!-- 左侧模块列表 -->
<div class="model-list">
<div class="classification-title">基础模块</div>
<draggable
tag="ul"
:list="modelData"
v-bind="{
group: { name: 'model', pull: 'clone', put: false },
sort: false,
ghostClass: 'ghost',
}"
>
<draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}" >
<li v-for="(model, index) in modelData" :key="index" class="model-item">
<Icon :type="model.icon" />
<span>{{ model.name }}</span>
<el-icon><Picture /></el-icon>
<span>{{model.name}}</span>
</li>
</draggable>
</div>
<!-- 中间展示模块 -->
<div class="show-content">
<model-form ref="modelForm" :data="modelForm"></model-form>
</div>
<!-- 操作按钮 -->
<div class="btn-bar" :class="{'top':isHiddenBar}">
<Button type="primary" :loading="submitLoading" @click="saveTemplate"
>保存模板</Button
>
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
<Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
<Button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</Button>
<el-button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</el-button>
<el-button class="ml_10" @click="resetTemplate">还原模板</el-button>
<el-button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</el-button>
<el-button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</el-button>
</div>
</div>
</template>
<script>
import { Picture } from "@element-plus/icons-vue";
import { modelData } from "./modelConfig";
import Draggable from "vuedraggable";
import ModelForm from "./modelForm.vue";
@@ -42,12 +30,12 @@ export default {
components: {
Draggable,
ModelForm,
Picture,
},
mounted() {
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
const setting = window.localStorage.getItem('seller-setting') ? JSON.parse(window.localStorage.getItem('seller-setting')) : {};
this.isHiddenBar = setting.isUseTabsRouter
// 先读缓存，如果缓存有值则读缓存。
const cache = this.getStore('sellerPCPageCache')
const cache = this.getStore('managerPCPageCache')
this.hasCache = !!cache;
if(cache){
this.$Modal.confirm({
@@ -60,7 +48,6 @@ export default {
if (pageData) {
pageData = JSON.parse(pageData);
if (pageData.list[0].type === "topAdvert") {
// topAdvert 为顶部广告 navList为导航栏
this.$refs.modelForm.topAdvert = pageData.list[0];
this.$refs.modelForm.navList = pageData.list[1];
pageData.list.splice(0, 2);
@@ -79,60 +66,55 @@ export default {
data() {
return {
hasCache:false,
modelData, // 可选模块数据
modelForm: { list: [] }, // 模板数据
submitLoading: false, // 提交加载状态
modelData,
modelForm: { list: [] },
submitLoading: false,
isHiddenBar:true,
};
},
methods: {
clearCache(){
this.setStore('sellerPCPageCache', '')
this.setStore('managerPCPageCache', '')
this.$Message.success('清除成功')
},
// 将楼层装修的内容写入到本地缓存中
witeLocalStore(){
const data ={...this.modelForm}
data.list.unshift(this.$refs.modelForm.navList);
data.list.unshift(this.$refs.modelForm.topAdvert);
this.setStore('sellerPCPageCache', data)
this.setStore('managerPCPageCache', data)
this.$Message.success('写入成功')
},
saveTemplate() {
// 保存模板
this.submitTemplate(this.$route.query.pageShow ? "OPEN" : "CLOSE");
this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
},
// 提交模板
submitTemplate(pageShow) {
this.submitLoading = true;
const modelForm = JSON.parse(JSON.stringify(this.modelForm));
this.submitLoading = true
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
modelForm.list.unshift(this.$refs.modelForm.navList);
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
const data = {
id: this.$route.query.id,
pageData: JSON.stringify(modelForm),
pageShow,
pageShow: this.$route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
pageClientType: 'PC',
};
API_floor.updateHome(this.$route.query.id, data).then((res) => {
this.submitLoading = false;
this.submitLoading = false
if (res.success) {
this.$Message.success("保存模板成功");
}
});
},
resetTemplate() {
// 还原模板
this.getTemplateItem(this.$route.query.id);
},
getTemplateItem(id) {
// 获取模板数据
API_floor.getHomeData(id).then((res) => {
if (res.success) {
let pageData = res.result.pageData;
if (pageData) {
pageData = JSON.parse(pageData);
if (pageData.list[0].type === "topAdvert") {
// topAdvert 为顶部广告 navList为导航栏
this.$refs.modelForm.topAdvert = pageData.list[0];
this.$refs.modelForm.navList = pageData.list[1];
pageData.list.splice(0, 2);
@@ -163,8 +145,9 @@ export default {
display: flex;
}
.model-list {
width: 120px;
height: auto;
width: 130px;
height: 620px;
overflow-y: auto;
padding: 10px;
background: #fff;
margin-top: 60px;
@@ -177,17 +160,19 @@ export default {
line-height: 30px;
}
.model-item {
width: 100px;
width: 110px;
height: 30px;
background: #eee;
margin-top: 10px;
line-height: 30px;
text-align: center;
color: #999;
transition:0.15s;
border-radius: 4px;
&:hover {
border: 1px dashed #409eff;
color: #409eff;
background: $theme_color;
cursor: move;
color: #fff;
}
}
.ghost::after {
@@ -226,7 +211,6 @@ export default {
padding: 10px;
box-shadow: 1px 1px 10px #999;
z-index: 99;
top: 100px;
}
.top{
top: 100px;