payok

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: "LayoutLink",
+  name: 'LayoutLink',
   props: {
     href: String
   },

@@ -182,6 +182,18 @@ export default {
         orderCode: result.data.orderCode,
         price: this.orderDetail.amount,
         desc: '金额',
+        extra: JSON.stringify({
+          type: UserType.buy,
+          back: {
+            name: 'ProductDetail',
+            params: {
+              productId: this.productId
+            }
+          },
+          forward: {
+            name: 'BuyPayOk',
+          }
+        }),
         onCloseAction() {
           vm.onClose(result.data.orderCode);
         },

 export const routeNames = {
   BUY_ORDER_DETAIL: 'buyOrderDetail',
-  SELL_ORDER_DETIAL: 'sellOrderDetail',
+  SELL_ORDER_DETAIL: 'sellOrderDetail',
 };
 
 const routers = [
@@ -15,7 +15,7 @@ const routers = [
   // 出售订单详情
   // code: 订单编码
   {
-    name: routeNames.SELL_ORDER_DETIAL,
+    name: routeNames.SELL_ORDER_DETAIL,
     path: '/xianyu/:owner/trade/detail/:code',
     component: () => import('./seller-order-detail'),
   },

 <template>
   <LayoutApp :show-back="true">
-    <div>{{count}} 秒</div>
-    <div>支付成功跳转成功页</div>
-    <div>支付失败返回上一层</div>
+    <div class="timer-wrapper">
+      <div class="timer">{{count}}s</div>
+    </div>
+
+    <div class="tip">正在支付中…</div>
+    <div class="tip2">支付成功跳转成功页面，支付失败返回上一层</div>
+
+    <div class="btn-wrapper">
+      <YohoButton class="btn2 ok" txt="继续支付" @click="openPay"></YohoButton>
+      <YohoButton class="btn2" txt="支付完成" @click="goOk"></YohoButton>
+    </div>
   </LayoutApp>
 </template>
 
 <script>
 
 import config from 'config';
+import { UserType } from 'store/order/order-confirm';
+import YohoButton from '../../components/button';
 
 export default {
   name: 'PayPage',
+  components: { YohoButton },
   props: ['orderCode', 'payParams', 'extra'],
   data() {
     return {
-      count: 60
+      count: 10,
+      page: null
     };
   },
   mounted() {
     if (this.payParams) {
-      const url = config.alipayUrl + '?' + this.payParams;
-
-      window.location.href = url;
+      this.openPay();
     }
 
     this.setCount();
+
+    if (this.extra) {
+      this.page = JSON.parse(this.extra || '{}');
+    }
   },
   methods: {
+    openPay() {
+      const url = config.alipayUrl + '?' + this.payParams;
+
+      // window.location.href = url;
+    },
     setCount() {
       if (this.count > 0) {
         setTimeout(() => {
           this.count = this.count - 1;
           this.setCount();
         }, 1000);
+      } else {
+        this.goOk();
+      }
+    },
+    check() {
+
+    },
+    goOk() {
+      this.$router.replace(this.page?.forward);
+    },
+    goDetail() {
+      switch (this.page.type) {
+        case UserType.sell: {
+          this.$router.replace({
+            name: 'sellOrderDetail',
+            params: {
+              owner: UserType.sell,
+              code: this.orderCode
+            }
+          });
+          break;
+        }
+        case UserType.buy: {
+          this.$router.replace({
+            name: 'buyOrderDetail',
+            params: {
+              owner: UserType.buy,
+              code: this.orderCode
+            }
+          });
+          break;
+        }
+        default: {
+          this.goList();
+        }
+      }
+    },
+    goList() {
+      switch (this.page.type) {
+        case UserType.sell: {
+          this.$router.replace({
+            name: 'InSaleOrderList',
+          });
+          break;
+        }
+        case UserType.buy: {
+          this.$router.replace({
+            name: 'OrderList',
+            params: {
+              owner: UserType.buy
+            }
+          });
+          break;
+        }
+        default: {
+          this.$router.replace({
+            name: 'OrderList',
+            params: {
+              owner: UserType.buy
+            }
+          });
+          break;
+        }
       }
     }
   }
@@ -41,5 +123,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.timer-wrapper {
+  margin-top: 60px;
+  text-align: center;
+}
+
+.timer {
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  border-radius: 60px;
+  border: 5px solid black;
+  font-size: 40px;
+  text-align: center;
+  line-height: 110px;
+  font-weight: bolder;
+}
+
+.tip {
+  font-size: 32px;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 20px;
+}
+
+.tip2 {
+  font-size: 28px;
+  color: #999;
+  text-align: center;
+  margin-top: 66px;
+}
+
+.btn-wrapper {
+  margin-top: 100px;
+  padding: 0 40px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn2 {
+  width: 320px;
+  height: 88px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 44px;
+  font-size: 32px;
+  text-align: center;
+  line-height: 88px;
+}
 
+.ok {
+  background: white !important;
+  color: black !important;
+}
 </style>