update:修改模板市场部分样式,布局,新增分页器

This commit is contained in:
lihaoyuan 2025-12-10 17:03:31 +08:00
parent b86231dd77
commit 2dc10667e6
4 changed files with 216 additions and 23 deletions

View File

@ -249,7 +249,7 @@ export default {
// //
const response = await editPageApp(requestData) const response = await editPageApp(requestData)
if(response.status==200){ if(response.status==200){
this.$message.success('保存成功哈哈哈哈') this.$message.success('保存成功')
this.visible = false this.visible = false
// this.$emit('update-success', this.form) // this.$emit('update-success', this.form)
this.$emit('editSuccess') this.$emit('editSuccess')

View File

@ -8,14 +8,24 @@
> >
<div class="dialog-content"> <div class="dialog-content">
<div class="search"> <div class="search">
<el-select v-model="selectType" clearable filterable @change="searchByType"> <div class="select-type">
<el-option v-for="item in shopModelList" <el-select v-model="selectType" clearable filterable @change="searchByType">
:key="item.id" <el-option v-for="item in shopModelList"
:label="item.label" :key="item.id"
:value="item.value"> :label="item.label"
</el-option> :value="item.value">
</el-select> </el-option>
</el-select>
</div>
<div class="input-name">
<el-input
v-model="appName"
clearable
:placeholder="__('模板名字')"
style="width: 150px"
/>
</div>
<el-button type="primary" size="small" @click="queryByName">查询</el-button>
</div> </div>
<ul class="ulCls"> <ul class="ulCls">
<li v-if="emptyPage" class="liCls"> <li v-if="emptyPage" class="liCls">
@ -90,6 +100,7 @@ export default {
copyTemplateRef: null, copyTemplateRef: null,
previewTemplateRef: null, previewTemplateRef: null,
selectType:'', selectType:'',
appName:'',
shopModelList:[ shopModelList:[
{id:"1",label:'超市',value:'1'}, {id:"1",label:'超市',value:'1'},
{id:"2",label:'数码家电',value:'2'}, {id:"2",label:'数码家电',value:'2'},
@ -120,7 +131,6 @@ export default {
async getListMarketPages() { async getListMarketPages() {
let data = await listMarketPage() let data = await listMarketPage()
this.templateList = data; this.templateList = data;
console.log("aaaaaaaaaaaaaaa")
}, },
async getBlankTplPage() { async getBlankTplPage() {
try { try {
@ -134,7 +144,6 @@ export default {
}, },
async searchByType(){ async searchByType(){
try { try {
// appIndustry
let data = await listMarketPage({ appIndustry: this.selectType }); let data = await listMarketPage({ appIndustry: this.selectType });
this.templateList = data && typeof data === 'object' ? data : { records: [] } this.templateList = data && typeof data === 'object' ? data : { records: [] }
} catch (error) { } catch (error) {
@ -142,6 +151,15 @@ export default {
this.templateList = { records: [] } this.templateList = { records: [] }
} }
}, },
async queryByName(){
try {
let data = await listMarketPage({ appName: this.appName });
this.templateList = data && typeof data === 'object' ? data : { records: [] }
} catch (error) {
console.error('筛选模板失败:', error)
this.templateList = { records: [] }
}
},
showEditApp(page) { showEditApp(page) {
if (page.tpl_id === 107) { if (page.tpl_id === 107) {
this.$router.push({ this.$router.push({
@ -255,5 +273,12 @@ export default {
.search{ .search{
width: 100%; width: 100%;
margin: 20px; margin: 20px;
display: flex;
}
.select-type{
margin: 0px 10px;
}
.input-name{
margin: 0px 10px;
} }
</style> </style>

View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog <el-dialog
title="创建店铺" title="创建模板"
width="30%" width="30%"
:visible.sync="visible" :visible.sync="visible"
custom-class="template-dialog" custom-class="template-dialog"
@ -23,7 +23,7 @@
<el-input v-model="form.appName"></el-input> <el-input v-model="form.appName"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="模板类型"> <el-form-item label="模板类型">
<el-select v-model="form.app_industry" clearable filterable @change=""> <el-select v-model="form.app_industry" clearable filterable>
<el-option v-for="item in shopModelList" <el-option v-for="item in shopModelList"
:key="item.id" :key="item.id"
:label="item.label" :label="item.label"
@ -33,7 +33,7 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="copy">创建模板</el-button> <el-button type="primary" @click="copy">创建模板</el-button>
<el-button>取消</el-button> <el-button @click="handleClose">取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-dialog> </el-dialog>
@ -85,8 +85,12 @@
if(res.status==200){ if(res.status==200){
this.$message.success('模板创建成功!') this.$message.success('模板创建成功!')
this.visible = false this.visible = false
this.$emit('copySuccess') // this.$emit('copySuccess')//
} }
},
//
handleClose() {
this.visible = false
} }
} }
} }

View File

@ -98,17 +98,20 @@
<el-card> <el-card>
<div slot="header" class="clearfix header-row"> <div slot="header" class="clearfix header-row">
<span>{{ __('模板市场') }}</span> <span>{{ __('模板市场') }}</span>
<el-button <!-- <el-button
type="primary" type="primary"
size="default" size="default"
@click="createNewTemplate" @click="createNewTemplate"
class="create-btn" class="create-btn"
> >
{{ __('查看更多模板') }} {{ __('查看更多模板') }}
</el-button> </el-button> -->
<el-radio-group v-model="queryForm.appIndustry" @change="queryData">
<el-radio-button v-for="item in shopModelOptions" :key="item.value" :label="item.value" >{{item.label}}</el-radio-button>
</el-radio-group>
</div> </div>
<div> <div>
<ul class="ulCls" style="position: relative"> <!-- <ul class="ulCls" style="position: relative">
<li <li
v-for="(page, i) in templateList.records" v-for="(page, i) in templateList.records"
:key="i" :key="i"
@ -133,9 +136,67 @@
</div> </div>
</div> </div>
</li> </li>
</ul> -->
<ul class="ulCls">
<li v-if="emptyPage" class="liCls">
<div align="center" class="div_img_cls">
<img
class="imgCls"
:src="emptyPage.tpl_image"
style="object-fit: fill"
/>
<p class="fontCls">{{ emptyPage.tpl_name }}</p>
</div>
<div class="lightBtn">
<div class="enableExit">
<el-button
type="primary"
@click=""
>
{{ __('创建空白模板') }}
</el-button>
</div>
</div>
</li>
<template v-if="templateList.records.length > 0">
<li v-for="(page, i) in templateList.records" :key="page.app_id || i" class="liCls">
<div align="center" class="div_img_cls">
<img
class="imgCls"
:src="page.tpl_image"
style="object-fit: fill"
/>
<p class="fontCls">{{ page.app_name }}</p>
</div>
<div class="lightBtn">
<div class="enableExit">
<el-button type="primary" @click="openCopy(page)">
{{ __('创建模板') }}
</el-button>
<el-button type="primary" @click="openPreview(page)">
{{ __('预览') }}
</el-button>
</div>
</div>
</li>
</template>
<li v-else class="empty-li">
<el-empty
description="该分类暂无模板"
/>
</li>
</ul> </ul>
</div> </div>
</el-card> </el-card>
<el-pagination
background
:current-page="queryForm.pageNum"
:layout="layout"
:page-size="queryForm.pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</el-row> </el-row>
<templateMenu ref="templateMenuRef"></templateMenu> <templateMenu ref="templateMenuRef"></templateMenu>
<decoarationDetail ref="decoarationDetailRef" @editSuccess="refreshAllData"></decoarationDetail> <decoarationDetail ref="decoarationDetailRef" @editSuccess="refreshAllData"></decoarationDetail>
@ -168,9 +229,83 @@
decoarationDetailRef: null, decoarationDetailRef: null,
copyTemplateRef:null, copyTemplateRef:null,
previewTemplateRef:null, previewTemplateRef:null,
templateList: [], templateList: { records: [] },
emptyPage: null, emptyPage: null,
app_market_images: null, app_market_images: null,
queryForm:{
pageNum:1,
pageSize:10,
appName:null,
appIndustry:''
},
layout: 'total, sizes, prev, pager, next, jumper',
total:0,
shopModelOptions:[
{
value: '',
label: this.__('全部'),
},
{
value: '1',
label: this.__('超市'),
},
{
value: '2',
label: this.__('数码家电'),
},
{
value: '3',
label: this.__('水果生鲜'),
},
{
value: '4',
label: this.__('烘焙甜品'),
},
{
value: '5',
label: this.__('社区团购'),
},
{
value: '6',
label: this.__('时尚美妆'),
},
{
value: '7',
label: this.__('婴儿服饰'),
},
{
value: '8',
label: this.__('家居'),
},
{
value: '9',
label: this.__('汽车'),
},
{
value: '10',
label: this.__('酒店旅游'),
},
{
value: '11',
label: this.__('鲜花绿植'),
},
{
value: '12',
label: this.__('医药健康'),
},
{
value: '13',
label: this.__('工业五金'),
},
{
value: '14',
label: this.__('节日模板'),
},
{
value: '0',
label: this.__('其他'),
},
]
} }
}, },
created() { created() {
@ -229,8 +364,16 @@
this.$refs.templateMenuRef?.open() this.$refs.templateMenuRef?.open()
}, },
async getListMarketPages() { async getListMarketPages() {
let data = await listMarketPage() await this.fetchData();
this.templateList = data },
async searchByType(){
try {
let data = await listMarketPage(this.queryForm);
this.templateList = data && typeof data === 'object' ? data : { records: [] }
} catch (error) {
console.error('筛选模板失败:', error)
this.templateList = { records: [] }
}
}, },
async getBlankTplPage() { async getBlankTplPage() {
try { try {
@ -277,7 +420,7 @@
} }
let res=await pageAppPublish(params) let res=await pageAppPublish(params)
if(res.status==200){ if(res.status==200){
this.$message.success('操作成功7777') this.$message.success('操作成功')
this.refreshAllData() this.refreshAllData()
} }
}, },
@ -285,7 +428,28 @@
async refreshAllData() { async refreshAllData() {
await this.getAppPages() await this.getAppPages()
await this.getListMarketPages() await this.getListMarketPages()
} },
queryData(){
this.queryForm.pageNum=1
this.fetchData()
},
async fetchData(){
const params = {
...this.queryForm,
appIndustry: this.queryForm.appIndustry || ''
};
const data = await listMarketPage(params);
this.templateList = data && typeof data === 'object' ? data : { records: [] };
this.total = data.total
},
handleSizeChange(val) {
this.queryForm.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.queryForm.pageNum = val
this.fetchData()
},
}, },
} }
</script> </script>