Merge branch 'dev-sws' into dev-yxl

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

@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
-                    <theme-select v-model="form.theme" :data="base_list.themeList"></theme-select>
+                    <theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
                 </el-form-item>
             </card-container>
             <card-container class="common-content-height">
@@ -46,6 +46,14 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    styles: {
+        type: Object,
+        default: () => {},
+    },
+    defaultConfig: {
+        type: Object,
+        default: () => {},
+    },
 });
 const form = reactive(props.value);
 const url_value_dialog_visible = ref(false);
@@ -55,16 +63,20 @@ const base_list = reactive({
         { name: '手动', value: '1' },
     ],
     themeList: [
-        // { name: '风格1', url: new URL(`../../assets/images/components/model-coupon/theme-1.png`, import.meta.url).href },
+        { id: '1', name: '风格1', url: new URL(`../../assets/images/components/model-coupon/theme-1.png`, import.meta.url).href },
-        // { name: '风格2', url: new URL(`../../assets/images/components/model-coupon/theme-2.png`, import.meta.url).href },
+        { id: '2', name: '风格2', url: new URL(`../../assets/images/components/model-coupon/theme-2.png`, import.meta.url).href },
-        // { name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
+        { id: '3', name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
-        // { name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
+        { id: '4', name: '风格3', url: new URL(`../../assets/images/components/model-coupon/theme-3.png`, import.meta.url).href },
-        // { name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
+        { id: '5', name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
-        // { name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
+        { id: '6', name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
-        // { name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
+        { id: '7', name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
-        // { name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
+        { id: '8', name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
     ],
 });
+const emit = defineEmits(['update:change-theme']);
+const themeChange = (val: string) => {
+    emit('update:change-theme', val);
+};
 const remove = (index: number) => {
     form.data_list.splice(index, 1);
 };

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

@@ -1,10 +1,10 @@
 <template>
     <div class="setting-content">
         <template v-if="type == '1'">
-            <model-coupon-content :value="value.content" :styles="value.style" :default-config="default_config"></model-coupon-content>
+            <model-coupon-content :value="form.content" @update:change-theme="change_theme"></model-coupon-content>
         </template>
         <template v-else-if="type == '2'">
-            <model-coupon-styles :value="value.style" :content="value.content" :default-config="default_config"></model-coupon-styles>
+            <model-coupon-styles :value="form.style"></model-coupon-styles>
         </template>
     </div>
 </template>
@@ -19,6 +19,7 @@ const props = defineProps({
         default: () => {},
     },
 });
+const form = ref(props.value);
 const default_config = {
     style: {
         theme_1: {
@@ -71,7 +72,7 @@ const default_config = {
             // 当为主题34时，间距不给予修改，优惠券沾满整行
             spacing: 0,
         },
-        theme5: {
+        theme_5: {
             price_color: '#FF3830',
             name_color: '#FF3830',
             // 主题5时不显示
@@ -84,7 +85,7 @@ const default_config = {
             background: [{ color: '#FFF1E1', color_percentage: '' }],
             spacing: 10,
         },
-        theme6: {
+        theme_6: {
             price_color: '#FF3830',
             name_color: '#666',
             // 主题6时不显示
@@ -97,7 +98,7 @@ const default_config = {
             background: [{ color: '#FF3830', color_percentage: '' }],
             spacing: 10,
         },
-        theme7: {
+        theme_7: {
             price_color: '#fff',
             name_color: '#fff',
             // 主题7时不显示
@@ -115,4 +116,21 @@ const default_config = {
         },
     },
 };
+const change_theme = (val: string) => {
+    if (val === '1') {
+        form.value.style = default_config.style.theme_1;
+    } else if (val === '2') {
+        form.value.style = default_config.style.theme_2;
+    } else if (val === '3') {
+        form.value.style = default_config.style.theme_3;
+    } else if (val === '4') {
+        form.value.style = default_config.style.theme_4;
+    } else if (val === '5') {
+        form.value.style = default_config.style.theme_5;
+    } else if (val === '6') {
+        form.value.style = default_config.style.theme_6;
+    } else if (val === '7') {
+        form.value.style = default_config.style.theme_7;
+    }
+};
 </script>

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

@@ -22,7 +22,7 @@ interface DefaultCoupon {
 }
 const defaultCoupoin: DefaultCoupon = {
     content: {
-        theme: '风格1',
+        theme: '1',
         data_type: '0',
         number: 4,
         title: '先领券 再购物',