From fcc2e55be2ed8f3c25f72c41b563c965c3761aae Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 6 Feb 2025 18:28:16 +0800
Subject: [PATCH] add logic for tid1878

---
 src/pages.json                                     |   6 +
 src/subpackage/mall/components/bottom_modal.vue    |  50 +++
 src/subpackage/mall/components/line_button.vue     |   2 +-
 src/subpackage/mall/components/number_operate.vue  |  18 +-
 .../mall/components/specification_modal.vue        | 144 +++++-
 src/subpackage/mall/js/api.js                      |   6 +-
 src/subpackage/mall/pages/goods_info.vue           | 484 +++++++++++++++++++++
 src/subpackage/mall/pages/index.vue                |   9 +-
 src/subpackage/mall/static/images/arrow_873.png    | Bin 0 -> 237 bytes
 src/subpackage/mall/static/images/arrow_9ad.png    | Bin 0 -> 242 bytes
 src/subpackage/mall/static/images/home.png         | Bin 0 -> 1260 bytes
 src/subpackage/mall/static/images/selected.png     | Bin 0 -> 701 bytes
 src/subpackage/mall/static/images/share.png        | Bin 0 -> 2100 bytes
 .../mall/static/images/shopping_cart.png           | Bin 0 -> 1714 bytes
 src/subpackage/mall/static/images/star.png         | Bin 0 -> 362 bytes
 src/uni.scss                                       |  12 +
 16 files changed, 714 insertions(+), 17 deletions(-)
 create mode 100644 src/subpackage/mall/components/bottom_modal.vue
 create mode 100644 src/subpackage/mall/pages/goods_info.vue
 create mode 100644 src/subpackage/mall/static/images/arrow_873.png
 create mode 100644 src/subpackage/mall/static/images/arrow_9ad.png
 create mode 100644 src/subpackage/mall/static/images/home.png
 create mode 100644 src/subpackage/mall/static/images/selected.png
 create mode 100644 src/subpackage/mall/static/images/share.png
 create mode 100644 src/subpackage/mall/static/images/shopping_cart.png
 create mode 100644 src/subpackage/mall/static/images/star.png

diff --git a/src/pages.json b/src/pages.json
index 99ab599..005c6e3 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -904,6 +904,12 @@
 					"style" : {
 						"navigationBarTitleText": "商城" 
 					}
+				},
+				{
+					"path": "pages/goods_info",
+					"style" : {
+						"navigationBarTitleText": "商品详情" 
+					}
 				}
 			]
 		}
