css

assets/css/mine/shoporder.scss

 .page-userOrder {
-    padding-top: 10rpx;
-    min-height: 100vh;
-    background: #f5f5f7;
+    padding-top: 202rpx;
     .top {
         position: fixed;
         top: 0;
@@ -86,7 +84,6 @@
     }
     .list {
         padding: 0 24rpx;
-        margin-top: 186rpx;
         .box {
             padding: 0 24rpx 30rpx 24rpx;
             background: #ffffff;

pages/mine/shoporder.vue

@@ -13,17 +13,8 @@
                 <text class="filter" @click="open()">筛选</text>
             </view>
             <view class="tab  row avarage verCenter">
-                <view class="box row rowCenter verCenter"><text class="t1">全部</text></view>
-                <view class="box row rowCenter verCenter curr">
-                    <text class="t2">待付款</text>
-                    <text class="t3">（0）</text>
-                </view>
-                <view class="box row rowCenter verCenter">
-                    <text class="t2">待收货</text>
-                    <text class="t3">（80）</text>
-                </view>
-                <view class="box row rowCenter verCenter">
-                    <text class="t2">已完结订单</text>
+                <view class="box row rowCenter verCenter" v-for="(item, index) in arr" :class="{ curr: index == curr }" :key="index" @click="tab(index)">
+                    <text class="t2">{{ item }}</text>
                     <text class="t3">（0）</text>
                 </view>
             </view>
@@ -68,6 +59,45 @@
                     </view>
                 </view>
             </view>
+            <view class="box" v-for="(item, index) in list" :key="index">
+                <view class="p1 row bothSide verCenter">
+                    <view class="row verCenter">
+                        <text class="t1">订单号：</text>
+                        <text class="t2">{{ item.order_sn }}</text>
+                        <text class="t3">{{ item.create_time }}</text>
+                    </view>
+                    <text class="color2">{{ item.status_val }}</text>
+                </view>
+                <view class="p2 row bothSide verCenter">
+                    <view class="row verCenter">
+                        <text class="t1">附加费：</text>
+                        <text class="t2" style="margin-right: 24rpx;">{{ item.extend_fee_format }}</text>
+                        <text class="t1">运费：</text>
+                        <text class="t2">{{ item.shipping_price_format }}</text>
+                    </view>
+                    <view class="right-bar">
+                        <text class="bar-t1">共</text>
+                        <text class="bar-t2">{{ item.list.length }}</text>
+                        <text class="bar-t1">件商品</text>
+                        <text class="iconfont icon-jt"></text>
+                    </view>
+                </view>
+                <view class="p3 row bothSide verCenter">
+                    <view class="row verCenter">
+                        <text class="t1">总金额：</text>
+                        <text class="price">{{ item.order_amount_format }}</text>
+                    </view>
+                    <view class="right-bar row">
+                        <view class="btn btn0 row rowCenter verCenter" v-if="item.status == 2 || item.status == 3" @click.stop="nowPay(item.order_id)">立即支付</view>
+                        <view class="btn btn1 row rowCenter verCenter" v-if="item.status == 10 || item.status == -1" @click.stop="rebuy(item.order_id)">再次购买</view>
+                        <view class="btn btn2 row rowCenter verCenter" v-if="item.status == 4" @click.stop="sendTip(item.order_sn, item.user_id)">提醒发货</view>
+                        <view class="btn btn3 row rowCenter verCenter" v-if="item.status != 1" @click.stop="downpd(item.order_id)">下载合同</view>
+                        <view class="btn btn4 row rowCenter verCenter" v-if="item.status == 7 || item.status == 8 || item.status == 10" @click.stop="ship(item.order_id, item.order_sn, item.zy_delivery_type, item.status)">查看物流</view>
+                        <view class="btn btn5 row rowCenter verCenter" v-if="item.status == 2 || item.status == 1" @click.stop="cancelOrder(item.order_id)">取消订单</view>
+                        <view class="btn btn6 row rowCenter verCenter" v-if="item.status == 8" @click.stop="sureSend(item.order_id)">确认收货</view>
+                    </view>
+                </view>
+            </view>
         </view>
         <view class="no-data column rowCenter verCenter" v-else>
             <image src="../../static/nodate.png"></image>
@@ -124,6 +154,8 @@ export default {
         });
         return {
             date: currentDate,
+            arr: ['全部', '待付款', '待收货', '已完结订单'],
+            curr: 0,
             list: [],
             searchParams: {
                 p: 1,
@@ -151,6 +183,19 @@ export default {
             day = day > 9 ? day : '0' + day;
             return `${year}-${month}-${day}`;
         },
+        tab(index) {
+            this.curr = index;
+            if (index == 0) {
+                this.searchParams.status = '';
+            } else if (index == 1) {
+                this.searchParams.status = 2;
+            } else if (index == 2) {
+                this.searchParams.status = 8;
+            } else if (index == 3) {
+                this.searchParams.status = 10;
+            }
+            this.getData();
+        },
         open() {
             this.$refs.popup.open('bottom');
         },
@@ -198,6 +243,8 @@ export default {
             this.request(Api_Url + '/order/lists', 'POST', this.searchParams, true, true).then(res => {
                 if (res.err_code === 0) {
                     this.list = res.data.list;
+                } else {
+                    this.list = [];
                 }
             });
         }