1.代码优化

src/components/base/drag/index.vue

@@ -1,7 +1,7 @@
 <template>
     <VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag" :scroll="true" :on-sort="on_sort">
         <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-x-20">
-            <li v-for="(item, index) in from" :key="item.id" :class="className" class="flex gap-y-16 re" @click.stop="on_click(item, index)">
+            <li v-for="(item, index) in from" :key="index" :class="className" class="flex gap-y-16 re" @click.stop="on_click(item, index)">
                 <el-icon class="iconfont icon-drag size-16 cursor-move" />
                 <slot :row="item" :index="index" />
                 <el-icon v-if="isShowEdit" class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click.stop="edit(index)" />
@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { get_math } from '@/utils';
 import { VueDraggable } from 'vue-draggable-plus';
 const emits = defineEmits(['click', 'remove', 'edit', 'onSort']);
 

src/components/model-coupon/index.vue

@@ -186,8 +186,12 @@ const theme_bg_img = ref<themeBgImg>({
 onMounted(() => {
     if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
         data_list.value = form.value.data_list;
-    } else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
-        data_list.value = form.value.data_auto_list;
+    } else if (form.value.data_type == '1') {
+        if (!isEmpty(form.value.data_auto_list)) {
+            data_list.value = form.value.data_auto_list;
+        } else {
+            get_coupon();
+        }
     } else {
         data_list.value = Array(4).fill(default_list);
     }
@@ -214,8 +218,8 @@ const get_coupon = () => {
     });
 };
 const data_list_computer = computed(() => {
-    const { data_type, type, number } = form.value;
-    return { data_type, type, number };
+    const { data_type, type, number, data_list, data_auto_list } = form.value;
+    return { data_type, type, number, data_list, data_auto_list };
 });
 watch(
     () => data_list_computer.value,

src/components/model-coupon/model-coupon-content.vue

@@ -68,13 +68,13 @@ const props = defineProps({
         default: () => {},
     },
 });
-const form = reactive(props.value);
+const form = ref(props.value);
 const url_value_dialog_visible = ref(false);
 const new_url = ref('');
 const base_list = reactive({
     data_type_list: [
-        { name: '默认', value: '0' },
         { name: '自动', value: '1' },
+        { name: '手动', value: '0' },
     ],
     themeList: Array.from({ length: 7 }, (_, index) => ({
         id: String(index + 1),
@@ -100,17 +100,17 @@ const themeChange = (val: string) => {
     emit('update:change-theme', val);
 };
 const remove = (index: number) => {
-    form.data_list.splice(index, 1);
+    form.value.data_list.splice(index, 1);
 };
 const on_sort = (item: any) => {
-    form.data_list = item;
+    form.value.data_list = item;
 };
 const add = () => {
     url_value_dialog_visible.value = true;
 };
 const url_value_dialog_call_back = (item: any[]) => {
     item.forEach((child: any) => {
-        form.data_list.push(child);
+        form.value.data_list.push(child);
     });
 };
 </script>

src/views/layout/components/main/default/coupon.ts

@@ -40,7 +40,7 @@ interface DefaultCoupon {
 const defaultCoupoin: DefaultCoupon = {
     content: {
         theme: '1',
-        data_type: '0',
+        data_type: '1',
         type: [],
         number: 4,
         // 只有主题4用到