From d6522c3a0b2561b2813a125805fb507faeb886da Mon Sep 17 00:00:00 2001
From: gongfuxiang <fuxiang.gong@qq.com>
Date: Fri, 9 May 2025 23:54:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E5=AF=B9=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goods-compare/goods-compare.vue           |   8 +-
 pages/plugins/goodscompare/index/index.css    |  40 +++
 pages/plugins/goodscompare/index/index.vue    | 234 +++++++++++++++++-
 3 files changed, 273 insertions(+), 9 deletions(-)
 create mode 100644 pages/plugins/goodscompare/index/index.css

diff --git a/pages/plugins/goodscompare/components/goods-compare/goods-compare.vue b/pages/plugins/goodscompare/components/goods-compare/goods-compare.vue
index 93954cb2..f0fc66cd 100644
--- a/pages/plugins/goodscompare/components/goods-compare/goods-compare.vue
+++ b/pages/plugins/goodscompare/components/goods-compare/goods-compare.vue
@@ -17,16 +17,14 @@
                         <view class="data-list">
                             <block v-for="(item, index) in data_list" :key="index">
                                 <view class="goods-item flex-row align-c bs-bb padding-main pr wh-auto cp">
-                                    <view @tap="selected_event" :data-index="index" class="cart-selected pr z-i">
+                                    <view @tap="selected_event" :data-index="index" class="selected pr z-i">
                                         <iconfont :name="'icon-zhifu-' + (item.selected || false ? 'yixuan' : 'weixuan')" size="40rpx" :color="item.selected || false ? theme_color : '#999'"></iconfont>
                                     </view>
                                     <view class="item oh padding-left-main flex-1 flex-row">
                                         <image class="goods-image fl radius br" :src="item.images" :data-value="item.goods_url" @tap="url_event" mode="aspectFill"></image>
                                         <view class="goods-base padding-left-sm flex-1 pr">
-                                            <view :data-value="item.goods_url" @tap="url_event" class="cp">
-                                                <view class="cart-goods-title multi-text margin-bottom-sm fw-b">{{ item.title }}</view>
-                                            </view>
-                                            <view class="sales-price">{{item.symbol}}{{item.price}}</view>
+                                            <view class="goods-title multi-text cp" :data-value="item.goods_url" @tap="url_event">{{ item.title }}</view>
+                                            <view class="sales-price margin-top-sm">{{item.symbol}}{{item.price}}</view>
                                             <view class="cr-red text-size-xs pa right-0 bottom-0" :data-index="index" @tap="remove_event">{{$t('common.remove')}}</view>
                                         </view>
                                     </view>
