root/allLikeMall
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request 'Branch_csl' (#31) from Branch_csl into master

Browse Source 
Reviewed-on: #31
This commit is contained in:
root 2024-10-08 17:44:32 +08:00
commit 2d18b5fdbe
16 changed files with 894 additions and 424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
yudao-admin-vue3/src/api/mall/product/spu.ts
View File

@ -109,3 +109,13 @@ export const exportSpu = async (params) => {
export const getSpuSimpleList = async () => { export const getSpuSimpleList = async () => {
return request.get({ url: '/product/spu/list-all-simple' }) 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' })
}

49
yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue
View File

@ -21,24 +21,27 @@
<!-- 右侧链接列表 --> <!-- 右侧链接列表 -->
<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar"> <el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex"> <div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
<!-- 分组标题 --> <template v-if="activeGroup == group.name">
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div> <!-- 分组标题 -->
<!-- 链接列表 --> <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
<el-tooltip <!-- 链接列表 -->
v-for="(appLink, appLinkIndex) in group.links" <el-tooltip
:key="appLinkIndex" v-for="(appLink, appLinkIndex) in group.links"
:content="appLink.path" :key="appLinkIndex"
placement="bottom" :content="appLink.path"
:show-after="300" placement="bottom"
> :show-after="300"
<el-button >
class="m-b-8px m-r-8px m-l-0px!" <el-button
:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'" class="m-b-8px m-r-8px m-l-0px!"
@click="handleAppLinkSelected(appLink)" :type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
> @click="handleAppLinkSelected(appLink)"
{{ appLink.name }} >
</el-button> {{ appLink.name }}
</el-tooltip> </el-button>
</el-tooltip>
</template>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
@ -155,11 +158,11 @@ const linkScrollbar = ref<ScrollbarInstance>()
// 处理分组选中 // 处理分组选中
const handleGroupSelected = (group: string) => { const handleGroupSelected = (group: string) => {
activeGroup.value = group activeGroup.value = group
const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group) // const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
if (titleRef) { // if (titleRef) {
// 滚动分组标题 // // 滚动分组标题
linkScrollbar.value?.setScrollTop(titleRef.offsetTop) // linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
} // }
} }
// 分组滚动条 // 分组滚动条

25
yudao-admin-vue3/src/components/AppLinkInput/data.ts
View File

@ -250,5 +250,30 @@ export const APP_LINK_GROUP_LIST = [
path: '/pages/user/user_vip/index' 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[] ] as AppLinkGroup[]

4
yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
View File

@ -128,8 +128,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
width: 86px; width: 86px;
height: 86px; height: 86px;
cursor: move; cursor: move;
border-right: 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); // border-bottom: 1px solid var(--el-border-color-lighter);
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

27
yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef"> <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
<div <div
class="flex flex-row text-12px" class="new-class flex flex-row text-12px"
:style="{ :style="{
gap: `${property.space}px`, gap: `${property.space}px`,
width: scrollbarWidth width: scrollbarWidth
@ -20,13 +20,10 @@
:key="index" :key="index"
> >
<!-- 布局1：1列--> <!-- 布局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"> <div class="flex flex-col justify-evenly gap-4px">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" /> <CouponDiscount :coupon="coupon" />
<!-- 优惠描述 -->
<CouponDiscountDesc :coupon="coupon" /> <CouponDiscountDesc :coupon="coupon" />
<!-- 有效期 -->
<CouponValidTerm :coupon="coupon" /> <CouponValidTerm :coupon="coupon" />
</div> </div>
<div class="flex flex-col justify-evenly"> <div class="flex flex-col justify-evenly">
@ -40,11 +37,11 @@
立即领取 立即领取
</div> </div>
</div> </div>
</div> </div> -->
<!-- 布局2：2列--> <!-- 布局2：2列-->
<!-- v-else-if="property.columns === 2"s -->
<div <div
v-else-if="property.columns === 2" class="m-l-16px flex flex-row justify-between"
class="m-l-16px flex flex-row justify-between p-8px"
> >
<div class="flex flex-col justify-evenly gap-4px"> <div class="flex flex-col justify-evenly gap-4px">
<!-- 优惠值 --> <!-- 优惠值 -->
@ -64,8 +61,7 @@
</div> </div>
</div> </div>
<!-- 布局3：3列--> <!-- 布局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" /> <CouponDiscount :coupon="coupon" />
<div>{{ coupon.name }}</div> <div>{{ coupon.name }}</div>
<div <div
@ -77,7 +73,7 @@
> >
立即领取 立即领取
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
@ -139,4 +135,11 @@ onMounted(() => {
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375 phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
}) })
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
.new-class{
margin-left: 10px;
.box-content{
margin-right:10px;
}
}
</style>

