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

修改商品按钮显示

v1.0.0
于肖磊 2024-08-27 16:06:39 +08:00
parent ee3a7ff12e
commit 9f51e3c2d6
7 changed files with 62 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/icon/index.vue
View File

@ -1,5 +1,5 @@
<template>
<i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') !== -1 || props.color.indexOf('rgba') !== -1 ? 'color:' + props.color : '') + styles" @click="onClick">
<i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') !== -1 || props.color.indexOf('rgba') !== -1 ? 'color:' + props.color + ';' : '') + styles" @click="onClick">
<slot></slot>
</i>
</template>

46
src/components/common/product-show-config/index.vue
View File

@ -15,32 +15,19 @@
<el-form-item label="是否显示">
<el-switch v-model="form.is_shop_show"></el-switch>
</el-form-item>
<el-form-item label="按钮样式" class="align-c">
<div class="flex-row align-c jc-s gap-20 shopping_button_all">
<div v-for="item in base_list.shopping_button_list" :key="item.value" :class="['pa-10 re', { 'br-c br-primary radius-sm': shop_type(item) }]" @click="shopping_button_click(item)">
<template v-if="item.value == '0'">
<div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.theme) }]">{{ item.name }}</div>
</template>
<template v-else-if="item.value == '1'">
<div :class="['pl-13 pr-13 round size-12 bg-primary cr-f shopping_button', {'disabled': ['3','4','5'].includes(form.theme) }]">{{ item.name }}</div>
</template>
<template v-else-if="item.value == '2'">
<icon class="shopping_button round pl-6 pr-6 bg-primary " name="add" color="f" size="16"></icon>
</template>
<template v-else>
<icon class="shopping_button round pl-6 pr-6 bg-primary" name="cart" color="f" size="16"></icon>
</template>
<div v-if="shop_type(item)" class="button-checked">
<icon name="true" color="f" size="8"></icon>
</div>
</div>
<el-form-item label="按钮样式">
<div class="flex-col w gap-10">
<el-radio-group v-model="form.shop_type">
<el-radio v-for="item in base_list.shopping_button_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<template v-if="form.shop_type == 'text'">
<el-input v-model="form.shop_button_text" placeholder="请输入按钮文字"></el-input>
</template>
<template v-else>
<upload v-model:icon-value="form.shop_button_icon_class" is-icon type="icon" :limit="1" size="50"></upload>
</template>
</div>
</el-form-item>
<el-form-item label="按钮大小" label-width="140">
<el-radio-group v-model="form.shop_button_size">
<el-radio v-for="item in base_list.shopping_button_size" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="按钮效果">
<el-radio-group v-model="form.shop_button_effect">
<el-radio v-for="item in base_list.shopping_cart_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@ -75,19 +62,12 @@ const base_list = {
{ name: '原价单位', value: 'original_price_unit' },
],
shopping_button_list: [
{ name: '购买', value: '0' },
{ name: '立即购买', value: '1' },
{ name: '添加', value: '2' },
{ name: '购物车', value: '3' },
{ name: '文字', value: 'text' },
{ name: 'icon', value: 'icon' },
],
shopping_cart_list: [
{ name: '进入商品详情页', value: '0' },
{ name: '商品加购', value: '1' }
],
shopping_button_size: [
{ name: '大', value: '0' },
{ name: '中', value: '1' },
{ name: '小', value: '2' },
]
};

48
src/components/model-shop-list/index.vue
View File