diff --git a/src/subpackage/mall/components/bottom_modal.vue b/src/subpackage/mall/components/bottom_modal.vue
new file mode 100644
index 0000000..09a83f5
--- /dev/null
+++ b/src/subpackage/mall/components/bottom_modal.vue
@@ -0,0 +1,50 @@
+<template>
+    <view class="bottom-modal">
+        <view class="bm-container">
+            <view class="bc-title">配送说明</view>
+            <view class="bc-bot-btn">
+                <view class="bbb-item">关闭</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .bottom-modal{
+        position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, .5);
+        .bm-container{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            padding: 50rpx 20upx 10upx;
+            width: 100%;
+            background-color: #fff;
+            @include isPd(10upx);
+            .bc-title{
+                text-align: center;
+                @include flcw(32upx, 44upx, #333, 500);
+                @include tHide;
+            }
+            .bc-bot-btn{
+                padding-top: 18upx;
+                .bbb-item{
+                    text-align: center;
+                    background: $mColor;
+                    border-radius: 44upx;
+                    @include flcw(32upx, 88upx, #fff, 500);
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/components/line_button.vue b/src/subpackage/mall/components/line_button.vue
index 4ed1f46..84b31fd 100644
--- a/src/subpackage/mall/components/line_button.vue
+++ b/src/subpackage/mall/components/line_button.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="line-button" hover-class="lb-hover">
+    <view class="line-button" hover-class="lb-hover" @click="$emit('click')">
         <slot>confirm</slot>
     </view>
 </template>
diff --git a/src/subpackage/mall/components/number_operate.vue b/src/subpackage/mall/components/number_operate.vue
index cc2035c..503d6b9 100644
--- a/src/subpackage/mall/components/number_operate.vue
+++ b/src/subpackage/mall/components/number_operate.vue
@@ -2,23 +2,35 @@
 <template>
     <view class="number-operate">
         <view class="no-opt" @click="optBtn(-1)"></view>
-        <input type="digit" class="no-ipt" :value="value" @input="iptChange" >
+        <input type="digit" disabled class="no-ipt" :value="value" @input="iptChange" >
         <view class="no-opt" @click="optBtn(1)"></view>
     </view>
 </template>
 
 <script>
+import { showNone } from '@/utils/util';
 export default {
     props: {
         value: {
             type: Number,
             default: 1
+        },
+        max: {
+            type: Number,
+            default: 999
+        },
+        min: {
+            type: Number,
+            default: 1
         }
     },
     methods: {
         optBtn(val){
-            let { value } = this;
-            this.$emit('input', val + value);
+            let { value, min, max } = this;
+            let _val = val + value;
+            if(val === 1 && _val > max)return showNone('不能再加啦~');
+            if(val === -1 && _val < min)return showNone('不能再减啦~');
+            this.$emit('input', _val);
         },
         iptChange(e){
             this.$emit('input', +e.detail.value);
diff --git a/src/subpackage/mall/components/specification_modal.vue b/src/subpackage/mall/components/specification_modal.vue
index b3cce2e..767504b 100644
--- a/src/subpackage/mall/components/specification_modal.vue
+++ b/src/subpackage/mall/components/specification_modal.vue
@@ -7,10 +7,10 @@
                     <view class="sr-name">{{ initData.name || '-' }}</view>
                     <view class="sr-bottom">
                         <view class="sb-price">
-                            <view class="sp-amount">¥{{ initData.price || '0' }}</view>
+                            <view class="sp-amount">¥{{ showPrice || '0' }}</view>
                             <!-- <view class="sp-unit">/2支</view> -->
                         </view>
-                        <view class="sb-stock">库存：6</view>
+                        <view class="sb-stock" v-if="goodsSpecSelInfo">库存：{{ goodsSpecSelInfo.nums || 0 }}</view>
                     </view>
                 </view>
             </view>
@@ -34,9 +34,9 @@
             </scroll-view>
             <view class="num-bar">
                 <view class="nb-txt">购买数量</view>
-                <number-operate v-model="goodsNum"></number-operate>
+                <number-operate v-model="goodsNum" :min='1' :max="getMaxStock"></number-operate>
             </view>
-            <line-button>加入购物车</line-button>
+            <line-button @click="addCartBtn">加入购物车</line-button>
         </view>
     </modal-box>
 </template>
@@ -58,6 +58,40 @@ export default {
         goodsSpecArr(){
             let { initData } = this;
             return initData?.specArr ?? []
+        },
+        isCompleteSpecSelected(){
+            let { goodsSpecArr, specSelectedArr } = this;
+            let _idsForGSA = goodsSpecArr.map(item => +item.id);
+            let _idsForSSA = specSelectedArr.map(item => item.pid);
+            return this.bothArrIsEqual(_idsForGSA, _idsForSSA);
+        },
+        showPrice(){
+            let { initData, goodsSpecSelInfo } = this;
+            if(goodsSpecSelInfo){
+                return goodsSpecSelInfo?.price || 0;
+            }else{
+                return initData?.price || 0;
+            }
+        },
+        getMaxStock(){
+            let { goodsSpecSelInfo } = this;
+            return goodsSpecSelInfo?.nums || 0;
+        },
+    },
+    watch: {
+        specSelectedArr: {
+            handler(nVal){
+                let { isCompleteSpecSelected, initData } = this;
+                this.goodsSpecSelInfo = null;
+                if(nVal.length&&isCompleteSpecSelected){
+                    this.goodsSpecSel({
+                        brand_id: initData?.brand_id || '',
+                        id: initData?.id || '',
+                        spec_arr: nVal.map(item => item.val)
+                    })
+                }
+            }
+
         }
     },
     data() {
@@ -68,33 +102,96 @@ export default {
                 /**
                  * @param {Number} poster 海报
                  * @param {Number} id 商品id
+                 * @param {Number} brand_id 商品品牌id
                  * @param {String} name 商品名称
                  * @param {Number} price 商品价格
-                 * 
+                 * @param {Array} specArr 商品规格
+                 *  @param {Number} specArr[].id 规格id
+                 *  @param {String} specArr[].name 规格名称
+                 *  @param {Array} specArr[].value 规格值
                  */
             },
-            specArr: [],
-            specSelectedArr: [],
+
+            specSelectedArr: [
+                /**
+                 * {
+                 *   @param {Number} pid 组规格id
+                 *   @param {String} val 规格名称
+                 * }
+                 */
+            ],
+            /**
+             * @param {Object} goodsSpecSelInfo 库存信息
+             * @param {Number} goodsSpecSelInfo.price  购买价格
+             * @param {Number} goodsSpecSelInfo.nums   库存数量
+             * @param {Number} goodsSpecSelInfo.esh_id 购物车id
+             */
+            goodsSpecSelInfo: null,
         }
     },
     methods: {
-        specItemClick(e, k){
-            this.specSelectedArr.push({ pid: e?.id, val: k });
+        // 加入购物车
+        addCartBtn: debounce(async function() {
+            let { goodsNum, initData, goodsSpecSelInfo, specSelectedArr, isCompleteSpecSelected } = this;
+            if(!isCompleteSpecSelected)return showNone('请选择规格！');
+            if(goodsNum == 0)return showNone('请选择购买数量！');
+            if(goodsSpecSelInfo === null)return showNone('库存加载失败，稍后重试！');
+            if(goodsSpecSelInfo?.nums < goodsNum)return showNone('库存不足！');
+            await this.goodsCartAdd({
+                brand_id: initData?.brand_id || '',
+                id: initData?.id || '',
+                nums: goodsNum,
+                spec_arr: specSelectedArr.map(item => item.val),
+            })
+            
+            setTimeout(_=>{
+                this.hide();
+                this.resetData();
+            }, 1000);
+
+        }, 300, true),
+        // 判断两个数组是否相等
+        bothArrIsEqual(arr1, arr2){
+            return arr1.length === arr2.length && arr1.every(item => arr2.includes(item));
         },
+        // 规格选择
+        specItemClick: debounce(function(e, k){
+            let { specSelectedArr} = this;
+            let _arrForCurPid = specSelectedArr.filter(item => item.pid === e?.id);
+            let _arrForNotCurPid = specSelectedArr.filter(item => item.pid !== e?.id);
+            if(_arrForCurPid.some(item => item.val === k)){
+                this.specSelectedArr = _arrForNotCurPid;
+            }else{
+                this.specSelectedArr = [ ..._arrForNotCurPid, { pid: e?.id, val: k } ]
+            }
+            this.$nextTick(this.$forceUpdate);
+        }, 300, true),
+        // 获取当前规格是否被选中
         getActiveBol(val){
             let { specSelectedArr } = this;
             return specSelectedArr.some(item => {
                 let [ id, spec] = val.split('_');
-                return item.pid === id && item.val === spec;
+                return +item.pid === +id && item.val === spec;
             });
         },
+        // 显示弹窗
         alert(data){
+            let { initData } = this;
             this.isShow = true;
+            if(initData?.id !== data?.id || initData?.brand_id !== data?.brand_id)this.resetData();
             this.initData = data ?? {};
         },
+        // 重置数据
+        resetData(){
+            this.goodsNum = 1;
+            this.specSelectedArr = [];
+            this.goodsSpecSelInfo = null;
+        },
+        // 隐藏弹窗
         hide(){
             this.isShow = false;
         },
+        // 添加购物车
         goodsCartAdd({ brand_id, id = '', nums = 1, spec_arr = [] }){
 			showLoad();
             return server.post({
@@ -122,6 +219,33 @@ export default {
                 console.warn('subpackage mall components specification goodsCartAdd err --->', err);
             })
 		},
+        // 获取库存
+        goodsSpecSel({ brand_id = '', id = '', spec_arr = [] }){
+			showLoad();
+            return server.post({
+                url: MALL_API.goodsSpecSel,
+                data: { brand_id, id, spec_arr },
+                isDefaultGet: false,
+            })
+            .then(res => {
+				hideLoad();
+                let _data = res?.data || {};
+                if(_data.code === 0){
+                    console.log('subpackage mall components specification goodsSpecSel res --->', _data);
+                    return this.goodsSpecSelInfo = _data?.data ?? {};
+                }else{
+                    return Promise.reject(_data);
+                }
+            })
+            .catch(err => {
+                hideLoad();
+                showModal({
+                    title: '提示',
+                    content: err.message || '加载失败！'
+                })
+                console.warn('subpackage mall components specification goodsSpecSel err --->', err);
+            })
+		},
     }
 }
 </script>
diff --git a/src/subpackage/mall/js/api.js b/src/subpackage/mall/js/api.js
index 457697a..5de9aca 100644
--- a/src/subpackage/mall/js/api.js
+++ b/src/subpackage/mall/js/api.js
@@ -1,8 +1,10 @@
-import { ORIGIN } from '@/js/api';
-
+// import { ORIGIN } from '@/js/api';
+const ORIGIN = `https://test.ouxuanzhineng.cn`;  // 测试 
 export const MALL_API = { 
     homeShow:`${ORIGIN}/shop2/homeShow`,  // 首页设置信息
     goodsCartAdd:`${ORIGIN}/shop2/goodsCartAdd`,  //购物车 - 添加商品
+    goodsSpecSel:`${ORIGIN}/shop2/goodsSpecSel`,  //商品规格选择【返回库存&价格】
+    goodsInfo:`${ORIGIN}/shop2/goodsInfo`, //商品详情
 }
 
 export default { ORIGIN, MALL_API };
\ No newline at end of file
diff --git a/src/subpackage/mall/pages/goods_info.vue b/src/subpackage/mall/pages/goods_info.vue
new file mode 100644
index 0000000..6a0c4db
--- /dev/null
+++ b/src/subpackage/mall/pages/goods_info.vue
@@ -0,0 +1,484 @@
+<template>
+    <view class="goods-info">
+        <view class="gi-header">
+            <!-- banner 图 -->
+            <view class="gi-box">
+                <swiper class="gi-banner" @change="curBannerIdx = $event.detail.current" autoplay>
+                    <swiper-item v-for="(e, i) in goodsInfo.product_imgs" :key="i">
+                        <image class="gb-img" mode="aspectFill" :src="e"></image>
+                    </swiper-item>
+                </swiper>
+                <button class="gb-share">
+                    <image class="gs-img" mode="aspectFit" src="/subpackage/mall/static/images/share.png"></image>
+                </button>
+                <view class="gb-num" v-if="bannerNumStr">{{ bannerNumStr }}</view>
+            </view>
+            <!-- 价格 名称 等文案信息 -->
+            <view class="gi-txt-info">
+                <view class="gti-price">
+                    <view class="gp-sell">¥{{ showPrice || 0 }}</view>
+                    <view class="gp-del" v-if="isShowDelPrice">价格¥{{ goodsInfo.product_spec_single_info.price_show || '0' }}</view>
+                </view>
+                <view class="gti-discounts">
+                    <!-- <view class="gd-left">
+                        <view class="gl-integration">5000积分</view>
+                        <view class="gl-tag">特价</view>
+                    </view> -->
+                    <view class="gd-right" v-if="false">
+                        <text class="gr-txt">领券</text>
+                        <image class="gr-img" mode="aspectFit" src="/subpackage/mall/static/images/arrow_873.png"></image>
+                    </view>
+                </view>
+                <view class="gti-bottom">
+                    <view class="gb-left">
+                        <view class="gb-name">{{ goodsInfo.product_name || '' }}</view>
+                        <view class="gb-desc">{{ goodsInfo.product_text || '' }}</view>
+                    </view>
+                    <view class="gb-right">
+                        <view class="gr-num">{{ getCommentLevelTxt }}</view>
+                        <view class="gr-star-ls">
+                            <block v-for="i in getCommentLevelStartNum" :key="i">
+                                <image class="gsl-img" mode="aspectFit" src="/subpackage/mall/static/images/star.png"></image>
+                            </block>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- 配送 说明 已选 -->
+        <view class="gi-selected">
+            <view class="gs-item">
+                <view class="gs-name">配送</view>
+                <view class="gs-content">
+                    <text class="gc-txt">{{ getDeliveryTxt }}</text>
+                </view>
+                <image class="gs-icon" mode="aspectFit" src="/subpackage/mall/static/images/arrow_9ad.png"></image>
+            </view>
+            <view class="gs-item">
+                <view class="gs-name">说明</view>
+                <view class="gs-content">
+                    <block v-for="(e, i) in getExplianKeyTxt" :key="i">
+                        <image class="gc-icon" mode="aspectFit" src="/subpackage/mall/static/images/selected.png"></image>
+                        <text class="gc-txt">{{ e || '' }}</text>
+                    </block>
+                </view>
+                <image class="gs-icon" mode="aspectFit" src="/subpackage/mall/static/images/arrow_9ad.png"></image>
+            </view>
+            <view class="gs-item">
+                <view class="gs-name">已选</view>
+                <view class="gs-content">
+                    <block v-for="i in 3" :key="i">
+                        <image class="gc-icon"></image>
+                        <text class="gc-txt">配送/自提</text>
+                    </block>
+                </view>
+                <image class="gs-icon" mode="aspectFit" src="/subpackage/mall/static/images/arrow_9ad.png"></image>
+            </view>
+        </view>
+        <!-- 商品详情 -->
+        <view class="gi-detail">
+            <view class="gd-title">
+                <view class="gt-icon"></view>
+                <view class="gt-txt">商品详情</view>
+                <view class="gt-icon"></view>
+            </view>
+            <rich-text class="gd-rich-txt" :nodes="getRichTxtForDetail"></rich-text>
+        </view>
+        <!-- 底部悬浮按钮 -->
+        <view class="gd-fixed-bar">
+            <view class="gfb-left">
+                <view class="gl-box">
+                    <image class="gb-icon" mode="aspectFit" src="/subpackage/mall/static/images/home.png"></image>
+                    <view class="gb-txt">首页</view>
+                </view>
+                <view class="gl-box">
+                    <image class="gb-icon" mode="aspectFit" src="/subpackage/mall/static/images/shopping_cart.png"></image>
+                    <view class="gb-txt">购物车</view>
+                    <view class="gb-num">99</view>
+                </view>
+            </view>
+            <view class="gfb-btns">
+                <view class="gb-item">加入购物车</view>
+                <view class="gb-item">立即购买</view>
+            </view>
+        </view>
+        
+        <bottom-modal></bottom-modal>
+    </view>
+</template>
+
+<script>
+import { routeTo, showLoad, hideLoad, showModal,  tsRoute, jsonStr, jsonPar } from "@/utils/util.js";
+import bottomModal from "../components/bottom_modal.vue";
+import { MALL_API } from "../js/api";
+import server from "../js/server";
+export default {
+    components: {
+        bottomModal
+    },
+    data(){
+        return {
+            goodsInfo: {},
+            curBannerIdx: 0,
+        }
+    },
+    computed: {
+        // banner页码
+        bannerNumStr(){
+            let { goodsInfo, curBannerIdx } = this;
+            if(goodsInfo?.product_imgs?.length >= 1)return `${curBannerIdx + 1}/${goodsInfo?.product_imgs?.length ?? ''}`;
+            return '';
+        },
+        // <!-- product_spec_multi等于0是单规格 才显示划线价格 -->
+        isShowDelPrice(){
+            let { goodsInfo } = this;
+            return goodsInfo?.product_spec_multi == 0 && goodsInfo?.product_spec_single_info?.price_show > 0
+        },
+        // 显示价格
+        showPrice(){
+            let { goodsInfo } = this;
+            if(goodsInfo?.product_spec_multi == 0)return goodsInfo?.product_spec_single_info?.price ?? 0;
+            return goodsInfo?.product_price ?? 0;
+        },
+        // 商品详情富文本
+        getRichTxtForDetail(){
+            let { goodsInfo } = this;
+			let _html = goodsInfo.product_desc || '';
+			return _html.replace(/<img/gi, "<img style='width:100%;height:auto;'");
+        },
+        // 配送文案
+        getDeliveryTxt(){
+            /**
+             * @param {Number} product_logistics 0-仅支持物流 1-仅支持自提 2-支持物流+自提
+             * */ 
+            let { goodsInfo } = this;
+            let _txtArr = ['快递', '自提', '快递/自提'];
+            let _logisticsNum = goodsInfo?.product_logistics;
+            if([0,1,2].includes(_logisticsNum))return _txtArr[_logisticsNum];
+            return '';
+        },
+        // 说明列表
+        getExplianKeyTxt(){
+            let { goodsInfo } = this;
+            let _txtArr = Object.keys(goodsInfo?.product_service_tags ?? {});
+            if(_txtArr.length >= 1)return _txtArr.splice(0, 3);
+        },
+        // 评价等级文案
+        getCommentLevelTxt(){
+            let { goodsInfo } = this;
+            let _num = goodsInfo?.product_comment_level ?? 0;
+            if(_num%1==0) return _num + '.0';
+            return _num;
+        },
+        // 评价等级星星数量
+        getCommentLevelStartNum(){
+            let { goodsInfo } = this;
+            let _num = +(goodsInfo?.product_comment_level ?? 0);
+            if(isNaN(_num))return 0;
+            let _rNum = Math.round(_num)
+            return _rNum > 5 ? 5 : _rNum;
+        }
+    },
+    onLoad(options){
+        this.getGoodsInfo({
+            brand_id: options?.brand_id ?? '',
+            id: options?.id ?? ''
+        })
+    },
+    methods: {
+        getGoodsInfo({ brand_id, id }){
+			showLoad();
+            return server.post({
+                url: MALL_API.goodsInfo,
+                data: { brand_id, id },
+                isDefaultGet: false,
+            })
+            .then(res => {
+				hideLoad();
+                let _data = res?.data || {};
+                if(_data.code === 0){
+                    console.log('subpackage mall pages goods_info getGoodsInfo res --->', _data);
+                    return this.goodsInfo = _data?.data ?? {};
+                }else{
+                    return Promise.reject(_data);
+                }
+            })
+            .catch(err => {
+                hideLoad();
+                showModal({
+                    title: '提示',
+                    content: err.message || '加载失败！'
+                })
+                console.warn('subpackage mall pages goods_info getGoodsInfo err --->', err);
+            })
+		},
+    }
+}
+</script>
+
+<style lang="scss"> 
+    .goods-info{
+        @include isPd(134upx);
+    }
+    .gi-box{
+        position: relative;
+        .gi-banner{
+            height: 750rpx;
+            .gb-img{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .gb-share{
+            @include clearBtn;
+            position: absolute;
+            top: 20rpx;
+            right: 20rpx;
+            width: 56rpx;
+			height: 56rpx;
+            .gs-img{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .gb-num{
+            position: absolute;
+			bottom: 20rpx;
+			right: 20rpx;
+            padding: 0 22rpx;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 20rpx;
+            text-align: center;
+            @include flcw(22upx, 32upx, #fff);
+        }
+    }
+
+    .gi-txt-info{
+        padding: 20rpx 30rpx;
+		background-color: #fff;
+        .gti-price{
+            display: flex;
+            align-items: baseline;
+            .gp-sell{
+                @include flcw(48upx, 66upx, #FF873D, 500);
+                @include tHide;
+            }
+            .gp-del{
+                margin-left: 44rpx;
+                flex-shrink: 0;
+                max-width: 30%;
+                text-decoration: line-through;
+                @include flcw(24rpx, 34upx, #9C9C9F);
+                @include tHide;
+            }
+        }
+        .gti-discounts{
+            @include ctf(flex-end);
+            .gd-left{
+                flex-grow: 1;
+                @include ctf;
+                .gl-integration{
+                    @include flcw(24rpx, 34upx, #FF873D);
+                    @include tHide;
+                }
+                .gl-tag{
+                    flex-shrink: 0;
+                    margin-left: 32upx;
+                    text-align: center;
+                    width: 58upx;
+                    border-radius: 6upx;
+                    border: 1px solid rgba($color: #E60213, $alpha: .5);
+                    @include flcw(20upx, 28upx, #E60213);
+                }
+            }
+            .gd-right{
+                flex-shrink: 0;
+                margin-top: 10upx;
+                margin-left: 20upx;
+                @include ctf(flex-end);
+                .gr-txt{
+                    @include flcw(24rpx, 34upx, #FF873D);
+                }
+                .gr-img{
+                    width: 28rpx;
+                    height: 28rpx;
+                    margin-left: 10rpx;
+                }
+            }
+        }
+        .gti-bottom{
+            margin-top: 20upx;
+            @include ctf;
+            .gb-left{
+                flex-grow: 1;
+                .gb-name{
+                    @include flcw(28rpx, 40rpx, #333, 500);
+                    @include tHide(2);
+                }
+                .gb-desc{
+                    @include flcw(24rpx, 34upx, #9c9c9f);
+                    @include tHide(2);
+                }
+            }
+            .gb-right{
+                margin-left: 20upx;
+                flex-shrink: 0;
+                max-width: 25%;
+                .gr-num{
+                    text-align: center;
+                    @include flcw(36rpx, 42upx, #333, 700);
+                    @include tHide;
+                }
+                .gr-star-ls{
+                    margin-top: 10upx;
+                    @include ctf(center);
+                    .gsl-img{
+                        width: 28upx;
+                        height: 28upx;
+                    }
+                }
+            }
+        }
+    }
+    
+    .gi-selected{
+        margin-top: 20rpx;
+        padding: 20rpx 30rpx 20rpx 26rpx;
+        background: #fff;
+        .gs-item{
+            padding: 20rpx 0;
+            @include ctf;
+            .gs-name{
+                flex-shrink: 0;
+                margin-right: 40rpx;
+                @include flcw(24upx, 34upx, #9a9a9d);
+            }
+            .gs-content{
+                flex-grow: 1;
+                font-size: 0;
+                @include tHide;
+                .gc-icon{
+                    margin-right: 8upx;
+                    margin-bottom: -2rpx;
+                    vertical-align: baseline;
+                    width: 24rpx;
+                    height: 24rpx;
+                }
+                .gc-txt{
+                    @include flcw(24upx, 34upx, #333);
+                    &+.gc-icon{
+                        margin-left: 16upx;
+                    }
+                }
+            }
+            .gs-icon{
+                flex-shrink: 0;
+                margin-left: 20upx;
+                width: 28rpx;
+				height: 28rpx;
+            }
+        }
+    }
+    .gi-detail{
+        margin-top: 20rpx;
+		background-color: #fff;
+        .gd-title{
+            padding: 40upx 0;
+            @include ctf(center);
+            .gt-icon{
+                @include ctf;
+                &::before, &::after{
+                    content: '';
+                    display: block;
+					background-color: #d8d8d8;
+                }
+                &::before{
+                    width: 60rpx;
+					height: 2rpx;
+                }
+                &::after{
+                    transform: translateX(-50%);
+                    width: 8rpx;
+                    height: 8rpx;
+                    border-radius: 8rpx;
+                }
+            }
+            .gt-txt{
+                margin: 0 40rpx;
+                @include flcw(28upx, 40upx, #333);
+                &+.gt-icon{
+                    flex-direction: row-reverse;
+                    &::after{
+                        transform: translateX(50%);
+                    }
+                }
+            }
+        }
+        .gd-rich-txt{
+            margin-top: 50upx;
+            padding-bottom: 30upx;
+        }
+    }
+
+    .gd-fixed-bar{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        padding: 20upx 24upx 10upx;
+        background: #fff;
+        @include isPd(10upx);
+        @include ctf(space-between);
+        .gfb-left{
+            @include ctf;
+            flex-grow: 1;
+            .gl-box{
+                position: relative;
+                font-size: 0;
+                text-align: center;
+                &+.gl-box{
+                    margin-left: 26upx;
+                }
+                .gb-icon{
+                    display: block;
+                    margin: 0 auto;
+                    width: 48upx;
+                    height: 48upx;
+                }
+                .gb-txt{
+                    margin-top: 2upx;
+                    text-align: center;
+                    @include flcw(20upx, 28upx, #9A9A9D, 500);
+                }
+                .gb-num{
+                    position: absolute;
+                    right: -20upx;
+                    top: -8upx;
+                    width: 36rpx;
+                    text-align: center;
+                    border-radius: 36rpx;
+                    background-color: #e60213;
+                    @include flcw(22rpx, 36rpx, #fff);
+                }
+            }
+        }
+        .gfb-btns{
+            flex-shrink: 0;
+            @include ctf(flex-end);
+            .gb-item{
+                width: 260rpx;
+                border-radius: 44rpx;
+				border: 2rpx solid #009874;
+                text-align: center;
+                @include flcw(32rpx, 84upx, $mColor, 500);
+                &+.gb-item{
+                    margin-left: 20upx;
+                    border-width: 0upx;
+                    line-height: 88upx;
+                    color: #fff;
+                    background: linear-gradient(90deg, #44d7b6 0%, #009874 100%);
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/pages/index.vue b/src/subpackage/mall/pages/index.vue
index 5d01319..6fb1ddb 100644
--- a/src/subpackage/mall/pages/index.vue
+++ b/src/subpackage/mall/pages/index.vue
@@ -76,7 +76,7 @@ import indexSearchBar from "../components/index_search_bar.vue";
 import indexClassifyBar from "../components/index_classify_bar.vue";
 import goodsItem from "../components/goods_item.vue";
 import spacificationModal from "../components/specification_modal.vue";
-import { routeTo, debounce, showLoad, hideLoad, showModal, showNone, tsRoute, jsonStr } from "@/utils/util.js";
+import { routeTo, showLoad, hideLoad, showModal,  tsRoute, jsonStr } from "@/utils/util.js";
 import { MALL_API } from "../js/api";
 import server from "../js/server";
 export default {
@@ -150,7 +150,14 @@ export default {
             // 如果商品是多个规格属性的，则出现弹窗给用户选择规格加入购物车，如果是单规格的则直接加入购物车
 			// 根据product_spec_multi字段做判断 等于1则是多规格
             if(e.product_spec_multi == 1){
+                // e.product_spec.push({
+                //     id: 3,
+                //     name: 'test',
+                //     value: ['test1', 'test2', 'test3']
+                // })
                 this.$refs.spacificationModal.alert({
+                    id: e?.id ?? '',
+                    brand_id: brand_id,
                     poster: e?.product_imgs?.[0] ?? '',
                     name: e?.product_name ?? '',
                     price: e?.product_price ?? '',
diff --git a/src/subpackage/mall/static/images/arrow_873.png b/src/subpackage/mall/static/images/arrow_873.png
new file mode 100644
index 0000000000000000000000000000000000000000..71d442a778ea32a3bd7d3694d4b2c02aa0ec3b88
GIT binary patch
literal 237
zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZH!3-ohr2EzaDa!z#5LY1mzugv$tYHkB{~fj<
z)Nb>?6Uest-v&{DLS|*vl>s#il?3?(Gu&Sx`};?te`c^}wDrdWi~CAHeyrF7lnwNB
zaSYKofA*v|UxNY<>w$0=t&aWo{%=@TeM>;B<tE>>(2g5ELY>R!o-4ZIdn_$hGWuR=
z|3Y2a*}cBA7S>8<)}3p8%D=sM$DG63pALj*tNmmQ`Oj7_-B6SQG@QZH)z4*}Q$iB}
DOEqFK

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/arrow_9ad.png b/src/subpackage/mall/static/images/arrow_9ad.png
new file mode 100644
index 0000000000000000000000000000000000000000..b76426a0157f3ffa19922a2c06814b47820b5cbf
GIT binary patch
literal 242
zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZH!3-ohr2EzaDVqSF5LX~QYu4P^v**m5Id|sF
znX_lln>~B}oH;-ei000kH4i8|XU-f511Jb&0LACc1Br|Gq=*9b3zr1>1vC6waaZn<
ze^zo#u&4FM1B?4gW#3h7$p%UXdAc};Xq-QL(wnbAfrs@#(>A3C+rRH$y)yfEQiMR7
zwaJ=8I(eJ2BL1>yGv;o)dS%O}cbB$2J)V|6IrY!J%1wI?994YB=5B3q>%hg8RTEZ+
cy?VlUC5Y|rrFD#&K+_pKUHx3vIVCg!08#I0LjV8(

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/home.png b/src/subpackage/mall/static/images/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..b85268ec6c1f825f36c198a77da598f1020780b3
GIT binary patch
literal 1260
zcmV<I1QYv-P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000EDNkl<ZXhZFp
zU1%It6vzK(W;fj?M79q?8&mK_P^uKM)q+n2K@dT$uoQ{W-PyU*ScszL#g9;}RxtKK
zp$T(mXE#KU3eqY*=!>*IscluX*wz;jR8SCXHMX10?i`uK{m5o^W@mTuQOLgS-gD2K
z-}#?&KV}Kn`G>Ca_^|=7)(Wne0#fGo12nM+$YVlekFNx5<N(Y}xtx8NnO*>DCCWs6
zB%9S<CL)d!BvOEhiJ87+vOL4g`@DiAq7#=d$A-tohX0KUA~Jwu$MV~IdiWz|-02q_
z5xy;z=%IrLGrvRu5ea~4=I;UcLn3T#42l`QyWhQkr-uzA^HsMHT?6EDg~uGnu>m9+
zgQ;fP{jG&EMMY7xY&QK~HxL~Iv}o3aSek3yr#HH8?v4Qb1EM3@Y<k&hvj|)`%*>6e
zlP7Q(MM4AkG;3QW5ma(vn>!SMf3vpVlu`LvDA#u7iaK-MDp`#?5FkvmwwsKqT@=mj
z3(!fkhK1<1xmyB6C2_kzotCI4K$K0^E`V#-$#a(hbef4Uf%@5oRelM8W!bMX<0X&P
zsRZC-RmF>%rv2C|0L!ulnbpUcv5Sbe5K+xPGiHhSqT|qU!^nK&2O;J34xn<b`FP@9
zEQs)$u507VRv{_vM*y4%$m9hfv>jeHQs$lpls5q09N>ciDin)bpBf!~V9wiD{tJNj
z`1si;gm!YtK46;mb3}M6s1)LHWpg^6E;iapX+I0#XwclI@smPmkGffHo+qX4Djsj;
zj~UM!hPLp$n#5C6Q#Yw<&zArO{Q_Yw_Zfz9wQ5r+6mFiMcP;_g6cWHa^zGO6%=;by
z^8jKk{QX*~l=h5_jQqB2C!U#^=_?k?JBcbi)yd4tCylk(3?OCx6@Y6s3E&D5jXMsX
zR}`lqyXrP(j01dYt$vA4>w0EyFaX`FC<-}Fi4%#$cf-T=8(rW|Y+3nPX6~y4Emc6u
z{HFllUmvFfhLJJ7vS(S=ZOqDrx-G65hSnPdkWBW+QmItM%V!h-X8_(^cdpzmMEY#2
za*{HCwXxBY$^PC{Ds`=?r<Rn^iUL@ceb!wz>t&(t()B05ZUqpes5?(edjp`Bz@Ut6
zDA2SluX+hdX`ca5Yhq@)%kQWVr07}zNC5i(HTO?%@20__p`pLmO%qFLyRQLjYjyKR
zHaR)DB_2<_&dl41l%u+yKJB+72l-od1;QR5)?Ep00Ic;Yw4uN%DDW3ECmT+qHyVcV
zXV}cU_J<CgiVY0><lZH!mlaMX`xB{D%DuqUK9Qb<Ow&G3gxl-xX-tSr;LXho&@}T;
z5b<=w*dIb@Oa4=cd>J)O`%NN@)lZwm%=jGOpF^rJ0N_3VO2fQqA++?0-Um$6+(s0?
z1n><Z0}e8uQ&sHrddm@M2`x&Re-Lm!04Vgmw*^I6QIt$Jn|{}8TuS>2fNH{ux}NE6
z_3vijjjZ|rDGR#+ekb5{M^M(?mk{4G(=&#lo$@&^z0J&{i{oSpkvY)Hwrzl_gF>Nj
z%iLV~j#y0XcN}heJ`v3_moEw-erSUdwr%gNR7e#f^O@JHms(G@<7_?Kw4K5A3h^H+
WaLrzV7Y$DU0000<MNUMnLSTZGqgZ<Y

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/selected.png b/src/subpackage/mall/static/images/selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f42576a3878b2392a0ecd68837ed9a750ffc25b
GIT binary patch
literal 701
zcmV;u0z&<XP)<h;3K|Lk000e1NJLTq000;O000^Y1^@s6t-qY}0007nNkl<ZNK3_)
zNoW&M7{`BalA3B$W3N^Z2BgKapcfZh@KDg&gJ+9fk`@n@bWuFy;MR5^P&7#^QqMx&
zt}4`csnDZ{MNkjw#e>$Si<-=n_a<Y~HZzS#@Ld9vH~-&!|8Emi`G_j(^Pd69Xagd6
z3L#Gddw}hQh(80bk>W8j`-q;@S2rihM=%+$<wv#;!2ptNo;C`;AsHbMOwb-*S$lUq
zAl281@I3_f>dTU+z&$n@8CJG@($8v_8u@7*1kNBhRuG*<=39v->^p_C8eogh06T!U
z7^0J|(dV8KO!ObZlDC1~z(-_$e<`F0ux)u!`0@;vzm=XFuHLSKCWjg@aw=*S)hvPF
z0mrT)ARW61T+?4}`S(>U?vQNA%R(fVh?v*aUp7Ehi&6I;2w{lB8`|RLnQhlJFpssk
zOI4Q*NcEpZ$Vr{hsCoRanlITG#xSnn^NrCtGD9l%L?>Q~cA}$qZ9qD9A2^Mqi>Rp*
zR@q4og%P=F1UnI2rQ5trD%Oc$0(d~gY;yo_fF>-XnVylkiquQRAwzzth2CVAI|EJp
zvXtH&5wqC=d<W{u2kYsLXEk7aFr<IGhv(M;-Ne<!Tk#;i>;kYr#N6ruh<!k^89ztq
zFkk(Fc!_%eY>R4)X3iBXO2?*vHY8uD;fRK8B(4B17OhY6*!ci~z!Z`e4e=Qr<gJ@J
zp{1U$^{;G_-O98SQWPpCv|KfmEmPHKzPfjMa;|N()evuSr_t1e%`b+Fjb`_P`=}W2
zszHQKkj*{gLSngW8GDWj^+wf)ogNw09M?|VZVN{m8RWk%90%g8Oc>M?*88YVAFh05
jmWowv=~p!ED!cR>3D{jKq|aK100000NkvXXu0mjfc;rFk

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/share.png b/src/subpackage/mall/static/images/share.png
new file mode 100644
index 0000000000000000000000000000000000000000..7701793761a57ea9380b87f3e236b3021e0d65fc
GIT binary patch
literal 2100
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

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/shopping_cart.png b/src/subpackage/mall/static/images/shopping_cart.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7adbcc41cd8e2aebafc3913c52222a340ba1f67
GIT binary patch
literal 1714
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
IM6N<$f)uVlU;qFB

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/star.png b/src/subpackage/mall/static/images/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..e55430cd14a2ada22507e738c047327f6846215a
GIT binary patch
literal 362
zcmV-w0hRuVP)<h;3K|Lk000e1NJLTq000~S0015c0{{R32pf*A0001KP)t-s0002|
zqZa>@E&q@(__6^1tpNI`5B!=U`Kb%~oF4hB2>y^T`K|^1kuCVI1NgE4_^|-}jx+s{
zF8Qqn`mq52k2L(Q2KlWB|CK2DtOoy?BKo8e{go#BpBVVC0{fdE`KSx{s|fv&E*i+s
zq5uE@8+1}mQvhOPQ#J?e<Kf@b)5*xcwydCsc3oUhK{_iB<xH{50001$Nkl<ZD9^>t
zSq{Q53`Nm2={(O95Gea!ByNeIuZ_QZ^JC@6lEu||ZR@dEYF%>XYRYA>Sg~Li`PKZ3
z`RUB5Z&HGVo=%&7`X4>S%c*!U7``lp2K}2Q-=JedM}XRm^l^v`6b*`=yCQ)FdkoO#
zJ2V51h$Emxlz{bnEt4|ah8j@OPolOdp-~A)R=<y~>cn+@0FU(^W*R<)Q2+n{07*qo
IM6N<$f>M#BoB#j-

literal 0
HcmV?d00001

diff --git a/src/uni.scss b/src/uni.scss
index 7745bde..082358c 100644
--- a/src/uni.scss
+++ b/src/uni.scss
@@ -105,4 +105,16 @@ $mColor: #009874;
     padding-bottom: $height;
     padding-bottom: calc( $height + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
     padding-bottom: calc( $height + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+}
+
+@mixin clearBtn{
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    background-color: transparent;
+    border-radius: 0;
+    &::after{
+        position: unset !important;
+        border: unset;
+    }
 }
\ No newline at end of file