From 6bb8f049b6ba2c7aa9a2ffe98f1addbb8814c94d Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Wed, 12 Oct 2022 13:50:18 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E5=88=B7=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 coupon/myOrder.html | 95 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 67 insertions(+), 28 deletions(-)

diff --git a/coupon/myOrder.html b/coupon/myOrder.html
index dc1f39a..0d2172d 100644
--- a/coupon/myOrder.html
+++ b/coupon/myOrder.html
@@ -24,39 +24,46 @@
         <!-- 弹出提示 -->
         <img class="backPresTy" @click="backHandler"
             src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
-        <div class="content">
-            <div class="content-item" v-for="item in orderList" :key="item.order_number">
-                <div class="top">
-                    <p class="time">{{item.update_time}}</p>
-                    <p class="status" :style="{color:statusColor(item.status)}">{{item.status_text}}
-                    </p>
-                </div>
-                <div class="middle">
-                    <img :src="filterImgSrc(item)" alt="">
-                    <div class="right">
-                        <div class="title_originalPrice">
-                            <p class="title">{{item.product_name}}</p>
-                            <p class="originalPrice">￥{{item.official_price}}</p>
+
+        <div id="refresh" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"
+            style="height:100%;">
+            <img v-show='loadShowHeight' class='img-lodging'
+                src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/img-logding.png" alt="">
+            <div class="content" slot="content">
+                <div class="content-item" v-for="item in orderList" :key="item.order_number">
+                    <div class="top">
+                        <p class="time">{{item.update_time}}</p>
+                        <p class="status" :style="{color:statusColor(item.status)}">{{item.status_text}}
+                        </p>
+                    </div>
+                    <div class="middle">
+                        <img :src="filterImgSrc(item)" alt="">
+                        <div class="right">
+                            <div class="title_originalPrice">
+                                <p class="title">{{item.product_name}}</p>
+                                <p class="originalPrice">￥{{item.official_price}}</p>
+                            </div>
+                            <p class="id">订单编号：{{item.order_number}}</p>
                         </div>
-                        <p class="id">订单编号：{{item.order_number}}</p>
+                    </div>
+                    <div class="bottom">
+                        <p class="money">实付金额：￥<span>{{item.pay_amount}}</span></p>
+                        <p class="button" @click="immediatelyPay(item)" v-show="item.status===6">立即支付</p>
+                        <!-- 立减金待领取 -->
+                        <p class="button" @click="receiveFn(item)" v-show="item.status===1&&item.type===2">去兑换</p>
+                        <!-- 立减金领取过期 -->
+                        <p class="button filter" v-show="item.status===5&&item.type===2">去兑换</p>
                     </div>
                 </div>
-                <div class="bottom">
-                    <p class="money">实付金额：￥<span>{{item.pay_amount}}</span></p>
-                    <p class="button" @click="immediatelyPay(item)" v-show="item.status===6">立即支付</p>
-                    <!-- 立减金待领取 -->
-                    <p class="button" @click="receiveFn(item)" v-show="item.status===1&&item.type===2">去兑换</p>
-                    <!-- 立减金领取过期 -->
-                    <p class="button filter" v-show="item.status===5&&item.type===2">去兑换</p>
+                <!-- 空状态 -->
+                <div class="empty" v-if="!orderList.length">
+                    <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/order-empty.png" alt="">
+                    <p>暂无订单</p>
                 </div>
             </div>
-            <!-- 空状态 -->
-            <div class="empty" v-if="!orderList.length">
-                <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/order-empty.png" alt="">
-                <p>暂无订单</p>
-            </div>
         </div>
 
+
         <model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText" :bottom_text="bottomText"
             @backFunction="backFunction">
         </model-pop>
@@ -98,20 +105,26 @@
                     /* toast */
                     toastShow: '',
                     toastTip: '',
+                    redirect: false,
 
-                    redirect: false
+                    /* 加载 */
+                    scrollTop: 0,
+                    startY: 0,
+                    loadShowHeight: 0
                 }
             },
 
             components: {
                 tabComponent,
                 payPop,
-                modelPop
+                modelPop,
             },
 
             created () {
                 this.getOrderList()
                 this.goodsCount = localStorage.getItem('goodsCount');
+                this.scrollTop =
+                    document.documentElement.scrollTop || document.body.scrollTop
             },
 
             methods: {
@@ -121,6 +134,32 @@
                     return colorArray[status];
                 },
 
+                /* 以下三个方法是下拉刷新 */
+                touchStart (e) {
+                    this.startY = e.targetTouches[0].pageY
+                },
+
+
+                touchMove (e) {
+                    if (this.scrollTop == 0) {
+                        let moveDistance = e.targetTouches[0].pageY - this.startY
+                        if (moveDistance > 0 && moveDistance <= 80) {
+                            this.loadShowHeight = moveDistance
+                        }
+                    }
+                },
+
+                touchEnd () {
+                    if (this.loadShowHeight >= 60) {
+                        this.getOrderList()
+                        setTimeout(() => {
+                            this.loadShowHeight = 0;
+                        }, 2000);
+                    } else {
+                        this.loadShowHeight = 0
+                    }
+                },
+
                 /* 图标分流 */
                 filterImgSrc (item) {
                     if (item.type === 1) {