From ce1ab2c0007cb916571cc66aca846adb46765936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 21 Aug 2024 18:39:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/drag/index.vue            |  3 +-
 .../common/product-show-config/index.vue      |  2 +
 .../components/product-list-show.vue          | 88 +++++++++++++++----
 .../components/tabs-content.vue               | 51 +++++------
 src/components/model-data-magic/index.vue     |  6 +-
 src/components/model-shop-list/index.vue      | 12 ++-
 .../model-shop-list-content.vue               | 31 +++----
 src/components/model-shop-tabs/index.vue      | 17 ++--
 .../model-shop-tabs-content.vue               | 37 ++++----
 .../components/main/default/shop-list.ts      |  2 +
 10 files changed, 152 insertions(+), 97 deletions(-)

diff --git a/src/components/base/drag/index.vue b/src/components/base/drag/index.vue
index 98eb457d..20bb51c1 100644
--- a/src/components/base/drag/index.vue
+++ b/src/components/base/drag/index.vue
@@ -44,7 +44,8 @@ if (props.type == 'card') {
     className.value = 'align-c';
 }
 
-const from = ref(props.data);
+const from = computed(() => props.data);
+
 const on_click = (item: any, index: number) => {
     emits('click', item, index);
 };
diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index d0c81b2a..17f2dd1e 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -71,6 +71,8 @@ const base_list = {
         { name: '商品销量', value: '3' },
         { name: '商品评分', value: '4' },
         { name: '商品原价', value: '5' },
+        { name: '售价单位', value: '6' },
+        { name: '原价单位', value: '7' },
     ],
     shopping_button_list: [
         { name: '购买', value: '0' },
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index cfb86294..bee0bd79 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -2,29 +2,68 @@
     <template v-if="props.outerflex == 'row'">
         <div class="flex-row gap-10 align-c w h">
             <template v-if="props.flex === 'row'">
-                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
-                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 half-width h">
+                    <template v-if="!isEmpty(item.new_url)">
+                        <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
+                    </template>
+                    <template v-else-if="!isEmpty(item.images)">
+                        <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
+                    </template>
+                    <template v-else>
+                        <image-empty :style="contentImgRadius"></image-empty>
+                    </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
-                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
+                        <div v-if="isShow.includes('1')" class="identifying">
+                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                <span class="num">{{ item.show_price_unit }}</span>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </template>
             <template v-else-if="actived != 7 || props.num !== 1">
-                <div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
+                <div v-for="(item, index) in split_list" :key="index" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
                     <div class="w h re">
-                        <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-                        <div v-if="isShow.includes('1')" class="price-suspension">¥{{ '51' }}</div>
+                        <template v-if="!isEmpty(item.new_url)">
+                            <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
+                        </template>
+                        <template v-else-if="!isEmpty(item.images)">
+                            <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
+                        </template>
+                        <template v-else>
+                            <image-empty :style="contentImgRadius"></image-empty>
+                        </template>
+                        <div v-if="isShow.includes('1')" class="price-suspension text-line-1">
+                            {{ item.show_price_symbol }}{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                {{ item.show_price_unit }}
+                            </template>
+                        </div>
                     </div>
-                    <div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                    <div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">{{ item.title }}</div>
                 </div>
             </template>
             <template v-else>
-                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
-                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                <div v-for="(item, index) in split_list" :key="index" class="flex-col w h">
+                    <template v-if="!isEmpty(item.new_url)">
+                        <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
+                    </template>
+                    <template v-else-if="!isEmpty(item.images)">
+                        <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
+                    </template>
+                    <template v-else>
+                        <image-empty :style="contentImgRadius"></image-empty>
+                    </template>
                     <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
-                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
+                        <div v-if="isShow.includes('1')" class="identifying">
+                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                <span class="num">{{ item.show_price_unit }}</span>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </template>
@@ -33,11 +72,24 @@
     <template v-else>
         <div class="flex-col gap-20 align-c w h">
             <template v-if="props.flex === 'row'">
-                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c w h">
-                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
-                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
-                        <div v-if="isShow.includes('1')" class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
+                <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h">
+                    <template v-if="!isEmpty(item.new_url)">
+                        <image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
+                    </template>
+                    <template v-else-if="!isEmpty(item.images)">
+                        <el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
+                    </template>
+                    <template v-else>
+                        <image-empty :style="contentImgRadius"></image-empty>
+                    </template>
+                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
+                        <div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
+                        <div v-if="isShow.includes('1')" class="identifying">
+                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <template v-if="isShow.includes('2')">
+                                <span class="num">{{ item.show_price_unit }}</span>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </template>
@@ -84,7 +136,7 @@ watchEffect(() => {
     }
 }
 .identifying {
-    font-size: 2rem;
+    font-size: 1.4rem;
     color: #EA3323;
     .num {
         font-size: 0.9rem;
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 06ce1f80..db8d2e3c 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -34,31 +34,19 @@
     </card-container>
     <card-container v-else class="mb-8">
         <div class="mb-12">商品设置</div>
-        <drag :key="form.product_list" :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
-            <template #default="{ row }">
-                <upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
-                <el-image :src="row.url" fit="contain" class="img">
-                    <template #error>
-                        <div class="bg-f5 flex-row jc-c align-c radius h w">
-                            <icon name="error-img" size="16" color="9"></icon>
-                        </div>
-                    </template>
-                </el-image>
-                <div class="flex-1 flex-width">
-                    <url-value v-model="row.href"></url-value>
-                </div>
-            </template>
-        </drag>
+        <drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
         <el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
-        <el-form-item label="展示信息">
+        <el-form-item label="展示信息" label-width="60">
             <el-checkbox-group v-model="form.is_show">
                 <el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
             </el-checkbox-group>
         </el-form-item>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </card-container>
 </template>
 <script setup lang="ts">
 import { get_math } from '@/utils';
+import { cloneDeep } from 'lodash';
 
 const props = defineProps({
     value: {
@@ -71,7 +59,7 @@ const props = defineProps({
     }
 });
 
-const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }]
+const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }, { name: '售价单位', value: '2' }]
 
 const form = ref(props.value);
 
@@ -87,22 +75,31 @@ const img_remove = (index: number) => {
 const product_list_remove = (index: number) => {
     form.value.product_list.splice(index, 1);
 };
-const product_list_add = () => {
-    form.value.product_list.push({
-        id: get_math(),
-        src: 'carousel',
-        new_src: [],
-        href: {},
-    });
-};
 // 拖拽更新之后，更新数据
 const product_list_sort = (new_list: any) => {
-    form.value.product_list = new_list;
+    form.value.product_list = cloneDeep(new_list);
 }
 
 watchEffect(() => {
     form.value = props.value;
-})
+});
+
+const product_list_add = () => {
+    url_value_dialog_visible.value = true;
+};
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    item.forEach((item: any) => {
+        form.value.product_list.push({
+            id: get_math(),
+            new_url: [],
+            new_title: item.title,
+            link: item,
+        });
+    });
+};
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index eb5989b7..f5a9b4aa 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -244,7 +244,11 @@ const text_style = (typeface: string, size: number, color: string) => {
 const commodity_list = (list: any[], num: number) => {
     if (list.length > 0) {
         // 深拷贝一下，确保不会出现问题
-        const commodity_list = cloneDeep(list);
+        const commodity_list = cloneDeep(list).map((item: any) => ({
+            ...item.link,
+            title: item.new_title,
+            new_url: item.new_url,
+        }));
         // 存储数据显示
         let nav_list = [];
         // 拆分的数量
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 1a6428e6..86fb8f10 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -31,8 +31,14 @@
                         </div>
                         <div v-if="!['3','4','5'].includes(form.product_style)" class="flex-col gap-5 oh">
                             <div :class="[form.is_price_solo ? 'flex-row align-c nowrap': 'flex-col gap-5']">
-                                <div v-if="is_show('2')" class="num" :style="`color: ${ new_style.shop_price_color }`"><span class="identifying">{{ item.show_price_symbol }}</span><span :style="trends_config('price')">{{ item.min_price }}</span><span class="identifying">{{ item.show_price_unit }}</span></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">{{ item.show_original_price_symbol }}{{ item.min_original_price }}{{ item.show_original_price_unit }}</span></div>
+                                <div v-if="is_show('2')" class="num" :style="`color: ${ new_style.shop_price_color }`"><span class="identifying">{{ item.show_price_symbol }}</span><span :style="trends_config('price')">{{ item.min_price }}</span>
+                                    <span v-if="is_show('6')" class="identifying">{{ item.show_price_unit }}</span>
+                                </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">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                    <template v-if="is_show('7')">
+                                        {{ item.show_original_price_unit }}
+                                    </template>
+                                </span></div>
                             </div>
                             <div class="flex-row jc-sb align-e">
                                 <div>
@@ -133,6 +139,7 @@ const default_list = {
     new_url: []
 }
 const list = ref<product_list[]>([]);
+
 const get_products = () => {
     const { goods_category_ids, goods_brand_ids, number, sort, sort_rules } = form.value;
     const params = {
@@ -152,6 +159,7 @@ const get_products = () => {
         }
     });
 };
+
 watchEffect(() => {
     if (form.value.product_check == '0') {
         if (!isEmpty(form.value.product_list)) {
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index bb961cd4..3fe250f2 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -19,7 +19,7 @@
                     </el-form-item>
                     <template v-if="form.product_check === '0'">
                         <div class="nav-list">
-                            <dragGroup :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></dragGroup>
+                            <drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
                             <el-button class="mt-20 w" @click="add">+添加</el-button>
                         </div>
                     </template>
@@ -53,7 +53,6 @@
                 <product-show-config :value="form"></product-show-config>
             </div>
         </el-form>
-        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -125,37 +124,27 @@ onBeforeMount(() => {
     init();
 });
 
+const product_list_remove = (index: number) => {
+    form.value.product_list.splice(index, 1);
+};
 const add = () => {
-    url_value_dialog_visible.value = true;
+    form.value.product_list.push({
+        id: get_math(),
+        src: 'carousel',
+        new_src: [],
+        href: {},
+    });
 };
 // 拖拽更新之后，更新数据
 const product_list_sort = (new_list: any) => {
     form.value.product_list = new_list;
 };
-// 删除显示
-const product_list_remove = (index: number) => {
-    form.value.product_list.splice(index, 1);
-};
-
 const change_style = (val: any): void => {
     form.value.product_style = val;
     if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
         form.value.shop_type = '2';
     }
 };
-// 打开弹出框
-const url_value_dialog_visible = ref(false);
-// 弹出框选择的内容
-const url_value_dialog_call_back = (item: any[]) => {
-    item.forEach((item: any) => {
-        form.value.product_list.push({
-            id: get_math(),
-            new_url: [],
-            new_title: item.title,
-            link: item,
-        });
-    });
-};
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-shop-tabs/index.vue b/src/components/model-shop-tabs/index.vue
index 5d1326d9..9b47eae5 100644
--- a/src/components/model-shop-tabs/index.vue
+++ b/src/components/model-shop-tabs/index.vue
@@ -26,15 +26,16 @@ const state = reactive({
 const { form, new_style } = toRefs(state);
 
 const tabs_list = ref({
-        content: {
-            ...toRefs(form.value),
-            ...toRefs(form.value.tabs_list[0]),
-        },
-        style: {
-            ...toRefs(new_style.value),
-        }
+    content: {
+        ...toRefs(form.value),
+        ...toRefs(form.value.tabs_list[0]),
+    },
+    style: {
+        ...toRefs(new_style.value),
     }
-)
+})
+console.log(tabs_list.value);
+
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 </script>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 947ab6f6..5fd533e8 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -40,19 +40,7 @@
                                     </el-form-item>
                                     <template v-if="row.product_check === '0'">
                                         <div class="nav-list">
-                                            <drag :data="row.product_list" :space-col="20" @remove="product_list_remove($event, index)" @on-sort="product_list_sort($event, index)">
-                                                <template #default="scoped">
-                                                    <upload v-model="scoped.row.new_src" :limit="1" size="40" styles="2"></upload>
-                                                    <el-image :src="scoped.row.url" fit="contain" class="img">
-                                                        <template #error>
-                                                            <div class="bg-f5 flex-row jc-c align-c radius h w">
-                                                                <icon name="error-img" size="16" color="9"></icon>
-                                                            </div>
-                                                        </template>
-                                                    </el-image>
-                                                    <url-value v-model="scoped.row.href"></url-value>
-                                                </template>
-                                            </drag>
+                                            <drag-group :list="row.product_list" img-params="images" @onsort="product_list_sort($event, index)" @remove="product_list_remove($event, index)"></drag-group>
                                             <el-button class="mtb-20 w" @click="product_add(index)">+添加</el-button>
                                         </div>
                                     </template>
@@ -90,6 +78,7 @@
             </card-container>
             <!-- 商品显示的配置信息 -->
             <product-show-config :value="form"></product-show-config>
+            <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
         </el-form>
     </div>
 </template>
@@ -202,14 +191,24 @@ const product_list_remove = (index: number, product_index: number) => {
 const product_list_sort = (item: any, index: number) => {
     form.value.tabs_list[index].product_list = item;
 };
+let click_index = 0;
 const product_add = (index: number) => {
-    form.value.tabs_list[index].product_list.push({
-        id: get_math(),
-        src: 'carousel',
-        new_src: [],
-        href: '',
+    click_index = index;
+    url_value_dialog_visible.value = true;
+};
+
+// 打开弹出框
+const url_value_dialog_visible = ref(false);
+// 弹出框选择的内容
+const url_value_dialog_call_back = (item: any[]) => {
+    item.forEach((item: any) => {
+        form.value.tabs_list[click_index].product_list.push({
+            id: get_math(),
+            new_url: [],
+            new_title: item.title,
+            link: item,
+        });
     });
-    // emit('update:value', form);
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index cfa9a6de..9749ef7b 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -5,6 +5,7 @@ interface DefaultProductList {
         product_check: string;
         goods_category_ids: string[];
         goods_brand_ids: string[];
+        product_show_list: string[];
         product_list: string[];
         is_price_solo: boolean;
         number: number;
@@ -45,6 +46,7 @@ const defaultProductList: DefaultProductList = {
     content: {
         product_style: '0',
         product_check: '0',
+        product_show_list: [],
         product_list: [],
         goods_category_ids: [],
         goods_brand_ids: [],