no message

src/components/zhifutanchuan.vue

@@ -0,0 +1,190 @@
+<template>
+  <view :style="{ top: 0 }" class="z-popup">
+    <view class="zhuangtaitubiao" v-if="[1].includes(type)">
+      <image src="@/static/common/jiazai.gif" mode="aspectFill" style="width: 240rpx; height: 240rpx"></image>
+      <view class="textclass"> 支付中请耐心等待 </view>
+    </view>
+    <view class="zhuangtaitubiao" v-if="[2].includes(type)">
+      <view class="icon">
+        <text class="iconfont icon-chenggong true" style="font-size: 100rpx; color: greenyellow"></text>
+      </view>
+      <view class="textclass"> 支付成功 </view>
+      <view class="textclass" style="margin-top: 20rpx"> ￥{{ 133 }} </view>
+    </view>
+    <view class="zhuangtaitubiao" v-if="[3].includes(type)">
+      <view class="icon">
+        <text class="iconfont icon-shibai false" style="font-size: 100rpx; color: red"></text>
+      </view>
+      <view class="textclass"> 支付失败 </view>
+      <view class="textclass" style="margin-top: 20rpx"> ￥{{ 133 }} </view>
+    </view>
+
+    <view class="zhuangtaitubiao" style="justify-content: flex-start !important" v-if="[2].includes(type)">
+      <view class="title">支付信息</view>
+      <view class="row">
+        <view class="label">支付单号：</view>
+        <view class="value">{{ orderId }}</view>
+      </view>
+      <view class="row">
+        <view class="label">支付金额：</view>
+        <view class="price">¥{{ detail.totalAmount || '' }}</view>
+      </view>
+      <view class="row">
+        <view class="label">支付时间：</view>
+        <view class="value">{{ detail.payTime || '' }}</view>
+      </view>
+      <view class="row">
+        <view class="label">支付结果：</view>
+        <view class="value">成功</view>
+      </view>
+      <view class="row">
+        <view class="label">支付方式：</view>
+        <view class="value">{{ detail.payType | payTypeFilter }}</view>
+      </view>
+    </view>
+
+    <view class="anniukuang" v-if="[1].includes(type)">
+      <u-button text="取消" @click="back"></u-button>
+    </view>
+    <view class="anniukuang" v-if="[1, 3].includes(type)">
+      <u-button type="primary" text="重新扫描" @click="scan"></u-button>
+    </view>
+    <view class="anniukuang" v-if="[2].includes(type)">
+      <u-button type="primary" text="返回订单" @click="back"></u-button>
+    </view>
+    <view class="anniukuang" v-if="[3].includes(type)">
+      <u-button type="primary" text="查询支付结果" @click="KeepWaiting"></u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    detail: {
+      type: Object,
+      default: () => ({})
+    },
+    orderId: {
+      type: [String, Number],
+      default: ''
+    },
+    state: {
+      type: [String, Number],
+      default: 3
+    }
+  },
+  filters: {
+    payTypeFilter(val) {
+      const MAP = {
+        WECHAT: '微信支付',
+        LINE: '线下支付'
+      }
+      return MAP[val]
+    }
+  },
+  data() {
+    return {
+      type: this.state,
+      miao: 30
+    }
+  },
+  watch: {
+    state() {
+      if (this.state == 2) {
+        if (this.timeId) {
+          clearTimeout(this.timeId)
+        }
+      }
+      this.type = this.state
+    },
+    miao: {
+      handler(newVal, oldVal) {
+        if (newVal > 0) {
+          if (this.timeId) {
+            clearTimeout(this.timeId)
+          }
+          this.timeId = setTimeout(() => {
+            this.miao--
+          }, 1000)
+        } else {
+          this.type = 3
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    scan() {
+      if (this.timeId) {
+        clearTimeout(this.timeId)
+      }
+      this.$emit('scan')
+    },
+    KeepWaiting() {
+      this.type = 1
+      this.miao = 30
+    },
+    back() {
+      if (this.timeId) {
+        clearTimeout(this.timeId)
+      }
+      this.$emit('back')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.z-popup {
+  position: fixed;
+  background: #efefef;
+  width: 100%;
+  height: 100vh;
+  z-index: 1000000000;
+  left: 0;
+  right: 0;
+  transition: top 0.5s;
+  box-sizing: border-box;
+  padding: 40rpx;
+  .zhuangtaitubiao {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    padding: 40rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    margin-bottom: 50rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .textclass {
+      font-size: 42rpx;
+      font-weight: 500;
+    }
+  }
+  .anniukuang {
+    width: 100%;
+    margin-bottom: 20rpx;
+  }
+  .title {
+    font-size: 32rpx;
+    font-weight: 500;
+    align-items: left;
+  }
+  .row {
+    display: flex;
+    align-items: left;
+    margin-top: 30rpx;
+    width: 100%;
+    .label {
+      color: $sec-font;
+    }
+    .price {
+      color: $minor-color;
+      font-weight: 500;
+    }
+  }
+}
+</style>

src/packageMaterial/pages/newSale/pay.vue

@@ -39,12 +39,13 @@
         </view>
       </template>
     </zj-page-layout>
+    <zhifutanchuan v-if="state > 0" :detail="detail" :orderId="orderId" :state="state" @scan="scan" @back="back" />
   </view>
 </template>
 
 <script>
 import { wxScanCode } from '@/common/utils/util.js'
-
+import zhifutanchuan from '@/components/zhifutanchuan.vue'
 export default {
   data() {
     return {
@@ -57,10 +58,13 @@ export default {
       canScanCode: 0,
       timeout: null,
       timeoutNum: 0,
-      payType: 1
+      payType: 1,
+      state: 0
     }
   },
-
+  components: {
+    zhifutanchuan
+  },
   onLoad({ handleOrderId, wbId }) {
     this.orderId = handleOrderId
     this.wbId = wbId
@@ -71,10 +75,29 @@ export default {
   },
 
   onUnload() {
-    clearTimeout(this.timeout)
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
   },
 
   methods: {
+    scan() {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+      this.scanCode()
+    },
+    back() {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+      this.$navToPage(
+        {
+          url: `/packageMaterial/pages/index?type=P`
+        },
+        'reLaunch'
+      )
+    },
     getDetail() {
       let url = '/pay/getOrder'
       let params = {}
@@ -134,45 +157,23 @@ export default {
           payType: 'WECHAT'
         })
         .then(res => {
+          if (this.state == 0) {
+            this.state = 1
+          }
           // 返回true，则支付成功
           if (res.data) {
-            this.timeoutNum = 0
-            clearTimeout(this.timeout)
-            this.$navToPage({
-              url: `/packageMaterial/pages/newSale/result?handleOrderId=${this.orderId}&result=1`
-            })
+            this.state = 2
           }
           // 返回false，轮询3次
           else {
-            if (this.timeoutNum < 4) {
-              this.timeoutNum = this.timeoutNum + 1
-              this.timeout = setTimeout(() => {
-                this.submitData(code)
-              }, 1000)
-            } else {
-              this.timeoutNum = 0
-              clearTimeout(this.timeout)
-              this.$navToPage({
-                url: `/packageMaterial/pages/newSale/result?handleOrderId=${this.orderId}&result=0`
-              })
-            }
+            this.timeout = setTimeout(() => {
+              this.submitData(code)
+            }, 1000)
           }
         })
         .catch(res => {
-          this.timeoutNum = 0
-          clearTimeout(this.timeout)
           this.$tips(res.message)
         })
-        .finally(() => {
-          this.canScanCode = 15
-          let time = setInterval(() => {
-            if (this.canScanCode > 0) {
-              this.canScanCode = this.canScanCode - 1
-            } else {
-              clearInterval(time)
-            }
-          }, 1000)
-        })
     },
 
     confirmPay() {

src/packageMaterial/pages/sale/pay.vue

@@ -30,46 +30,26 @@
           <view class="row"><text>备注：</text>{{ detail.remark }}</view>
           <view class="row"><text>操作人：</text>{{ detail.workerName }}</view>
         </view>
-
-        <!-- <view class="pay-container card mt30">
-          <view class="top">请选择客户支付方式</view>
-          <view class="item" @tap="payType = 1">
-            <view class="left">
-              <text class="iconfont icon-weixinzhifu" style="color: #43c93e"></text>
-              <text class="text">微信支付</text>
-            </view>
-            <view class="right">
-              <text class="iconfont" :class="payType === 1 ? 'icon-danxuan2 active' : 'icon-danxuan'"></text>
-            </view>
-          </view>
-          <view class="item" @tap="payType = 2">
-            <view class="left">
-              <text class="iconfont icon-xianxiazhifu" style="color: #0379ff"></text>
-              <text class="text">线下支付</text>
-            </view>
-            <view class="right">
-              <text class="iconfont" :class="payType === 2 ? 'icon-danxuan2 active' : 'icon-danxuan'"></text>
-            </view>
-          </view>
-        </view> -->
       </view>
 
       <template slot="footer">
         <view class="footer-btn-group">
           <u-button text="取消订单" @click="cancelOrder"></u-button>
           <u-button text="扫码支付" type="primary" @click="scanCode"></u-button>
-          <!-- <u-button text="扫码支付" type="primary" @click="scanCode" v-if="payType === 1"></u-button> -->
-          <!-- <u-button text="确定支付" type="primary" @click="confirmPay" v-else></u-button> -->
         </view>
       </template>
     </zj-page-layout>
+    <zhifutanchuan v-if="state > 0" :detail="detail" :orderId="orderId" :state="state" @scan="scan" @back="back" />
   </view>
 </template>
 
 <script>
 import { wxScanCode } from '@/common/utils/util.js'
-
+import zhifutanchuan from '@/components/zhifutanchuan.vue'
 export default {
+  components: {
+    zhifutanchuan
+  },
   data() {
     return {
       orderId: null,
@@ -81,8 +61,8 @@ export default {
       canScanCode: 0,
       timeout: null,
       timeoutNum: 0,
-
-      payType: 1
+      payType: 1,
+      state: 0
     }
   },
 
@@ -90,17 +70,35 @@ export default {
     this.orderId = handleOrderId
     this.wbId = wbId
     this.getDetail()
-
     this.crossPage.$on('reScanCode', () => {
       this.scanCode()
     })
   },
 
   onUnload() {
-    clearTimeout(this.timeout)
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
   },
 
   methods: {
+    scan() {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+      this.scanCode()
+    },
+    back() {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+      this.$navToPage(
+        {
+          url: `/packageMaterial/pages/index?type=M`
+        },
+        'reLaunch'
+      )
+    },
     getDetail() {
       let url = '',
         params = {}
@@ -171,45 +169,23 @@ export default {
           payType: 'WECHAT'
         })
         .then(res => {
+          if (this.state == 0) {
+            this.state = 1
+          }
           // 返回true，则支付成功
           if (res.data) {
-            this.timeoutNum = 0
-            clearTimeout(this.timeout)
-            this.$navToPage({
-              url: `/packageMaterial/pages/sale/result?handleOrderId=${this.orderId}&result=1&wbId=${this.wbId || ''}`
-            })
+            this.state = 2
           }
           // 返回false，轮询3次
           else {
-            if (this.timeoutNum < 4) {
-              this.timeoutNum = this.timeoutNum + 1
-              this.timeout = setTimeout(() => {
-                this.submitData(code)
-              }, 1000)
-            } else {
-              this.timeoutNum = 0
-              clearTimeout(this.timeout)
-              this.$navToPage({
-                url: `/packageMaterial/pages/sale/result?handleOrderId=${this.orderId}&result=0&wbId=${this.wbId || ''}`
-              })
-            }
+            this.timeout = setTimeout(() => {
+              this.submitData(code)
+            }, 1000)
           }
         })
         .catch(res => {
-          this.timeoutNum = 0
-          clearTimeout(this.timeout)
           this.$tips(res.message)
         })
-        .finally(() => {
-          this.canScanCode = 15
-          let time = setInterval(() => {
-            if (this.canScanCode > 0) {
-              this.canScanCode = this.canScanCode - 1
-            } else {
-              clearInterval(time)
-            }
-          }, 1000)
-        })
     },
 
     confirmPay() {

src/packageMaterial/pages/sale/result.vue

@@ -2,7 +2,6 @@
   <!-- #ifdef H5 -->
   <view>
     <Loading :type="3" :loadStatus="loadStatus" :showText="errorText" />
-
     <zj-page-layout v-if="detail" :hasFooter="true">
       <view style="padding: 1rpx 30rpx">
         <view class="top-container card mt30">
@@ -16,7 +15,6 @@
             >¥<text>{{ detail.totalAmount | priceFilter }}</text></view
           >
         </view>
-
         <view class="pay-container card mt30" v-if="result === 1">
           <view class="title">支付信息</view>
           <view class="row">