refactor(page-decoration): 重构移动端页面管理界面,使用Tabs组件替换分类卡片

feat(wap): 为移动端页面列表添加类型标签页功能
fix(dialog): 修复对话框确认后未隐藏的问题
style: 统一移动端页面管理样式,优化表格布局
This commit is contained in:
pikachu1995@126.com
2025-12-07 13:48:19 +08:00
parent 028f32a73c
commit d701c72928
6 changed files with 98 additions and 256 deletions

View File

@@ -309,11 +309,12 @@ export default {
}, },
// 上架 // 上架
upper(v) { upper(v) {
DialogPlugin.confirm({ const dlg = DialogPlugin.confirm({
header: "确认上架", header: "确认上架",
content: "您确认要上架 " + v.goodsName + " ?", content: "您确认要上架 " + v.goodsName + " ?",
theme: "warning", theme: "warning",
onConfirm: () => { onConfirm: () => {
dlg.hide();
const params = { goodsId: v.id }; const params = { goodsId: v.id };
upGoods(params).then((res) => { upGoods(params).then((res) => {
if (res.success) { if (res.success) {
@@ -364,11 +365,12 @@ export default {
this.goodsAuditForm.authFlag = "REFUSE"; this.goodsAuditForm.authFlag = "REFUSE";
} }
DialogPlugin.confirm({ const dlg = DialogPlugin.confirm({
header: "确认审核", header: "确认审核",
content: "您确认要审核" + examine + " " + v.goodsName + " ?", content: "您确认要审核" + examine + " " + v.goodsName + " ?",
theme: "warning", theme: "warning",
onConfirm: () => { onConfirm: () => {
dlg.hide();
this.goodsAuditForm.goodsIds = v.id; this.goodsAuditForm.goodsIds = v.id;
const formData = new FormData(); const formData = new FormData();
formData.append('goodsIds', v.id); formData.append('goodsIds', v.id);
@@ -395,11 +397,12 @@ export default {
// 确认审核(二次确认) // 确认审核(二次确认)
confirmAudit() { confirmAudit() {
const auditText = this.goodsAuditForm.auth_flag === 1 ? '通过' : '拒绝'; const auditText = this.goodsAuditForm.auth_flag === 1 ? '通过' : '拒绝';
DialogPlugin.confirm({ const dlg = DialogPlugin.confirm({
header: '确认审核', header: '确认审核',
content: `您确认要审核${auditText} "${this.currentAuditGoods.goodsName}" 吗?`, content: `您确认要审核${auditText} "${this.currentAuditGoods.goodsName}" 吗?`,
theme: 'warning', theme: 'warning',
onConfirm: () => { onConfirm: () => {
dlg.hide();
this.submitAudit(); this.submitAudit();
}, },
}); });
@@ -515,11 +518,12 @@ export default {
const actionText = this.batchAuditForm.auth_flag === 1 ? '通过' : '拒绝'; const actionText = this.batchAuditForm.auth_flag === 1 ? '通过' : '拒绝';
const goodsNames = this.selectedRows.map(item => item.goodsName).join('、'); const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
DialogPlugin.confirm({ const dlg = DialogPlugin.confirm({
header: `确认批量审核${actionText}`, header: `确认批量审核${actionText}`,
content: `您确认要${actionText}以下商品的审核吗?\n${goodsNames}`, content: `您确认要${actionText}以下商品的审核吗?\n${goodsNames}`,
theme: 'warning', theme: 'warning',
onConfirm: () => { onConfirm: () => {
dlg.hide();
const goodsIds = this.selectedRows.map(item => item.id); const goodsIds = this.selectedRows.map(item => item.id);
const formData = new FormData(); const formData = new FormData();
formData.append('goodsId', goodsIds); formData.append('goodsId', goodsIds);

View File

@@ -1,62 +1,40 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<t-card class="category"> <t-tabs :value="searchForm.pageType" @change="onTabsChange" class="wap-tabs">
<div <t-tab-panel value="INDEX" label="首页" />
:class="{ active: i == selectedIndex }" <t-tab-panel value="SPECIAL" label="专题" />
class="category-item" </t-tabs>
v-for="(typeItem, i) in pageTypes"
:key="typeItem.type" <div class="operation padding-row">
>
<div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
</div>
</t-card>
<t-card class="content">
<t-button theme="primary" @click="createTemp">添加页面</t-button> <t-button theme="primary" @click="createTemp">添加页面</t-button>
<div class="list">
<t-loading v-if="loading" fullscreen></t-loading>
<div class="item item-title">
<div>页面名称</div>
<div class="item-config">
<div>
<div v-if="searchForm.pageType !== 'SPECIAL'">状态</div>
</div>
<div>操作</div>
</div>
</div> </div>
<div class="item" v-for="(item, index) in list" :key="index"> <t-table :loading="loading" :columns="columns" :data="list" rowKey="id" class="mt_10">
<div>{{ item.name || "暂无模板昵称" }}</div> <template #statusSlot="{ row }">
<div class="item-config"> <t-switch v-if="searchForm.pageType !== 'SPECIAL'" v-model="row.pageShow" @change="releaseTemplate(row.id)"></t-switch>
<div> </template>
<t-switch <template #action="{ row }">
v-if="searchForm.pageType !== 'SPECIAL'" <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="Template(row)">编辑</a>
v-model="item.pageShow" <span style="margin:0 8px;color:#dcdee2">|</span>
@change="releaseTemplate(item.id)" <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="decorate(row)">装修</a>
> <span style="margin:0 8px;color:#dcdee2">|</span>
<span slot="open"></span> <t-popconfirm content="删除此模板?" @confirm="confirmDelTemplate(row.id)">
<span slot="close"></span> <a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
</t-switch> </t-popconfirm>
</div> </template>
<div class="action"> </t-table>
<t-button theme="default" @click="Template(item)" size="small">编辑</t-button>
<t-button theme="success" @click="decorate(item)" size="small">装修</t-button> <div class="mt_10" style="display: flex; justify-content: flex-end">
<t-button theme="danger" size="small" @click="confirmDelTemplate(item.id)">删除</t-button>
</div>
</div>
</div>
<div class="no-more" v-if="list.length == 0">暂无更多模板</div>
</div>
<t-pagination <t-pagination
:total="total" :total="total"
size="small" size="small"
:pageSizeOptions="[20, 50, 100]" :pageSizeOptions="[20, 50, 100]"
showJumper showJumper
style="float: right; overflow: hidden"
:pageSize="searchForm.pageSize" :pageSize="searchForm.pageSize"
@change="({ current }) => changePageNum(current)" @change="({ current }) => changePageNum(current)"
@page-size-change="(size) => changePageSize(size)" @page-size-change="(size) => changePageSize(size)"
/> />
</t-card> </div>
<t-dialog <t-dialog
:visible.sync="showModal" :visible.sync="showModal"
header="模板设置" header="模板设置"
@@ -98,18 +76,9 @@ export default {
pageClientType: "PC", pageClientType: "PC",
}, },
columns: [ columns: [
// 列表展示的column { title: "页面名称", colKey: "name", width: 260 },
{ { title: "状态", colKey: "statusSlot", width: 120 },
title: "页面名称", { title: "操作", colKey: "action", align: "center", fixed: "right", width: 200 },
key: "name",
},
{
title: "状态",
},
{
title: "操作",
key: "action",
},
], ],
loading: false, // 加载状态 loading: false, // 加载状态
@@ -131,6 +100,11 @@ export default {
this.getTemplateList(); this.getTemplateList();
}, },
methods: { methods: {
onTabsChange(val) {
this.searchForm.pageNumber = 1;
this.searchForm.pageType = val;
this.getTemplateList();
},
newTemplate() { newTemplate() {
// 添加,编辑模板 // 添加,编辑模板
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
@@ -258,68 +232,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.category-item { .wap-tabs { margin-bottom: 12px; }
cursor: pointer;
padding: 4px;
}
.active {
background: #ededed;
}
.item-title {
background: #d7e7f5 !important;
height: 54px;
}
.no-more {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper { .wrapper {
background: #fff; background: #fff;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column;
} }
.category { .mt_10 { margin-top: 10px; }
flex: 2;
}
.content {
flex: 8;
}
* {
margin: 5px;
}
.list {
min-height: 600px;
position: relative;
}
.item:nth-of-type(2) {
margin: 0 5px;
}
.item {
width: 100% !important;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: space-between;
> .item-config {
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
div:nth-child(2) {
margin-right: 80px;
}
}
}
.item:nth-of-type(2n + 1) {
background: #f5f7fa;
}
.action{
display: flex;
align-items: center;
width: 100px;
}
</style> </style>

View File

@@ -1,51 +1,28 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<t-card class="category"> <t-tabs :value="params.pageType" @change="onTabsChange" class="wap-tabs">
<div <t-tab-panel value="INDEX" label="首页" />
:class="{ active: i == selectedIndex }" <t-tab-panel value="SPECIAL" label="专题" />
class="category-item" </t-tabs>
v-for="(typeItem, i) in pageTypes" <div class="operation padding-row">
:key="typeItem.type" <t-button theme="primary" @click="handleAdd">添加页面</t-button>
>
<div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
</div> </div>
</t-card> <t-table :loading="loading" :columns="columns" :data="list" rowKey="id" class="mt_10">
<t-card class="content"> <template #statusSlot="{ row }">
<t-button theme="primary" @click="handleAdd()">添加页面</t-button> <t-switch v-model="row.pageShow" @change="changeSwitch(row)"></t-switch>
<div class="list"> </template>
<t-loading size="large" v-if="loading"></t-loading> <template #action="{ row }">
<div class="item item-title"> <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="handleEdit(row)">修改</a>
<div>页面名称</div> <span style="margin:0 8px;color:#dcdee2">|</span>
<div class="item-config"> <t-popconfirm content="删除此模板?" @confirm="handleDel(row)">
<div>状态</div> <a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
<div>操作</div>
</div>
</div>
<div class="item" v-for="(item, index) in list" :key="index">
<div>{{ item.name || "暂无模板昵称" }}</div>
<div class="item-config">
<t-switch v-model="item.pageShow" @change="changeSwitch(item)"></t-switch>
<t-button theme="primary" variant="outline" @click="handleEdit(item)" size="small">修改</t-button>
<t-popconfirm content="删除此模板?" @confirm="handleDel(item)">
<t-button theme="danger" size="small">删除</t-button>
</t-popconfirm> </t-popconfirm>
</template>
</t-table>
<div class="mt_10" style="display: flex; justify-content: flex-end;">
<t-pagination :current="params.pageNumber" :total="Number(total)" :pageSize="params.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
</div> </div>
</div> </div>
<div class="no-more" v-if="list.length ==0">暂无更多模板</div>
</div>
<t-pagination
:total="total"
:current="params.pageNumber"
:pageSize="params.pageSize"
:pageSizeOptions="[20, 50, 100]"
size="small"
showJumper
showPageSize
@change="onPaginationChange"
/>
</t-card>
</div>
</template> </template>
<script> <script>
import * as API_Other from "@/api/other.js"; import * as API_Other from "@/api/other.js";
@@ -55,18 +32,9 @@ export default {
return { return {
selectedIndex: 0, // 装修那个页面的下标 selectedIndex: 0, // 装修那个页面的下标
columns: [ columns: [
// 表头 { title: "页面名称", colKey: "name", width: 260 },
{ { title: "状态", colKey: "statusSlot", width: 120 },
title: "页面名称", { title: "操作", colKey: "action", align: "center", fixed: "right", width: 180 }
key: "name"
},
{
title: "状态"
},
{
title: "操作",
key: "action"
}
], ],
loading: false, // 加载状态 loading: false, // 加载状态
@@ -115,26 +83,10 @@ export default {
this.init(); this.init();
}, },
methods: { methods: {
// 切换tab onTabsChange(val) {
clickType(val, index) {
if (val == "ALERT") {
this.$router.push({
path: "/floorList/main",
query: { pagetype: val },
});
return;
} else if (val == "OPEN_SCREEN_ANIMATION") {
this.$router.push({
path: "/floorList/main",
query: { pagetype: val },
});
return;
} else {
this.params.pageNumber = 1; this.params.pageNumber = 1;
this.selectedIndex = index;
this.params.pageType = val; this.params.pageType = val;
this.init(); this.init();
}
}, },
// 分页 修改页码 // 分页 修改页码
@@ -223,59 +175,15 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.category-item { .wap-tabs { margin-bottom: 12px; }
cursor: pointer;
padding: 4px;
}
.active {
background: #ededed;
}
.item-title {
background: #d7e7f5 !important;
height: 54px;
}
.no-more {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper { .wrapper {
background: #fff; background: #fff;
padding: 20px; padding: 20px;
display: flex; display: flex;
} flex-direction: column;
.category {
flex: 2;
}
.content {
flex: 8;
} }
* { * {
margin: 5px; margin: 5px;
} }
.list { .mt_10 { margin-top: 10px; }
min-height: 600px;
position: relative;
}
.item:nth-of-type(2) {
margin: 0 5px;
}
.item {
width: 100% !important;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: space-between;
> .item-config {
width: 180px;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.item:nth-of-type(2n + 1) {
background: #f5f7fa;
}
</style> </style>

View File

@@ -9,7 +9,7 @@
<t-input v-model="searchForm.operatorName" placeholder="请输入操作人" clearable style="width: 240px" /> <t-input v-model="searchForm.operatorName" placeholder="请输入操作人" clearable style="width: 240px" />
</t-form-item> </t-form-item>
<t-form-item label="创建时间"> <t-form-item label="创建时间">
<DatePicker type="daterange" v-model="selectDate" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px" /> <t-date-picker v-model="selectDate" mode="date" range clearable format="YYYY-MM-DD" @change="selectDateRange" placeholder="选择起始时间" style="width: 240px" />
</t-form-item> </t-form-item>
<t-button theme="primary" class="search-btn" @click="handleSearch">搜索</t-button> <t-button theme="primary" class="search-btn" @click="handleSearch">搜索</t-button>
</t-form> </t-form>
@@ -25,12 +25,12 @@
</t-alert> </t-alert>
</div> </div>
<t-table v-if="showDev" :loading="loading" :columns="columns_dev" :data="data"> <t-table v-if="showDev" :loading="loading" :columns="columns_dev" :data="data" rowKey="id">
<template #createTime="{ row }"> <template #createTime="{ row }">
<span>{{ $options.filters.unixToDate(row.createTime / 1000) }}</span> <span>{{ $options.filters.unixToDate(row.createTime / 1000) }}</span>
</template> </template>
</t-table> </t-table>
<t-table v-else :loading="loading" :columns="columns" :data="data"> <t-table v-else :loading="loading" :columns="columns" :data="data" rowKey="id">
<template #createTime="{ row }"> <template #createTime="{ row }">
<span>{{ $options.filters.unixToDate(row.createTime / 1000) }}</span> <span>{{ $options.filters.unixToDate(row.createTime / 1000) }}</span>
</template> </template>

View File

@@ -115,9 +115,13 @@ export default {
}, },
// 实例化数据 // 实例化数据
async init() { async init() {
this.formValidate = JSON.parse(this.res).paymentSupportItems; const parsed = JSON.parse(this.res);
const items = Array.isArray(parsed && parsed.paymentSupportItems) ? parsed.paymentSupportItems : [];
this.formValidate = items.map(it => ({
...it,
supports: Array.isArray(it && it.supports) ? it.supports : []
}));
this.checkSupport = JSON.parse(JSON.stringify(this.formValidate)); this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
console.log(this.formValidate);
await getPaymentSupportForm().then((res) => { await getPaymentSupportForm().then((res) => {
// res.result.payments = ["H5", "PC"]; // res.result.payments = ["H5", "PC"];

View File

@@ -1,6 +1,11 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<Tabs v-model="tabsValue" @on-click="clickType" class="wap-tabs">
<TabPane label="首页" name="STORE"></TabPane>
<TabPane label="专题" name="SPECIAL"></TabPane>
</Tabs>
<Card class="content"> <Card class="content">
<Button type="primary" @click="handleAdd()">添加页面</Button> <Button type="primary" @click="handleAdd()">添加页面</Button>
<div class="list"> <div class="list">
@@ -45,6 +50,7 @@ export default {
// components: {region}, // components: {region},
data() { data() {
return { return {
tabsValue: 'STORE',
selectedIndex: 0, // 装修那个页面的下标 selectedIndex: 0, // 装修那个页面的下标
columns: [ // 表头 columns: [ // 表头
{ {
@@ -88,9 +94,9 @@ export default {
}, },
methods: { methods: {
// 切换tab // 切换tab
clickType(val,index) { clickType(val) {
this.params.pageNumber = 1 this.params.pageNumber = 1;
this.selectedIndex = index this.tabsValue = val;
this.params.pageType = val; this.params.pageType = val;
}, },
// 是否发布 // 是否发布
@@ -129,13 +135,14 @@ export default {
handleEdit(val) { handleEdit(val) {
this.$router.push({ this.$router.push({
path: "/floorList/main", path: "/floorList/main",
query: { id: val.id, name: val.name, type: val.pageShow }, query: { id: val.id, name: val.name, type: val.pageShow, pagetype: this.params.pageType },
}); });
}, },
// 添加模板 // 添加模板
handleAdd() { handleAdd() {
this.$router.push({ this.$router.push({
path: "/floorList/main", path: "/floorList/main",
query: { pagetype: this.params.pageType },
}); });
}, },
// 分页 改变页数 // 分页 改变页数
@@ -161,6 +168,7 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.wap-tabs { margin-bottom: 12px; }
.category-item { .category-item {
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;