@ -52,17 +52,11 @@
</div>
</div>
<div v-if="form.is_shop_show">
<template v-if="form.shop_type == '0'">
<div class="pl-13 pr-13 round cr-f shopping_button" :style="trends_config('button', 'gradient')">购买</div>
</template>
<template v-else-if="form.shop_type == '1'">
<div class="pl-11 pr-11 round cr-f shopping_button" :style="trends_config('button', 'gradient')">立即购买</div>
</template>
<template v-else-if="form.shop_type == '2'">
<icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="add" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
<template v-if="form.shop_type == 'text'">
<div class="plr-13 ptb-4 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="cart" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
</template>
</div>
</div>
@ -85,17 +79,11 @@
</div>
</div>
<div v-if="form.is_shop_show">
<template v-if="form.shop_type == '0'">
<div class="pl-13 pr-13 round cr-f shopping_button" :style="trends_config('button', 'gradient')">购买</div>
</template>
<template v-else-if="form.shop_type == '1'">
<div class="pl-11 pr-11 round cr-f shopping_button" :style="trends_config('button', 'gradient')">立即购买</div>
</template>
<template v-else-if="form.shop_type == '2'">
<icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="add" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
<template v-if="form.shop_type == 'text'">
<div class="plr-13 ptb-4 round cr-f" :style="trends_config('button', 'gradient') + `color: ${ new_style.shop_button_text_color };`">{{ form.shop_button_text }}</div>
</template>
<template v-else>
<icon :class="['shopping_button round', { 'pl-6 pr-6': shop_icon_size != '8', 'pl-5 pr-5': shop_icon_size == '8' }]" name="cart" color="f" :size="shop_icon_size" :styles="button_gradient()"></icon>
<icon class="round plr-6 ptb-5" :name="!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart'" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size + ''" :styles="button_gradient()"></icon>
</template>
</div>
</div>
@ -311,26 +299,6 @@ const text_line = computed(() => {
const is_show = (index: string) => {
return form.value.is_show.includes(index);
};
// 按钮大小设置
const button_size = computed(() => {
let button_size = '22px';
if (form.value.shop_button_size == '0') {
button_size = '27px';
} else if (form.value.shop_button_size == '2') {
button_size = '18px';
}
return button_size;
});
// 不同大小下的icon显示
const shop_icon_size = computed(() => {
let size = '8';
if (form.value.shop_button_size == '0') {
size = '15';
} else if (form.value.shop_button_size == '1') {
size = '10';
}
return size;
});
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
@ -393,10 +361,6 @@ const style_container = computed(() => {
border-top-right-radius: 1rem;
padding: 0 1rem 0 0;
}
.shopping_button {
height: v-bind(button_size);
line-height: v-bind(button_size);
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}

13
src/components/model-shop-list/model-shop-list-styles.vue
View File

@ -51,9 +51,16 @@
<el-form-item label="按钮颜色" class="topic">
<flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
</el-form-item>
<el-form-item label="立即购买">
<color-text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" :type-list="['typeface', 'size']"></color-text-size-group>
</el-form-item>
<template v-if="data.shop_type == 'text'">
<el-form-item label="文字设置">
<color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
</el-form-item>
</template>
<template v-else>
<el-form-item label="icon设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
</el-form>
<common-styles :value="form.common_style" @update:value="common_style_update" />

13
src/components/model-shop-tabs/model-shop-tabs-styles.vue
View File

@ -63,9 +63,16 @@
<el-form-item label="按钮颜色" class="topic">
<flex-gradients-create :color-list="form.shop_button_color" default-color="#2a94ff"></flex-gradients-create>
</el-form-item>
<el-form-item label="立即购买">
<color-text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" :type-list="['typeface', 'size']"></color-text-size-group>
</el-form-item>
<template v-if="data.shop_type == 'text'">
<el-form-item label="文字设置">
<color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
</el-form-item>
</template>
<template v-else>
<el-form-item label="icon设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
</el-form>
<common-styles :value="form.common_style" @update:value="common_style_update" />

12
src/layout/components/main/default/shop-list.ts
View File

@ -14,6 +14,8 @@ interface DefaultProductList {
is_show: string[];
is_shop_show: boolean;
shop_type: string;
shop_button_text: string;
shop_button_icon_class: string;
shop_button_effect: string;
shop_button_size: string;
};
@ -40,6 +42,9 @@ interface DefaultProductList {
shop_button_typeface:string;
shop_button_size: number;
shop_button_color: color_list[];
shop_button_text_color: string,
shop_icon_size: number;
shop_icon_color: string;
common_style: object;
};
}
@ -57,7 +62,9 @@ const defaultProductList: DefaultProductList = {
sort_rules: '0',
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: true,
shop_type: '0',
shop_type: 'text',
shop_button_text: '购买',
shop_button_icon_class: '',
shop_button_effect: '0',
shop_button_size: '1',
},
@ -111,6 +118,9 @@ const defaultProductList: DefaultProductList = {
color_percentage: ''
}
],
shop_button_text_color: '#fff',
shop_icon_size: 10,
shop_icon_color: "#fff",
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

12
src/layout/components/main/default/shop-tabs.ts
View File

@ -22,6 +22,8 @@ interface DefaultProductList {
is_shop_show: boolean;
is_price_solo: boolean;
shop_type: string;
shop_button_text: string;
shop_button_icon_class: string;
shop_button_effect: string;
shop_button_size: string;
};
@ -56,6 +58,9 @@ interface DefaultProductList {
shop_button_typeface:string;
shop_button_size: number;
shop_button_color: color_list[];
shop_button_text_color: string,
shop_icon_size: number;
shop_icon_color: string;
common_style: object;
};
}
@ -73,7 +78,9 @@ const defaultProductList: DefaultProductList = {
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: true,
is_price_solo: true,
shop_type: '0',
shop_type: 'text',
shop_button_text: '购买',
shop_button_icon_class: '',
shop_button_effect: '0',
shop_button_size: '1',
},
@ -135,6 +142,9 @@ const defaultProductList: DefaultProductList = {
color_percentage: ''
}
],
shop_button_text_color: '#fff',
shop_icon_size: 10,
shop_icon_color: "#fff",
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};