!666 【功能完善】MALL: 模板装修优惠券组件优惠券列表回显

Merge pull request !666 from puhui999/dev

src/components/DiyEditor/components/mobile/CouponCard/property.vue

@@ -68,7 +68,12 @@
     </el-form>
     </el-form>
   </ComponentContainerProperty>
   </ComponentContainerProperty>
   <!-- 优惠券选择 -->
   <!-- 优惠券选择 -->
-  <CouponSelect ref="couponSelectDialog" v-model:multiple-selection="couponList" />
+  <CouponSelect
+    ref="couponSelectDialog"
+    v-model:multiple-selection="couponList"
+    :take-type="CouponTemplateTakeTypeEnum.USER.type"
+    @change="handleCouponSelect"
+  />
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
@@ -76,7 +81,7 @@ import { CouponCardProperty } from './config'
 import { useVModel } from '@vueuse/core'
 import { useVModel } from '@vueuse/core'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
 import { floatToFixed2 } from '@/utils'
 import { floatToFixed2 } from '@/utils'
-import { PromotionDiscountTypeEnum } from '@/utils/constants'
+import { CouponTemplateTakeTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
 import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue'
 import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue'
 
 
 // 优惠券卡片属性面板
 // 优惠券卡片属性面板
@@ -93,10 +98,20 @@ const couponSelectDialog = ref()
 const handleAddCoupon = () => {
 const handleAddCoupon = () => {
   couponSelectDialog.value.open()
   couponSelectDialog.value.open()
 }
 }
+const handleCouponSelect = () => {
+  formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
+}
+
 watch(
 watch(
-  () => couponList.value,
-  () => {
-    formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
+  () => formData.value.couponIds,
+  async () => {
+    if (formData.value.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(formData.value.couponIds)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
   }
   }
 )
 )
 </script>
 </script>

src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

@@ -68,13 +68,18 @@ import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarCellProperty' })
 defineOptions({ name: 'NavigationBarCellProperty' })
 
 
-const props = defineProps<{
-  modelValue: NavigationBarCellProperty[]
-  isMp: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: NavigationBarCellProperty[]
+    isMp: boolean
+  }>(),
+  {
+    modelValue: () => [],
+    isMp: true
+  }
+)
 const emit = defineEmits(['update:modelValue'])
 const emit = defineEmits(['update:modelValue'])
-const { formData: cellList } = usePropertyForm(props.modelValue, emit)
-if (!cellList.value) cellList.value = []
+const cellList = useVModel(props, 'modelValue', emit)
 
 
 // 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
 // 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
 const cellCount = computed(() => (props.isMp ? 6 : 8))
 const cellCount = computed(() => (props.isMp ? 6 : 8))