1
yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
View File

@ -26,6 +26,7 @@
'w-140px': property.layoutType === 'oneColSmallImg' 'w-140px': property.layoutType === 'oneColSmallImg'
} }
]" ]"
style="padding:10px;"
> >
<el-image fit="cover" class="h-full w-full" :src="spu.picUrl" /> <el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
</div> </div>

56
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
View File

@ -1,6 +1,26 @@
<template> <template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef"> <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 <div
class="grid overflow-x-auto" class="grid overflow-x-auto"
:style="{ :style="{
@ -11,7 +31,7 @@
> >
<!-- 商品 --> <!-- 商品 -->
<div <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="{ :style="{
borderTopLeftRadius: `${property.borderRadiusTop}px`, borderTopLeftRadius: `${property.borderRadiusTop}px`,
borderTopRightRadius: `${property.borderRadiusTop}px`, borderTopRightRadius: `${property.borderRadiusTop}px`,
@ -79,7 +99,8 @@ watch(
if (!props.property.activityId) return if (!props.property.activityId) return
const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId) const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
if (!activity?.spuId) return if (!activity?.spuId) return
spuList.value = [await ProductSpuApi.getSpu(activity.spuId)] spuList.value = await ProductSpuApi.getSpuAdminSpuList()
console.log(spuList.value,'请求成功')
}, },
{ {
immediate: true, immediate: true,
@ -122,4 +143,31 @@ onMounted(() => {
}) })
</script> </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>

4
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
View File

@ -14,7 +14,7 @@
</el-form-item> </el-form-item>
</el-card> </el-card>
<el-card header="商品样式" class="property-group" shadow="never"> <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-radio-group v-model="formData.layoutType">
<el-tooltip class="item" content="单列" placement="bottom"> <el-tooltip class="item" content="单列" placement="bottom">
<el-radio-button label="oneCol"> <el-radio-button label="oneCol">
@ -27,7 +27,7 @@
</el-radio-button> </el-radio-button>
</el-tooltip> </el-tooltip>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item> -->
<el-form-item label="商品名称" prop="fields.name.show"> <el-form-item label="商品名称" prop="fields.name.show">
<div class="flex gap-8px"> <div class="flex gap-8px">
<ColorInput v-model="formData.fields.name.color" /> <ColorInput v-model="formData.fields.name.color" />

264
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
View File

