feat(pages) feat:购物 和规格

clp

app.json

@@ -35,7 +35,8 @@
     "pages/integral/exchange",
     "pages/integral/instructions",
     "pages/integral/success",
-    "pages/groupmeallist/storeGoods/storeGoods"
+    "pages/groupmeallist/storeGoods/storeGoods",
+    "pages/groupmeallist/goodDetails/goodDetails"
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -47,4 +47,11 @@ display: -webkit-box;
   justify-content: space-between;
   align-items: center;
 
+}
+
+.flex-row-between-end{
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-end;
 }

pages/groupmeallist/goodDetails/goodDetails.js

@@ -0,0 +1,178 @@
+// pages/groupmeallist/goodDetails/goodDetails.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        bannerList:[{},{}],
+        isShowSpecPannel:false,
+        activeTab: 0,
+        totalPrice:2,
+        isShowCartPannel: true,
+        cartSkuMapData:[{}],
+        comBoFoodsList:[{}]
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    },
+
+    //关闭购物车面板
+  closeCartPannel: function() {
+    this.setData({
+        isShowCartPannel: false
+    })
+},
+
+    //关闭选规格面板
+    closeSpecPannel: function() {
+        this.setData({
+            isShowSpecPannel: false
+        })
+    },
+  //显示对话框
+  showCartPannel: function () {
+    // 显示遮罩层
+    var animation = wx.createAnimation({
+        duration: 100,
+        timingFunction: "linear",
+        delay: 0
+    })
+    this.animation = animation
+    animation.translateY(300).step()
+    this.setData({
+        animationData: animation.export(),
+        isShowCartPannel: true
+    })
+    setTimeout(function () {
+        animation.translateY(0).step()
+        this.setData({
+            animationData: animation.export()
+        })
+    }.bind(this), 100)
+},
+
+  //显示选规格
+  showSpecPannel: function () {
+    // 显示遮罩层
+    var animation = wx.createAnimation({
+        duration: 100,
+        timingFunction: "linear",
+        delay: 0
+    })
+    this.animation = animation
+    animation.translateY(300).step()
+    this.setData({
+        animationData: animation.export(),
+        isShowSpecPannel: true
+    })
+    setTimeout(function () {
+        animation.translateY(0).step()
+        this.setData({
+            animationData: animation.export()
+        })
+    }.bind(this), 100)
+},
+ // 弹窗购物车面板
+ popCartPannel: function () {
+    if (this.data.isShowCartPannel) {
+        this.closeCartPannel()
+        return
+    }
+    if (this.data.allNum == 0) {
+        return
+    }
+    this.showCartPannel();
+},
+
+
+
+ // 弹窗购物车面板
+ popSpecPannel: function () {
+    if (this.data.isShowCartPannel) {
+        this.closeSpecPannel()
+        return
+    }
+    if (this.data.allNum == 0) {
+        return
+    }
+    this.showSpecPannel();
+},
+
+
+   // 详情和收起
+   changeCollapseOrDetail :function (e){
+    let idx = e.currentTarget.dataset.idx;
+    var that = this;
+    that.data.cartSkuMapData[idx].show = !that.data.cartSkuMapData[idx].show
+    that.setData({
+        cartSkuMapData:that.data.cartSkuMapData
+    });
+    console.log("购物车详情");
+    console.log(that.data.cartSkuMapData);
+},
+
+// 加入购物车返回商品列表
+    gotoStoreGoods(){
+        wx.switchTab({  
+
+            url:'/pages/groupmeallist/storeGoods/storeGoods'  
+            
+                });
+
+
+    }
+})

pages/groupmeallist/goodDetails/goodDetails.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+  },
+  "navigationStyle": "custom"
+}

pages/groupmeallist/goodDetails/goodDetails.wxml

