feat(pages) feat：订单页面，门店列表....

clp

app.json

@@ -36,7 +36,9 @@
     "pages/integral/instructions",
     "pages/integral/success",
     "pages/groupmeallist/storeGoods/storeGoods",
-    "pages/groupmeallist/goodDetails/goodDetails"
+    "pages/groupmeallist/goodDetails/goodDetails",
+    "pages/groupmeallist/storeList/storeList",
+    "pages/groupmeallist/orderDetail/orderDetail"
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -54,4 +54,9 @@ display: -webkit-box;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: flex-end;
+}
+.page{
+  width: 100%;
+  height: 100%;
+  background-color: #F7F7F7;
 }

pages/groupmeallist/goodDetails/goodDetails.js

@@ -168,9 +168,7 @@ Page({
 // 加入购物车返回商品列表
     gotoStoreGoods(){
         wx.switchTab({  
-
-            url:'/pages/groupmeallist/storeGoods/storeGoods'  
-            
+            url:'/pages/groupmeallist/storeGoods/storeGoods'       
                 });
 
 

pages/groupmeallist/orderDetail/orderDetail.js

@@ -0,0 +1,72 @@
+// pages/groupmeallist/orderDetail/orderDetail.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        orderGoodList:[{},{},{},{}],
+        showAllSku:false
+    },
+    //全部显示和收起
+    handleFlodExtend() {
+        this.setData({
+           showAllSku: !this.data.showAllSku
+        })
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/groupmeallist/orderDetail/orderDetail.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+  },
+  "navigationBarBackgroundColor": "#F7F7F7",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "订单详情",
+  "backgroundColor": "#F7F7F7",
+  "backgroundTextStyle": "light"
+}

pages/groupmeallist/orderDetail/orderDetail.wxml

@@ -0,0 +1,106 @@
+<view class="page">
+
+    <view class="detail_top flex-column">
+        <!-- 待支付状态 -->
+        <view class="detail_top flex-column">
+            <view style="font-size: 32rpx;font-weight: 700;text-align: left;color: #000000;">待支付</view>
+            <view style="margin-top: 15rpx;font-weight: 400;text-align: left;font-size: 32rpx;">剩余支付时间 00:44:51</view>
+            <view class="order_goods_bottom" style="margin-top: 44rpx;">
+                <view class="canel_order">取消订单</view>
+                <view class="pay_order">立即支付</view>
+            </view>
+        </view>
+        <!-- 待备餐详情  -->
+        <!-- <view class="detail_top flex-column">
+            <view style="font-size: 32rpx;font-weight: 700;text-align: left;color: #000000;">待备餐</view>
+            <view style="margin-top: 16rpx;font-weight: 700;text-align: left;font-size: 62rpx;">2105</view>
+            <view style="margin-top: 16rpx;font-weight: 400;text-align: left;font-size: 32rpx;">取单号</view>
+            <view class="order_goods_bottom">
+                <view class="Request_a_refund">申请退款</view>
+            </view>
+        </view> -->
+
+
+    </view>
+
+
+    <view class="detail_center">
+        <view class="detail_stroe flex-row">
+            <view class="detail_stroe_name">上海浦东金高路店</view>
+            <view style="margin-top: 22rpx;">
+                <image style="width:65rpx;height:65rpx;margin-right: 24rpx;margin-top: 19rpx;" src="/images/groupmeallist/phone_icon.png"></image>
+            </view>
+
+        </view>
+        <view style="width: 93%; border-bottom: 1px #e2e2e2 solid; margin: auto;margin-top: 43rpx;"></view>
+
+        <!-- 循环订单商品 -->
+        <view class="for_detail_good {{showAllSku ? '': 'fold'}}">
+            <view wx:for="{{orderGoodList}}" wx:for-index="idx" wx:key="idx" wx:for-item="item" style="margin-bottom: 62rpx;">
+
+                <view class="goods_detail flex-row">
+                    <view class="flex-row">
+                        <view class="for_detail_good_title">清爽夏日套餐<span style="color:#AFD250;margin-left:10rpx;font-size:22rpx">x1</span> </view>
+                        <view style="font-size: 24rpx;font-weight: 400;text-align: center;color: #9b9b9b;margin-left: 14rpx;border-bottom: 1rpx #9B9B9B solid;"> {{cartSkuMapData[index].show == true ? '收起' : '详情'}}</view>
+                    </view>
+
+                    <view class="for_detail_good_price">￥ 58.8</view>
+
+                </view>
+                <!-- 套餐详情 -->
+                <view class="combo_detail">
+                    杨枝甘露清爽版
+                    <span style="font-size: 20rpx;">（大杯/常温/标准糖）</span>
+                    <span style="color:#AFD250;margin-left:10rpx;font-size:22rpx">x1</span>
+                </view>
+
+            </view>
+
+
+
+        </view>
+
+        <view catchtap="handleFlodExtend">
+
+            <block wx:if="{{showAllSku}}">
+                <view class="exten-flod"> 收起
+                    <image style="width:19rpx;height:10rpx;margin-left: 15rpx;" src="/images/groupmeallist/top_icon.png" />
+                </view>
+
+            </block>
+            <block wx:else>
+                <view class="exten-flod">查看全部（5）
+                    <image style="width:19rpx;height:10rpx;" src="/images/groupmeallist/bottom_icom.png" />
+                </view>
+
+            </block>
+        </view>
+
+        <view class="coupon flex-row-between">
+            <view class="flex-row" style="align-items: center;">
+               
+                    <image style="width: 33rpx;height: 33rpx;margin-left: 31rpx;" src="/images/groupmeallist/coupon.png"></image>
+              
+                <view style="font-size: 28rpx;font-weight: 400;text-align: left;color: #000000;margin-left: 13rpx;">优惠券</view>
+            </view>
+
+            <view style="font-size: 28rpx;font-weight: 400;text-align: left;color: #d65065;margin-right: 31rpx;">-¥4</view>
+        </view>
+
+        <view style="width: 93%; border-bottom: 1px #e2e2e2 solid; margin: auto;margin-top: 13rpx;"></view>
+
+        <view class="all_price flex-row">
+            <view>已优惠  <sapn style="font-size: 28rpx;font-weight: 400;text-align: left;color: #d65065;margin-right: 31rpx;">-¥4</sapn>
+             合计 ¥
+             <sapn style="font-size: 38rpx;font-weight: 400;text-align: left;color: #000000;margin-right: 22rpx;">11</sapn>
+             </view>
+        
+        </view>
+    </view>
+
+
+
+
+
+
+</view>

pages/groupmeallist/orderDetail/orderDetail.wxss

@@ -0,0 +1,207 @@
+.detail_top {
+    width: 709rpx;
+    min-height: 279rpx;
+    background: #ffffff;
+    border-radius: 25rpx;
+    margin: auto;
+    margin-top: 32rpx;
+    justify-content: flex-start;
+    align-items: center;
+
+}
+
+.order_goods_bottom {
+    width: 100%;
+    height: 59rpx;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center !important;
+    align-self: center !important;
+    margin-top: 27rpx;
+    line-height: 59rpx;
+    text-align: center;
+    margin-top: 11rpx;
+    margin-bottom: 37rpx;
+}
+
+.Request_a_refund {
+    width: 159rpx;
+    height: 59rpx;
+    background: #ffffff;
+    border: 1px solid #707070;
+    border-radius: 11rpx;
+    line-height: 59rpx;
+
+    font-size: 24rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #000000;
+
+
+
+}
+
+.canel_order {
+    width: 159rpx;
+    height: 59rpx;
+    background: #ffffff;
+    border: 1rpx solid #707070;
+    border-radius: 11rpx;
+    margin-right: 19rpx;
+
+
+    font-size: 24rpx;
+    line-height: 59rpx;
+
+    font-weight: 400;
+    text-align: center;
+    color: #000000;
+
+}
+
+.pay_order {
+    width: 159rpx;
+    height: 59rpx;
+    background: #B9D25C;
+    border: 1rpx solid #B9D25C;
+    border-radius: 11rpx;
+
+    margin-right: 20rpx;
+    font-size: 24rpx;
+    line-height: 59rpx;
+
+    font-weight: 400;
+    text-align: center;
+    color: white;
+
+}
+
+.detail_center {
+    width: 709rpx;
+    min-height: 929rpx;
+    background: #ffffff;
+    border-radius: 25rpx;
+    margin: auto;
+    margin-top: 16rpx;
+
+}
+
+.detail_stroe {
+    width: 100%;
+    height: 65rpx;
+    justify-content: space-between;
+    margin-top: 19rpx;
+    align-items: center;
+    text-align: center;
+    line-height: 65rpx;
+    margin-top: 19rpx;
+
+}
+
+.detail_stroe_name {
+    font-size: 32rpx;
+    font-weight: 700;
+    text-align: center;
+    color: #000000;
+    margin-left: 25rpx;
+    margin-top: 26rpx;
+}
+
+.for_detail_good {
+    /* max-height: 325rpx; */
+    max-height: 500rpx;
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-top: 48rpx;
+    margin-left: 25rpx;
+    margin-top: 48rpx;
+    overflow-y: auto;
+
+
+}
+
+/* 滚动条消失术 */
+.for_detail_good::-webkit-scrollbar {
+    display: none;
+}
+
+.for_detail_good.fold {
+    max-height: 325rpx;
+    overflow: hidden;
+}
+
+.for_detail_good_title {
+    /* width: 204px; */
+    height: 37rpx;
+    font-size: 28rpx;
+
+    font-weight: 700;
+    text-align: left;
+    color: #000000;
+}
+
+.goods_detail {
+
+    justify-content: space-between !important;
+    width: 700rpx;
+
+}
+
+.for_detail_good_price {
+
+    font-size: 32rpx;
+
+    font-weight: 700;
+    text-align: left;
+    color: #afd250;
+    margin-right: 61rpx;
+}
+
+.combo_detail {
+    /* width: 168px; */
+    height: 32rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    text-align: left;
+    color: #9b9b9b;
+    display: inline-block;
+    margin-top: 10rpx;
+}
+
+.exten-flod {
+    width: 220rpx;
+    height: 58rpx;
+    background: #ffffff;
+    border: 2rpx solid #d8d8d8;
+    border-radius: 8rpx;
+    margin: auto;
+    text-align: center;
+    line-height: 58rpx;
+    margin-top: 64rpx;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: 24rpx;
+    font-family: Segoe UI, Segoe UI-Regular;
+    font-weight: 400;
+    color: #6b6b6b;
+}
+
+.coupon{
+    width: 100%;
+    height: 33rpx;
+    margin-top: 61rpx;
+    
+}
+.all_price{
+    width: 100%;
+    height: 41rpx;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 23.5rpx;
+
+}

pages/groupmeallist/storeGoods/storeGoods.js

@@ -16,7 +16,14 @@ CustomPage({
     comBoFoodsList:[{},{}]
   },
 
+  // 进入门店列表
+  goToStoreList(){
+    wx.navigateTo({
+      url: '/pages/groupmeallist/storeList/storeList',
+    })
 
+
+  },
     // 商品详情
     gotoGoodDetails(){
       wx.navigateTo({

pages/groupmeallist/storeGoods/storeGoods.wxml

@@ -1,7 +1,7 @@
 <view class="page_background">
   <!-- 门店定位地址 -->
   <view class="storePositioning flex-column">
-    <view class="storeName">上海浦东金高路店
+    <view class="storeName" catchtap="goToStoreList">上海浦东金高路店
       <image src="/images/groupmeallist/left_icon.png" style="width: 10rpx;height: 19rpx;"></image>
     </view>
     <view class="storedistance">

pages/groupmeallist/storeList/storeList.js

@@ -0,0 +1,120 @@
+// pages/groupmeallist/storeList/storeList.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        phoneshow:false,
+        isShowConfirmPannel:false
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    },
+    // 拉出电话面板
+    showPhoneTab(){
+        this.setData({
+            phoneshow : !this.data.phoneshow
+
+        })
+
+    },
+    // 确认门店拉出
+    confirmstore(){},
+    confirmtPannel: function () {
+        if (this.data.isShowConfirmPannel) {
+            this.closeConfirmPannel()
+            return
+        }
+
+        this.showConfirmPannel();
+    },
+    //关闭购物车面板
+  closeConfirmPannel: function() {
+    this.setData({
+        isShowConfirmPannel: false
+    })
+},
+  //显示对话框
+  showConfirmPannel: function () {
+    // 显示遮罩层
+    var animation = wx.createAnimation({
+        duration: 100,
+        timingFunction: "linear",
+        delay: 0
+    })
+    this.animation = animation
+    animation.translateY(300).step()
+    this.setData({
+        animationData: animation.export(),
+        isShowConfirmPannel: true
+    })
+    setTimeout(function () {
+        animation.translateY(0).step()
+        this.setData({
+            animationData: animation.export()
+        })
+    }.bind(this), 100)
+},
+
+// 确定门店跳回商品列表
+confirmStoreGoToStoreGoods(){
+    wx.switchTab({  
+        url:'/pages/groupmeallist/storeGoods/storeGoods'       
+            });
+
+}
+})

pages/groupmeallist/storeList/storeList.json

@@ -0,0 +1,11 @@
+{
+  "usingComponents": {
+    "mp-vtabs": "/components/vtabs",
+    "mp-vtabs-content": "/components/vtabs-content"
+  },
+  "navigationBarBackgroundColor": "#F7F7F7",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "门店列表",
+  "backgroundColor": "#F7F7F7",
+  "backgroundTextStyle": "light"
+}

pages/groupmeallist/storeList/storeList.wxml

@@ -0,0 +1,104 @@
+<view class="page">
+    <!-- 有门店显示此部门 -->
+    <view >
+        <view class="flex-column_start_center">
+            <view class="store flex-row" catchtap="confirmtPannel">
+                <view class="store_left flex-column">
+                    <view class="store_Name">上海浦东金高路店</view>
+                    <view style="margin-left: 36rpx;margin-top:18rpx;" class="flex-row">
+                        <view style="margin-top: -30rpx;">
+                            <image style="width: 18rpx;height: 23rpx;line-height: 23rpx;" src="/images/groupmeallist/distance.png"></image>
+                        </view>
+                        <view class="store_detail_adress">高行镇金高路1128号沪上阿姨(上海浦 东金高路店)</view>
+                    </view>
+
+                    <view class="flex-row" style="margin-left: 36rpx;margin-top:14rpx;">
+                        <image style="width: 19rpx;height: 19rpx;line-height: 23rpx;" src="/images/groupmeallist/store_time.png"></image>
+                        <view class="storebusinesshours">12:00-21:00</view>
+
+                    </view>
+                    <view class="storeState">营业中</view>
+                </view>
+                <view style="width: 0px;height: 219rpx;border-left: 1px solid #ececec;"></view>
+                <view class="store_right flex-column_start_center">
+                    <view style="width: 72rpx;height: 32rpx;font-size: 24rpx;font-weight: 400;text-align: left;color: #afd250;">去下单</view>
+                    <view style="height: 27rpx;font-size: 20rpx;margin-top: 12rpx;font-weight: 400;text-align: left;color: #000000;">距离1.03km</view>
+                    <image catchtap="showPhoneTab" style="width: 65rpx;height: 65rpx;margin-top: 40rpx;" src="/images/groupmeallist/phone_icon.png"></image>
+
+
+                </view>
+            </view>
+
+
+        </view>
+
+        <view class="phoneTab" style="display: {{phoneshow == true? 'block' : 'none'}};">
+            <view class="phoneTab_center flex-column">
+                <view>门店电话：186-2100-3075</view>
+                <view style="margin-top: 60rpx;">客服电话： 400-018-9066</view>
+                <view catchtap="showPhoneTab" style="margin-top: 45rpx; width: 56rpx;height: 37rpx;font-size: 28rpx;font-weight: 400;text-align: left;color: #000000;">取消</view>
+            </view>
+        </view>
+
+
+        <!-- 门店确认弹出框 -->
+        <view class="cart-pannel" wx:if="{{isShowConfirmPannel}}">
+            <!-- 遮罩背景 -->
+            <view class="make-layer-bg" catchtap="closeConfirmPannel"></view>
+            <view style="opacity: 1;height: 750rpx;">
+                <view animation="{{animationData}}" class="commodity_attr_box flex-column">
+                    <view style="width: 112rpx;height: 37rpx;font-size: 28rpx;font-weight: 400;text-align: left;color: #000000;margin-left: 26rpx;margin-top: 31rpx;">确认门店</view>
+                    <view>
+                        <view class="confirmstore flex-row">
+                            <view class="confirmstore_left flex-column">
+                                <view class="store_Name" style="margin-top: 23rpx;">上海浦东金高路店</view>
+                                <view style="margin-left: 36rpx;margin-top:18rpx;" class="flex-row">
+                                    <view style="margin-top: -30rpx;">
+                                        <image style="width: 18rpx;height: 23rpx;line-height: 23rpx;" src="/images/groupmeallist/distance.png"></image>
+                                    </view>
+                                    <view class="store_detail_adress">高行镇金高路1128号沪上阿姨(上海浦 东金高路店)</view>
+                                </view>
+
+                                <view class="flex-row" style="margin-left: 36rpx;margin-top:14rpx;">
+                                    <image style="width: 19rpx;height: 19rpx;line-height: 23rpx;" src="/images/groupmeallist/store_time.png"></image>
+                                    <view class="storebusinesshours">12:00-21:00</view>
+
+                                </view>
+
+                            </view>
+                            <view style="width: 0px;height: 190rpx;border-left: 1px solid #ececec;"></view>
+                            <view class="store_right flex-column_start_center">
+                                <view style="height: 27rpx;font-size: 20rpx;margin-top: 12rpx;font-weight: 400;text-align: left;color: #000000;">距离1.03km</view>
+
+
+                            </view>
+                        </view>
+
+                    </view>
+                    <view class="confirmstore_Delivery_Method flex-row">
+                        <view class="Pick_up_in_store" catchtap="confirmStoreGoToStoreGoods">门店自取</view>
+                        <view class="home_delivery">外送到家</view>
+
+                    </view>
+
+
+                </view>
+            </view>
+        </view>
+
+    </view>
+
+ <!-- 无门店显示此部分 -->
+    <view style="display: none;">
+        <view class="page_none flex-column_start_center">
+            <view class="sotre_none_img">
+                <image style="width: 579rpx; height: 478rpx; margin-top: 150rpx;" src="/images/groupmeallist/store_none.png"></image>
+                <view style="width: 312rpx;height: 42rpx;font-size: 32rpx;font-weight: 400;text-align: left;color: #a5a5a5;margin: auto;margin-top: 29rpx;">附近没有可团餐门店~</view>
+            </view>
+        </view>
+
+    </view>
+
+
+
+</view>

pages/groupmeallist/storeList/storeList.wxss

@@ -0,0 +1,192 @@
+.page {
+    width: 100%;
+    height: 100%;
+    background-color: #F7F7F7;
+
+}
+
+.page_none {
+    width: 100%;
+    height: 100%;
+    background: #f7f7f7;
+
+}
+
+.store {
+    width: 690rpx;
+    height: 272rpx;
+    background-color: white;
+    border-radius: 9rpx;
+}
+
+.confirmstore {
+    width: 690rpx;
+    height: 226rpx;
+    background-color: white;
+    border-radius: 9rpx;
+    border: 2rpx solid #afd250;
+    margin: auto;
+    margin-top: 35rpx;
+}
+
+.store_left {
+    width: 498rpx;
+    height: 272rpx;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+
+.confirmstore_left {
+    width: 498rpx;
+    height: 226rpx;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.store_Name {
+    margin-left: 31rpx;
+    height: 43rpx;
+    font-size: 32rpx;
+    font-family: Segoe UI, Segoe UI-Bold;
+    font-weight: 700;
+    margin-top: 23rpx;
+    color: #000000;
+}
+
+.store_detail_adress {
+    width: 395rpx;
+    height: 64rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    text-align: left;
+    /* line-height: 64rpx; */
+    color: #000000;
+    margin-left: 10rpx;
+}
+
+.storebusinesshours {
+    /* width: 124px; */
+    height: 32rpx;
+    font-size: 24rpx;
+    font-family: Segoe UI, Segoe UI-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #000000;
+    margin-left: 10rpx;
+}
+
+.storeState {
+    width: 93rpx;
+    height: 38rpx;
+    border: 1px solid #707070;
+    border-radius: 5rpx;
+    margin-top: 18rpx;
+    margin-left: 38rpx;
+    text-align: center;
+    line-height: 38rpx;
+}
+
+.store_right {
+    max-height: 180rpx;
+    /* width: 92rpx; */
+    margin-left: 50rpx;
+}
+
+.phoneTab {
+    width: 750rpx;
+    height: 336rpx;
+    background: #ffffff;
+    border-radius: 17rpx 17rpx 0rpx 0rpx;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 30;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.phoneTab_center {
+    width: 345rpx;
+    height: 148rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    text-align: left;
+    color: #000000;
+    margin-bottom: 134rpx;
+    margin-top: 54rpx;
+    justify-content: space-between;
+    margin-left: 203rpx;
+    justify-content: center;
+    align-items: center;
+}
+
+.cart-pannel {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 19;
+}
+
+.make-layer-bg {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    opacity: 0.8;
+    position: fixed;
+    left: 0;
+    top: 0;
+}
+
+.commodity_attr_box {
+    height: 641rpx;
+    width: 750rpx;
+    overflow: hidden;
+    position: fixed;
+    bottom: 0rpx;
+    left: 0;
+    z-index: 200;
+    background: #fff;
+    /* padding-top: 20rpx; */
+    border-radius: 17rpx 17rpx 0px 0px;
+}
+
+.Pick_up_in_store {
+    width: 324rpx;
+    height: 78rpx;
+    background: #ffffff;
+    border: 1rpx solid #707070;
+    border-radius: 40rpx;
+    line-height: 78rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    text-align: center;
+    color: #000000;
+}
+.home_delivery{
+    width: 324rpx;
+    height: 78rpx;
+    background: #afd250;
+    border-radius: 39rpx;
+    margin-left: 48rpx;
+font-size: 28rpx;
+line-height: 78rpx;
+font-weight: 400;
+text-align: center;
+color: #f5f5f5;
+}
+.confirmstore_Delivery_Method{
+    margin: auto;
+    margin-top: 109rpx;
+}
+.sotre_none_img{
+    width: 579rpx;
+    height: 478rpx;
+   
+
+}

pages/welfareMall/historical/historical.js

@@ -16,6 +16,7 @@ Page({
     mobileTop: 'TONY WU',
     orderList: [],
     config: {},
+    currentData:0,
   },
 
   /**
@@ -114,12 +115,6 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-    if (this.data.lock || this.data.noMore) {
-      return
-    }
-    this.data.lock = true
-    this.data.page++
-    this.getOrderList();
 
   },
 
@@ -135,5 +130,46 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+    //点击切换，滑块index赋值
+    checkCurrent:function(e){
+      const that = this;
+   
+      if (that.data.currentData === e.target.dataset.current){
+          return false;
+      }else{
+   
+        that.setData({
+          currentData: e.target.dataset.current
+        })
+      }
+    },
+
+         //获取当前滑块的index
+  bindchange:function(e){
+    const that  = this;
+    that.setData({
+      currentData: e.detail.current
+    })
+  },
+  bottomefficientList(){
+    if (this.data.lock || this.data.noMore) {
+      return
+    }
+    this.data.lock = true
+    this.data.page++
+    this.getOrderList();
+
+  },
+  bottomefficientListbyOrder(){
+
+  },
+
+  goToOrderDetail(){
+      wx.navigateTo({
+        url: '/pages/groupmeallist/orderDetail/orderDetail',
+      })
+
+
   }
 })

pages/welfareMall/historical/historical.wxml

@@ -1,34 +1,106 @@
 <!--pages/welfareMall/historical/historical.wxml-->
 <!-- 历史订单 -->
-<view class="historical flex-column">
-  <view class="historical-style flex-column">
-    <!-- 内容 -->
-    <view class="historical-content flex-column" wx:for="{{orderList}}" wx:key="index" data-ordersn="{{item.orderSn}}" catchtap="getCompletion">
-      <view class="content-hm flex-column">
-        <view class="content-head flex-row">
-          <view class="content-head-date">{{item.payedAt}}</view>
-          <view class="content-head-state">{{item.status.showText}}</view>
-        </view>
-        <view class="content-middle flex-row">
-          <view class="middle-it flex-row">
-            <image class="middle-img" src="{{item.goodsList[0].fullCoverImg}}" />
-            <view class="middle-text over-ellipsis">{{item.goodsList[0].activityName}}</view>
+<view class="containerDiscount">
+
+  <view class='nav'>
+    <!-- <view class='title_text'>优惠中心</view> -->
+    <view class='topTabSwiper'>
+      <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}' data-current="0" bindtap='checkCurrent'>
+        门店订单</view>
+      <view class='tabtwo  {{currentData == 1 ? "tabBorer" : ""}}' data-current="1" bindtap='checkCurrent'>券包订单</view>
+    </view>
+
+    <swiper current="{{currentData}}" class='swiper' style="height:1400rpx;" duration="300" bindchange="bindchange">
+      <swiper-item>
+        <scroll-view style="height: 95%;" scroll-y="true" bindscrolltolower="bottomefficientListbyOrder">
+          <view>
+            <view class="orderDiv flex-column" catchtap="goToOrderDetail">
+              <view class="orderDiv_title flex-row">
+                <view class="order_store_name">上海浦东金高路店</view>
+                <view class="order_state">待支付</view>
+              </view>
+              <view class="order_way flex-row">
+                <view class="order_way_wx">微信小程序</view>
+                <!-- 存在堂食 和 外卖俩种 -->
+                <view class="order_way_Doshoku">堂食</view>
+
+              </view>
+              <!-- 存在循环 -->
+
+              <view class="order_goods flex-row">
+                <view class="order_goods_left flex-row">
+                  <view style="margin-left: 38rpx;">
+                    <image style="width: 132rpx; height: 132rpx;" src="/images/groupmeallist/order_good.png"></image>
+                  </view>
+                  <view style="font-size: 24rpx;font-weight: 400;text-align: left;color: #000000;margin-left:21rpx">清爽夏日套餐</view>
+                </view>
+
+                <view class="order_goods_right">
+                  <view style="font-size: 32rpx;font-weight: 700;">¥ 20.0</view>
+                  <view style="font-size: 24rpx;font-weight: 400;color: #9d9d9d;margin-top:8rpx">共1件</view>
+                </view>
+
+              </view>
+
+              <view class="pick_order_Num">
+                <view style="font-size: 24rpx;font-weight: 400;color: #989898;margin-left: 26rpx;">取单号</view>
+                <view style="font-size: 32rpx;font-weight: 700;color: #444444;margin-left: 44rpx;">2105</view>
+
+              </view>
+
+              <view class="order_goods_bottom">
+                <!-- <view class="canel_order">取消订单</view>
+                <view class="pay_order">立即支付</view> -->
+
+                <view class="Request_a_refund">申请退款</view>
+
+              </view>
+            </view>
           </view>
-          <view class="middle-num flex-column">
-            <view class="middle-num-money">￥{{item.payPriceFormatter}}</view>
-            <view class="money-num-count">x{{item.goodsList.length}}</view>
+        </scroll-view>
+
+      </swiper-item>
+
+      <swiper-item>
+        <scroll-view style="height: 95%;" scroll-y="true" bindscrolltolower="bottomefficientList">
+          <view class="historical flex-column">
+            <view class="historical-style flex-column">
+              <!-- 内容 -->
+              <view class="historical-content flex-column" wx:for="{{orderList}}" wx:key="index" data-ordersn="{{item.orderSn}}" catchtap="getCompletion">
+                <view class="content-hm flex-column">
+                  <view class="content-head flex-row">
+                    <view class="content-head-date">{{item.payedAt}}</view>
+                    <view class="content-head-state">{{item.status.showText}}</view>
+                  </view>
+                  <view class="content-middle flex-row">
+                    <view class="middle-it flex-row">
+                      <image class="middle-img" src="{{item.goodsList[0].fullCoverImg}}" />
+                      <view class="middle-text over-ellipsis">{{item.goodsList[0].activityName}}</view>
+                    </view>
+                    <view class="middle-num flex-column">
+                      <view class="middle-num-money">￥{{item.payPriceFormatter}}</view>
+                      <view class="money-num-count">x{{item.goodsList.length}}</view>
+                    </view>
+                  </view>
+                </view>
+                <view class="content-line"></view>
+                <view class="content-lower">
+                  <view class="lower-total">共{{item.goodsList.length}}件商品 合计￥{{item.payPriceFormatter}}</view>
+                  <view class="lower-order-style flex-row" style="color: {{config.secColor?config.secColor:'#B01717'}};">
+                    <view class="lower-order-text" style="color: {{config.secColor?config.secColor:'#B01717'}};">订单详情</view>
+                  </view>
+                </view>
+              </view>
+              <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无历史订单 ————</view>
+              <view class="no_result" wx:if="{{noMore}}">—— 人家也是有底线的 ——</view>
+            </view>
           </view>
-        </view>
-      </view>
-      <view class="content-line"></view>
-      <view class="content-lower">
-        <view class="lower-total">共{{item.goodsList.length}}件商品 合计￥{{item.payPriceFormatter}}</view>
-        <view class="lower-order-style flex-row" style="color: {{config.secColor?config.secColor:'#B01717'}};">
-          <view class="lower-order-text" style="color: {{config.secColor?config.secColor:'#B01717'}};">订单详情</view>
-        </view>
-      </view>
-    </view>
-    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无历史订单 ————</view>
-    <view class="no_result" wx:if="{{noMore}}">—— 人家也是有底线的 ——</view>
+        </scroll-view>
+      </swiper-item>
+
+    </swiper>
+
+
+
   </view>
 </view>

pages/welfareMall/historical/historical.wxss

@@ -1,15 +1,276 @@
 /* pages/welfareMall/historical/historical.wxss */
-page{
+
+.containerDiscount {
+  height: 100%;
+  background-color: silver;
+
+}
+
+
+
+.nav {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  background: white;
+}
+
+.topTabSwiper {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  /* margin-left: 50px; */
+  font-size: 15px;
+  color: black;
+  font-weight: bold;
+  width: 100%;
+
+}
+
+.tab {
+  margin-left: 120rpx;
+  /* width: 90px; */
+  text-align: center;
+  padding-bottom: 5rpx;
+}
+
+.tabtwo {
+  margin-right: 83rpx;
+  /* width: 90px; */
+  text-align: center;
+  padding-bottom: 5rpx;
+
+}
+
+.swiper {
+  background-color: #F7F7F7;
+  width: 100%;
+  height: 100vh;
+}
+
+
+/* scroll-view滚动条消失术 */
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.tabBorer {
+  /* background: #FE7253; */
+  border-bottom: 2px solid #AFD250;
+  color: #AFD250;
+}
+
+
+.orderDiv {
+  width: 723rpx;
+  min-height: 397rpx;
+
+  max-height: 508rpx;
+  background: #ffffff;
+  border-radius: 25rpx;
+  margin: auto;
+  margin-top: 19rpx;
+}
+
+.order_store_name {
+  /* width: 256px; */
+  height: 43rpx;
+  font-size: 32rpx;
+  font-family: Segoe UI, Segoe UI-Bold;
+  font-weight: 700;
+  text-align: left;
+  color: #000000;
+  margin-top: 21rpx;
+  margin-left: 24rpx;
+
+}
+
+.orderDiv_title {
+  height: 43rpx;
+  width: 100%;
+  justify-content: space-between !important;
+  align-items: center;
+  text-align: center;
+  line-height: 43rpx;
+}
+
+.order_state {
+  height: 31rpx;
+  font-size: 24rpx;
+  line-height: 53rpx;
+  color: #AFD250;
+  margin-right: 20rpx;
+}
+
+.order_way {
+  width: 100%;
+  height: 37px;
+  /* border: 2px solid #b9d25c; */
+  /* border-radius: 6px; */
+  justify-content: flex-start !important;
+  align-items: center;
+  text-align: center;
+}
+
+.order_way_wx {
+  width: 142rpx;
+  height: 37rpx;
+  background: #b9d25c;
+  border-radius: 6rpx;
+  font-size: 24rpx;
+  font-weight: 400;
+  text-align: center;
+  margin-left: 24rpx;
+  margin-top: 18rpx;
+
+}
+
+.order_way_Doshoku {
+  width: 91rpx;
+  height: 37rpx;
+  border: 2rpx solid #b9d25c;
+  border-radius: 6rpx;
+  margin-left: 11rpx;
+
+  margin-top: 18rpx;
+  /* width: 48px;
+height: 31px; */
+  font-size: 24rpx;
+  font-weight: 400;
+  text-align: center;
+  color: #b9d25c;
+}
+
+.order_goods {
+  width: 100%;
+  height: 132rpx;
+  margin-top: 29rpx;
+  justify-content: space-between !important;
+  align-items: flex-start !important;
+
+
+}
+
+.order_goods_left {
+  height: 132rpx;
+  /* margin-top: 29rpx; */
+  justify-content: flex-start !important;
+  align-items: flex-start !important;
+}
+
+
+.order_goods_right {
+  /* width: 100rpx;
+  height: 100rpx; */
+  margin-top: 50rpx;
+  margin-right: 20rpx;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content:center !important;
+  align-self: center !important;
+  text-align: right;
+}
+.order_goods_bottom{
+  width: 100%;
+  height: 50rpx;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content:flex-end !important;
+  align-self: center !important;
+  margin-top: 27rpx;
+  line-height: 50rpx;
+  text-align: center;
+  margin-bottom: 28rpx;
+}
+.canel_order{
+  width: 143rpx;
+height: 50rpx;
+background: #ffffff;
+border: 1rpx solid #707070;
+border-radius: 11rpx;  
+margin-right: 19rpx;
+
+
+font-size: 24rpx;
+line-height: 50rpx;
+
+font-weight: 400;
+text-align: center;
+color: #000000;
+
+}
+.pay_order{
+  width: 143rpx;
+height: 50rpx;
+background: #B9D25C;
+
+border-radius: 11rpx;  
+
+margin-right: 20rpx;
+font-size: 24rpx;
+line-height: 50rpx;
+border: 1rpx solid #B9D25C;
+font-weight: 400;
+text-align: center;
+color: white;
+
+}
+
+.Request_a_refund{
+  width: 143rpx;
+height: 50rpx;
+background: #ffffff;
+border: 1px solid #707070;
+border-radius: 11rpx;
+
+font-size: 24rpx;
+font-weight: 400;
+text-align: center;
+color: #000000;
+margin-right: 20rpx;
+
+
+}
+.pick_order_Num{
+  width: 679rpx;
+  height: 90rpx;
+  background: #f6f6f6;
+  border-radius: 15rpx;
+  margin: auto;
+  margin-top: 37rpx;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start !important;
+  align-items: center !important;
+  line-height: 90rpx;
+  text-align: center;
+}
+/* 分割*/
+
+
+
+
+
+
+.page {
   background: #F7F7F7;
 }
-.historical{
+
+.historical {
   width: 750rpx;
   height: auto;
-  padding-bottom: 119rpx; 
+  padding-bottom: 119rpx;
 }
 
 /* 垂直方向布局，水平居中 **/
-.flex-column{
+.flex-column {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
@@ -17,18 +278,18 @@ page{
 }
 
 /* 水平方向布局，垂直居中 **/
-.flex-row{
+.flex-row {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
 }
 
-.historical-style{
+.historical-style {
   margin-top: 14rpx;
 }
 
-.historical-content{
+.historical-content {
   width: 716rpx;
   /* height: 327rpx; */
   background: #FFFFFF;
@@ -36,17 +297,18 @@ page{
   margin-bottom: 20rpx;
 }
 
-.content-hm{
+.content-hm {
   width: 680rpx;
   height: 242rpx;
 }
-.content-head{
+
+.content-head {
   width: 676rpx;
   height: 22rpx;
   justify-content: space-between;
 }
 
-.content-head-date{
+.content-head-date {
   width: 230rpx;
   height: 28rpx;
   font-size: 22rpx;
@@ -54,7 +316,7 @@ page{
   color: #A0A0A0;
 }
 
-.content-head-state{
+.content-head-state {
   width: 70rpx;
   height: 28rpx;
   font-size: 22rpx;
@@ -62,25 +324,25 @@ page{
   color: #A0A0A0;
 }
 
-.content-head{
+.content-head {
   width: 676rpx;
   height: 40rpx;
   justify-content: space-between;
   margin-top: 30rpx;
 }
 
-.content-middle{
+.content-middle {
   width: 676rpx;
   height: 160rpx;
   justify-content: space-between;
 }
 
-.middle-img{
+.middle-img {
   width: 160rpx;
   height: 119rpx;
 }
 
-.middle-text{
+.middle-text {
   width: 240rpx;
   height: 36rpx;
   font-size: 28rpx;
@@ -90,30 +352,30 @@ page{
   margin-bottom: 34rpx;
 }
 
-.middle-num{
+.middle-num {
   align-items: flex-end;
 }
 
-.middle-num-money{
+.middle-num-money {
   font-size: 28rpx;
   font-weight: 500;
   color: #444444;
   margin-top: 10rpx;
 }
 
-.money-num-count{
+.money-num-count {
   font-size: 22rpx;
   font-weight: 500;
   color: #A0A0A0;
 }
 
-.content-line{
+.content-line {
   width: 679rpx;
   height: 1px;
   background: #EFEFEF;
 }
 
-.content-lower{
+.content-lower {
   width: 676rpx;
   padding-top: 30rpx;
   padding-bottom: 30rpx;
@@ -123,7 +385,7 @@ page{
   flex-direction: row;
 }
 
-.lower-total{
+.lower-total {
   font-size: 24rpx;
   font-family: Source Han Sans CN;
   font-weight: 500;
@@ -133,7 +395,7 @@ page{
   flex: 1;
 }
 
-.lower-order-style{
+.lower-order-style {
   width: 140rpx;
   height: 46rpx;
   box-sizing: border-box;
@@ -142,7 +404,7 @@ page{
   border-radius: 10rpx;
 }
 
-.lower-order-text{
+.lower-order-text {
   font-size: 22rpx;
   font-weight: 500;
   /* color: #B01717; */

project.private.config.json

@@ -254,6 +254,27 @@
                     "name": "",
                     "pathName": "pages/groupmeallist/goodDetails/goodDetails",
                     "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/groupmeallist/storeList/storeList",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/welfareMall/historical/historical",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/groupmeallist/orderDetail/orderDetail",
+                    "query": "",
                     "scene": null,
                     "launchMode": "default"
                 }