Branch_csl #31
@ -109,3 +109,13 @@ export const exportSpu = async (params) => {
|
||||
export const getSpuSimpleList = async () => {
|
||||
return request.get({ url: '/product/spu/list-all-simple' })
|
||||
}
|
||||
|
||||
// 获得拼团商品 SPU 列表
|
||||
export const getSpuAdminSpuList = async () => {
|
||||
return request.get({ url: '/promotion/combination-activity/adminSpuList' })
|
||||
}
|
||||
|
||||
// 获得秒杀商品 SPU 列表
|
||||
export const getSpuMiaoShaAdminSpuList = async () => {
|
||||
return request.get({ url: '/promotion/seckill-activity/adminSpuList' })
|
||||
}
|
||||
|
||||
@ -21,24 +21,27 @@
|
||||
<!-- 右侧链接列表 -->
|
||||
<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
|
||||
<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
|
||||
<!-- 分组标题 -->
|
||||
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
|
||||
<!-- 链接列表 -->
|
||||
<el-tooltip
|
||||
v-for="(appLink, appLinkIndex) in group.links"
|
||||
:key="appLinkIndex"
|
||||
:content="appLink.path"
|
||||
placement="bottom"
|
||||
:show-after="300"
|
||||
>
|
||||
<el-button
|
||||
class="m-b-8px m-r-8px m-l-0px!"
|
||||
:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
|
||||
@click="handleAppLinkSelected(appLink)"
|
||||
>
|
||||
{{ appLink.name }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<template v-if="activeGroup == group.name">
|
||||
<!-- 分组标题 -->
|
||||
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
|
||||
<!-- 链接列表 -->
|
||||
<el-tooltip
|
||||
v-for="(appLink, appLinkIndex) in group.links"
|
||||
:key="appLinkIndex"
|
||||
:content="appLink.path"
|
||||
placement="bottom"
|
||||
:show-after="300"
|
||||
>
|
||||
<el-button
|
||||
class="m-b-8px m-r-8px m-l-0px!"
|
||||
:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
|
||||
@click="handleAppLinkSelected(appLink)"
|
||||
>
|
||||
{{ appLink.name }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@ -155,11 +158,11 @@ const linkScrollbar = ref<ScrollbarInstance>()
|
||||
// 处理分组选中
|
||||
const handleGroupSelected = (group: string) => {
|
||||
activeGroup.value = group
|
||||
const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
|
||||
if (titleRef) {
|
||||
// 滚动分组标题
|
||||
linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
|
||||
}
|
||||
// const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
|
||||
// if (titleRef) {
|
||||
// // 滚动分组标题
|
||||
// linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
|
||||
// }
|
||||
}
|
||||
|
||||
// 分组滚动条
|
||||
|
||||
@ -250,5 +250,30 @@ export const APP_LINK_GROUP_LIST = [
|
||||
path: '/pages/user/user_vip/index'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '自定义页面',
|
||||
links: [
|
||||
{
|
||||
name: '促销页面',
|
||||
path: 'ss'
|
||||
},
|
||||
{
|
||||
name: '关于我们',
|
||||
path: '/pages/pay/recharge-lo'
|
||||
},
|
||||
{
|
||||
name: '产品与服务',
|
||||
path: '/pages/pay/recharge-l'
|
||||
},
|
||||
{
|
||||
name: '自定义页面',
|
||||
path: '/pages/pay/recharge-'
|
||||
},
|
||||
{
|
||||
name: '个人中心',
|
||||
path: '/pages/pay/recharge'
|
||||
}
|
||||
]
|
||||
}
|
||||
] as AppLinkGroup[]
|
||||
|
||||
@ -128,8 +128,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
cursor: move;
|
||||
border-right: 1px solid var(--el-border-color-lighter);
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
// border-right: 1px solid var(--el-border-color-lighter);
|
||||
// border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||
<div
|
||||
class="flex flex-row text-12px"
|
||||
class="new-class flex flex-row text-12px"
|
||||
:style="{
|
||||
gap: `${property.space}px`,
|
||||
width: scrollbarWidth
|
||||
@ -20,13 +20,10 @@
|
||||
:key="index"
|
||||
>
|
||||
<!-- 布局1：1列-->
|
||||
<div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
|
||||
<!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
|
||||
<div class="flex flex-col justify-evenly gap-4px">
|
||||
<!-- 优惠值 -->
|
||||
<CouponDiscount :coupon="coupon" />
|
||||
<!-- 优惠描述 -->
|
||||
<CouponDiscountDesc :coupon="coupon" />
|
||||
<!-- 有效期 -->
|
||||
<CouponValidTerm :coupon="coupon" />
|
||||
</div>
|
||||
<div class="flex flex-col justify-evenly">
|
||||
@ -40,11 +37,11 @@
|
||||
立即领取
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 布局2：2列-->
|
||||
<!-- v-else-if="property.columns === 2"s -->
|
||||
<div
|
||||
v-else-if="property.columns === 2"
|
||||
class="m-l-16px flex flex-row justify-between p-8px"
|
||||
class="m-l-16px flex flex-row justify-between"
|
||||
>
|
||||
<div class="flex flex-col justify-evenly gap-4px">
|
||||
<!-- 优惠值 -->
|
||||
@ -64,8 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 布局3：3列-->
|
||||
<div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
|
||||
<!-- 优惠值 -->
|
||||
<!-- <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
|
||||
<CouponDiscount :coupon="coupon" />
|
||||
<div>{{ coupon.name }}</div>
|
||||
<div
|
||||
@ -77,7 +73,7 @@
|
||||
>
|
||||
立即领取
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
@ -139,4 +135,11 @@ onMounted(() => {
|
||||
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.new-class{
|
||||
margin-left: 10px;
|
||||
.box-content{
|
||||
margin-right:10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
'w-140px': property.layoutType === 'oneColSmallImg'
|
||||
}
|
||||
]"
|
||||
style="padding:10px;"
|
||||
>
|
||||
<el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||
<!-- 商品网格 -->
|
||||
|
||||
<div class="component">
|
||||
<div style="padding: 0px; border-radius: 0px; overflow: hidden;">
|
||||
<div class="min-h-42px flex flex-col">
|
||||
<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
|
||||
<div class="flex flex-1 flex-row items-center gap-8px">
|
||||
<div class="wh">
|
||||
<img
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png" />
|
||||
</div>
|
||||
<span class="text-16px" style="color: rgb(187, 187, 187);">92人拼团成功</span>
|
||||
</div>
|
||||
<div class="item-center flex flex-row justify-center gap-4px">
|
||||
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
||||
<Icon icon="ep-arrow-right" color="#000" :size="16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品网格 -->
|
||||
<div
|
||||
class="grid overflow-x-auto"
|
||||
:style="{
|
||||
@ -11,7 +31,7 @@
|
||||
>
|
||||
<!-- 商品 -->
|
||||
<div
|
||||
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
||||
class="new-class relative box-content flex flex-row flex-wrap overflow-hidden "
|
||||
:style="{
|
||||
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||
@ -79,7 +99,8 @@ watch(
|
||||
if (!props.property.activityId) return
|
||||
const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
|
||||
if (!activity?.spuId) return
|
||||
spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
|
||||
spuList.value = await ProductSpuApi.getSpuAdminSpuList()
|
||||
console.log(spuList.value,'请求成功')
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
@ -122,4 +143,31 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.new-class{
|
||||
padding: 10px;
|
||||
// width:42%;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__view) {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.wh {
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.wh::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 57%;
|
||||
border-right: 1px solid #ababab;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card header="商品样式" class="property-group" shadow="never">
|
||||
<el-form-item label="布局" prop="type">
|
||||
<!-- <el-form-item label="布局" prop="type">
|
||||
<el-radio-group v-model="formData.layoutType">
|
||||
<el-tooltip class="item" content="单列" placement="bottom">
|
||||
<el-radio-button label="oneCol">
|
||||
@ -27,7 +27,7 @@
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="商品名称" prop="fields.name.show">
|
||||
<div class="flex gap-8px">
|
||||
<ColorInput v-model="formData.fields.name.color" />
|
||||
|
||||
@ -1,125 +1,165 @@
|
||||
<template>
|
||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||
<!-- 商品网格 -->
|
||||
<div
|
||||
class="grid overflow-x-auto"
|
||||
:style="{
|
||||
gridGap: `${property.space}px`,
|
||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||
<div class="component">
|
||||
<div style="padding: 0px; border-radius: 0px; overflow: hidden;">
|
||||
<div class="min-h-42px flex flex-col">
|
||||
<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
|
||||
<div class="flex flex-1 flex-row items-center gap-8px">
|
||||
<div class="wh">
|
||||
<img
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png" />
|
||||
</div>
|
||||
<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
|
||||
</div>
|
||||
<div class="item-center flex flex-row justify-center gap-4px">
|
||||
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
||||
<Icon icon="ep-arrow-right" color="#000" :size="16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品网格 -->
|
||||
<!-- gridGap: `${property.space}px`, -->
|
||||
<div class="new-main" :style="{
|
||||
|
||||
gridTemplateColumns,
|
||||
width: scrollbarWidth
|
||||
}"
|
||||
>
|
||||
<!-- 商品 -->
|
||||
<div
|
||||
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
||||
:style="{
|
||||
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
|
||||
borderBottomRightRadius: `${property.borderRadiusBottom}px`
|
||||
}"
|
||||
v-for="(spu, index) in spuList"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 角标 -->
|
||||
<div
|
||||
v-if="property.badge.show"
|
||||
class="absolute left-0 top-0 z-1 items-center justify-center"
|
||||
>
|
||||
<el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
|
||||
</div>
|
||||
<!-- 商品封面图 -->
|
||||
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
||||
<div
|
||||
:class="[
|
||||
}">
|
||||
<!-- 商品 -->
|
||||
<!--
|
||||
:style="{
|
||||
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
|
||||
borderBottomRightRadius: `${property.borderRadiusBottom}px`
|
||||
}"
|
||||
-->
|
||||
<div class="new-class relative box-content flex-row flex-wrap overflow-hidden"
|
||||
v-for="(spu, index) in spuList" :key="index">
|
||||
<!-- 角标 -->
|
||||
<div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
|
||||
<el-image fit="cover" :src="property.badge.imgUrl" class="new-img" />
|
||||
</div>
|
||||
<!-- 商品封面图 -->
|
||||
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
||||
<div :class="[
|
||||
'flex flex-col gap-8px p-8px box-border',
|
||||
{
|
||||
'w-[calc(100%-64px)]': columns === 2,
|
||||
'w-full': columns === 3
|
||||
}
|
||||
]"
|
||||
>
|
||||
<!-- 商品名称 -->
|
||||
<div
|
||||
v-if="property.fields.name.show"
|
||||
class="truncate text-12px"
|
||||
:style="{ color: property.fields.name.color }"
|
||||
>
|
||||
{{ spu.name }}
|
||||
</div>
|
||||
<div>
|
||||
<!-- 商品价格 -->
|
||||
<span
|
||||
v-if="property.fields.price.show"
|
||||
class="text-12px"
|
||||
:style="{ color: property.fields.price.color }"
|
||||
>
|
||||
￥{{ spu.price }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
]">
|
||||
<!-- 商品名称 -->
|
||||
<div v-if="property.fields.name.show" class="truncate text-12px"
|
||||
:style="{ color: property.fields.name.color }">
|
||||
{{ spu.name }}
|
||||
</div>
|
||||
<div>
|
||||
<!-- 商品价格 -->
|
||||
<span v-if="property.fields.price.show" class="text-12px"
|
||||
:style="{ color: property.fields.price.color }">
|
||||
￥{{ spu.price }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PromotionSeckillProperty } from './config'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||
import { PromotionSeckillProperty } from './config'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||
|
||||
/** 秒杀 */
|
||||
defineOptions({ name: 'PromotionSeckill' })
|
||||
// 定义属性
|
||||
const props = defineProps<{ property: PromotionSeckillProperty }>()
|
||||
// 商品列表
|
||||
const spuList = ref<ProductSpuApi.Spu[]>([])
|
||||
watch(
|
||||
() => props.property.activityId,
|
||||
async () => {
|
||||
if (!props.property.activityId) return
|
||||
const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
|
||||
if (!activity?.spuId) return
|
||||
spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
// 手机宽度
|
||||
const phoneWidth = ref(375)
|
||||
// 容器
|
||||
const containerRef = ref()
|
||||
// 商品的列数
|
||||
const columns = ref(2)
|
||||
// 滚动条宽度
|
||||
const scrollbarWidth = ref('100%')
|
||||
// 商品图大小
|
||||
const imageSize = ref('0')
|
||||
// 商品网络列数
|
||||
const gridTemplateColumns = ref('')
|
||||
// 计算布局参数
|
||||
watch(
|
||||
() => [props.property, phoneWidth, spuList.value.length],
|
||||
() => {
|
||||
// 计算列数
|
||||
columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
|
||||
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
|
||||
const productWidth =
|
||||
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
|
||||
// 商品图布局：2列时，左右布局 3列时，上下布局
|
||||
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
|
||||
// 指定列数
|
||||
gridTemplateColumns.value = `repeat(${columns.value}, auto)`
|
||||
// 不滚动
|
||||
scrollbarWidth.value = '100%'
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
onMounted(() => {
|
||||
// 提取手机宽度
|
||||
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
||||
})
|
||||
/** 秒杀 */
|
||||
defineOptions({ name: 'PromotionSeckill' })
|
||||
// 定义属性
|
||||
const props = defineProps<{ property : PromotionSeckillProperty }>()
|
||||
// 商品列表
|
||||
const spuList = ref<ProductSpuApi.Spu[]>([])
|
||||
watch(
|
||||
() => props.property.activityId,
|
||||
async () => {
|
||||
if (!props.property.activityId) return
|
||||
const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
|
||||
if (!activity?.spuId) return
|
||||
spuList.value = await ProductSpuApi.getSpuMiaoShaAdminSpuList()
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
// 手机宽度
|
||||
const phoneWidth = ref(375)
|
||||
// 容器
|
||||
const containerRef = ref()
|
||||
// 商品的列数
|
||||
const columns = ref(2)
|
||||
// 滚动条宽度
|
||||
const scrollbarWidth = ref('100%')
|
||||
// 商品图大小
|
||||
const imageSize = ref('0')
|
||||
// 商品网络列数
|
||||
const gridTemplateColumns = ref('')
|
||||
// 计算布局参数
|
||||
watch(
|
||||
() => [props.property, phoneWidth, spuList.value.length],
|
||||
() => {
|
||||
// 计算列数
|
||||
columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
|
||||
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
|
||||
const productWidth =
|
||||
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
|
||||
// 商品图布局：2列时，左右布局 3列时，上下布局
|
||||
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
|
||||
// 指定列数
|
||||
gridTemplateColumns.value = `repeat(${columns.value}, auto)`
|
||||
// 不滚动
|
||||
scrollbarWidth.value = '100%'
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
onMounted(() => {
|
||||
// 提取手机宽度
|
||||
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-scrollbar__view) {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.new-class {
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
// width:42%;
|
||||
}
|
||||
|
||||
.new-main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:deep(.el-image) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wh {
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.wh::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 57%;
|
||||
border-right: 1px solid #ababab;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
@ -249,6 +249,7 @@ watch(
|
||||
const component = componentConfigs[item.id]
|
||||
return { ...component, property: item.property }
|
||||
})
|
||||
console.log(modelValue,"pageComponents.value")
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
|
||||
@ -146,7 +146,7 @@ export const PAGE_LIBS = [
|
||||
components: [
|
||||
'PromotionCombination',
|
||||
'PromotionSeckill',
|
||||
'PromotionPoint',
|
||||
// 'PromotionPoint',
|
||||
'CouponCard',
|
||||
'PromotionArticle'
|
||||
]
|
||||
|
||||
@ -469,7 +469,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/diy',
|
||||
path: '/diy-template/diy',
|
||||
name: 'DiyCenter',
|
||||
meta: { hidden: true },
|
||||
component: Layout,
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
<template>
|
||||
<DiyEditor
|
||||
v-if="formData && !formLoading"
|
||||
v-model="currentFormData!.property"
|
||||
:title="templateItems[selectedTemplateItem].name"
|
||||
:libs="libs"
|
||||
:show-page-config="selectedTemplateItem !== 0"
|
||||
:show-tab-bar="selectedTemplateItem === 0"
|
||||
:show-navigation-bar="selectedTemplateItem !== 0"
|
||||
:preview-url="previewUrl"
|
||||
@save="submitForm"
|
||||
@reset="handleEditorReset"
|
||||
>
|
||||
<template #toolBarLeft>
|
||||
<el-radio-group
|
||||
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
||||
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
||||
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
||||
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
|
||||
<template #toolBarLeft>
|
||||
<!-- <el-radio-group
|
||||
v-model="selectedTemplateItem"
|
||||
class="h-full!"
|
||||
@change="handleTemplateItemChange"
|
||||
@ -22,146 +14,159 @@
|
||||
<Icon :icon="item.icon" :size="24" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</DiyEditor>
|
||||
</el-radio-group> -->
|
||||
</template>
|
||||
</DiyEditor>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
|
||||
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
|
||||
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
|
||||
import { toNumber } from 'lodash-es'
|
||||
// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
|
||||
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
|
||||
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
|
||||
import { toNumber } from 'lodash-es'
|
||||
// import { watch } from 'vue';
|
||||
|
||||
/** 装修模板表单 */
|
||||
defineOptions({ name: 'DiyTemplateDecorate' })
|
||||
/** 装修模板表单 */
|
||||
defineOptions({ name: 'DiyTemplateDecorate' })
|
||||
/** 初始化 **/
|
||||
const { currentRoute } = useRouter() // 路由
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const route = useRoute();
|
||||
// 左上角工具栏操作按钮
|
||||
const selectedTemplateItem = ref('0')
|
||||
// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
|
||||
const templateItems = reactive([
|
||||
{ name: '基础设置', icon: 'ep:iphone' },
|
||||
{ name: '首页', icon: 'ep:home-filled' },
|
||||
{ name: '我的', icon: 'ep:user-filled' }
|
||||
])
|
||||
|
||||
// 左上角工具栏操作按钮
|
||||
const selectedTemplateItem = ref(0)
|
||||
const templateItems = reactive([
|
||||
{ name: '基础设置', icon: 'ep:iphone' },
|
||||
{ name: '首页', icon: 'ep:home-filled' },
|
||||
{ name: '我的', icon: 'ep:user-filled' }
|
||||
])
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
|
||||
const formRef = ref() // 表单 Ref
|
||||
// 当前编辑的属性
|
||||
const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
|
||||
// 商城 H5 预览地址
|
||||
const previewUrl = ref('')
|
||||
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
|
||||
const formRef = ref() // 表单 Ref
|
||||
// 当前编辑的属性
|
||||
const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
|
||||
// 商城 H5 预览地址
|
||||
const previewUrl = ref('')
|
||||
// 获取详情
|
||||
const getPageDetail = async (id : any) => {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
|
||||
currentFormData.value = formData.value
|
||||
// 拼接手机预览链接
|
||||
const domain = import.meta.env.VITE_MALL_H5_DOMAIN
|
||||
previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取详情
|
||||
const getPageDetail = async (id: any) => {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
|
||||
currentFormData.value = formData.value
|
||||
// 模板组件库
|
||||
const templateLibs = [] as DiyComponentLibrary[]
|
||||
// 当前组件库
|
||||
const libs = ref<DiyComponentLibrary[]>(templateLibs)
|
||||
// 模板选项切换
|
||||
const handleTemplateItemChange = () => {
|
||||
// 编辑模板
|
||||
// if (selectedTemplateItem.value === 0) {
|
||||
// libs.value = templateLibs
|
||||
// currentFormData.value = formData.value
|
||||
// return
|
||||
// }
|
||||
|
||||
// 拼接手机预览链接
|
||||
const domain = import.meta.env.VITE_MALL_H5_DOMAIN
|
||||
previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
// 编辑页面
|
||||
libs.value = PAGE_LIBS
|
||||
console.log(formData.value!.pages, 'PAGE_LIBS')
|
||||
// currentFormData.value = formData.value!.pages.find(
|
||||
// // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
|
||||
// (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
|
||||
// )
|
||||
currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
|
||||
console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
|
||||
}
|
||||
|
||||
// 模板组件库
|
||||
const templateLibs = [] as DiyComponentLibrary[]
|
||||
// 当前组件库
|
||||
const libs = ref<DiyComponentLibrary[]>(templateLibs)
|
||||
// 模板选项切换
|
||||
const handleTemplateItemChange = () => {
|
||||
// 编辑模板
|
||||
if (selectedTemplateItem.value === 0) {
|
||||
libs.value = templateLibs
|
||||
currentFormData.value = formData.value
|
||||
return
|
||||
}
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (selectedTemplateItem.value === '0') {
|
||||
// 提交模板属性
|
||||
await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
|
||||
} else {
|
||||
// 提交页面属性
|
||||
await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
|
||||
}
|
||||
message.success('保存成功')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑页面
|
||||
libs.value = PAGE_LIBS
|
||||
currentFormData.value = formData.value!.pages.find(
|
||||
(page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
|
||||
)
|
||||
}
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
used: false,
|
||||
usedTime: undefined,
|
||||
remark: '',
|
||||
previewPicUrls: [],
|
||||
property: '',
|
||||
pages: []
|
||||
} as DiyTemplateApi.DiyTemplatePropertyVO
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (selectedTemplateItem.value === 0) {
|
||||
// 提交模板属性
|
||||
await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
|
||||
} else {
|
||||
// 提交页面属性
|
||||
await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
|
||||
}
|
||||
message.success('保存成功')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
// 重置时记录当前编辑的页面
|
||||
const handleEditorReset = () => storePageIndex()
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
used: false,
|
||||
usedTime: undefined,
|
||||
remark: '',
|
||||
previewPicUrls: [],
|
||||
property: '',
|
||||
pages: []
|
||||
} as DiyTemplateApi.DiyTemplatePropertyVO
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
//#region 无感刷新
|
||||
// 记录标识
|
||||
const DIY_PAGE_INDEX_KEY = 'diy_page_index'
|
||||
// 1. 记录
|
||||
const storePageIndex = () =>
|
||||
sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
|
||||
// 2. 恢复
|
||||
const recoverPageIndex = () => {
|
||||
// 恢复重置前的页面，默认是第一个页面
|
||||
const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
|
||||
// 移除标记
|
||||
sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
|
||||
// 切换页面
|
||||
if (pageIndex !== selectedTemplateItem.value) {
|
||||
selectedTemplateItem.value = pageIndex
|
||||
handleTemplateItemChange()
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
|
||||
// 重置时记录当前编辑的页面
|
||||
const handleEditorReset = () => storePageIndex()
|
||||
onMounted(async () => {
|
||||
resetForm()
|
||||
// if (!currentRoute.value.params.id) {
|
||||
// message.warning('参数错误，页面编号不能为空！')
|
||||
// delView(unref(currentRoute))
|
||||
// return
|
||||
// }
|
||||
// 查询详情
|
||||
// await getPageDetail(currentRoute.value.params.id)
|
||||
await getPageDetail(4)
|
||||
// 恢复重置前的页面
|
||||
recoverPageIndex()
|
||||
currentFormData.value = formData.value!.pages[0]
|
||||
|
||||
//#region 无感刷新
|
||||
// 记录标识
|
||||
const DIY_PAGE_INDEX_KEY = 'diy_page_index'
|
||||
// 1. 记录
|
||||
const storePageIndex = () =>
|
||||
sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
|
||||
// 2. 恢复
|
||||
const recoverPageIndex = () => {
|
||||
// 恢复重置前的页面，默认是第一个页面
|
||||
const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
|
||||
// 移除标记
|
||||
sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
|
||||
// 切换页面
|
||||
if (pageIndex !== selectedTemplateItem.value) {
|
||||
selectedTemplateItem.value = pageIndex
|
||||
handleTemplateItemChange()
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
/** 初始化 **/
|
||||
const { currentRoute } = useRouter() // 路由
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
onMounted(async () => {
|
||||
resetForm()
|
||||
if (!currentRoute.value.params.id) {
|
||||
message.warning('参数错误，页面编号不能为空！')
|
||||
delView(unref(currentRoute))
|
||||
return
|
||||
}
|
||||
|
||||
// 查询详情
|
||||
await getPageDetail(currentRoute.value.params.id)
|
||||
// 恢复重置前的页面
|
||||
recoverPageIndex()
|
||||
})
|
||||
</script>
|
||||
})
|
||||
|
||||
// watch(() => route.path, (newPath, oldPath) => {
|
||||
// console.log(newPath,'newPathnewPath');
|
||||
// // handleTemplateItemChange()
|
||||
// }, { immediate: true });
|
||||
</script>
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
||||
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
||||
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
||||
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
|
||||
<template #toolBarLeft>
|
||||
<!-- <el-radio-group
|
||||
v-model="selectedTemplateItem"
|
||||
class="h-full!"
|
||||
@change="handleTemplateItemChange"
|
||||
>
|
||||
<el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
|
||||
<el-radio-button :label="index">
|
||||
<Icon :icon="item.icon" :size="24" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group> -->
|
||||
</template>
|
||||
</DiyEditor>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
|
||||
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
|
||||
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
|
||||
import { toNumber } from 'lodash-es'
|
||||
// import { watch } from 'vue';
|
||||
|
||||
/** 装修模板表单 */
|
||||
defineOptions({ name: 'DiyTemplateDecorate' })
|
||||
/** 初始化 **/
|
||||
const { currentRoute } = useRouter() // 路由
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const route = useRoute();
|
||||
// 左上角工具栏操作按钮
|
||||
const selectedTemplateItem = ref('1')
|
||||
// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
|
||||
const templateItems = reactive([
|
||||
{ name: '基础设置', icon: 'ep:iphone' },
|
||||
{ name: '首页', icon: 'ep:home-filled' },
|
||||
{ name: '我的', icon: 'ep:user-filled' }
|
||||
])
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
|
||||
const formRef = ref() // 表单 Ref
|
||||
// 当前编辑的属性
|
||||
const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
|
||||
// 商城 H5 预览地址
|
||||
const previewUrl = ref('')
|
||||
|
||||
// 获取详情
|
||||
const getPageDetail = async (id : any) => {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
|
||||
currentFormData.value = formData.value
|
||||
// 拼接手机预览链接
|
||||
const domain = import.meta.env.VITE_MALL_H5_DOMAIN
|
||||
previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 模板组件库
|
||||
const templateLibs = [] as DiyComponentLibrary[]
|
||||
// 当前组件库
|
||||
const libs = ref<DiyComponentLibrary[]>(templateLibs)
|
||||
// 模板选项切换
|
||||
const handleTemplateItemChange = () => {
|
||||
// 编辑模板
|
||||
// if (selectedTemplateItem.value === 0) {
|
||||
// libs.value = templateLibs
|
||||
// currentFormData.value = formData.value
|
||||
// return
|
||||
// }
|
||||
|
||||
// 编辑页面
|
||||
libs.value = PAGE_LIBS
|
||||
console.log(formData.value!.pages, 'PAGE_LIBS')
|
||||
// currentFormData.value = formData.value!.pages.find(
|
||||
// // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
|
||||
// (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
|
||||
// )
|
||||
currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
|
||||
console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (selectedTemplateItem.value === '0') {
|
||||
// 提交模板属性
|
||||
await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
|
||||
} else {
|
||||
// 提交页面属性
|
||||
await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
|
||||
}
|
||||
message.success('保存成功')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
used: false,
|
||||
usedTime: undefined,
|
||||
remark: '',
|
||||
previewPicUrls: [],
|
||||
property: '',
|
||||
pages: []
|
||||
} as DiyTemplateApi.DiyTemplatePropertyVO
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 重置时记录当前编辑的页面
|
||||
const handleEditorReset = () => storePageIndex()
|
||||
|
||||
//#region 无感刷新
|
||||
// 记录标识
|
||||
const DIY_PAGE_INDEX_KEY = 'diy_page_index'
|
||||
// 1. 记录
|
||||
const storePageIndex = () =>
|
||||
sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
|
||||
// 2. 恢复
|
||||
const recoverPageIndex = () => {
|
||||
// 恢复重置前的页面，默认是第一个页面
|
||||
const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
|
||||
// 移除标记
|
||||
sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
|
||||
// 切换页面
|
||||
if (pageIndex !== selectedTemplateItem.value) {
|
||||
selectedTemplateItem.value = pageIndex
|
||||
handleTemplateItemChange()
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
resetForm()
|
||||
// if (!currentRoute.value.params.id) {
|
||||
// message.warning('参数错误，页面编号不能为空！')
|
||||
// delView(unref(currentRoute))
|
||||
// return
|
||||
// }
|
||||
// 查询详情
|
||||
// await getPageDetail(currentRoute.value.params.id)
|
||||
await getPageDetail(4)
|
||||
// 恢复重置前的页面
|
||||
recoverPageIndex()
|
||||
selectedTemplateItem.value = 1
|
||||
currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
|
||||
// handleTemplateItemChange()
|
||||
console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
|
||||
|
||||
})
|
||||
|
||||
// watch(() => route.path, (newPath, oldPath) => {
|
||||
// console.log(newPath,'newPathnewPath');
|
||||
// // handleTemplateItemChange()
|
||||
// }, { immediate: true });
|
||||
</script>
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
||||
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
||||
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
||||
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
|
||||
<template #toolBarLeft>
|
||||
<!-- <el-radio-group
|
||||
v-model="selectedTemplateItem"
|
||||
class="h-full!"
|
||||
@change="handleTemplateItemChange"
|
||||
>
|
||||
<el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
|
||||
<el-radio-button :label="index">
|
||||
<Icon :icon="item.icon" :size="24" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group> -->
|
||||
</template>
|
||||
</DiyEditor>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
|
||||
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
|
||||
import * as DiyPageApi from '@/api/mall/promotion/diy/page'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
|
||||
import { toNumber } from 'lodash-es'
|
||||
// import { watch } from 'vue';
|
||||
|
||||
/** 装修模板表单 */
|
||||
defineOptions({ name: 'DiyTemplateDecorate' })
|
||||
/** 初始化 **/
|
||||
const { currentRoute } = useRouter() // 路由
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const route = useRoute();
|
||||
// 左上角工具栏操作按钮
|
||||
const selectedTemplateItem = ref('1')
|
||||
// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
|
||||
const templateItems = reactive([
|
||||
{ name: '基础设置', icon: 'ep:iphone' },
|
||||
{ name: '首页', icon: 'ep:home-filled' },
|
||||
{ name: '我的', icon: 'ep:user-filled' }
|
||||
])
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
|
||||
const formRef = ref() // 表单 Ref
|
||||
// 当前编辑的属性
|
||||
const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
|
||||
// 商城 H5 预览地址
|
||||
const previewUrl = ref('')
|
||||
|
||||
// 获取详情
|
||||
const getPageDetail = async (id : any) => {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
|
||||
currentFormData.value = formData.value
|
||||
// 拼接手机预览链接
|
||||
const domain = import.meta.env.VITE_MALL_H5_DOMAIN
|
||||
previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 模板组件库
|
||||
const templateLibs = [] as DiyComponentLibrary[]
|
||||
// 当前组件库
|
||||
const libs = ref<DiyComponentLibrary[]>(templateLibs)
|
||||
// 模板选项切换
|
||||
const handleTemplateItemChange = () => {
|
||||
// 编辑模板
|
||||
// if (selectedTemplateItem.value === 0) {
|
||||
// libs.value = templateLibs
|
||||
// currentFormData.value = formData.value
|
||||
// return
|
||||
// }
|
||||
|
||||
// 编辑页面
|
||||
libs.value = PAGE_LIBS
|
||||
console.log(formData.value!.pages, 'PAGE_LIBS')
|
||||
// currentFormData.value = formData.value!.pages.find(
|
||||
// // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
|
||||
// (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
|
||||
// )
|
||||
currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
|
||||
console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (selectedTemplateItem.value === '0') {
|
||||
// 提交模板属性
|
||||
await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
|
||||
} else {
|
||||
// 提交页面属性
|
||||
await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
|
||||
}
|
||||
message.success('保存成功')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
used: false,
|
||||
usedTime: undefined,
|
||||
remark: '',
|
||||
previewPicUrls: [],
|
||||
property: '',
|
||||
pages: []
|
||||
} as DiyTemplateApi.DiyTemplatePropertyVO
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 重置时记录当前编辑的页面
|
||||
const handleEditorReset = () => storePageIndex()
|
||||
|
||||
//#region 无感刷新
|
||||
// 记录标识
|
||||
const DIY_PAGE_INDEX_KEY = 'diy_page_index'
|
||||
// 1. 记录
|
||||
const storePageIndex = () =>
|
||||
sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
|
||||
// 2. 恢复
|
||||
const recoverPageIndex = () => {
|
||||
// 恢复重置前的页面，默认是第一个页面
|
||||
const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
|
||||
// 移除标记
|
||||
sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
|
||||
// 切换页面
|
||||
if (pageIndex !== selectedTemplateItem.value) {
|
||||
selectedTemplateItem.value = pageIndex
|
||||
handleTemplateItemChange()
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
resetForm()
|
||||
// if (!currentRoute.value.params.id) {
|
||||
// message.warning('参数错误，页面编号不能为空！')
|
||||
// delView(unref(currentRoute))
|
||||
// return
|
||||
// }
|
||||
// 查询详情
|
||||
// await getPageDetail(currentRoute.value.params.id)
|
||||
await getPageDetail(4)
|
||||
// 恢复重置前的页面
|
||||
recoverPageIndex()
|
||||
libs.value = templateLibs
|
||||
currentFormData.value = formData.value
|
||||
// handleTemplateItemChange()
|
||||
console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
|
||||
|
||||
})
|
||||
|
||||
// watch(() => route.path, (newPath, oldPath) => {
|
||||
// console.log(newPath,'newPathnewPath');
|
||||
// // handleTemplateItemChange()
|
||||
// }, { immediate: true });
|
||||
</script>
|
||||
@ -1,133 +1,117 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="秒杀时段名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入秒杀时段名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间点" prop="startTime">
|
||||
<el-time-picker
|
||||
v-model="formData.startTime"
|
||||
value-format="HH:mm:ss"
|
||||
placeholder="选择开始时间点"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间点" prop="endTime">
|
||||
<el-time-picker
|
||||
v-model="formData.endTime"
|
||||
value-format="HH:mm:ss"
|
||||
placeholder="选择结束时间点"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="秒杀轮播图" prop="sliderPicUrls">
|
||||
<UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
|
||||
<el-form-item label="秒杀时段名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入秒杀时段名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间点" prop="startTime">
|
||||
<el-time-picker v-model="formData.startTime" value-format="HH:mm" format="HH:mm"
|
||||
placeholder="选择开始时间点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间点" prop="endTime">
|
||||
<el-time-picker v-model="formData.endTime" value-format="HH:mm" format="HH:mm" placeholder="选择结束时间点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="秒杀轮播图" prop="sliderPicUrls">
|
||||
<UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
|
||||
:label="dict.value">
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
/** 秒杀时段 表单 */
|
||||
defineOptions({ name: 'SeckillConfigForm' })
|
||||
/** 秒杀时段 表单 */
|
||||
defineOptions({ name: 'SeckillConfigForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
sliderPicUrls: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }],
|
||||
startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }],
|
||||
endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
sliderPicUrls: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }],
|
||||
startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }],
|
||||
endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await SeckillConfigApi.getSeckillConfig(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
/** 打开弹窗 */
|
||||
const open = async (type : string, id ?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await SeckillConfigApi.getSeckillConfig(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as SeckillConfigVO
|
||||
if (formType.value === 'create') {
|
||||
await SeckillConfigApi.createSeckillConfig(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await SeckillConfigApi.updateSeckillConfig(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as SeckillConfigVO
|
||||
if (formType.value === 'create') {
|
||||
await SeckillConfigApi.createSeckillConfig(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await SeckillConfigApi.updateSeckillConfig(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
sliderPicUrls: [],
|
||||
status: CommonStatusEnum.ENABLE
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
sliderPicUrls: [],
|
||||
status: CommonStatusEnum.ENABLE
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user