From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/promotion/point/components/PointShowcase.vue | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 154 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/promotion/point/components/PointShowcase.vue b/src/views/mall/promotion/point/components/PointShowcase.vue
new file mode 100644
index 0000000..82e490c
--- /dev/null
+++ b/src/views/mall/promotion/point/components/PointShowcase.vue
@@ -0,0 +1,154 @@
+<template>
+ <div class="flex flex-wrap items-center gap-8px">
+ <div
+ v-for="(pointActivity, index) in pointActivityList"
+ :key="pointActivity.id"
+ class="select-box spu-pic"
+ >
+ <el-tooltip :content="pointActivity.name">
+ <div class="relative h-full w-full">
+ <el-image :src="pointActivity.picUrl" class="h-full w-full" />
+ <Icon
+ v-show="!disabled"
+ class="del-icon"
+ icon="ep:circle-close-filled"
+ @click="handleRemoveActivity(index)"
+ />
+ </div>
+ </el-tooltip>
+ </div>
+ <el-tooltip v-if="canAdd" content="閫夋嫨娲诲姩">
+ <div class="select-box" @click="openSeckillActivityTableSelect">
+ <Icon icon="ep:plus" />
+ </div>
+ </el-tooltip>
+ </div>
+ <!-- 鎷煎洟娲诲姩閫夋嫨瀵硅瘽妗嗭紙琛ㄦ牸褰㈠紡锛� -->
+ <PointTableSelect
+ ref="pointActivityTableSelectRef"
+ :multiple="limit != 1"
+ @change="handleActivitySelected"
+ />
+</template>
+<script lang="ts" setup>
+import PointTableSelect from './PointTableSelect.vue'
+import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
+import { propTypes } from '@/utils/propTypes'
+import { oneOfType } from 'vue-types'
+import { isArray } from '@/utils/is'
+
+// 娲诲姩姗辩獥锛屼竴鑸敤浜庤淇椂浣跨敤
+// 鎻愪緵鍔熻兘锛氬睍绀烘椿鍔ㄥ垪琛ㄣ�佹坊鍔犳椿鍔ㄣ�佸垹闄ゆ椿鍔�
+defineOptions({ name: 'PointShowcase' })
+
+const props = defineProps({
+ modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
+ // 闄愬埗鏁伴噺锛氶粯璁や笉闄愬埗
+ limit: propTypes.number.def(Number.MAX_VALUE),
+ disabled: propTypes.bool.def(false)
+})
+
+// 璁＄畻鏄惁鍙互娣诲姞
+const canAdd = computed(() => {
+ // 鎯呭喌涓�锛氱鐢ㄦ椂涓嶅彲浠ユ坊鍔�
+ if (props.disabled) return false
+ // 鎯呭喌浜岋細鏈寚瀹氶檺鍒舵暟閲忔椂锛屽彲浠ユ坊鍔�
+ if (!props.limit) return true
+ // 鎯呭喌涓夛細妫�鏌ュ凡娣诲姞鏁伴噺鏄惁灏忎簬闄愬埗鏁伴噺
+ return pointActivityList.value.length < props.limit
+})
+
+// 鎷煎洟娲诲姩鍒楄〃
+const pointActivityList = ref<PointActivityVO[]>([])
+
+watch(
+ () => props.modelValue,
+ async () => {
+ const ids = isArray(props.modelValue)
+ ? // 鎯呭喌涓�锛氬閫�
+ props.modelValue
+ : // 鎯呭喌浜岋細鍗曢��
+ props.modelValue
+ ? [props.modelValue]
+ : []
+ // 涓嶉渶瑕佽繑鏄�
+ if (ids.length === 0) {
+ pointActivityList.value = []
+ return
+ }
+ // 鍙湁娲诲姩鍙戠敓鍙樺寲涔嬪悗锛屾墠浼氭煡璇㈡椿鍔�
+ if (
+ pointActivityList.value.length === 0 ||
+ pointActivityList.value.some((pointActivity) => !ids.includes(pointActivity.id!))
+ ) {
+ pointActivityList.value = await PointActivityApi.getPointActivityListByIds(ids)
+ }
+ },
+ { immediate: true }
+)
+
+/** 娲诲姩琛ㄦ牸閫夋嫨瀵硅瘽妗� */
+const pointActivityTableSelectRef = ref()
+// 鎵撳紑瀵硅瘽妗�
+const openSeckillActivityTableSelect = () => {
+ pointActivityTableSelectRef.value.open(pointActivityList.value)
+}
+
+/**
+ * 閫夋嫨娲诲姩鍚庤Е鍙�
+ * @param activityList 閫変腑鐨勬椿鍔ㄥ垪琛�
+ */
+const handleActivitySelected = (activityList: PointActivityVO | PointActivityVO[]) => {
+ pointActivityList.value = isArray(activityList) ? activityList : [activityList]
+ emitActivityChange()
+}
+
+/**
+ * 鍒犻櫎娲诲姩
+ * @param index 娲诲姩绱㈠紩
+ */
+const handleRemoveActivity = (index: number) => {
+ pointActivityList.value.splice(index, 1)
+ emitActivityChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitActivityChange = () => {
+ if (props.limit === 1) {
+ const pointActivity = pointActivityList.value.length > 0 ? pointActivityList.value[0] : null
+ emit('update:modelValue', pointActivity?.id || 0)
+ emit('change', pointActivity)
+ } else {
+ emit(
+ 'update:modelValue',
+ pointActivityList.value.map((pointActivity) => pointActivity.id)
+ )
+ emit('change', pointActivityList.value)
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+ display: flex;
+ width: 60px;
+ height: 60px;
+ border: 1px dashed var(--el-border-color-darker);
+ border-radius: 8px;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+.spu-pic {
+ position: relative;
+}
+
+.del-icon {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ z-index: 1;
+ width: 20px !important;
+ height: 20px !important;
+}
+</style>
--
Gitblit v1.8.0