From 51af86b36eb6ed5cb7ff13cdb6cf95a2ff52cbca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sat, 23 Nov 2024 16:09:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-list.vue               | 23 ++++++--
 components/diy/data-magic.vue                 |  4 ++
 components/diy/goods-list.vue                 | 29 +++++-----
 .../modules/data-magic/product-list-show.vue  | 54 +++++++++----------
 4 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/components/diy/article-list.vue b/components/diy/article-list.vue
index 9a8d9255..ca3ca96b 100644
--- a/components/diy/article-list.vue
+++ b/components/diy/article-list.vue
@@ -49,15 +49,18 @@
                                             <template v-else>
                                                 <image :src="item.data.cover" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
                                             </template>
+                                            <template v-if="field_show.includes('3') && name_float == '1'">
+                                                <view class="text-line-1" :style="article_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</view>
+                                            </template>
                                             <!-- 角标 -->
                                             <subscriptIndex :propValue="propValue"></subscriptIndex>
                                         </view>
-                                        <view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
+                                        <view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && name_float == '0')" class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
                                             <div class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
-                                                <div v-if="field_show.includes('3')" class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
+                                                <div v-if="field_show.includes('3') && name_float == '0'" class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
                                                 <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
                                             </div>
-                                            <view class="flex-row jc-sb gap-8 align-e margin-top">
+                                            <view :class="'flex-row jc-sb gap-8 align-e' + ((field_show.includes('3') && name_float == '0') || field_show.includes('2') ? ' margin-top' : '')">
                                                 <view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
                                                 <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
                                                     <iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
@@ -80,7 +83,7 @@
 
 <script>
     const app = getApp();
-    import { common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer } from '@/common/js/common/common.js';
+    import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer, gradient_computer, margin_computer } from '@/common/js/common/common.js';
     import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
     var system = app.globalData.get_system_info(null, null, true);
     var sys_width = app.globalData.window_width_handle(system.windowWidth);
@@ -153,6 +156,9 @@
                 carousel_height_computer: '',
                 // 文章内容高度
                 article_name_height_computer: '',
+                // 文章名称浮动样式
+                float_name_style: '',
+                name_float: '0',
                 // 图片大小
                 img_size: '',
                 // 文章轮播数据
@@ -179,6 +185,7 @@
                 const new_content = this.propValue.content || {};
                 const new_style = this.propValue.style || {};
                 this.setData({
+                    name_float: !isEmpty(new_content.name_float) ? new_content.name_float : '0',
                     // 判断是自动还是手动
                     data_list:
                         new_content.data_type == '0'
@@ -212,6 +219,7 @@
                     next_margin: new_style.rolling_fashion == 'translation' ? '-' + new_style.article_spacing_margin + 'px' : '0rpx',
                     // 文章内容高度
                     slides_per_group: new_style.rolling_fashion == 'translation' ?  Number(new_content.carousel_col) + 1 : 1,
+
                 });
                 // 默认数据
                 const product_style_list = [
@@ -285,6 +293,12 @@
                     // 计算间隔的空间。(gap * gap数量) / 模块数量
                     let gap = temp_carousel_col !== '0' ? (new_style.article_spacing * temp_carousel_col) / (Number(temp_carousel_col) + 1) : '0';
                     const multicolumn_columns_width = new_style.rolling_fashion == 'translation' ? `margin-right: ${ new_style.article_spacing }px;width:100%;` : `width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);min-width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);`;
+                    const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius, name_bg_padding, name_bg_margin } = new_style;
+                    const data = {
+                        color_list: name_bg_color_list,
+                        direction: name_bg_direction,
+                    }
+                    let location = 'position:absolute;bottom:0;left:0;right:0;'
                     // 轮播宽度
                     this.setData({
                         // 滚动时间
@@ -297,6 +311,7 @@
                         carousel_height_computer: new_style.article_height + 'px',
                         // 文章内容高度
                         article_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
+                        float_name_style: gradient_computer(data) + (!isEmpty(name_bg_radius) ? radius_computer(name_bg_radius) : '') + (!isEmpty(name_bg_padding) ? padding_computer(name_bg_padding) : '' ) + (!isEmpty(name_bg_padding) ? margin_computer(name_bg_margin) : '') + location,
                         article_img_style: background_computer(article_data)
                     });
                     // 文章轮播数据
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index 5e6ddcdf..53f9d3f1 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -213,6 +213,10 @@
                     data_style.indicator_location_style = get_indicator_location_style(data_style);
                     data_style.background_style = gradient_computer(data_style);
                     data_style.background_img_style = background_computer(data_style);
+                    // 商品价格处理
+                    data_style.goods_price_symbol_style = this.goods_trends_config(data_style, 'price_symbol');
+                    data_style.goods_price_unit_style = this.goods_trends_config(data_style, 'price_unit');
+
                     let fit = '';
                     if (data_content.img_fit == 'contain') {
                         fit = 'aspectFit';
diff --git a/components/diy/goods-list.vue b/components/diy/goods-list.vue
index 28b918d1..88a08d36 100644
--- a/components/diy/goods-list.vue
+++ b/components/diy/goods-list.vue
@@ -41,13 +41,13 @@
                                     <view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5">
                                         <view :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
                                             <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
-                                                <text class="identifying">{{ item.show_price_symbol }}</text>
+                                                <text :style="price_symbol">{{ item.show_price_symbol }}</text>
                                                 <text :style="price_style">{{ item.min_price }}</text>
-                                                <text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
+                                                <text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
                                             </view>
                                             <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
                                                 <!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
-                                                <text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]">
+                                                <text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
                                                     {{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                     <block v-if="is_show('original_price_unit')">
                                                         {{ item.show_original_price_unit }}
@@ -79,13 +79,13 @@
                                     <view v-else class="flex-row align-c jc-sb">
                                         <view class="flex-row align-c nowrap">
                                             <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
-                                                <text class="identifying">{{ item.show_price_symbol }}</text>
+                                                <text :style="price_symbol">{{ item.show_price_symbol }}</text>
                                                 <text :style="price_style">{{ item.min_price }}</text>
-                                                <text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
+                                                <text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
                                             </view>
                                             <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
                                                 <!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
-                                                <text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]">
+                                                <text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
                                                     {{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                     <block v-if="is_show('original_price_unit')">
                                                         {{ item.show_original_price_unit }}
@@ -141,13 +141,13 @@
                                             <view class="flex-row align-c jc-sb">
                                                 <view class="flex-row align-c nowrap">
                                                     <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
-                                                        <text class="identifying">{{ item.show_price_symbol }}</text>
+                                                        <text :style="price_symbol">{{ item.show_price_symbol }}</text>
                                                         <text :style="price_style">{{ item.min_price }}</text>
-                                                        <text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
+                                                        <text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
                                                     </view>
                                                     <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
                                                         <!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
-                                                        <text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]">
+                                                        <text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
                                                             {{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                             <block v-if="is_show('original_price_unit')">
                                                                 {{ item.show_original_price_unit }}
@@ -249,6 +249,9 @@
                 score_style: '',
                 button_style: '',
                 simple_desc: '',
+                price_symbol: '',
+                price_unit: '',
+                original_price: '',
                 // 按钮背景色
                 button_gradient: '',
                 // 图片大小
@@ -356,6 +359,9 @@
                         score_style: this.trends_config(new_style, 'score'),
                         button_style: this.trends_config(new_style, 'button', 'buy_button') + button_gradient,
                         simple_desc: this.trends_config(new_style, 'simple_desc', 'desc'),
+                        price_symbol: this.trends_config(new_style, 'price_symbol'),
+                        price_unit: this.trends_config(new_style, 'price_unit'),
+                        original_price: this.trends_config(new_style, 'original_price'),
                         shop_content_list: this.get_shop_content_list(new_list, new_form, new_style),
                         slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
                         img_size: img_style,
@@ -572,11 +578,6 @@
         font-size: 18rpx;
     }
     .original-price {
-        // background-color: #ede2c5;
-        border-radius: 0;
-        font-size: 24rpx;
-        border-bottom-right-radius: 20rpx;
-        border-top-right-radius: 20rpx;
         padding: 0 20rpx;
     }
     .flex-img5 {
diff --git a/components/diy/modules/data-magic/product-list-show.vue b/components/diy/modules/data-magic/product-list-show.vue
index 99c2033d..0e5fe89e 100644
--- a/components/diy/modules/data-magic/product-list-show.vue
+++ b/components/diy/modules/data-magic/product-list-show.vue
@@ -16,11 +16,11 @@
                         </template>
                         <view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
                             <view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title }}</view>
-                            <view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
-                                <text class="num">{{ item.show_price_symbol }}</text>
+                            <view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
+                                <text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</text>
                                 {{ item.min_price }}
                                 <template v-if="propIsShow.includes('price_unit')">
-                                    <text class="num">{{ item.show_price_unit }}</text>
+                                    <text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit }}</text>
                                 </template>
                             </view>
                         </view>
