Merge branch 'dev-sws' into dev-yxl
commit
96d66a8ae5
|
|
@ -70,11 +70,10 @@ const base_list = reactive({
|
|||
{ id: '1', name: '风格1', url: new URL(`../../assets/images/components/model-coupon/theme-1.png`, import.meta.url).href },
|
||||
{ id: '2', name: '风格2', url: new URL(`../../assets/images/components/model-coupon/theme-2.png`, import.meta.url).href },
|
||||
{ id: '3', 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 },
|
||||
{ id: '5', name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
|
||||
{ id: '6', name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
|
||||
{ id: '7', name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
|
||||
{ id: '8', name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
|
||||
{ id: '4', name: '风格4', url: new URL(`../../assets/images/components/model-coupon/theme-4.png`, import.meta.url).href },
|
||||
{ id: '5', name: '风格5', url: new URL(`../../assets/images/components/model-coupon/theme-5.png`, import.meta.url).href },
|
||||
{ id: '6', name: '风格6', url: new URL(`../../assets/images/components/model-coupon/theme-6.png`, import.meta.url).href },
|
||||
{ id: '7', name: '风格7', url: new URL(`../../assets/images/components/model-coupon/theme-7.png`, import.meta.url).href },
|
||||
],
|
||||
});
|
||||
const emit = defineEmits(['update:change-theme']);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<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="form.style"></model-coupon-styles>
|
||||
<model-coupon-styles :value="form.style" :theme="form.content.theme"></model-coupon-styles>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -118,7 +118,7 @@ const default_config = {
|
|||
};
|
||||
const change_theme = (val: string) => {
|
||||
if (val) {
|
||||
form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val) + 1}`]);
|
||||
form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,62 @@
|
|||
<div class="styles">
|
||||
<el-form :model="form" label-width="70">
|
||||
<card-container class="mb-8">
|
||||
|
||||
<div class="mb-12">优惠券样式</div>
|
||||
<el-form-item label="金额">
|
||||
<color-picker v-model="form.price_color" :default-color="clone_form.price_color"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<color-picker v-model="form.name_color" :default-color="clone_form.name_color"></color-picker>
|
||||
</el-form-item>
|
||||
<template v-if="['1', '5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="描述">
|
||||
<color-picker v-model="form.desc_color" :default-color="clone_form.desc_color"></color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="['1', '2', '4', '5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="数量限制">
|
||||
<color-picker v-model="form.limit_send_count" :default-color="clone_form.limit_send_count"></color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="['2'].includes(theme)">
|
||||
<el-form-item label="背景">
|
||||
<mult-color-picker :value="form.background" :type="form.direction"></mult-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="['3', '4'].includes(theme)">
|
||||
<el-form-item label="间距">
|
||||
<slider v-model="form.spacing"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="['5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="按钮背景">
|
||||
<mult-color-picker :value="form.btn_background" :type="form.btn_direction"></mult-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="按钮文字">
|
||||
<color-picker v-model="form.btn_color" :default-color="clone_form.btn_color"></color-picker>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</el-form>
|
||||
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { cloneDeep } from 'lodash';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: '1',
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['update:value']);
|
||||
// 默认值
|
||||
let form = reactive(props.value);
|
||||
let clone_form = cloneDeep(props.value);
|
||||
const common_styles_update = (val: Object) => {
|
||||
form.common_style = val;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,8 +14,10 @@ interface DefaultCoupon {
|
|||
desc_color: string;
|
||||
limit_send_count: string;
|
||||
btn_background: color_list[];
|
||||
btn_direction: string;
|
||||
btn_color: string;
|
||||
background: color_list[];
|
||||
direction: string;
|
||||
spacing: number;
|
||||
common_style: object;
|
||||
};
|
||||
|
|
@ -37,8 +39,10 @@ const defaultCoupoin: DefaultCoupon = {
|
|||
desc_color: '#FF3830',
|
||||
limit_send_count: '#999',
|
||||
btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#FF3830',
|
||||
background: [{ color: '#FFF1E1', color_percentage: '' }],
|
||||
direction: '90deg',
|
||||
spacing: 10,
|
||||
common_style: defaultCommon,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue