秒杀和拼团列表过滤已过期活动 #39

Merged
root merged 5 commits from cxw into master 2024-10-09 18:26:34 +08:00
14 changed files with 720 additions and 232 deletions
Showing only changes of commit 7954250450 - Show all commits

View File

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

View File

@ -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'
})
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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 () => {

View File

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

View File

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

View File

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

View File

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

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" />
@ -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 () => {

View File

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

View File

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