秒杀和拼团列表过滤已过期活动 #39
@ -4,12 +4,13 @@ NODE_ENV=development
|
|||||||
VITE_DEV=true
|
VITE_DEV=true
|
||||||
|
|
||||||
# 请求路径
|
# 请求路径
|
||||||
VITE_BASE_URL='http://localhost:6127'
|
#VITE_BASE_URL='https://zysc.fjptzykj.com'
|
||||||
|
VITE_BASE_URL='http://192.168.1.12:6127'
|
||||||
|
|
||||||
# 文件上传类型:server - 后端上传, client - 前端直连上传,仅支持 S3 服务
|
# 文件上传类型:server - 后端上传, client - 前端直连上传,仅支持 S3 服务
|
||||||
VITE_UPLOAD_TYPE=server
|
VITE_UPLOAD_TYPE=server
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://localhost:6127/admin-api/infra/file/upload'
|
VITE_UPLOAD_URL='https://zysc.fjptzykj.com/admin-api/infra/file/upload'
|
||||||
|
|
||||||
# 接口地址
|
# 接口地址
|
||||||
VITE_API_URL=/admin-api
|
VITE_API_URL=/admin-api
|
||||||
|
@ -121,3 +121,10 @@ export const getMemberRegisterCountList = (
|
|||||||
params: { times: [formatDate(beginTime), formatDate(endTime)] }
|
params: { times: [formatDate(beginTime), formatDate(endTime)] }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取自定义页面数据
|
||||||
|
export const getDiyPage = () => {
|
||||||
|
return request.get({
|
||||||
|
url: '/promotion/diy-page/getDiyPage'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
@ -1,210 +1,215 @@
|
|||||||
<template>
|
<template>
|
||||||
<Dialog v-model="dialogVisible" title="选择链接" width="65%">
|
<Dialog v-model="dialogVisible" title="选择链接" width="65%">
|
||||||
<div class="h-500px flex gap-8px">
|
<div class="h-500px flex gap-8px">
|
||||||
<!-- 左侧分组列表 -->
|
<!-- 左侧分组列表 -->
|
||||||
<el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
|
<el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
|
||||||
<el-button
|
<template v-for="(group, groupIndex) in APP_LINK_GROUP_LIST">
|
||||||
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
|
<el-button v-if="groupIndex<7" :key="groupIndex" :class="[
|
||||||
:key="groupIndex"
|
|
||||||
:class="[
|
|
||||||
'm-r-16px m-l-0px! justify-start! w-90px',
|
'm-r-16px m-l-0px! justify-start! w-90px',
|
||||||
{ active: activeGroup === group.name }
|
{ active: activeGroup === group.name }
|
||||||
]"
|
]" ref="groupBtnRefs" :text="activeGroup !== group.name"
|
||||||
ref="groupBtnRefs"
|
:type="activeGroup === group.name ? 'primary' : 'default'" @click="handleGroupSelected(group.name)">
|
||||||
:text="activeGroup !== group.name"
|
{{ group.name }}
|
||||||
:type="activeGroup === group.name ? 'primary' : 'default'"
|
</el-button>
|
||||||
@click="handleGroupSelected(group.name)"
|
</template>
|
||||||
>
|
</el-scrollbar>
|
||||||
{{ group.name }}
|
<!-- 右侧链接列表 -->
|
||||||
</el-button>
|
<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
|
||||||
</el-scrollbar>
|
<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
|
||||||
<!-- 右侧链接列表 -->
|
<template v-if="activeGroup == group.name && groupIndex<7">
|
||||||
<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>
|
||||||
<template v-if="activeGroup == group.name">
|
<!-- 链接列表 -->
|
||||||
<!-- 分组标题 -->
|
<el-tooltip v-for="(appLink, appLinkIndex) in group.links" :key="appLinkIndex"
|
||||||
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
|
:content="appLink.path" placement="bottom" :show-after="300">
|
||||||
<!-- 链接列表 -->
|
|
||||||
<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-button class="m-b-8px m-r-8px m-l-0px!"
|
||||||
</el-scrollbar>
|
:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
|
||||||
</div>
|
@click="handleAppLinkSelected(appLink)">
|
||||||
<!-- 底部对话框操作按钮 -->
|
{{ appLink.name }}
|
||||||
<template #footer>
|
</el-button>
|
||||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
</el-tooltip>
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
</template>
|
||||||
</template>
|
|
||||||
</Dialog>
|
</div>
|
||||||
<Dialog v-model="detailSelectDialog.visible" title="" width="50%">
|
</el-scrollbar>
|
||||||
<el-form class="min-h-200px">
|
</div>
|
||||||
<el-form-item
|
<!-- 底部对话框操作按钮 -->
|
||||||
label="选择分类"
|
<template #footer>
|
||||||
v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST"
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||||
>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
<ProductCategorySelect
|
</template>
|
||||||
v-model="detailSelectDialog.id"
|
</Dialog>
|
||||||
:parent-id="0"
|
<Dialog v-model="detailSelectDialog.visible" title="" width="50%">
|
||||||
@update:model-value="handleProductCategorySelected"
|
<el-form class="min-h-200px">
|
||||||
/>
|
<el-form-item label="选择分类" v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST">
|
||||||
</el-form-item>
|
<ProductCategorySelect v-model="detailSelectDialog.id" :parent-id="0"
|
||||||
</el-form>
|
@update:model-value="handleProductCategorySelected" />
|
||||||
</Dialog>
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
|
import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
|
||||||
import { ButtonInstance, ScrollbarInstance } from 'element-plus'
|
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
|
||||||
import { split } from 'lodash-es'
|
import { ButtonInstance, ScrollbarInstance } from 'element-plus'
|
||||||
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
|
import { split } from 'lodash-es'
|
||||||
import { getUrlNumberValue } from '@/utils'
|
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
|
||||||
|
import { getUrlNumberValue } from '@/utils'
|
||||||
|
// 假设你要追加的数据是一个新的对象
|
||||||
|
const userComparison = ref([])
|
||||||
|
/** 查询会员用户数量对照卡片数据 */
|
||||||
|
const GetDiyPage = async () => {
|
||||||
|
userComparison.value = await MemberStatisticsApi.getDiyPage()
|
||||||
|
const arry = userComparison.value.map(link => {
|
||||||
|
return {
|
||||||
|
name: link.name,
|
||||||
|
path: `/pages/index/page?id=${link.id}`
|
||||||
|
};
|
||||||
|
});
|
||||||
|
userComparison.value = {
|
||||||
|
name: '自定义页面',
|
||||||
|
links:arry
|
||||||
|
}
|
||||||
|
APP_LINK_GROUP_LIST.push(userComparison.value);
|
||||||
|
// userComparison.value = APP_LINK_GROUP_LIST
|
||||||
|
// userComparison.value = APP_LINK_GROUP_LIST.push({qq:1})
|
||||||
|
console.log(APP_LINK_GROUP_LIST, 'userComparison.value')
|
||||||
|
}
|
||||||
|
GetDiyPage()
|
||||||
|
// APP 链接选择弹框
|
||||||
|
defineOptions({ name: 'AppLinkSelectDialog' })
|
||||||
|
// 选中的分组,默认选中第一个
|
||||||
|
const activeGroup = ref(APP_LINK_GROUP_LIST[0].name)
|
||||||
|
// 选中的 APP 链接
|
||||||
|
const activeAppLink = ref({} as AppLink)
|
||||||
|
|
||||||
// APP 链接选择弹框
|
/** 打开弹窗 */
|
||||||
defineOptions({ name: 'AppLinkSelectDialog' })
|
const dialogVisible = ref(false)
|
||||||
// 选中的分组,默认选中第一个
|
const open = (link : string) => {
|
||||||
const activeGroup = ref(APP_LINK_GROUP_LIST[0].name)
|
activeAppLink.value.path = link
|
||||||
// 选中的 APP 链接
|
dialogVisible.value = true
|
||||||
const activeAppLink = ref({} as AppLink)
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
// 滚动到当前的链接
|
||||||
const dialogVisible = ref(false)
|
const group = APP_LINK_GROUP_LIST.find((group) =>
|
||||||
const open = (link: string) => {
|
group.links.some((linkItem) => {
|
||||||
activeAppLink.value.path = link
|
const sameLink = isSameLink(linkItem.path, link)
|
||||||
dialogVisible.value = true
|
if (sameLink) {
|
||||||
|
activeAppLink.value = { ...linkItem, path: link }
|
||||||
|
}
|
||||||
|
return sameLink
|
||||||
|
})
|
||||||
|
)
|
||||||
|
if (group) {
|
||||||
|
// 使用 nextTick 的原因:可能 Dom 还没生成,导致滚动失败
|
||||||
|
nextTick(() => handleGroupSelected(group.name))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open })
|
||||||
|
|
||||||
// 滚动到当前的链接
|
// 处理 APP 链接选中
|
||||||
const group = APP_LINK_GROUP_LIST.find((group) =>
|
const handleAppLinkSelected = (appLink : AppLink) => {
|
||||||
group.links.some((linkItem) => {
|
if (!isSameLink(appLink.path, activeAppLink.value.path)) {
|
||||||
const sameLink = isSameLink(linkItem.path, link)
|
activeAppLink.value = appLink
|
||||||
if (sameLink) {
|
console.log(activeAppLink.value,activeAppLink.value.path,"activeAppLink.value")
|
||||||
activeAppLink.value = { ...linkItem, path: link }
|
}
|
||||||
}
|
switch (appLink.type) {
|
||||||
return sameLink
|
case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:
|
||||||
})
|
detailSelectDialog.value.visible = true
|
||||||
)
|
detailSelectDialog.value.type = appLink.type
|
||||||
if (group) {
|
// 返显
|
||||||
// 使用 nextTick 的原因:可能 Dom 还没生成,导致滚动失败
|
detailSelectDialog.value.id =
|
||||||
nextTick(() => handleGroupSelected(group.name))
|
getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value.path) || undefined
|
||||||
}
|
break
|
||||||
}
|
default:
|
||||||
defineExpose({ open })
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 处理 APP 链接选中
|
// 处理绑定值更新
|
||||||
const handleAppLinkSelected = (appLink: AppLink) => {
|
const emit = defineEmits<{
|
||||||
if (!isSameLink(appLink.path, activeAppLink.value.path)) {
|
change : [link: string]
|
||||||
activeAppLink.value = appLink
|
appLinkChange : [appLink: AppLink]
|
||||||
}
|
}>()
|
||||||
switch (appLink.type) {
|
const handleSubmit = () => {
|
||||||
case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:
|
dialogVisible.value = false
|
||||||
detailSelectDialog.value.visible = true
|
emit('change', activeAppLink.value.path)
|
||||||
detailSelectDialog.value.type = appLink.type
|
emit('appLinkChange', activeAppLink.value)
|
||||||
// 返显
|
}
|
||||||
detailSelectDialog.value.id =
|
|
||||||
getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value.path) || undefined
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理绑定值更新
|
// 分组标题引用列表
|
||||||
const emit = defineEmits<{
|
const groupTitleRefs = ref<HTMLInputElement[]>([])
|
||||||
change: [link: string]
|
/**
|
||||||
appLinkChange: [appLink: AppLink]
|
* 处理右侧链接列表滚动
|
||||||
}>()
|
* @param scrollTop 滚动条的位置
|
||||||
const handleSubmit = () => {
|
*/
|
||||||
dialogVisible.value = false
|
const handleScroll = ({ scrollTop } : { scrollTop : number }) => {
|
||||||
emit('change', activeAppLink.value.path)
|
const titleEl = groupTitleRefs.value.find((titleEl : HTMLInputElement) => {
|
||||||
emit('appLinkChange', activeAppLink.value)
|
// 获取标题的位置信息
|
||||||
}
|
const { offsetHeight, offsetTop } = titleEl
|
||||||
|
// 判断标题是否在可视范围内
|
||||||
|
return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight
|
||||||
|
})
|
||||||
|
// 只需处理一次
|
||||||
|
if (titleEl && activeGroup.value !== titleEl.textContent) {
|
||||||
|
activeGroup.value = titleEl.textContent || ''
|
||||||
|
// 同步左侧的滚动条位置
|
||||||
|
scrollToGroupBtn(activeGroup.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 分组标题引用列表
|
// 右侧滚动条
|
||||||
const groupTitleRefs = ref<HTMLInputElement[]>([])
|
const linkScrollbar = ref<ScrollbarInstance>()
|
||||||
/**
|
// 处理分组选中
|
||||||
* 处理右侧链接列表滚动
|
const handleGroupSelected = (group : string) => {
|
||||||
* @param scrollTop 滚动条的位置
|
activeGroup.value = group
|
||||||
*/
|
// const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
|
||||||
const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
|
// if (titleRef) {
|
||||||
const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
|
// // 滚动分组标题
|
||||||
// 获取标题的位置信息
|
// linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
|
||||||
const { offsetHeight, offsetTop } = titleEl
|
// }
|
||||||
// 判断标题是否在可视范围内
|
}
|
||||||
return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight
|
|
||||||
})
|
|
||||||
// 只需处理一次
|
|
||||||
if (titleEl && activeGroup.value !== titleEl.textContent) {
|
|
||||||
activeGroup.value = titleEl.textContent || ''
|
|
||||||
// 同步左侧的滚动条位置
|
|
||||||
scrollToGroupBtn(activeGroup.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 右侧滚动条
|
// 分组滚动条
|
||||||
const linkScrollbar = ref<ScrollbarInstance>()
|
const groupScrollbar = ref<ScrollbarInstance>()
|
||||||
// 处理分组选中
|
// 分组引用列表
|
||||||
const handleGroupSelected = (group: string) => {
|
const groupBtnRefs = ref<ButtonInstance[]>([])
|
||||||
activeGroup.value = group
|
// 自动滚动分组按钮,确保分组按钮保持在可视区域内
|
||||||
// const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
|
const scrollToGroupBtn = (group : string) => {
|
||||||
// if (titleRef) {
|
const groupBtn = groupBtnRefs.value
|
||||||
// // 滚动分组标题
|
.map((btn : ButtonInstance) => btn['ref'])
|
||||||
// linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
|
.find((ref : Node) => ref.textContent === group)
|
||||||
// }
|
if (groupBtn) {
|
||||||
}
|
groupScrollbar.value?.setScrollTop(groupBtn.offsetTop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 分组滚动条
|
// 是否为相同的链接(不比较参数,只比较链接)
|
||||||
const groupScrollbar = ref<ScrollbarInstance>()
|
const isSameLink = (link1 : string, link2 : string) => {
|
||||||
// 分组引用列表
|
return split(link1, '?', 1)[0] === split(link2, '?', 1)[0]
|
||||||
const groupBtnRefs = ref<ButtonInstance[]>([])
|
}
|
||||||
// 自动滚动分组按钮,确保分组按钮保持在可视区域内
|
|
||||||
const scrollToGroupBtn = (group: string) => {
|
|
||||||
const groupBtn = groupBtnRefs.value
|
|
||||||
.map((btn: ButtonInstance) => btn['ref'])
|
|
||||||
.find((ref: Node) => ref.textContent === group)
|
|
||||||
if (groupBtn) {
|
|
||||||
groupScrollbar.value?.setScrollTop(groupBtn.offsetTop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 是否为相同的链接(不比较参数,只比较链接)
|
// 详情选择对话框
|
||||||
const isSameLink = (link1: string, link2: string) => {
|
const detailSelectDialog = ref<{
|
||||||
return split(link1, '?', 1)[0] === split(link2, '?', 1)[0]
|
visible : boolean
|
||||||
}
|
id ?: number
|
||||||
|
type ?: APP_LINK_TYPE_ENUM
|
||||||
// 详情选择对话框
|
}>({
|
||||||
const detailSelectDialog = ref<{
|
visible: false,
|
||||||
visible: boolean
|
id: undefined,
|
||||||
id?: number
|
type: undefined
|
||||||
type?: APP_LINK_TYPE_ENUM
|
})
|
||||||
}>({
|
// 处理详情选择
|
||||||
visible: false,
|
const handleProductCategorySelected = (id : number) => {
|
||||||
id: undefined,
|
const url = new URL(activeAppLink.value.path, 'http://127.0.0.1')
|
||||||
type: undefined
|
// 修改 id 参数
|
||||||
})
|
url.searchParams.set('id', `${id}`)
|
||||||
// 处理详情选择
|
// 排除域名
|
||||||
const handleProductCategorySelected = (id: number) => {
|
activeAppLink.value.path = `${url.pathname}${url.search}`
|
||||||
const url = new URL(activeAppLink.value.path, 'http://127.0.0.1')
|
// 关闭对话框
|
||||||
// 修改 id 参数
|
detailSelectDialog.value.visible = false
|
||||||
url.searchParams.set('id', `${id}`)
|
// 重置 id
|
||||||
// 排除域名
|
detailSelectDialog.value.id = undefined
|
||||||
activeAppLink.value.path = `${url.pathname}${url.search}`
|
}
|
||||||
// 关闭对话框
|
|
||||||
detailSelectDialog.value.visible = false
|
|
||||||
// 重置 id
|
|
||||||
detailSelectDialog.value.id = undefined
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
@ -250,30 +250,31 @@ 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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
// ,
|
||||||
|
// {
|
||||||
|
// 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[]
|
||||||
|
@ -23,7 +23,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.columns">
|
<el-radio-group v-model="formData.columns">
|
||||||
<el-tooltip class="item" content="一列" placement="bottom">
|
<el-tooltip class="item" content="一列" placement="bottom">
|
||||||
<el-radio-button :label="1">
|
<el-radio-button :label="1">
|
||||||
@ -41,7 +41,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="bgImg">
|
<el-form-item label="背景图片" prop="bgImg">
|
||||||
<UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
|
<UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -85,7 +85,7 @@ defineOptions({ name: 'CouponCardProperty' })
|
|||||||
const props = defineProps<{ modelValue: CouponCardProperty }>()
|
const props = defineProps<{ modelValue: CouponCardProperty }>()
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||||
|
formData.value.columns = '3';
|
||||||
// 优惠券列表
|
// 优惠券列表
|
||||||
const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
|
const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
|
||||||
const couponSelectDialog = ref()
|
const couponSelectDialog = ref()
|
||||||
|
@ -7,8 +7,9 @@
|
|||||||
<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
|
<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="flex flex-1 flex-row items-center gap-8px">
|
||||||
<div class="wh">
|
<div class="wh">
|
||||||
<img
|
<img class="new-text1"
|
||||||
src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png" />
|
src="https://zysc.fjptzykj.com:3000/shangcheng/2f2be070c60ceb9466af937ff9dd8917ad2ee02f774dbac48fbb9e73bfc688d0.png" />
|
||||||
|
<span class="new-text">拼团活动</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-16px" style="color: rgb(187, 187, 187);">92人拼团成功</span>
|
<span class="text-16px" style="color: rgb(187, 187, 187);">92人拼团成功</span>
|
||||||
</div>
|
</div>
|
||||||
@ -158,6 +159,14 @@ onMounted(() => {
|
|||||||
.wh {
|
.wh {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.new-text1{
|
||||||
|
width:30px;
|
||||||
|
}
|
||||||
|
.new-text{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wh::after {
|
.wh::after {
|
||||||
|
@ -99,6 +99,7 @@ defineOptions({ name: 'PromotionCombinationProperty' })
|
|||||||
const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
|
const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||||
|
formData.value.layoutType = 'threeCol';
|
||||||
// 活动列表
|
// 活动列表
|
||||||
const activityList = ref<CombinationActivityApi.CombinationActivityVO>([])
|
const activityList = ref<CombinationActivityApi.CombinationActivityVO>([])
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
@ -0,0 +1,96 @@
|
|||||||
|
import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
|
||||||
|
|
||||||
|
/** 积分商城属性 */
|
||||||
|
export interface PromotionPointProperty {
|
||||||
|
// 布局类型:单列 | 三列
|
||||||
|
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
|
||||||
|
// 商品字段
|
||||||
|
fields: {
|
||||||
|
// 商品名称
|
||||||
|
name: PromotionPointFieldProperty
|
||||||
|
// 商品简介
|
||||||
|
introduction: PromotionPointFieldProperty
|
||||||
|
// 商品价格
|
||||||
|
price: PromotionPointFieldProperty
|
||||||
|
// 市场价
|
||||||
|
marketPrice: PromotionPointFieldProperty
|
||||||
|
// 商品销量
|
||||||
|
salesCount: PromotionPointFieldProperty
|
||||||
|
// 商品库存
|
||||||
|
stock: PromotionPointFieldProperty
|
||||||
|
}
|
||||||
|
// 角标
|
||||||
|
badge: {
|
||||||
|
// 是否显示
|
||||||
|
show: boolean
|
||||||
|
// 角标图片
|
||||||
|
imgUrl: string
|
||||||
|
}
|
||||||
|
// 按钮
|
||||||
|
btnBuy: {
|
||||||
|
// 类型:文字 | 图片
|
||||||
|
type: 'text' | 'img'
|
||||||
|
// 文字
|
||||||
|
text: string
|
||||||
|
// 文字按钮:背景渐变起始颜色
|
||||||
|
bgBeginColor: string
|
||||||
|
// 文字按钮:背景渐变结束颜色
|
||||||
|
bgEndColor: string
|
||||||
|
// 图片按钮:图片地址
|
||||||
|
imgUrl: string
|
||||||
|
}
|
||||||
|
// 上圆角
|
||||||
|
borderRadiusTop: number
|
||||||
|
// 下圆角
|
||||||
|
borderRadiusBottom: number
|
||||||
|
// 间距
|
||||||
|
space: number
|
||||||
|
// 秒杀活动编号
|
||||||
|
activityIds: number[]
|
||||||
|
// 组件样式
|
||||||
|
style: ComponentStyle
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商品字段
|
||||||
|
export interface PromotionPointFieldProperty {
|
||||||
|
// 是否显示
|
||||||
|
show: boolean
|
||||||
|
// 颜色
|
||||||
|
color: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义组件
|
||||||
|
export const component = {
|
||||||
|
id: 'PromotionPoint',
|
||||||
|
name: '积分商城',
|
||||||
|
icon: 'ep:present',
|
||||||
|
property: {
|
||||||
|
layoutType: 'oneColBigImg',
|
||||||
|
fields: {
|
||||||
|
name: { show: true, color: '#000' },
|
||||||
|
introduction: { show: true, color: '#999' },
|
||||||
|
price: { show: true, color: '#ff3000' },
|
||||||
|
marketPrice: { show: true, color: '#c4c4c4' },
|
||||||
|
salesCount: { show: true, color: '#c4c4c4' },
|
||||||
|
stock: { show: false, color: '#c4c4c4' }
|
||||||
|
},
|
||||||
|
badge: { show: false, imgUrl: '' },
|
||||||
|
btnBuy: {
|
||||||
|
type: 'text',
|
||||||
|
text: '立即兑换',
|
||||||
|
bgBeginColor: '#FF6000',
|
||||||
|
bgEndColor: '#FE832A',
|
||||||
|
imgUrl: ''
|
||||||
|
},
|
||||||
|
borderRadiusTop: 8,
|
||||||
|
borderRadiusBottom: 8,
|
||||||
|
space: 8,
|
||||||
|
style: {
|
||||||
|
bgType: 'color',
|
||||||
|
bgColor: '',
|
||||||
|
marginLeft: 8,
|
||||||
|
marginRight: 8,
|
||||||
|
marginBottom: 8
|
||||||
|
} as ComponentStyle
|
||||||
|
}
|
||||||
|
} as DiyComponent<PromotionPointProperty>
|
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="containerRef" :class="`box-content min-h-30px w-full flex flex-row flex-wrap`">
|
||||||
|
<div
|
||||||
|
v-for="(spu, index) in spuList"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
...calculateSpace(index),
|
||||||
|
...calculateWidth(),
|
||||||
|
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||||
|
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||||
|
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
|
||||||
|
borderBottomRightRadius: `${property.borderRadiusBottom}px`
|
||||||
|
}"
|
||||||
|
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
||||||
|
>
|
||||||
|
<!-- 角标 -->
|
||||||
|
<div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
|
||||||
|
<el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" />
|
||||||
|
</div>
|
||||||
|
<!-- 商品封面图 -->
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'h-140px',
|
||||||
|
{
|
||||||
|
'w-full': property.layoutType !== 'oneColSmallImg',
|
||||||
|
'w-140px': property.layoutType === 'oneColSmallImg'
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<el-image :src="spu.picUrl" class="h-full w-full" fit="cover" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
' flex flex-col gap-8px p-8px box-border',
|
||||||
|
{
|
||||||
|
'w-full': property.layoutType !== 'oneColSmallImg',
|
||||||
|
'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg'
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<!-- 商品名称 -->
|
||||||
|
<div
|
||||||
|
v-if="property.fields.name.show"
|
||||||
|
:class="[
|
||||||
|
'text-14px ',
|
||||||
|
{
|
||||||
|
truncate: property.layoutType !== 'oneColSmallImg',
|
||||||
|
'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg'
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
:style="{ color: property.fields.name.color }"
|
||||||
|
>
|
||||||
|
{{ spu.name }}
|
||||||
|
</div>
|
||||||
|
<!-- 商品简介 -->
|
||||||
|
<div
|
||||||
|
v-if="property.fields.introduction.show"
|
||||||
|
:style="{ color: property.fields.introduction.color }"
|
||||||
|
class="truncate text-12px"
|
||||||
|
>
|
||||||
|
{{ spu.introduction }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- 积分 -->
|
||||||
|
<span
|
||||||
|
v-if="property.fields.price.show"
|
||||||
|
:style="{ color: property.fields.price.color }"
|
||||||
|
class="text-16px"
|
||||||
|
>
|
||||||
|
{{ spu.point }}积分
|
||||||
|
{{ !spu.pointPrice || spu.pointPrice === 0 ? '' : `+${fenToYuan(spu.pointPrice)}元` }}
|
||||||
|
</span>
|
||||||
|
<!-- 市场价 -->
|
||||||
|
<span
|
||||||
|
v-if="property.fields.marketPrice.show && spu.marketPrice"
|
||||||
|
:style="{ color: property.fields.marketPrice.color }"
|
||||||
|
class="ml-4px text-10px line-through"
|
||||||
|
>
|
||||||
|
¥{{ fenToYuan(spu.marketPrice) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-12px">
|
||||||
|
<!-- 销量 -->
|
||||||
|
<span
|
||||||
|
v-if="property.fields.salesCount.show"
|
||||||
|
:style="{ color: property.fields.salesCount.color }"
|
||||||
|
>
|
||||||
|
已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件
|
||||||
|
</span>
|
||||||
|
<!-- 库存 -->
|
||||||
|
<span v-if="property.fields.stock.show" :style="{ color: property.fields.stock.color }">
|
||||||
|
库存{{ spu.pointTotalStock || 0 }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 购买按钮 -->
|
||||||
|
<div class="absolute bottom-8px right-8px">
|
||||||
|
<!-- 文字按钮 -->
|
||||||
|
<span
|
||||||
|
v-if="property.btnBuy.type === 'text'"
|
||||||
|
:style="{
|
||||||
|
background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
|
||||||
|
}"
|
||||||
|
class="rounded-full p-x-12px p-y-4px text-12px text-white"
|
||||||
|
>
|
||||||
|
{{ property.btnBuy.text }}
|
||||||
|
</span>
|
||||||
|
<!-- 图片按钮 -->
|
||||||
|
<el-image
|
||||||
|
v-else
|
||||||
|
:src="property.btnBuy.imgUrl"
|
||||||
|
class="h-28px w-28px rounded-full"
|
||||||
|
fit="cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PromotionPointProperty } from './config'
|
||||||
|
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||||
|
import { PointActivityApi, PointActivityVO, SpuExtension0 } from '@/api/mall/promotion/point'
|
||||||
|
import { fenToYuan } from '@/utils'
|
||||||
|
|
||||||
|
/** 积分商城卡片 */
|
||||||
|
defineOptions({ name: 'PromotionPoint' })
|
||||||
|
// 定义属性
|
||||||
|
const props = defineProps<{ property: PromotionPointProperty }>()
|
||||||
|
// 商品列表
|
||||||
|
const spuList = ref<SpuExtension0[]>([])
|
||||||
|
const spuIdList = ref<number[]>([])
|
||||||
|
const pointActivityList = ref<PointActivityVO[]>([])
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.property.activityIds,
|
||||||
|
async () => {
|
||||||
|
try {
|
||||||
|
// 新添加的积分商城组件,是没有活动ID的
|
||||||
|
const activityIds = props.property.activityIds
|
||||||
|
// 检查活动ID的有效性
|
||||||
|
if (Array.isArray(activityIds) && activityIds.length > 0) {
|
||||||
|
// 获取积分商城活动详情列表
|
||||||
|
pointActivityList.value = await PointActivityApi.getPointActivityListByIds(activityIds)
|
||||||
|
|
||||||
|
// 获取积分商城活动的 SPU 详情列表
|
||||||
|
spuList.value = []
|
||||||
|
spuIdList.value = pointActivityList.value.map((activity) => activity.spuId)
|
||||||
|
if (spuIdList.value.length > 0) {
|
||||||
|
spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新 SPU 的最低兑换积分和所需兑换金额
|
||||||
|
pointActivityList.value.forEach((activity) => {
|
||||||
|
// 匹配spuId
|
||||||
|
const spu = spuList.value.find((spu) => spu.id === activity.spuId)
|
||||||
|
if (spu) {
|
||||||
|
spu.pointStock = activity.stock
|
||||||
|
spu.pointTotalStock = activity.totalStock
|
||||||
|
spu.point = activity.point
|
||||||
|
spu.pointPrice = activity.price
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取积分商城活动细节或 SPU 细节时出错:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算商品的间距
|
||||||
|
* @param index 商品索引
|
||||||
|
*/
|
||||||
|
const calculateSpace = (index: number) => {
|
||||||
|
// 商品的列数
|
||||||
|
const columns = props.property.layoutType === 'twoCol' ? 2 : 1
|
||||||
|
// 第一列没有左边距
|
||||||
|
const marginLeft = index % columns === 0 ? '0' : props.property.space + 'px'
|
||||||
|
// 第一行没有上边距
|
||||||
|
const marginTop = index < columns ? '0' : props.property.space + 'px'
|
||||||
|
|
||||||
|
return { marginLeft, marginTop }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 容器
|
||||||
|
const containerRef = ref()
|
||||||
|
// 计算商品的宽度
|
||||||
|
const calculateWidth = () => {
|
||||||
|
let width = '100%'
|
||||||
|
// 双列时每列的宽度为:(总宽度 - 间距)/ 2
|
||||||
|
if (props.property.layoutType === 'twoCol') {
|
||||||
|
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`
|
||||||
|
}
|
||||||
|
return { width }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<ComponentContainerProperty v-model="formData.style">
|
||||||
|
<el-form :model="formData" label-width="80px">
|
||||||
|
<el-card class="property-group" header="积分商城活动" shadow="never">
|
||||||
|
<PointShowcase v-model="formData.activityIds" />
|
||||||
|
</el-card>
|
||||||
|
<el-card class="property-group" header="商品样式" shadow="never">
|
||||||
|
<el-form-item label="布局" prop="type">
|
||||||
|
<el-radio-group v-model="formData.layoutType">
|
||||||
|
<el-tooltip class="item" content="单列大图" placement="bottom">
|
||||||
|
<el-radio-button value="oneColBigImg">
|
||||||
|
<Icon icon="fluent:text-column-one-24-filled" />
|
||||||
|
</el-radio-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip class="item" content="单列小图" placement="bottom">
|
||||||
|
<el-radio-button value="oneColSmallImg">
|
||||||
|
<Icon icon="fluent:text-column-two-left-24-filled" />
|
||||||
|
</el-radio-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip class="item" content="双列" placement="bottom">
|
||||||
|
<el-radio-button value="twoCol">
|
||||||
|
<Icon icon="fluent:text-column-two-24-filled" />
|
||||||
|
</el-radio-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<!--<el-tooltip class="item" content="三列" placement="bottom">
|
||||||
|
<el-radio-button value="threeCol">
|
||||||
|
<Icon icon="fluent:text-column-three-24-filled" />
|
||||||
|
</el-radio-button>
|
||||||
|
</el-tooltip>-->
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品名称" prop="fields.name.show">
|
||||||
|
<div class="flex gap-8px">
|
||||||
|
<ColorInput v-model="formData.fields.name.color" />
|
||||||
|
<el-checkbox v-model="formData.fields.name.show" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品简介" prop="fields.introduction.show">
|
||||||
|
<div class="flex gap-8px">
|
||||||
|
<ColorInput v-model="formData.fields.introduction.color" />
|
||||||
|
<el-checkbox v-model="formData.fields.introduction.show" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品价格" prop="fields.price.show">
|
||||||
|
<div class="flex gap-8px">
|
||||||
|
<ColorInput v-model="formData.fields.price.color" />
|
||||||
|
<el-checkbox v-model="formData.fields.price.show" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="市场价" prop="fields.marketPrice.show">
|
||||||
|
<div class="flex gap-8px">
|
||||||
|
<ColorInput v-model="formData.fields.marketPrice.color" />
|
||||||
|
<el-checkbox v-model="formData.fields.marketPrice.show" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品销量" prop="fields.salesCount.show">
|
||||||
|
<div class="flex gap-8px">
|
||||||
|
<ColorInput v-model="formData.fields.salesCount.color" />
|
||||||
|
<el-checkbox v-model="formData.fields.salesCount.show" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品库存" prop="fields.stock.show">
|
||||||
|
<div class="flex gap-8px">
|
||||||
|
<ColorInput v-model="formData.fields.stock.color" />
|
||||||
|
<el-checkbox v-model="formData.fields.stock.show" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="property-group" header="角标" shadow="never">
|
||||||
|
<el-form-item label="角标" prop="badge.show">
|
||||||
|
<el-switch v-model="formData.badge.show" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
|
||||||
|
<UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
|
||||||
|
<template #tip> 建议尺寸:36 * 22</template>
|
||||||
|
</UploadImg>
|
||||||
|
</el-form-item>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="property-group" header="按钮" shadow="never">
|
||||||
|
<el-form-item label="按钮类型" prop="btnBuy.type">
|
||||||
|
<el-radio-group v-model="formData.btnBuy.type">
|
||||||
|
<el-radio-button value="text">文字</el-radio-button>
|
||||||
|
<el-radio-button value="img">图片</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<template v-if="formData.btnBuy.type === 'text'">
|
||||||
|
<el-form-item label="按钮文字" prop="btnBuy.text">
|
||||||
|
<el-input v-model="formData.btnBuy.text" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="左侧背景" prop="btnBuy.bgBeginColor">
|
||||||
|
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="右侧背景" prop="btnBuy.bgEndColor">
|
||||||
|
<ColorInput v-model="formData.btnBuy.bgEndColor" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-form-item label="图片" prop="btnBuy.imgUrl">
|
||||||
|
<UploadImg v-model="formData.btnBuy.imgUrl" height="56px" width="56px">
|
||||||
|
<template #tip> 建议尺寸:56 * 56</template>
|
||||||
|
</UploadImg>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="property-group" header="商品样式" shadow="never">
|
||||||
|
<el-form-item label="上圆角" prop="borderRadiusTop">
|
||||||
|
<el-slider
|
||||||
|
v-model="formData.borderRadiusTop"
|
||||||
|
:max="100"
|
||||||
|
:min="0"
|
||||||
|
:show-input-controls="false"
|
||||||
|
input-size="small"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="下圆角" prop="borderRadiusBottom">
|
||||||
|
<el-slider
|
||||||
|
v-model="formData.borderRadiusBottom"
|
||||||
|
:max="100"
|
||||||
|
:min="0"
|
||||||
|
:show-input-controls="false"
|
||||||
|
input-size="small"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="间隔" prop="space">
|
||||||
|
<el-slider
|
||||||
|
v-model="formData.space"
|
||||||
|
:max="100"
|
||||||
|
:min="0"
|
||||||
|
:show-input-controls="false"
|
||||||
|
input-size="small"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-card>
|
||||||
|
</el-form>
|
||||||
|
</ComponentContainerProperty>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PromotionPointProperty } from './config'
|
||||||
|
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||||
|
import PointShowcase from '@/views/mall/promotion/point/components/PointShowcase.vue'
|
||||||
|
|
||||||
|
// 秒杀属性面板
|
||||||
|
defineOptions({ name: 'PromotionPointProperty' })
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: PromotionPointProperty }>()
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
@ -6,8 +6,9 @@
|
|||||||
<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
|
<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="flex flex-1 flex-row items-center gap-8px">
|
||||||
<div class="wh">
|
<div class="wh">
|
||||||
<img
|
<img class="new-text1"
|
||||||
src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png" />
|
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
|
||||||
|
<span class="new-text">限时秒杀</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
|
<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
|
||||||
</div>
|
</div>
|
||||||
@ -150,6 +151,14 @@
|
|||||||
.wh {
|
.wh {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.new-text1{
|
||||||
|
width:30px;
|
||||||
|
}
|
||||||
|
.new-text{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wh::after {
|
.wh::after {
|
||||||
|
@ -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" />
|
||||||
@ -99,6 +99,7 @@ defineOptions({ name: 'PromotionSeckillProperty' })
|
|||||||
const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
|
const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||||
|
formData.value.layoutType = "threeCol"
|
||||||
// 活动列表
|
// 活动列表
|
||||||
const activityList = ref<SeckillActivityApi.SeckillActivityVO>([])
|
const activityList = ref<SeckillActivityApi.SeckillActivityVO>([])
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
@ -146,7 +146,7 @@ export const PAGE_LIBS = [
|
|||||||
components: [
|
components: [
|
||||||
'PromotionCombination',
|
'PromotionCombination',
|
||||||
'PromotionSeckill',
|
'PromotionSeckill',
|
||||||
// 'PromotionPoint',
|
'PromotionPoint',
|
||||||
'CouponCard',
|
'CouponCard',
|
||||||
'PromotionArticle'
|
'PromotionArticle'
|
||||||
]
|
]
|
||||||
|
@ -2,6 +2,7 @@ package cn.iocoder.yudao.module.trade.dal.dataobject.brokerage;
|
|||||||
|
|
||||||
import cn.iocoder.yudao.framework.mybatis.core.dataobject.BaseDO;
|
import cn.iocoder.yudao.framework.mybatis.core.dataobject.BaseDO;
|
||||||
import com.baomidou.mybatisplus.annotation.KeySequence;
|
import com.baomidou.mybatisplus.annotation.KeySequence;
|
||||||
|
import com.baomidou.mybatisplus.annotation.TableField;
|
||||||
import com.baomidou.mybatisplus.annotation.TableId;
|
import com.baomidou.mybatisplus.annotation.TableId;
|
||||||
import com.baomidou.mybatisplus.annotation.TableName;
|
import com.baomidou.mybatisplus.annotation.TableName;
|
||||||
import lombok.*;
|
import lombok.*;
|
||||||
@ -62,5 +63,6 @@ public class BrokerageUserDO extends BaseDO {
|
|||||||
/**
|
/**
|
||||||
* 二级绑定
|
* 二级绑定
|
||||||
*/
|
*/
|
||||||
|
@TableField(exist = false)
|
||||||
private Long bindSecondUserId;
|
private Long bindSecondUserId;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user