sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.代码优化 

sws 2024-09-03
v1.0.0
sws 2024-09-03 13:50:36 +08:00
parent 744dd55b3f
commit ec3cd4cc6d
2 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/model-coupon/index.vue
View File

@ -5,7 +5,7 @@
<template v-if="theme == '1'">
<div class="coupon-theme-1">
<div v-for="item in list" :key="item" class="item">
<div class="coupon-theme-1-content tc">
<div class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
<div class="name">满200元使用</div>
<div class="price">
<span class="symbol">¥</span>
@ -18,7 +18,7 @@
</template>
<template v-else-if="theme == '2'">
<div class="coupon-theme-2">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
<div class="tc">
<div class="price">
<span class="symbol">¥</span>
@ -80,7 +80,7 @@
<template v-else-if="theme == '5'">
<div class="coupon-theme-5">
<div v-for="item in list" :key="item" class="item">
<div class="left">
<div class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
@ -145,7 +145,6 @@ watch(
(newVal, oldValue) => {
const new_content = newVal?.content || {};
const new_style = newVal?.style || {};
console.log(new_style.common_style);
style_container.value = common_styles_computer(new_style.common_style);
},
{ immediate: true, deep: true }
@ -155,18 +154,6 @@ const theme_style = computed(() => {
const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
const new_background_inside = gradient_computer({ color_list: props.value?.style?.background_inside, direction: props.value?.style?.direction_inside }, false);
const new_btn_background = gradient_computer({ color_list: props.value?.style?.btn_background, direction: props.value?.style?.btn_direction }, false);
console.log({
price_color: props.value?.style?.price_color,
name_color: props.value?.style?.name_color,
// 判断是否向对象添加desc_color属性
...(!['1', '5', '6', '7'].includes(theme.value) && { desc_color: props.value?.style?.desc_color }),
...(!['1', '2', '4', '5', '6', '7'].includes(theme.value) && { limit_send_count: props.value?.style?.limit_send_count }),
...(!['3', '5', '6', '7'].includes(theme.value) && { btn_background: new_btn_background }),
btn_color: props.value?.style?.btn_color,
...(!['2'].includes(theme.value) && { background: new_background }),
...(!['1', '2', '5', '7'].includes(theme.value) && { background_inside: new_background_inside }),
...(!['3', '4'].includes(theme.value) && { spacing: props.value?.style?.spacing + 'px' }),
});
return {
price_color: props.value?.style?.price_color,
name_color: props.value?.style?.name_color,
@ -194,7 +181,26 @@ const theme_7_background_style = computed(() => {
return '#fff';
}
});
const new_url = await online_url('/static/plugins/coupon/images/diy/');
const new_url = ref('');
interface themeBgImg {
url_1: string;
url_2: string;
url_3: string;
}
const theme_bg_img = ref<themeBgImg>({
url_1: ``,
url_2: ``,
url_3: ``,
});
onBeforeMount(() => {
online_url('/static/plugins/coupon/images/diy/').then((res) => {
theme_bg_img.value = {
url_1: `${res}theme-1-bg.png`,
url_2: `${res}theme-2-content-bg.png`,
url_3: `${res}theme-5-bg.png`,
};
});
});
</script>
<style lang="scss" scoped>
.coupon-theme-1 {
@ -232,7 +238,7 @@ const new_url = await online_url('/static/plugins/coupon/images/diy/');
.coupon-theme-1-content {
width: calc(100% - 1rem);
margin: 0 0.5rem;
background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png');
background-image: v-bind('theme_bg_img.url_1');
background-size: 100% 100%;
position: relative;
top: -1rem;
@ -260,8 +266,6 @@ const new_url = await online_url('/static/plugins/coupon/images/diy/');
.item {
flex-basis: auto;
flex-shrink: 0;
// background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
background-size: 100% 100%;
width: 8.5rem;
height: 10rem;
@ -543,8 +547,6 @@ const new_url = await online_url('/static/plugins/coupon/images/diy/');
left: 0;
width: 10rem;
height: 100%;
background-image: url('../../assets/images/components/model-coupon/theme-5-bg.png');
background-size: 100% 100%;
padding: 0.6rem;
display: flex;
flex-direction: column;

22
src/components/model-coupon/model-coupon-content.vue
View File

@ -63,21 +63,23 @@ const props = defineProps({
});
const form = reactive(props.value);
const url_value_dialog_visible = ref(false);
const new_url = await online_url('/static/plugins/coupon/images/diy/');
const new_url = ref('');
const base_list = reactive({
data_type_list: [
{ name: '默认', value: '0' },
{ name: '手动', value: '1' },
],
themeList: [
{ id: '1', name: '风格1', url: new_url + 'theme-1.png' },
{ id: '2', name: '风格2', url: new_url + 'theme-2.png' },
{ id: '3', name: '风格3', url: new_url + 'theme-3.png' },
{ id: '4', name: '风格4', url: new_url + 'theme-4.png' },
{ id: '5', name: '风格5', url: new_url + 'theme-5.png' },
{ id: '6', name: '风格6', url: new_url + 'theme-6.png' },
{ id: '7', name: '风格7', url: new_url + 'theme-7.png' },
],
themeList: Array.from({ length: 7 }, (_, index) => ({
id: String(index + 1),
name: `风格${index + 1}`,
url: `${new_url.value}theme-${index + 1}.png`,
})),
});
onMounted(async () => {
new_url.value = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
base_list.themeList.forEach((item) => {
item.url = `${new_url.value}${item.url}`;
});
});
const emit = defineEmits(['update:change-theme']);
const themeChange = (val: string) => {