@ -1,125 +1,165 @@
<template> <template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef"> <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
<!-- 商品网格 --> <div class="component">
<div <div style="padding: 0px; border-radius: 0px; overflow: hidden;">
class="grid overflow-x-auto" <div class="min-h-42px flex flex-col">
:style="{ <div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
gridGap: `${property.space}px`, <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, gridTemplateColumns,
width: scrollbarWidth width: scrollbarWidth
}" }">
> <!-- 商品 -->
<!-- 商品 --> <!--
<div :style="{
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white" borderTopLeftRadius: `${property.borderRadiusTop}px`,
:style="{ borderTopRightRadius: `${property.borderRadiusTop}px`,
borderTopLeftRadius: `${property.borderRadiusTop}px`, borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
borderTopRightRadius: `${property.borderRadiusTop}px`, borderBottomRightRadius: `${property.borderRadiusBottom}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" v-for="(spu, index) in spuList" :key="index">
: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 </div>
v-if="property.badge.show" <!-- 商品封面图 -->
class="absolute left-0 top-0 z-1 items-center justify-center" <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
> <div :class="[
<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="[
'flex flex-col gap-8px p-8px box-border', 'flex flex-col gap-8px p-8px box-border',
{ {
'w-[calc(100%-64px)]': columns === 2, 'w-[calc(100%-64px)]': columns === 2,
'w-full': columns === 3 'w-full': columns === 3
} }
]" ]">
> <!-- 商品名称 -->
<!-- 商品名称 --> <div v-if="property.fields.name.show" class="truncate text-12px"
<div :style="{ color: property.fields.name.color }">
v-if="property.fields.name.show" {{ spu.name }}
class="truncate text-12px" </div>
:style="{ color: property.fields.name.color }" <div>
> <!-- 商品价格 -->
{{ spu.name }} <span v-if="property.fields.price.show" class="text-12px"
</div> :style="{ color: property.fields.price.color }">
<div> ￥{{ spu.price }}
<!-- 商品价格 --> </span>
<span </div>
v-if="property.fields.price.show" </div>
class="text-12px" </div>
:style="{ color: property.fields.price.color }" </div>
> </el-scrollbar>
￥{{ spu.price }}
</span>
</div>
</div>
</div>
</div>
</el-scrollbar>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PromotionSeckillProperty } from './config' import { PromotionSeckillProperty } from './config'
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity' import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
/** 秒杀 */ /** 秒杀 */
defineOptions({ name: 'PromotionSeckill' }) defineOptions({ name: 'PromotionSeckill' })
// 定义属性 // 定义属性
const props = defineProps<{ property: PromotionSeckillProperty }>() const props = defineProps<{ property : PromotionSeckillProperty }>()
// 商品列表 // 商品列表
const spuList = ref<ProductSpuApi.Spu[]>([]) const spuList = ref<ProductSpuApi.Spu[]>([])
watch( watch(
() => props.property.activityId, () => props.property.activityId,
async () => { async () => {
if (!props.property.activityId) return if (!props.property.activityId) return
const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId) const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
if (!activity?.spuId) return if (!activity?.spuId) return
spuList.value = [await ProductSpuApi.getSpu(activity.spuId)] spuList.value = await ProductSpuApi.getSpuMiaoShaAdminSpuList()
}, },
{ {
immediate: true, immediate: true,
deep: true deep: true
} }
) )
// 手机宽度 // 手机宽度
const phoneWidth = ref(375) const phoneWidth = ref(375)
// 容器 // 容器
const containerRef = ref() const containerRef = ref()
// 商品的列数 // 商品的列数
const columns = ref(2) const columns = ref(2)
// 滚动条宽度 // 滚动条宽度
const scrollbarWidth = ref('100%') const scrollbarWidth = ref('100%')
// 商品图大小 // 商品图大小
const imageSize = ref('0') const imageSize = ref('0')
// 商品网络列数 // 商品网络列数
const gridTemplateColumns = ref('') const gridTemplateColumns = ref('')
// 计算布局参数 // 计算布局参数
watch( watch(
() => [props.property, phoneWidth, spuList.value.length], () => [props.property, phoneWidth, spuList.value.length],
() => { () => {
// 计算列数 // 计算列数
columns.value = props.property.layoutType === 'oneCol' ? 1 : 3 columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数 // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
const productWidth = const productWidth =
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
// 商品图布局：2列时，左右布局 3列时，上下布局 // 商品图布局：2列时，左右布局 3列时，上下布局
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px` imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
// 指定列数 // 指定列数
gridTemplateColumns.value = `repeat(${columns.value}, auto)` gridTemplateColumns.value = `repeat(${columns.value}, auto)`
// 不滚动 // 不滚动
scrollbarWidth.value = '100%' scrollbarWidth.value = '100%'
}, },
{ immediate: true, deep: true } { immediate: true, deep: true }
) )
onMounted(() => { onMounted(() => {
// 提取手机宽度 // 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375 phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
}) })
</script> </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>

1
yudao-admin-vue3/src/components/DiyEditor/index.vue
View File

