add logic for tid1878

src/pages.json

@@ -904,6 +904,12 @@
 					"style" : {
 						"navigationBarTitleText": "商城" 
 					}
+				},
+				{
+					"path": "pages/goods_info",
+					"style" : {
+						"navigationBarTitleText": "商品详情" 
+					}
 				}
 			]
 		}

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>

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>

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);

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>

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 };

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>

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 ?? '',

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;
+    }
 }