diff --git a/pages/plugins/goodscompare/index/index.css b/pages/plugins/goodscompare/index/index.css
new file mode 100644
index 00000000..adee8cfa
--- /dev/null
+++ b/pages/plugins/goodscompare/index/index.css
@@ -0,0 +1,40 @@
+.table-container .head {
+    width: 240rpx;
+    padding-left: 20rpx;
+}
+.table-container .content,
+.table-container .goods-info .goods-title,
+.table-container .goods-info .goods-image {
+    width: 300rpx;
+}
+.table-container .goods-info .goods-image {
+    height: 300rpx;
+}
+.table-container .sticky {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    -webkit-box-shadow: 10rpx 0 20rpx rgb(145 145 145 / 20%);
+    -moz-box-shadow: 10rpx 0 20rpx rgb(145 145 145 / 20%);
+    box-shadow: 10rpx 16rpx 20rpx rgb(145 145 145 / 20%);
+}
+.table-container .sticky,
+.table-container .group,
+.table-container .group .content {
+    background: #f2f2f2;
+}
+.table-container .group:not(:first-child) {
+    border-left: 2rpx solid #f2f2f2 !important;
+}
+.table-container .head,
+.table-container .content {
+    height: 44rpx;
+}
+.table-container .head.goods_score,
+.table-container .content.goods_score{
+    height: 90rpx;
+}
+.table-container .table-header .head,
+.table-container .table-header .goods-info {
+    height: 428rpx;
+}
\ No newline at end of file
diff --git a/pages/plugins/goodscompare/index/index.vue b/pages/plugins/goodscompare/index/index.vue
index 02409e35..9125ae97 100644
--- a/pages/plugins/goodscompare/index/index.vue
+++ b/pages/plugins/goodscompare/index/index.vue
@@ -1,8 +1,234 @@
-<template>
-</template>
+<template>
+    <view :class="theme_view">
+        <view v-if="data_list_loding_status == 3" class="table-container wh-auto oh">
+            <scroll-view :scroll-x="true" class="scroll-view-horizontal">
+                <view class="table-header">
+                    <view class="dis-inline-block">
+                        <view class="padding-sm padding-bottom dis-inline-block sticky">
+                            <view class="head single-text">
+                                <view class="margin-top-xxxxl padding-top-xxxxl">
+                                    <checkbox-group @change="highlight_event">
+                                        <label>
+                                            <checkbox value="1" style="transform:scale(0.7)" />
+                                            <text class="va-m">高亮不同项</text>
+                                        </label>
+                                    </checkbox-group>
+                                </view>
+                                <view class="margin-top">
+                                    <checkbox-group @change="identical_event">
+                                        <label>
+                                            <checkbox value="1" style="transform:scale(0.7)" />
+                                            <text class="va-m">隐藏相同项</text>
+                                        </label>
+                                    </checkbox-group>
+                                </view>
+                            </view>
+                        </view>
+                        <block v-for="(item, index) in data.goods" :key="index">
+                            <view class="goods-info padding-sm br-l dis-inline-block">
+                                <image class="goods-image radius" :src="item.images" mode="aspectFit" :data-value="item.goods_url" @tap="url_event"></image>
+                                <view class="goods-title multi-text cp" :data-value="item.goods_url" @tap="url_event">{{item.title}}</view>
+                                <view class="sales-price margin-top-sm">{{item.show_price_symbol}}{{item.price}}{{item.show_price_unit}}</view>
+                            </view>
+                        </block>
+                    </view>
+                </view>
+                <block v-for="(item, index) in data.head" :key="index">
+                    <view class="table-body">
+                        <view class="dis-inline-block">
+                            <view class="group padding-sm br-t dis-inline-block sticky">
+                                <view class="head single-text fw-b">{{item.name}}</view>
+                            </view>
+                            <block v-for="(gv, gk) in data.goods" :key="gk">
+                                <view class="group padding-sm br-t br-l dis-inline-block">
+                                    <view class="content single-text"></view>
+                                </view>
+                            </block>
+                        </view>
+                    </view>
+                    <block v-for="(items, indexs) in item.data" :key="indexs">
+                        <view class="table-body">
+                            <view class="dis-inline-block">
+                                <view class="padding-sm br-t dis-inline-block sticky">
+                                    <view class="head single-text" :class="indexs">{{items}}</view>
+                                </view>
+                                <block v-for="(gv, gk) in data.goods" :key="gk">
+                                    <view class="padding-sm br-t br-l dis-inline-block">
+                                        <view v-if="item.key == 'specifications'" class="content single-text" :class="indexs">
+                                            <text v-if="(gv['specifications'] || null) != null && (gv['specifications'][indexs] || null)">{{gv['specifications'][indexs]}}</text>
+                                            <text v-else class="cr-grey-d">-</text>
+                                        </view>
+                                        <view v-else-if="item.key == 'parameters'" class="content single-text" :class="indexs">
+                                            <text v-if="(gv['parameters'] || null) != null && (gv['parameters'][indexs] || null)">{{gv['parameters'][indexs]}}</text>
+                                            <text v-else class="cr-grey-d">-</text>
+                                        </view>
+                                        <block v-else>
+                                            <view v-if="indexs == 'goods_score'" class="content single-text" :class="indexs">
+                                                <block v-if="(gv[indexs] || null) != null && gv[indexs]['score'] != undefined">
+                                                    <view>
+                                                        <text class="cr-grey text-size-xs">好评度</text>
+                                                        <text class="cr-red">
+                                                            <text class="text-size-lg fw-b">{{gv[indexs]['score']}}</text>
+                                                            <text>%</text>
+                                                            <text v-if="gv[indexs]['avg'] != undefined" class="text-size-xs margin-left-lg">
+                                                                <text class="cr-grey">评分</text>
+                                                                <text>{{gv[indexs]['avg']}}</text>
+                                                            </text>
+                                                        </text>
+                                                    </view>
+                                                    <view v-if="gv[indexs]['count'] != undefined" class="text-size-xs">
+                                                        <text class="cr-grey">累计评价</text>
+                                                        <text class="fw-b">{{gv[indexs]['count']}}</text>
+                                                        <text class="cr-grey">条</text>
+                                                    </view>
+                                                </block>
+                                            </view>
+                                            <view v-else-if="indexs == 'give_integral'" class="content single-text" :class="indexs">
+                                                <text class="cr-grey text-size-xs">售价</text>
+                                                <text>{{gv[indexs]}}%比例</text>
+                                            </view>
+                                            <view v-else-if="indexs == 'inventory'" class="content single-text" :class="indexs">{{gv[indexs]}}{{gv['inventory_unit']}}</view>
+                                            <view v-else class="content single-text" :class="indexs">{{gv[indexs]}}</view>
+                                        </block>
+                                    </view>
+                                </block>
+                            </view>
+                        </view>
+                    </block>
+                </block>
+            </scroll-view>
+        </view>
+        <block v-else>
+            <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
+        </block>
+
+        <!-- 公共 -->
+        <component-common ref="common"></component-common>
+    </view>
+</template>
+<script>
+    const app = getApp();
+    import componentCommon from '@/components/common/common';
+    import componentNoData from '@/components/no-data/no-data';
+    import componentBottomLine from '@/components/bottom-line/bottom-line';
+    export default {
+        data() {
+            return {
+                theme_view: app.globalData.get_theme_value_view(),
+                data_list_loding_status: 1,
+                data_list_loding_msg: '',
+                data_bottom_line_status: false,
+                params: null,
+                data: {}
+            };
+        },
+
+        components: {
+            componentCommon,
+            componentNoData,
+            componentBottomLine
+        },
+
+        onLoad(params) {
+            // 调用公共事件方法
+            app.globalData.page_event_onload_handle(params);
+
+            // 设置参数
+            this.setData({
+                params: app.globalData.launch_params_handle(params),
+            });
+
+            // 数据加载
+            this.init();
+        },
+
+        onShow() {
+            // 调用公共事件方法
+            app.globalData.page_event_onshow_handle();
+
+            // 公共onshow事件
+            if ((this.$refs.common || null) != null) {
+                this.$refs.common.on_show();
+            }
+        },
+
+        // 下拉刷新
+        onPullDownRefresh() {
+            this.get_data();
+        },
+
+        methods: {
+            // 初始化
+            init() {
+                var user = app.globalData.get_user_info(this, 'init');
+                if (user != false) {
+                    this.get_data();
+                } else {
+                    this.setData({
+                        data_list_loding_status: 0,
+                        data_bottom_line_status: false,
+                    });
+                }
+            },
+
+            // 获取数据
+            get_data() {
+                uni.request({
+                    url: app.globalData.get_request_url('index', 'index', 'goodscompare'),
+                    method: 'POST',
+                    data: this.params,
+                    dataType: 'json',
+                    success: (res) => {
+                        uni.stopPullDownRefresh();
+                        if (res.data.code == 0) {
+                            this.setData({
+                                data_bottom_line_status: true,
+                                data_list_loding_msg: '',
+                                data_list_loding_status: 3,
+                                data: res.data.data || {},
+                            });
+                        } else {
+                            this.setData({
+                                data_list_loding_status: 0,
+                                data_list_loding_msg: res.data.msg,
+                            });
+                        }
+                    },
+                    fail: () => {
+                        uni.stopPullDownRefresh();
+                        this.setData({
+                            data_list_loding_msg: this.$t('common.internet_error_tips'),
+                            data_list_loding_status: 2,
+                        });
+                    },
+                });
+            },
 
-<script>
-</script>
+            // 高亮不同项
+            highlight_event(e) {
+                if(e.detail.value.length > 0) {
+                    console.log('选择');
+                } else {
+                    console.log('取消');
+                }
+            },
 
+            // 隐藏相同项
+            identical_event(e) {
+                if(e.detail.value.length > 0) {
+                    console.log('选择');
+                } else {
+                    console.log('取消');
+                }
+            },
+
+            // url事件
+            url_event(e) {
+                app.globalData.url_event(e);
+            }
+        },
+    };
+</script>
 <style>
+    @import './index.css';
 </style>
\ No newline at end of file