@ -249,6 +249,7 @@ watch(
const component = componentConfigs[item.id] const component = componentConfigs[item.id]
return { ...component, property: item.property } return { ...component, property: item.property }
}) })
console.log(modelValue,"pageComponents.value")
}, },
{ {
immediate: true immediate: true

2
yudao-admin-vue3/src/components/DiyEditor/util.ts
View File

@ -146,7 +146,7 @@ export const PAGE_LIBS = [
components: [ components: [
'PromotionCombination', 'PromotionCombination',
'PromotionSeckill', 'PromotionSeckill',
'PromotionPoint', // 'PromotionPoint',
'CouponCard', 'CouponCard',
'PromotionArticle' 'PromotionArticle'
] ]

2
yudao-admin-vue3/src/router/modules/remaining.ts
View File

@ -469,7 +469,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
] ]
}, },
{ {
path: '/diy', path: '/diy-template/diy',
name: 'DiyCenter', name: 'DiyCenter',
meta: { hidden: true }, meta: { hidden: true },
component: Layout, component: Layout,

285
yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
View File

@ -1,18 +1,10 @@
<template> <template>
<DiyEditor <DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
v-if="formData && !formLoading" :title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
v-model="currentFormData!.property" :show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
:title="templateItems[selectedTemplateItem].name" :preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
:libs="libs" <template #toolBarLeft>
:show-page-config="selectedTemplateItem !== 0" <!-- <el-radio-group
: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" v-model="selectedTemplateItem"
class="h-full!" class="h-full!"
@change="handleTemplateItemChange" @change="handleTemplateItemChange"
@ -22,146 +14,159 @@
<Icon :icon="item.icon" :size="24" /> <Icon :icon="item.icon" :size="24" />
</el-radio-button> </el-radio-button>
</el-tooltip> </el-tooltip>
</el-radio-group> </el-radio-group> -->
</template> </template>
</DiyEditor> </DiyEditor>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找 // TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
import * as DiyTemplateApi from '@/api/mall/promotion/diy/template' import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
import * as DiyPageApi from '@/api/mall/promotion/diy/page' import * as DiyPageApi from '@/api/mall/promotion/diy/page'
import { useTagsViewStore } from '@/store/modules/tagsView' import { useTagsViewStore } from '@/store/modules/tagsView'
import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下 import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
import { toNumber } from 'lodash-es' 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 message = useMessage() // 消息弹窗
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 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 getPageDetail = async (id : any) => {
const formRef = ref() // 表单 Ref formLoading.value = true
// 当前编辑的属性 try {
const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>() formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
// 商城 H5 预览地址 currentFormData.value = formData.value
const previewUrl = ref('') // 拼接手机预览链接
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) => { const templateLibs = [] as DiyComponentLibrary[]
formLoading.value = true // 当前组件库
try { const libs = ref<DiyComponentLibrary[]>(templateLibs)
formData.value = await DiyTemplateApi.getDiyTemplateProperty(id) // 模板选项切换
currentFormData.value = formData.value const handleTemplateItemChange = () => {
// 编辑模板
// if (selectedTemplateItem.value === 0) {
// libs.value = templateLibs
// currentFormData.value = formData.value
// return
// }
// 拼接手机预览链接 // 编辑页面
const domain = import.meta.env.VITE_MALL_H5_DOMAIN libs.value = PAGE_LIBS
previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}` console.log(formData.value!.pages, 'PAGE_LIBS')
} finally { // currentFormData.value = formData.value!.pages.find(
formLoading.value = false // // (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 submitForm = async () => {
// 当前组件库 // 校验表单
const libs = ref<DiyComponentLibrary[]>(templateLibs) if (!formRef) return
// 模板选项切换 // 提交请求
const handleTemplateItemChange = () => { formLoading.value = true
// 编辑模板 try {
if (selectedTemplateItem.value === 0) { if (selectedTemplateItem.value === '0') {
libs.value = templateLibs // 提交模板属性
currentFormData.value = formData.value await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
return } else {
} // 提交页面属性
await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
}
message.success('保存成功')
} finally {
formLoading.value = false
}
}
// 编辑页面 // 重置表单
libs.value = PAGE_LIBS const resetForm = () => {
currentFormData.value = formData.value!.pages.find( formData.value = {
(page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name id: undefined,
) name: '',
} used: false,
usedTime: undefined,
remark: '',
previewPicUrls: [],
property: '',
pages: []
} as DiyTemplateApi.DiyTemplatePropertyVO
formRef.value?.resetFields()
}
// 提交表单 // 重置时记录当前编辑的页面
const submitForm = async () => { const handleEditorReset = () => storePageIndex()
// 校验表单
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
}
}
// 重置表单 //#region 无感刷新
const resetForm = () => { // 记录标识
formData.value = { const DIY_PAGE_INDEX_KEY = 'diy_page_index'
id: undefined, // 1. 记录
name: '', const storePageIndex = () =>
used: false, sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
usedTime: undefined, // 2. 恢复
remark: '', const recoverPageIndex = () => {
previewPicUrls: [], // 恢复重置前的页面，默认是第一个页面
property: '', const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
pages: [] // 移除标记
} as DiyTemplateApi.DiyTemplatePropertyVO sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
formRef.value?.resetFields() // 切换页面
} if (pageIndex !== selectedTemplateItem.value) {
selectedTemplateItem.value = pageIndex
handleTemplateItemChange()
}
}
//#endregion
// 重置时记录当前编辑的页面
const handleEditorReset = () => storePageIndex()
//#region 无感刷新 onMounted(async () => {
// 记录标识 resetForm()
const DIY_PAGE_INDEX_KEY = 'diy_page_index' // if (!currentRoute.value.params.id) {
// 1. 记录 // message.warning('参数错误，页面编号不能为空！')
const storePageIndex = () => // delView(unref(currentRoute))
sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`) // return
// 2. 恢复 // }
const recoverPageIndex = () => { // 查询详情
// 恢复重置前的页面，默认是第一个页面 // await getPageDetail(currentRoute.value.params.id)
const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0 await getPageDetail(4)
// 移除标记 // 恢复重置前的页面
sessionStorage.removeItem(DIY_PAGE_INDEX_KEY) recoverPageIndex()
// 切换页面 currentFormData.value = formData.value!.pages[0]
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
}
// 查询详情 // watch(() => route.path, (newPath, oldPath) => {
await getPageDetail(currentRoute.value.params.id) // console.log(newPath,'newPathnewPath');
// 恢复重置前的页面 // // handleTemplateItemChange()
recoverPageIndex() // }, { immediate: true });
})
</script> </script>

175
yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue Normal file
View File

@ -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>

175
yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue Normal file
View File

@ -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>

230
yudao-admin-vue3/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
View File

@ -1,133 +1,117 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
ref="formRef" <el-form-item label="秒杀时段名称" prop="name">
:model="formData" <el-input v-model="formData.name" placeholder="请输入秒杀时段名称" />
:rules="formRules" </el-form-item>
label-width="120px" <el-form-item label="开始时间点" prop="startTime">
v-loading="formLoading" <el-time-picker v-model="formData.startTime" value-format="HH:mm" format="HH:mm"
> placeholder="选择开始时间点" />
<el-form-item label="秒杀时段名称" prop="name"> </el-form-item>
<el-input v-model="formData.name" placeholder="请输入秒杀时段名称" /> <el-form-item label="结束时间点" prop="endTime">
</el-form-item> <el-time-picker v-model="formData.endTime" value-format="HH:mm" format="HH:mm" placeholder="选择结束时间点" />
<el-form-item label="开始时间点" prop="startTime"> </el-form-item>
<el-time-picker <el-form-item label="秒杀轮播图" prop="sliderPicUrls">
v-model="formData.startTime" <UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" />
value-format="HH:mm:ss" </el-form-item>
placeholder="选择开始时间点" <el-form-item label="活动状态" prop="status">
/> <el-radio-group v-model="formData.status">
</el-form-item> <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
<el-form-item label="结束时间点" prop="endTime"> :label="dict.value">
<el-time-picker {{ dict.label }}
v-model="formData.endTime" </el-radio>
value-format="HH:mm:ss" </el-radio-group>
placeholder="选择结束时间点" </el-form-item>
/> </el-form>
</el-form-item> <template #footer>
<el-form-item label="秒杀轮播图" prop="sliderPicUrls"> <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" /> <el-button @click="dialogVisible = false">取 消</el-button>
</el-form-item> </template>
<el-form-item label="活动状态" prop="status"> </Dialog>
<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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts' import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
/** 秒杀时段 表单 */ /** 秒杀时段 表单 */
defineOptions({ name: 'SeckillConfigForm' }) defineOptions({ name: 'SeckillConfigForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题 const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
name: undefined, name: undefined,
startTime: undefined, startTime: undefined,
endTime: undefined, endTime: undefined,
sliderPicUrls: undefined, sliderPicUrls: undefined,
status: undefined status: undefined
}) })
const formRules = reactive({ const formRules = reactive({
name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }],
startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }], startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }], endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }],
status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }] status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type : string, id ?: number) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
resetForm() resetForm()
// 修改时，设置数据 // 修改时，设置数据
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await SeckillConfigApi.getSeckillConfig(id) formData.value = await SeckillConfigApi.getSeckillConfig(id)
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
// 校验表单 // 校验表单
await formRef.value.validate() await formRef.value.validate()
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as SeckillConfigVO const data = formData.value as unknown as SeckillConfigVO
if (formType.value === 'create') { if (formType.value === 'create') {
await SeckillConfigApi.createSeckillConfig(data) await SeckillConfigApi.createSeckillConfig(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
await SeckillConfigApi.updateSeckillConfig(data) await SeckillConfigApi.updateSeckillConfig(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
dialogVisible.value = false dialogVisible.value = false
// 发送操作成功的事件 // 发送操作成功的事件
emit('success') emit('success')
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
/** 重置表单 */ /** 重置表单 */
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
name: undefined, name: undefined,
startTime: undefined, startTime: undefined,
endTime: undefined, endTime: undefined,
sliderPicUrls: [], sliderPicUrls: [],
status: CommonStatusEnum.ENABLE status: CommonStatusEnum.ENABLE
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>