@@ -0,0 +1,162 @@
+<view class="page_background">
+    <view>
+        <image src="/images/groupmeallist/goodDetailbackgroundImg.png" class="imgDiv"></image>
+        <view class="goodTitle">清爽夏日套餐</view>
+    </view>
+
+
+
+    <view class="flex-column">
+
+
+        <swiper interval="5000" duration="500"  >
+            <block wx:for="{{bannerList}}" wx:key="unique">
+                <swiper-item >
+                    <!-- 商品提示 是否可重复 -->
+                    <view style="  box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.16); width: 98%;margin: 0px auto">
+                        <view class="page_center flex-row">
+                            <view class="page_center_text">选择3个饮品（可重复）</view>
+
+                        </view>
+                        <view class="forGoodDiv flex-row">
+                            <view class="forGoodDiv_img">
+                                <image style="width: 160rpx; height: 160rpx;" src="http://res.hualala.com/basicdoc/6023560d-c88f-4858-b984-6f7c056769d7.jpg"></image>
+                            </view>
+                            <view class="forGoodDiv_right flex-column">
+                                <view class="forGoodDiv_right_title"> 杨枝甘露清爽版</view>
+                                <view class="flex-row-between-end" style="width: 100%;">
+                                    <view style="font-size:32rpx;font-weight:700;">¥ 20.0</view>
+                                    <view class="good_spec" catchtap="popSpecPannel">选规格</view>
+                                    <!-- <image  class="shop-cart-price-wrap_add" src="/images/groupmeallist/PositionDiv_icon.png"></image> -->
+
+                                </view>
+
+                            </view>
+
+                        </view>
+
+                    </view>
+                </swiper-item>
+            </block>
+        </swiper>
+
+
+
+        <view class="bottom_div flex-row">
+            <view class="flex-row">
+                <view style="margin-left: 51rpx;" class="flex-row" catchtap="popCartPannel">
+                    <image src="/images/groupmeallist/shop_car.png" style="width: 53rpx;height: 53rpx;"></image>
+                    <view class="sum_shop">1</view>
+                </view>
+                <view style="font-size: 47rpx;font-weight: 700;">
+                    <text style="font-size: 37rpx;font-weight: 700;margin-left: 34rpx;">¥</text>58.8
+                </view>
+            </view>
+            <view class="addCar" catchtap="gotoStoreGoods">加入购物车</view>
+        </view>
+    </view>
+
+    <view class="bottom_div flex-row" style="display: {{isShowSpecPannel ==true ? 'bloack':'none'  }};">
+        <view class="flex-row">
+            <view style="margin-left: 40rpx;justify-content: flex-start;" class="flex-row" catchtap="popCartPannel">
+                <view style="font-size: 24rpx;font-weight: 400;line-height: 40rpx;width: 48rpx;height: 32rpx;">合计</view>
+
+                <view style="font-size: 47rpx;font-weight: 700;">
+                    <text style="font-size: 37rpx;font-weight: 700;margin-left: 8rpx;">¥</text>58.8
+                </view>
+            </view>
+
+        </view>
+        <view class="addCar" catchtap="">加入购物车</view>
+    </view>
+
+    <!--选规格弹出框  -->
+    <view class="cart-pannel" wx:if="{{isShowSpecPannel}}">
+        <!-- 遮罩背景 -->
+        <view class="make-layer-bg" catchtap="closeSpecPannel"></view>
+        <view style="opacity: 1;height: 750rpx;">
+            <view animation="{{animationData}}" class="commodity_attr_box_spec flex-column">
+                <view class="forGoodDiv flex-row">
+                    <view class="forGoodDiv_img" style="margin-top: 35rpx;">
+                        <image style="width: 160rpx; height: 160rpx;" src="http://res.hualala.com/basicdoc/6023560d-c88f-4858-b984-6f7c056769d7.jpg"></image>
+                    </view>
+                    <view class="forGoodDiv_right flex-column" style="margin-top: 35rpx;">
+                        <view class="forGoodDiv_right_title"> 杨枝甘露清爽版</view>
+                        <view class="flex-row-between-end" style="width: 100%;">
+                            <view style="font-size:32rpx;font-weight:700;">¥ 20.0</view>
+                        </view>
+
+                    </view>
+
+                </view>
+                <!-- 规格循环 -->
+                <view>
+                    <view style="margin-top: 39rpx;height: 37px;font-size: 28rpx;font-weight: 400;color: #000000;margin-left: 40rpx;line-height: 37rpx;">
+                        杯型
+                    </view>
+                    <!-- 规格值循环 -->
+                    <view class="flex-row" style="  margin-left: 40rpx;">
+                        <view class="sepc_value {{item.active? 'active': ''}}">大杯</view>
+                        <view class="sepc_value">中杯</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+
+
+
+
+    <!--购物车弹出框  -->
+    <view class="cart-pannel" wx:if="{{isShowCartPannel}}">
+        <!-- 遮罩背景 -->
+        <view class="make-layer-bg" catchtap="closeCartPannel"></view>
+        <view style="opacity: 1;height: 750rpx;">
+            <view animation="{{animationData}}" class="commodity_attr_box flex-column">
+                <view class="shop_car_detail flex-row-between">
+                    <view class="shop_car_num">我的套餐</view>
+                    <view class="del_icaon" bindtap="onChangeShowStateDelFalse"></view>
+                </view>
+
+                <view class="cart-goods-list">
+                    <!-- 循环购物车 -->
+
+                    <view wx:for="{{cartSkuMapData}}" wx:key="index" class="shop_car_foods">
+                        <view class="flex-column">
+                            <view class="shop_car_foods_title flex-row-between">
+                                <!-- 可能存在优惠标识 -->
+                                <view class="shop_car_foods_title_left flex-row">
+                                    <view style="max-width: 370rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-left: 28rpx;"> 清爽夏日套餐</view>
+                                    <view catchtap="changeCollapseOrDetail" class="Collapse_and_details">{{cartSkuMapData[index].show == true ? '收起' : '详情'}}</view>
+                                </view>
+                                <view class="shop-cart-price-wrap">
+                                    <view style="font-size: 32rpx;font-weight:700;margin-right: 14rpx;">¥ 58.8</view>
+                                    <view class="flex-row" style="height: 45rpx;line-height: 45rpx;text-align: center;">
+
+                                        <view>
+                                            <image class="shop-cart-price-wrap_reduce" src="/images/groupmeallist/reduce.png"></image>
+                                        </view>
+
+                                        <view class="price_food">1</view>
+                                        <view>
+                                            <image class="shop-cart-price-wrap_add" src="/images/groupmeallist/PositionDiv_icon.png"></image>
+                                        </view>
+                                    </view>
+
+
+                                </view>
+                            </view>
+
+                            <view class="shop_car_foods_spec" wx:for="{{comBoFoodsList}}" wx:for-item="comBoFoodsList" wx:key="index" style="display: {{cartSkuMapData[index].show == true ? 'bloack':'none'  }};">
+                                <view>杨枝甘露清爽版</view>
+                            </view>
+
+                        </view>
+                    </view>
+
+                </view>
+            </view>
+        </view>
+    </view>
+
+</view>

