营销：适配商城装修组件【优惠券】

src/views/mall/product/spu/components/SpuShowcase.vue

@@ -27,7 +27,7 @@ import * as ProductSpuApi from '@/api/mall/product/spu'
 import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
 import { propTypes } from '@/utils/propTypes'
 import { oneOfType } from 'vue-types'
-import { isArray } from "@/utils/is";
+import { isArray } from '@/utils/is'
 
 // 商品橱窗，一般用于与商品建立关系时使用
 // 提供功能：展示商品列表、添加商品、移除商品
@@ -43,9 +43,9 @@ const props = defineProps({
 // 计算是否可以添加
 const canAdd = computed(() => {
   // 情况一：禁用时不可以添加
-  if(props.disabled) return false
+  if (props.disabled) return false
   // 情况二：未指定限制数量时，可以添加
-  if(!props.limit) return true
+  if (!props.limit) return true
   // 情况三：检查已添加数量是否小于限制数量
   return productSpus.value.length < props.limit
 })
@@ -57,20 +57,19 @@ watch(
   () => props.modelValue,
   async () => {
     const ids = isArray(props.modelValue)
-        // 情况一：多选
-        ? props.modelValue
-        // 情况二：单选
-        : props.modelValue ? [props.modelValue]: []
+      ? // 情况一：多选
+        props.modelValue
+      : // 情况二：单选
+        props.modelValue
+        ? [props.modelValue]
+        : []
     // 不需要返显
-    if(ids.length === 0) {
+    if (ids.length === 0) {
       productSpus.value = []
       return
     }
     // 只有商品发生变化之后，才去查询商品
-    if (
-      productSpus.value.length === 0 ||
-      productSpus.value.some((spu) => !ids.includes(spu.id!))
-    ) {
+    if (productSpus.value.length === 0 || productSpus.value.some((spu) => !ids.includes(spu.id!))) {
       productSpus.value = await ProductSpuApi.getSpuDetailList(ids)
     }
   },
@@ -103,12 +102,15 @@ const handleRemoveSpu = (index: number) => {
 }
 const emit = defineEmits(['update:modelValue', 'change'])
 const emitSpuChange = () => {
-  if(props.limit === 1) {
+  if (props.limit === 1) {
     const spu = productSpus.value.length > 0 ? productSpus.value[0] : null
     emit('update:modelValue', spu?.id || 0)
     emit('change', spu)
   } else {
-    emit('update:modelValue', productSpus.value.map((spu) => spu.id))
+    emit(
+      'update:modelValue',
+      productSpus.value.map((spu) => spu.id)
+    )
     emit('change', productSpus.value)
   }
 }

src/views/mall/product/spu/components/SpuTableSelect.vue

@@ -167,7 +167,7 @@ const open = (spuList?: Spu[]) => {
   // 处理已选中
   if (spuList && spuList.length > 0) {
     checkedSpus.value = [...spuList]
-    checkedStatus.value = Object.fromEntries(spuList.map(spu => [spu.id, true]))
+    checkedStatus.value = Object.fromEntries(spuList.map((spu) => [spu.id, true]))
   }
 
   dialogVisible.value = true
@@ -184,7 +184,9 @@ const getList = async () => {
     list.value = data.list
     total.value = data.total
     // checkbox绑定undefined会有问题，需要给一个bool值
-    list.value.forEach( spu => checkedStatus.value[spu.id] = checkedStatus.value[spu.id] || false)
+    list.value.forEach(
+      (spu) => (checkedStatus.value[spu.id] = checkedStatus.value[spu.id] || false)
+    )
     // 计算全选框状态
     calculateIsCheckAll()
   } finally {
@@ -272,23 +274,19 @@ const handleCheckOne = (checked: boolean, spu: Spu, isCalcCheckAll: boolean) =>
   }
 
   // 计算全选框状态
-  if(isCalcCheckAll){
+  if (isCalcCheckAll) {
     calculateIsCheckAll()
   }
 }
 
 // 查找商品在已选中商品列表中的索引
-const findCheckedIndex = (spu: Spu) => checkedSpus.value.findIndex(item => item.id === spu.id)
+const findCheckedIndex = (spu: Spu) => checkedSpus.value.findIndex((item) => item.id === spu.id)
 
 // 计算全选框状态
 const calculateIsCheckAll = () => {
-  isCheckAll.value = list.value.every(spu => {
-    let valueElement = checkedStatus.value[spu.id];
-    debugger
-    return valueElement;
-  });
+  isCheckAll.value = list.value.every((spu) => checkedStatus.value[spu.id])
   // 计算中间状态：不是全部选中 && 任意一个选中
-  isIndeterminate.value = !isCheckAll.value && list.value.some(spu => checkedStatus.value[spu.id])
+  isIndeterminate.value = !isCheckAll.value && list.value.some((spu) => checkedStatus.value[spu.id])
 }
 
 // 分类列表