商品页面的显示逻辑

src/components/model-shop-list/index.vue

@@ -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 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 class="one2 radius-sm size-9 pl-3 pr-3">{{ '包邮' }}</div>
-                                <div class="one3 radius-sm size-9 pl-3 pr-3">{{ '领劵' }}</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);
 }