pages/groupmeallist/goodDetails/goodDetails.wxss

@@ -0,0 +1,350 @@
+.page_background{
+
+    background-color: #FFFFFF;
+    overflow-y: hidden;
+    height: 100vh;
+    width: 100vw;
+    box-sizing: border-box;
+}
+.imgDiv{
+    width: 750rpx;
+    height: 596rpx;
+    background: rgba(0,0,0,0.00);
+}
+.page_center{
+    width: 100%;
+    height: 64rpx;
+    background: #afd250;
+    box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.16);
+    border-radius: 15rpx 15rpx 0rpx 0rpx;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 45rpx;
+    margin-top: -40rpx;
+   
+
+
+}
+.page_center_text{
+    /* width: 253px;
+    height: 32px; */
+    font-size: 24rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #ffffff;
+}
+.goodTitle{
+    /* width: 216px; */
+    height: 48rpx;
+    font-size: 36rpx;
+    font-family: Segoe UI, Segoe UI-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: white;
+    position: fixed;
+    left: 16rpx;
+    margin-top: -110rpx;
+    z-index: 100;
+}
+.forGoodDiv{
+    width: 100%;
+    /* border: 1px black solid; */
+  
+    height: 160rpx;
+}
+.forGoodDiv_img{
+        width: 160rpx;
+        height: 160rpx;
+        margin-left: 36rpx;
+}
+.forGoodDiv_right{
+    height: 160rpx;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.forGoodDiv_right_title{
+    /* width: 196px; */
+    height: 37rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #000000;
+}
+.good_spec{
+    width: 109rpx;
+    height: 42rpx;
+    border: 1px solid #707070;
+    border-radius: 22rpx;
+    font-size: 24rpx;
+    text-align: center;
+    line-height: 42rpx;
+    font-weight: 400;
+    margin-right: 28rpx;
+}
+.shop-cart-price-wrap_add{
+    width: 38rpx;
+    height: 38rpx;
+    line-height: 48rpx;
+    text-align: center;
+    margin-right: 28rpx;
+
+
+}
+.bottom_div{
+    width: 100%;
+    height: 182rpx;
+    background: white;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index:200;
+    /* margin-bottom: 40rpx; */
+    justify-content: space-between;
+}
+
+.sum_shop{
+    width: 28rpx;
+    height: 28rpx;
+    background: #ff0000;
+    border-radius: 50%;
+    margin-top: -45rpx;
+    margin-left: -15rpx;
+    text-align: center;
+    line-height: 28rpx;
+    font-size: 20rpx;
+    color: #ffffff;
+
+}
+.addCar{
+    width: 200rpx;
+    height: 60rpx;
+    background: #AFD250;
+    text-align: center;
+    line-height: 60rpx;
+    font-size: 28rpx;
+    border-radius: 25rpx;
+    font-weight: 400;
+    color: #ffffff;
+    margin-right: 33rpx;
+}
+
+.cart-pannel {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 199;
+  }
+  .make-layer-bg {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    opacity: 0.8;
+    position: fixed;
+    left: 0;
+    top: 0;
+  }
+  /*对话框 */
+  .commodity_attr_box {
+    max-height: 60%;
+    min-height: 40%;
+    width: 750rpx;
+    overflow: hidden;
+    position: fixed;
+    bottom: 100rpx;
+    left: 0;
+    z-index: 200;
+    background: #fff;
+    padding-top: 20rpx;
+    border-radius: 22rpx 22rpx 0px 0px;
+  }
+
+ /*对话框 */
+ .commodity_attr_box_spec {
+    max-height: 58%;
+    min-height: 46%;
+    width: 750rpx;
+    overflow: hidden;
+    position: fixed;
+    bottom: 100rpx;
+    left: 0;
+    z-index: 400;
+    background: #fff;
+    padding-top: 20rpx;
+    border-radius: 22rpx 22rpx 0px 0px;
+  }
+
+
+
+
+
+  .shop_car_num{
+    width: 112rpx;
+    height: 37rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    text-align: left;
+    color: #9b9b9b;
+    margin-left: 28rpx;
+    margin-top: 20rpx;
+  }
+  .del_icaon{
+    width: 27rpx;
+    height: 36rpx;
+    margin-right: 20rpx;
+    background-image: url(https://cdn1.overseasdragon.com.cn/xcx-smdd/order_del.png);
+    background-size: 100% 100%;
+  }
+
+
+  .shop_car_foods_title{
+    width: 100%;
+   min-height: 100rpx;
+     border-bottom: 2rpx solid #e9e9e9;
+    font-size: 32rpx;
+    font-weight: bold;
+    line-height: 45rpx;
+    color: #000;
+    /* padding-top: 40rpx; */
+  }
+  .shop_car_detail{
+    width: 718rpx;
+    height: 80rpx;
+    border-bottom: 2rpx solid #e9e9e9;
+    margin: 0px auto;
+}
+.cart-goods-list .shop_car_foods .shop_car_foods_title:last-child {
+    border-bottom: none;
+  }
+
+  .shop-cart-price-wrap {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: left;
+    flex-direction: row;
+    margin-right: 30rpx;
+    /* padding-top: 40rpx; */
+  }
+  .shop-cart-price-wrap .flex-row {
+    align-items: baseline;
+  }
+
+
+
+  .shop_car_foods_price{
+    height: 45rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    line-height: 45rpx;
+    color: #000;
+    margin-right: 12rpx;
+  }
+
+  .shop_car_foods_icon{
+    padding-top: 4rpx;
+  }
+
+  .shop_car_foods_icon_reduce{
+    width: 39rpx;
+    height: 39rpx;
+    background-image: url(https://cdn1.overseasdragon.com.cn/xcx-smdd/order_reduce.png);
+    background-size: 100% 100%;
+  }
+  .shop_car_foods_icon_num{
+    font-size: 28rpx;
+    color: #FE7253;
+    padding: 0 6rpx;
+    vertical-align: middle;
+    display: inline-block;
+    position: relative;
+    top: -8rpx;
+  }
+
+  .spec_sku_num {
+    font-size: 28rpx;
+    color: #FE7253;
+    padding: 0 10rpx;
+    vertical-align: middle;
+    display: inline-block;
+    position: relative;
+  }
+
+
+  .shop_car_foods_icon_add{
+    width: 39rpx;
+    height: 39rpx;
+    background-image: url(https://cdn1.overseasdragon.com.cn/xcx-smdd/order_add.png);
+    background-size: 100% 100%;
+  }
+  .shop_car_foods_title_left{
+   
+  }
+  .Collapse_and_details{
+    width: 48rpx;
+    height: 32rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    text-align: left;
+    color: #9b9b9b;
+    margin-left: 12rpx;
+  }
+.shop-cart-price-wrap_add{
+    width: 38rpx;
+    height: 38rpx;
+    line-height: 38rpx;
+    text-align: center;
+    position: relative;
+    top:5rpx
+
+
+}
+.shop-cart-price-wrap_reduce{
+        width: 38rpx;
+        height: 38rpx;
+        line-height: 38rpx;
+        text-align: center;
+        position: relative;
+        top:5rpx
+}
+.price_food{
+
+    font-size: 32rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #000000;
+    margin-left: 7rpx;
+    margin-right: 7rpx;
+
+
+}
+.shop_car_foods_spec {
+    /* width: 168px; */
+    /* height: 32px; */
+    font-size: 24rpx;
+    line-height: 32rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #9b9b9b;
+    justify-content: center;
+    align-self: start;
+    margin-left: 28rpx;
+    margin-top: 10rpx;
+  }
+  .sepc_value{
+    display: inline-block;
+    height: 57rpx;
+    padding: 0 20rpx;
+    background: white;
+    border: 1px solid #a7a7a7;
+    border-radius: 8rpx;
+    text-align: center;
+    line-height: 57rpx;
+  
+    margin-right: 28rpx;
+  }
+  .sepc_value.active {
+    background: #afd250;
+    border-color: #afd250;
+  }

pages/groupmeallist/storeGoods/storeGoods.js

@@ -11,9 +11,21 @@ CustomPage({
     vtabs: [],
     activeTab: 0,
     totalPrice:2,
-    isShowCartPannel: true,
-    cartSkuMapData:[{}]
+    isShowCartPannel: false,
+    cartSkuMapData:[{}],
+    comBoFoodsList:[{},{}]
   },
+
+
+    // 商品详情
+    gotoGoodDetails(){
+      wx.navigateTo({
+        url: '/pages/groupmeallist/goodDetails/goodDetails'
+      })
+
+
+    },
+
     // 弹窗购物车面板
     popCartPannel: function () {
       if (this.data.isShowCartPannel) {

pages/groupmeallist/storeGoods/storeGoods.wxml

@@ -1,100 +1,112 @@
 <view class="page_background">
-    <!-- 门店定位地址 -->
-    <view class="storePositioning flex-column">
-        <view class="storeName">上海浦东金高路店
-        <image src="/images/groupmeallist/left_icon.png" style="width: 10rpx;height: 19rpx;"></image>
+  <!-- 门店定位地址 -->
+  <view class="storePositioning flex-column">
+    <view class="storeName">上海浦东金高路店
+      <image src="/images/groupmeallist/left_icon.png" style="width: 10rpx;height: 19rpx;"></image>
+    </view>
+    <view class="storedistance">
+      <image src="/images/groupmeallist/distance.png" style="width: 18rpx;height: 23rpx;"></image>
+      距离您1.03km
+    </view>
+
+    <view class="goods_scroll_content">
+      <mp-vtabs vtabs="{{vtabs}}" activeTab="{{activeTab}}" bindtabclick="onTabClick" bindchange="onChange" class="test">
+        <block wx:for="{{vtabs}}" wx:key="title">
+          <mp-vtabs-content tabIndex="{{index}}">
+            <view class="classify_title">{{item.title}}</view>
+
+            <!-- 商品列表 -->
+            <!-- <view wx:for="{{item.goodsList}}" wx:key="goodsKey" wx:for-item="goods" class="goods_item"> -->
+            <view class="vtabs-content-item" catchtap="gotoGoodDetails">
+              <image src="{{item.img}}" class="itemimg"></image>
+              <view class="PositionDiv">
+                <view class="PositionDiv_title">清爽夏日套餐</view>
+                <view class="PositionDiv_detail">订单满188元,立减38元</view>
+                <view class="PositionDiv_addAndicon flex-row">
+                  <view style="font-weight: 700;font-size:32rpx">¥ 58.8 起</view>
+                  <view class="PositionDiv_icon">
+                    <image src="/images/groupmeallist/PositionDiv_icon.png"></image>
+                  </view>
+                </view>
+
+
+
+              </view>
+            </view>
+
+            <!-- </view> -->
+
+          </mp-vtabs-content>
+        </block>
+
+
+      </mp-vtabs>
+      <view class="bottom_div flex-row" style="display: {{totalPrice >0 ? 'bloack':'none'  }};">
+        <view style="margin-left: 89rpx;" class="flex-row" catchtap="popCartPannel">
+          <image src="/images/groupmeallist/shop_car.png" style="width: 53rpx;height: 53rpx;"></image>
+          <view class="sum_shop">1</view>
         </view>
-        <view class="storedistance">
-        <image src="/images/groupmeallist/distance.png" style="width: 18rpx;height: 23rpx;"></image>
-        距离您1.03km
-     </view>
-
-     <view class="goods_scroll_content">
-     <mp-vtabs 
-  vtabs="{{vtabs}}" 
-  activeTab="{{activeTab}}" 
-  bindtabclick="onTabClick"
-  bindchange="onChange"
-  class="test"
->
-  <block wx:for="{{vtabs}}" wx:key="title" >
-    <mp-vtabs-content tabIndex="{{index}}">
-      <view class="classify_title">{{item.title}}</view>
-
-        <!-- 商品列表 -->
-        <!-- <view wx:for="{{item.goodsList}}" wx:key="goodsKey" wx:for-item="goods" class="goods_item"> -->
-      <view class="vtabs-content-item">
-        <image src="{{item.img}}" class="itemimg"></image>
-        <view class="PositionDiv">
-          <view class="PositionDiv_title">清爽夏日套餐</view>
-          <view class="PositionDiv_detail">订单满188元,立减38元</view>
-          <view class="PositionDiv_addAndicon flex-row">
-            <view style="font-weight: 700;font-size:32rpx">¥ 58.8 起</view>
-            <view class="PositionDiv_icon"><image src="/images/groupmeallist/PositionDiv_icon.png"></image></view>
-          </view>
-          
-        
-        
+        <view style="font-size: 47rpx;font-weight: 700;">
+          <text style="font-size: 37rpx;font-weight: 700;margin-left: 34rpx;">¥</text>58.8
         </view>
+        <view style="margin-left: 292rpx;font-size: 32rpx;font-weight: 700;color: #444444;">去结算</view>
+
+
       </view>
-      
-<!-- </view> -->
-
-    </mp-vtabs-content>
-  </block>
- 
-
-</mp-vtabs>
-<view class="bottom_div flex-row" style="display: {{totalPrice >0 ? 'bloack':'none'  }};">
-  <view style="margin-left: 89rpx;" class="flex-row" catchtap="popCartPannel">
-    <image src="/images/groupmeallist/shop_car.png" style="width: 53rpx;height: 53rpx;"></image>
-    <view class="sum_shop">1</view>
-  </view>
-  <view style="font-size: 47rpx;font-weight: 700;">
-    <text style="font-size: 37rpx;font-weight: 700;margin-left: 34rpx;">¥</text>58.8
-  </view>
-  <view style="margin-left: 292rpx;font-size: 32rpx;font-weight: 700;color: #444444;">去结算</view>
-  
-  
-</view>
-</view>
-
-<!--购物车弹出框  -->
-<view class="cart-pannel" wx:if="{{isShowCartPannel}}">
-    <!-- 遮罩背景 -->
-    <view class="make-layer-bg" catchtap="closeCartPannel"></view>
-    <view style="opacity: 1;height: 750rpx;">
-    <view animation="{{animationData}}" class="commodity_attr_box flex-column">
-        <view class="shop_car_detail flex-row-between">
+    </view>
+
+    <!--购物车弹出框  -->
+    <view class="cart-pannel" wx:if="{{isShowCartPannel}}">
+      <!-- 遮罩背景 -->
+      <view class="make-layer-bg" catchtap="closeCartPannel"></view>
+      <view style="opacity: 1;height: 750rpx;">
+        <view animation="{{animationData}}" class="commodity_attr_box flex-column">
+          <view class="shop_car_detail flex-row-between">
             <view class="shop_car_num">我的套餐</view>
             <view class="del_icaon" bindtap="onChangeShowStateDelFalse"></view>
-        </view>
-        
-        <view class="cart-goods-list">
+          </view>
+
+          <view class="cart-goods-list">
             <!-- 循环购物车 -->
-          
-            <view    wx:for="{{cartSkuMapData}}" wx:key="index" class="shop_car_foods">
-                <view class="flex-column">
-                    <view class="shop_car_foods_title flex-row">
-                        <!-- 可能存在优惠标识 -->
-                        <view class="shop_car_foods_title_left flex-row">
-                        <view style="max-width: 370rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-left: 28rpx;"> 清爽夏日套餐</view>
-                        <view catchtap="changeCollapseOrDetail" class="Collapse_and_details">{{cartSkuMapData[index].show == true ? '收起' : '详情'}}</view>
-
-                        <view class="shop-cart-price-wrap">
-
-                        </view>
+
+            <view wx:for="{{cartSkuMapData}}" wx:key="index" class="shop_car_foods">
+              <view class="flex-column">
+                <view class="shop_car_foods_title flex-row-between">
+                  <!-- 可能存在优惠标识 -->
+                  <view class="shop_car_foods_title_left flex-row">
+                    <view style="max-width: 370rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-left: 28rpx;"> 清爽夏日套餐</view>
+                    <view catchtap="changeCollapseOrDetail" class="Collapse_and_details">{{cartSkuMapData[index].show == true ? '收起' : '详情'}}</view>
+                  </view>
+                  <view class="shop-cart-price-wrap">
+                    <view style="font-size: 32rpx;font-weight:700;margin-right: 14rpx;">¥ 58.8</view>
+                    <view class="flex-row" style="height: 45rpx;line-height: 45rpx;text-align: center;">
+
+                      <view>
+                        <image class="shop-cart-price-wrap_reduce" src="/images/groupmeallist/reduce.png"></image>
+                      </view>
+
+                      <view class="price_food">1</view>
+                      <view>
+                        <image class="shop-cart-price-wrap_add" src="/images/groupmeallist/PositionDiv_icon.png"></image>
                       </view>
                     </view>
-                       
-</view>
-</view>
 
+
+                  </view>
+                </view>
+
+                <view class="shop_car_foods_spec" wx:for="{{comBoFoodsList}}" wx:for-item="comBoFoodsList" wx:key="index" style="display: {{cartSkuMapData[index].show == true ? 'bloack':'none'  }};">
+                  <view>杨枝甘露清爽版</view>
+                </view>
+
+              </view>
+            </view>
+
+          </view>
         </view>
+      </view>
     </view>
-</view>
-</view>
-</view>
+  </view>
 
 
 
@@ -104,4 +116,4 @@
 
 
 
-</view>
+</view>

pages/groupmeallist/storeGoods/storeGoods.wxss

@@ -195,7 +195,7 @@ margin-top: 7rpx;
     z-index: 200;
     background: #fff;
     padding-top: 20rpx;
-    border-radius: 20px 20px 0 0;
+    border-radius: 22rpx 22rpx 0px 0px;
   }
   .shop_car_num{
     width: 112rpx;
@@ -224,34 +224,27 @@ margin-top: 7rpx;
   }
 .shop_car_foods_title{
     width: 100%;
-    height: 45rpx;
-    
+    min-height: 100rpx;
+    border-bottom: 2rpx solid #e9e9e9;
     font-size: 32rpx;
     font-weight: bold;
     line-height: 45rpx;
     color: #000;
-    padding-top: 40rpx;
+    /* padding-top: 40rpx; */
   }
   .shop-cart-price-wrap {
     display: flex;
     flex-flow: row nowrap;
     justify-content: left;
     flex-direction: row;
+    margin-right: 30rpx;
     /* padding-top: 40rpx; */
   }
   .shop-cart-price-wrap .flex-row {
     align-items: baseline;
   }
 
-  .shop_car_foods_title{
-    height: 45rpx;
-    
-    font-size: 32rpx;
-    font-weight: bold;
-    line-height: 45rpx;
-    color: #000;
-    padding-top: 40rpx;
-  }
+  
 
   .shop_car_foods_price{
     height: 45rpx;
@@ -310,3 +303,45 @@ margin-top: 7rpx;
     color: #9b9b9b;
     margin-left: 12rpx;
   }
+.shop-cart-price-wrap_add{
+    width: 38rpx;
+    height: 38rpx;
+    line-height: 38rpx;
+    text-align: center;
+    position: relative;
+    top:5rpx
+
+
+}
+.shop-cart-price-wrap_reduce{
+        width: 38rpx;
+        height: 38rpx;
+        line-height: 38rpx;
+        text-align: center;
+        position: relative;
+        top:5rpx
+}
+.price_food{
+
+    font-size: 32rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #000000;
+    margin-left: 7rpx;
+    margin-right: 7rpx;
+
+
+}
+.shop_car_foods_spec {
+    /* width: 168px; */
+    /* height: 32px; */
+    font-size: 24rpx;
+    line-height: 32rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #9b9b9b;
+    justify-content: center;
+    align-self: start;
+    margin-left: 28rpx;
+    margin-top: 10rpx;
+  }

project.private.config.json

@@ -247,6 +247,13 @@
                     "name": "",
                     "pathName": "pages/groupmeallist/storeGoods/storeGoods",
                     "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/groupmeallist/goodDetails/goodDetails",
+                    "query": "",
                     "scene": null,
                     "launchMode": "default"
                 }