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: '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: '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: '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: '4', 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 },
|
{ id: '5', 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 },
|
{ id: '6', 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 },
|
{ id: '7', 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 emit = defineEmits(['update:change-theme']);
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<model-coupon-content :value="form.content" @update:change-theme="change_theme"></model-coupon-content>
|
<model-coupon-content :value="form.content" @update:change-theme="change_theme"></model-coupon-content>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="type == '2'">
|
<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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -118,7 +118,7 @@ const default_config = {
|
||||||
};
|
};
|
||||||
const change_theme = (val: string) => {
|
const change_theme = (val: string) => {
|
||||||
if (val) {
|
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,22 +2,62 @@
|
||||||
<div class="styles">
|
<div class="styles">
|
||||||
<el-form :model="form" label-width="70">
|
<el-form :model="form" label-width="70">
|
||||||
<card-container class="mb-8">
|
<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>
|
</card-container>
|
||||||
</el-form>
|
</el-form>
|
||||||
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
|
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { cloneDeep } from 'lodash';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: {
|
value: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '1',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['update:value']);
|
const emit = defineEmits(['update:value']);
|
||||||
// 默认值
|
// 默认值
|
||||||
let form = reactive(props.value);
|
let form = reactive(props.value);
|
||||||
|
let clone_form = cloneDeep(props.value);
|
||||||
const common_styles_update = (val: Object) => {
|
const common_styles_update = (val: Object) => {
|
||||||
form.common_style = val;
|
form.common_style = val;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,10 @@ interface DefaultCoupon {
|
||||||
desc_color: string;
|
desc_color: string;
|
||||||
limit_send_count: string;
|
limit_send_count: string;
|
||||||
btn_background: color_list[];
|
btn_background: color_list[];
|
||||||
|
btn_direction: string;
|
||||||
btn_color: string;
|
btn_color: string;
|
||||||
background: color_list[];
|
background: color_list[];
|
||||||
|
direction: string;
|
||||||
spacing: number;
|
spacing: number;
|
||||||
common_style: object;
|
common_style: object;
|
||||||
};
|
};
|
||||||
|
|
@ -37,8 +39,10 @@ const defaultCoupoin: DefaultCoupon = {
|
||||||
desc_color: '#FF3830',
|
desc_color: '#FF3830',
|
||||||
limit_send_count: '#999',
|
limit_send_count: '#999',
|
||||||
btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
|
btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
|
||||||
|
btn_direction: '90deg',
|
||||||
btn_color: '#FF3830',
|
btn_color: '#FF3830',
|
||||||
background: [{ color: '#FFF1E1', color_percentage: '' }],
|
background: [{ color: '#FFF1E1', color_percentage: '' }],
|
||||||
|
direction: '90deg',
|
||||||
spacing: 10,
|
spacing: 10,
|
||||||
common_style: defaultCommon,
|
common_style: defaultCommon,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue