From c4aba4ee4fcbb98d1e92ba8b71c2b3d15ac9e224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 24 Sep 2024 10:17:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/carousel.vue                   | 18 ++++--
 components/diy/custom.vue                     | 18 ++++--
 components/diy/goods-list.vue                 | 34 ++++------
 components/diy/modules/custom/model-icon.vue  | 64 +++++++++++++++++++
 components/diy/modules/custom/model-image.vue |  4 +-
 components/diy/modules/custom/model-lines.vue |  4 +-
 components/diy/seckill.vue                    | 34 ++++++----
 7 files changed, 129 insertions(+), 47 deletions(-)
 create mode 100644 components/diy/modules/custom/model-icon.vue

diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index 972404e5..6a07ca1f 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="pr" :style="style_container">
-        <swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :duration="500" :style="{ height: new_style.height * 2 + 'rpx' }" :previous-margin="previousMargin" :next-margin="nextMargin" @change="slideChange">
+        <swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :display-multiple-items="slides_per_group" :duration="500" :style="{ height: new_style.height * 2 + 'rpx' }" :previous-margin="previousMargin" :next-margin="nextMargin" @change="slideChange">
             <block v-if="form.carousel_type == 'card'">
                 <swiper-item v-for="(item, index) in new_list" :key="index" class="flex-row align-c" @tap="url_open(item.carousel_link)">
                     <view class="swiper-item" :style="img_style" :class="['scale-defalt', { 'scale-1': animationData === index }]">
@@ -13,12 +13,12 @@
                         <block v-else>
                             <iconfont :name="!isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang'" size="'28rpx'" :color="new_style.video_icon_color"></iconfont>
                         </block>
-                        <span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx' }">{{ item.video_title }}</span>
+                        <span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx', 'text-wrap': 'nowrap' }">{{ item.video_title }}</span>
                     </view>
                 </swiper-item>
             </block>
             <block v-else>
-                <swiper-item v-for="(item, index) in new_list" :key="index">
+                <swiper-item v-for="(item, index) in new_list" :key="index" :style="{ 'padding-right': new_style.image_spacing * 2 + 'rpx' }">
                     <view class="item-image flex-row jc-c align-c wh-auto ht-auto pr" :style="img_style">
                         <image-empty :image-src="item.carousel_img[0]" class="img" :style="img_style" :img_fit="img_fit" error-style="width: 100rpx;height: 100rpx;"></image-empty>
                     </view>
@@ -29,7 +29,7 @@
                         <block v-else>
                             <iconfont :name="!isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang'" size="'28rpx'" :color="new_style.video_icon_color"></iconfont>
                         </block>
-                        <span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx' }">{{ item.video_title }}</span>
+                        <span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx', 'text-wrap': 'nowrap' }">{{ item.video_title }}</span>
                     </view>
                 </swiper-item>
             </block>
@@ -96,6 +96,7 @@
                 animationData: 0,
                 previousMargin: '0rpx',
                 nextMargin: '0rpx',
+                slides_per_group: 1,
             };
         },
         created() {
@@ -142,6 +143,13 @@
                             animationData: 0,
                         });
                     });
+                } else if (this.form.carousel_type != 'inherit') {
+                    this.$nextTick(() => {
+                        this.setData({
+                            nextMargin: '100rpx',
+                            slides_per_group: this.form.carousel_type == 'twoDragOne' ? 2 : 1,
+                        });
+                    });
                 }
             },
             get_indicator_style() {
@@ -292,6 +300,8 @@
     }
     .video-class {
         max-width: 100%;
+        margin-right: 20rpx;
+        margin-left: 20rpx;
     }
     .x-middle {
         position: absolute;
diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index baa772e6..5dd9f1ce 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -1,7 +1,7 @@
 <template>
     <view ref="container" :style="style_container + 'height:'+ form.height * 2 + 'rpx;'">
         <view class="wh-auto ht-auto pr">
-            <view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': get_percentage_count(item.location.x, div_width) , 'top': get_percentage_count(item.location.y, form.height), 'width': get_percentage_count(item.com_data.com_width, div_width), 'height': get_percentage_count(item.com_data.com_height, form.height)}">
+            <view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': get_percentage_count(item.location.x, div_width) , 'top': get_percentage_count(item.location.y, div_height), 'width': get_percentage_count(item.com_data.com_width, div_width), 'height': get_percentage_count(item.com_data.com_height, div_height)}">
                 <template v-if="item.key == 'text'">
                     <model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-text>
                 </template>
@@ -11,6 +11,9 @@
                 <template v-else-if="item.key == 'auxiliary-line'">
                     <model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content"></model-lines>
                 </template>
+                <template v-else-if="item.key == 'icon'">
+                    <model-icon :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-icon>
+                </template>
             </view>
         </view>
     </view>
@@ -24,12 +27,14 @@
     import modelText from '@/components/diy/modules/custom/model-text.vue';
     import modelLines from '@/components/diy/modules/custom/model-lines.vue';
     import modelImage from '@/components/diy/modules/custom/model-image.vue';
+    import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
     
     export default {
         components: {
             modelText,
             modelLines,
-            modelImage
+            modelImage,
+            modelIcon
         },
         props: {
             value: {
@@ -43,14 +48,16 @@
             return {
                 form: {},
                 new_style: {},
+                scale: sys_width / 390,
                 style_container: '',
-                custom_height: 0,
+                div_width: 0,
+                div_height: 0
             };
         },
         computed: {
           get_percentage_count() {
             return (num, container_size) => {
-                return this.percentage_count(num, container_size);
+                return this.percentage_count(num * this.scale, container_size);
             }
           }  
         },
@@ -66,7 +73,8 @@
             init() {
                 this.setData({
                     style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
-                    div_width: sys_width
+                    div_width: sys_width,
+                    div_height: this.form.height * this.scale,
                 });
             },
             url_open(link) {
diff --git a/components/diy/goods-list.vue b/components/diy/goods-list.vue
index 011f1f9f..425065c5 100644
--- a/components/diy/goods-list.vue
+++ b/components/diy/goods-list.vue
@@ -6,7 +6,7 @@
                     <block v-if="theme == '6'">
                         <view :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
                             <view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
-                            <view v-if="is_show('price')" class="num nowrap" :style="'color:' + new_style.shop_price_color">
+                            <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num nowrap" :style="'color:' + new_style.shop_price_color">
                                 <span class="identifying">{{ item.show_price_symbol }}</span
                                 ><span :style="price_style">{{ item.min_price }}</span>
                                 <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
@@ -31,14 +31,14 @@
                             </view>
                             <view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
                                 <view :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
-                                    <view v-if="is_show('price')" class="num" :style="'color:' + new_style.shop_price_color">
+                                    <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
                                         <span class="identifying">{{ item.show_price_symbol }}</span
                                         ><span :style="price_style">{{ item.min_price }}</span>
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </view>
-                                    <view v-if="show_content && is_show('original_price')" class="text-size-xss flex-row">
-                                        <span class="original-price-left"></span
-                                        ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
+                                    <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
+                                        <img class="original-price-left" :src="form.static_img[0].url" />
+                                        <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                             <block v-if="is_show('original_price_unit')">
                                                 {{ item.show_original_price_unit }}
@@ -66,14 +66,14 @@
                             </view>
                             <view v-else class="flex-row align-c jc-sb">
                                 <view class="flex-row align-c nowrap">
-                                    <view v-if="is_show('price')" class="num" :style="'color:' + new_style.shop_price_color">
+                                    <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
                                         <span class="identifying">{{ item.show_price_symbol }}</span
                                         ><span :style="price_style">{{ item.min_price }}</span>
                                         <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                     </view>
-                                    <view v-if="show_content && is_show('original_price')" class="text-size-xss flex-row">
-                                        <span class="original-price-left"></span
-                                        ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
+                                    <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
+                                        <img class="original-price-left" :src="form.static_img[0].url" />
+                                        <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                             >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                             <block v-if="is_show('original_price_unit')">
                                                 {{ item.show_original_price_unit }}
@@ -115,14 +115,14 @@
                                 </view>
                                 <view class="flex-row align-c jc-sb">
                                     <view class="flex-row align-c nowrap">
-                                        <view v-if="is_show('price')" class="num" :style="'color:' + new_style.shop_price_color">
+                                        <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
                                             <span class="identifying">{{ item.show_price_symbol }}</span
                                             ><span :style="price_style">{{ item.min_price }}</span>
                                             <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                         </view>
-                                        <view v-if="show_content && is_show('original_price')" class="text-size-xss flex">
-                                            <span class="original-price-left"></span
-                                            ><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
+                                        <view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
+                                            <img class="original-price-left" :src="form.static_img[0].url" />
+                                            <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
                                                 >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                 <block v-if="is_show('original_price_unit')">
                                                     {{ item.show_original_price_unit }}
@@ -427,14 +427,6 @@
     .identifying {
         font-size: 18rpx;
     }
-
-    // .original-price-left {
-    //     width: 20rpx;
-    //     background-image: url('/src/assets/images/components/model-goods-list/price.png');
-    //     background-size: 100% 100%;
-    //     background-repeat: no-repeat;
-    // }
-
     .original-price {
         background-color: #ede2c5;
         border-radius: 0;
diff --git a/components/diy/modules/custom/model-icon.vue b/components/diy/modules/custom/model-icon.vue
new file mode 100644
index 00000000..ee7d9798
--- /dev/null
+++ b/components/diy/modules/custom/model-icon.vue
@@ -0,0 +1,64 @@
+<template>
+    <view class="img-outer pr oh flex-row" :style="com_style" @tap="url_open(form.icon_link)">
+        <iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size"></iconfont>
+    </view>
+</template>
+<script>
+    import { radius_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
+    
+    export default {
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+                required: true,
+            },
+            sourceList: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            }
+        },
+        data() {
+            return {
+                form: {},
+                com_style: '',
+            };
+        },
+        created() {
+            this.setData({
+                form: this.value,
+            });
+            this.init();
+        },
+        methods: {
+            init() {
+                this.setData({
+                    com_style: this.get_com_style(),
+                });
+            },
+            get_com_style() {
+                let style = `background-color: ${ this.form.com_bg }; ${ radius_computer(this.form.bg_radius) };transform: rotate(${this.form.icon_rotate}deg);${ padding_computer(this.form.icon_padding) };`;
+                if (this.form.border_show == '1') {
+                    style += `border: ${this.form.border_size * 2 }rpx ${this.form.border_style} ${this.form.border_color};box-sizing: border-box;`;
+                }
+                if (this.form.icon_location == 'center') {
+                    style += `justify-content: center;`;
+                } else if (this.form.icon_location == 'left') {
+                    style += `justify-content: flex-start;`;
+                } else if (this.form.icon_location == 'right') {
+                    style += `justify-content: flex-end;`;
+                }
+                return style;
+            },
+            url_open(link) {
+                this.$emit('url_open', link)
+            },
+        },
+    };  
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue
index aa7b37da..e9abaea0 100644
--- a/components/diy/modules/custom/model-image.vue
+++ b/components/diy/modules/custom/model-image.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="img-outer pr wh-auto ht-auto" :style="border_style" @tap="url_open(form.link)">
-        <image-empty :image-src="img" :style="image_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
+        <image-empty :image-src="img" :type_style="image_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
     </view>
 </template>
 <script>
@@ -64,7 +64,7 @@
             get_border_style() {
                 let style = ``;
                 if (this.form.border_show == '1') {
-                    style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color}; ${radius_computer(this.form.border_radius)};`;
+                    style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color}; ${radius_computer(this.form.border_radius)};box-sizing: border-box;`;
                 }
                 return style;
             },
diff --git a/components/diy/modules/custom/model-lines.vue b/components/diy/modules/custom/model-lines.vue
index 0146b1b5..d4cdcdf4 100644
--- a/components/diy/modules/custom/model-lines.vue
+++ b/components/diy/modules/custom/model-lines.vue
@@ -32,9 +32,9 @@
             },
             get_border_style() {
                 if (this.form.line_settings === 'horizontal') {
-                    return `margin: 5px 0;border-bottom: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
+                    return `margin: 10rpx 0;border-bottom: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
                 } else {
-                    return `margin: 0 5px;border-right: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
+                    return `margin: 0 10rpx;border-right: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
                 }
             }
         },
diff --git a/components/diy/seckill.vue b/components/diy/seckill.vue
index ff111014..3c26dfd5 100644
--- a/components/diy/seckill.vue
+++ b/components/diy/seckill.vue
@@ -34,8 +34,8 @@
                 </view>
             </view>
             <template v-if="form.shop_style_type != '3'">
-                <view class="flex-row flex-wrap" :style="{ gap: content_outer_spacing * 2 + 'rpx' }">
-                    <view v-for="(item1, index1) in list" :key="index1" class="flex-row">
+                <view class="flex-row flex-wrap wh-auto" :style="{ gap: content_outer_spacing * 2 + 'rpx' }">
+                    <view v-for="(item1, index1) in list" :key="index1" class="flex-row wh-auto">
                         <view v-for="(item, index) in item1.split_list" :key="index" :class="layout_type" :style="layout_type_style + content_radius + (form.shop_style_type == '1' ? content_padding : '')" @tap="url_event(item.goods_url)">
                                 <template v-if="!isEmpty(item)">
                                     <view class="oh pr" :class="'flex-img' + form.shop_style_type">
@@ -67,13 +67,13 @@
                                     </view>
                                     <view class="flex-row align-e gap-10 jc-sb">
                                         <view class="flex-col gap-5">
-                                            <view v-if="is_show('price')" class="num" :style="{ color: new_style.shop_price_color }">
+                                            <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="{ color: new_style.shop_price_color }">
                                                 <span v-if="form.shop_style_type == '1'" class="text-size-xss pr-4">秒杀价</span>
                                                 <span class="identifying">{{ item.show_price_symbol }}</span
                                                 ><span :style="price_style">{{ item.min_price }}</span>
                                                 <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                             </view>
-                                            <view v-if="is_show('original_price')" class="size-11 flex" :style="{ color: new_style.original_price_color }">
+                                            <view v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="{ color: new_style.original_price_color }">
                                                 <span class="original-price text-line-1 flex-1"
                                                     >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                     <template v-if="is_show('original_price_unit')">
@@ -130,13 +130,13 @@
                                 </view>
                                 <view class="flex-row align-e gap-10 jc-sb">
                                     <view class="flex-col gap-5">
-                                        <view v-if="is_show('price')" class="num" :style="{ color: new_style.shop_price_color }">
+                                        <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="{ color: new_style.shop_price_color }">
                                             <span v-if="form.shop_style_type == '1'" class="text-size-xss pr-4">秒杀价</span>
                                             <span class="identifying">{{ item.show_price_symbol }}</span
                                             ><span :style="price_style">{{ item.min_price }}</span>
                                             <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                                         </view>
-                                        <view v-if="is_show('original_price')" class="size-11 flex" :style="{ color: new_style.original_price_color }">
+                                        <view v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="{ color: new_style.original_price_color }">
                                             <span class="original-price text-line-1 flex-1"
                                                 >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                 <template v-if="is_show('original_price_unit')">
@@ -273,7 +273,7 @@
                     });
                     // 先执行一次倒计时，后续的等待倒计时执行
                     setTimeout(() => {
-                        updateCountdown();
+                        this.updateCountdown();
                     }, 0);
                     this.setData({
                         intervalId: setInterval(this.updateCountdown, 1000),
@@ -364,23 +364,31 @@
             },
             updateCountdown() {
                 const now = new Date();
-                let endTime = this.seckill_time.endTime;
+                let endTime = this.seckill_time.endTime.replace(/-/g, '/');
                 if (this.seckill_time.status === 0) {
-                    endTime = this.seckill_time.startTime;
+                    endTime = this.seckill_time.startTime.replace(/-/g, '/');
                 }
                 const distance = new Date(endTime).getTime() - now.getTime();
                 // 如果倒计时结束，显示结束信息
                 if (distance <= 1000) {
-                    clearInterval(intervalId.value);
+                    clearInterval(this.intervalId);
                     // 如果是待开始状态，则显示开始倒计时，并且在结束的时候根据结束时候再执行一个定时器
                     if (this.seckill_time.status === 0) {
-                        this.seckill_time.status = 1;
-                        this.seckill_time.time_first_text = '距结束';
+                        this.setData({
+                            seckill_time: {
+                               endTime: this.seckill_time.current.time_end,
+                               startTime: this.seckill_time.current.time_start,
+                               status: 1,
+                               time_first_text: '距结束',
+                            }
+                        })
                         // 先执行一次倒计时，后续的等待倒计时执行
                         setTimeout(() => {
                             this.updateCountdown();
                         }, 0);
-                        intervalId.value = setInterval(updateCountdown, 1000);
+                        this.setData({
+                            intervalId: setInterval(this.updateCountdown, 1000),
+                        })
                     }
                     return;
                 }