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

商品页面的显示逻辑

v1.0.0
于肖磊 2024-08-22 15:26:13 +08:00
parent 9ffd40a2f4
commit 2ed25dcad5
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,9 +23,7 @@
<div class="flex-col gap-10 top-title">
<div v-if="is_show('0')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="show_content && is_show('1')" class="flex-row gap-5">
<div class="one1 radius-sm size-9 pl-3 pr-3">{{ '满减活动' }}</div>
<div class="one2 radius-sm size-9 pl-3 pr-3">{{ '包邮' }}</div>
<div class="one3 radius-sm size-9 pl-3 pr-3">{{ '领劵' }}</div>
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
</div>
</div>
<div v-if="!['3', '4', '5'].includes(form.product_style)" class="flex-col gap-5 oh">
@ -37,7 +35,7 @@
</div>
<div v-if="show_content && is_show('5')" class="size-10 flex">
<span class="original-price-left"></span
><span class="original-price flex-1 text-line-1"
><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo }]"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('7')">
{{ item.show_original_price_unit }}
@ -48,7 +46,8 @@
<div class="flex-row jc-sb align-e">
<div>
<div v-if="show_content" class="flex-row align-c size-10">
<div v-if="is_show('3')" :class="['pr-5', {'br-r-e': is_show('3') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
<div v-if="is_show('3')" class="pr-5" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div>
<!-- <div v-if="is_show('3')" :class="['pr-5', {'br-r-e': is_show('3') && is_show('4')}]" :style="trends_config('sold_number')">已售{{ item.sales_count }}件</div> -->
<!-- <div v-if="is_show('4')" class="pl-5" :style="trends_config('score')">评分0</div> -->
</div>
</div>
@ -122,6 +121,13 @@ const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 目前显示假数据，日后通过分类或者选择的商品来显示真实数据
interface plugins_icon_data {
name: string;
bg_color: string;
br_color: string;
color: string;
url: string;
}
interface product_list {
title: string;
images: string;
@ -133,6 +139,7 @@ interface product_list {
show_price_symbol: string;
show_price_unit: string;
sales_count: string;
plugins_view_icon_data: plugins_icon_data[];
}
const default_list = {
title: '华为荣耀畅享平板换屏服务 屏幕换外屏',
@ -144,6 +151,7 @@ const default_list = {
sales_count: '1000',
images: '',
new_url: [],
plugins_view_icon_data: []
};
const list = ref<product_list[]>([]);
@ -312,6 +320,14 @@ const style_config = (typeface: string, size: number, color: string | object, ty
const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '90deg');
};
// icon标志显示样式
const icon_style = (item: { bg_color: string; color: string; br_color: string; }) => {
let style = `background: ${item.bg_color};color: ${item.color};`;
if (!isEmpty(item.br_color)) {
style += `border: 1px solid ${item.br_color};`
}
return style;
}
// 公共样式
const style_container = computed(() => {
if (props.isCommonStyle) {
@ -350,20 +366,6 @@ const style_container = computed(() => {
height: v-bind(button_size);
line-height: v-bind(button_size);
}
.one1 {
border: 1px solid #ea3323;
background: #ea3323;
color: #fff;
}
.one2 {
border: 1px solid #ea3323;
color: #ea3323;
}
.one3 {
border: 1px solid #ffc300;
color: #ffc300;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}