@@ -43,10 +43,10 @@
                                     <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                                 </view>
                             </template>
-                            <view v-if="propIsShow.includes('price')" class="price-suspension text-line-1" :style="propGoodStyle.goods_price_style">
-                                {{ item.show_price_symbol }}{{ item.min_price }}
+                            <view v-if="propIsShow.includes('price')" class="pa" :style="propGoodStyle.goods_price_style + float_pirce_style">
+                                <text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</text>{{ item.min_price }}
                                 <template v-if="propIsShow.includes('price_unit')">
-                                    {{ item.show_price_unit }}
+                                    <text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit }}</text>
                                 </template>
                             </view>
                         </view>
@@ -71,11 +71,10 @@
                         </template>
                         <view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
                             <view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title }}</view>
-                            <view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
-                                <text class="num">{{ item.show_price_symbol }}</text>
-                                {{ item.min_price }}
+                            <view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
+                                <text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</text>{{ item.min_price }}
                                 <template v-if="propIsShow.includes('price_unit')">
-                                    <text class="num">{{ item.show_price_unit }}</text>
+                                    <text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit }}</text>
                                 </template>
                             </view>
                         </view>
@@ -88,7 +87,7 @@
 
 <script>
     const app = getApp();
-    import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty } from "@/common/js/common/common.js";
+    import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty, margin_computer } from "@/common/js/common/common.js";
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     export default {
         components: {
@@ -137,6 +136,10 @@
                 style_container: '',
                 style_img_container: '',
                 block_size: '',
+                float_pirce_style: '',
+                old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
+                old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
+                old_margin: { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 },
             };
         },
         mounted() {
@@ -155,7 +158,7 @@
             isEmpty,
             init() {
                 if (!isEmpty(this.propGoodStyle)) {
-                    const { goods_color_list = [], goods_direction = '180deg', goods_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = this.propGoodStyle;
+                    const { goods_color_list = [], goods_direction = '180deg', goods_radius = old_radius, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = old_padding, goods_price_color_list = [], goods_price_direction = '180deg', goods_price_radius = old_radius, goods_price_padding = old_padding, goods_price_margin = old_margin, goods_price_location = 'center'} = this.propGoodStyle;
                     const style_data = {
                         color_list: goods_color_list,
                         direction: goods_direction,
@@ -165,7 +168,18 @@
                         background_img_style: goods_background_img_style,
                     }
                     const total_gap = this.propGoodStyle.data_goods_gap * (this.propValue.length - 1);
+                    const data = {
+                        color_list: goods_price_color_list,
+                        direction: goods_price_direction,
+                    }
+                    let location = 'left:50%;transform:translateX(-50%);bottom:0;'
+                    if (goods_price_location == 'left') {
+                        location = 'left:0;bottom:0;';
+                    } else if (goods_price_location == 'right') {
+                        location = 'right:0;bottom:0;';
+                    }
                     this.setData({
+                        float_pirce_style: gradient_computer(data) + radius_computer(goods_price_radius) + padding_computer(goods_price_padding) + margin_computer(goods_price_margin) + location,
                         style_container: gradient_computer(style_data) + radius_computer(goods_radius), // 用于样式显示
                         style_img_container: this.propFlex == 'col' ? background_computer(style_img_data) : padding_computer(goods_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
                         block_size: this.propOuterflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap * 2 + 'rpx) / ' + this.propNum  + ');' : 'width: 100%;height:calc((100% - ' + total_gap * 2 + 'rpx) / ' + this.propNum  + ');'
@@ -187,22 +201,6 @@
 </script>
 
 <style scoped lang="scss">
-    .identifying .num {
-        font-size: 18rpx;
-        line-height: 18rpx;
-    }
-    .price-suspension {
-        width: calc(100% - 32rpx);
-        margin: 0 8rpx;
-        background: #fff;
-        font-size: 24rpx;
-        line-height: 34rpx;
-        color: #ea3323;
-        text-align: center;
-        position: absolute;
-        bottom: 8rpx;
-        border-radius: 16rpx;
-    }
     .w {
         width: 100%;
     }