Merge branch 'dev-sws' into dev-yxl

v1.0.0
于肖磊 2024-08-28 18:10:45 +08:00
commit 96d66a8ae5
4 changed files with 51 additions and 8 deletions

View File

@ -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']);

View File

@ -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>

View File

@ -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;
};

View File

@ -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,
},