静态页面

index.html

@@ -5,7 +5,7 @@
   <meta charset='utf-8'>
   <meta content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' name='viewport'>
   <meta name="referrer" content="no-referrer">
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_2022160_zgncjv2mcd.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_2022160_w52az879v6.css">
   <title>牛彩</title>
   <script>
     let Width = document.documentElement.clientWidth / 375 * 100

src/pages/index/DingDanZhiFuZhuangTai/index.vue

@@ -2,7 +2,15 @@
   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="订单状态">
       <div class="PageContainer">
-        订单支付状态
+        <div class="centerLabel">
+          <i class="iconfont iconshibai" v-if="OrderStatus === 'Error'"></i>
+          <span v-if="OrderStatus === 'Error'">支付失败</span>
+          <i class="iconfont iconchenggong active" v-if="OrderStatus === 'Success'"></i>
+          <span v-if="OrderStatus === 'Success'">支付成功</span>
+          <a v-if="OrderStatus === 'Error'" :href="`/api/app/order/alipay/buylottery?orderId=${$route.query.id}&returlURL=${LocationOrigin}&token=${Jwt}`">重新支付</a>
+          <router-link :to="{ name: 'index' }">返回首页</router-link>
+          <a @click="$router.go(-1)">继续投注</a>
+        </div>
       </div>
     </MainPageContainer>
   </div>
@@ -10,21 +18,18 @@
 
 <script>
 import MainPageContainer from '../../../components/common/MainPageContainer'
-import { mapState, mapActions, createNamespacedHelpers } from 'vuex'
-const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
+import { createNamespacedHelpers } from 'vuex'
+const { mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      OrderStatus: null,
+      LocationOrigin: encodeURIComponent(`${window.location.origin}/#/index/DingDanZhiFuZhuangTai?orderId=${this.$route.query.id}`),
+      Jwt: window.localStorage.Jwt
     }
   },
   computed: {
-    ...mapState({
-      AllLotteryType: x => x.AllLotteryType // 所有彩种类型
-    }),
-    ...mapIndexState({
-      NewstLotteryRes: x => x.NewstLotteryRes // 最新数字彩开奖结果列表
-    })
   },
   components: {
     MainPageContainer
@@ -37,19 +42,15 @@ export default {
     })
   },
   methods: {
-    ...mapActions([
-      'GetAllLotteryType'
-    ]),
-    ...mapIndexActions([
-      'GetBanner',
-      'GetLotteryRes',
-      'GetNewstLotteryRes'
-    ]),
-    ...mapIndexMutations([
-      'EmptyBanner'
+    ...mapUserActions([
+      'GetAliPayStatus'
     ]),
     Init () { // 初始化
-
+      if (this.$route.query.id !== undefined) {
+        this.GetAliPayStatus({ urlData: { id: this.$route.query.id } }).then((res) => {
+          this.OrderStatus = res.data.data === 1 ? 'Success' : 'Error'
+        })
+      }
     }
   }
 }

src/pages/index/DingDanZhiFuZhuangTai/page.scss

@@ -8,5 +8,36 @@
     height: 100%;
     position: relative;
     overflow: hidden;
+    > div {
+      width: 100%;
+      text-align: center;
+      > i {
+        font-size: 1rem;
+        color: #f10404;
+        &.active {
+          color: #39ce09;
+        }
+      }
+      > span {
+        display: block;
+        text-align: center;
+        font-size: 0.14rem;
+        line-height: 0.2rem;
+        margin-top: 0.2rem;
+        + a {
+          margin-top: 0.4rem;
+        }
+      }
+      > a {
+        width: 80%;
+        display: block;
+        font-size: 0.14rem;
+        color: #fff;
+        line-height: 0.4rem;
+        border-radius: 0.06rem;
+        background: #ff5100;
+        margin: 0.2rem auto 0;
+      }
+    }
   }
 }

src/store/user/index.js

@@ -114,6 +114,11 @@ export default {
     }
   },
   actions: {
+    GetAliPayStatus (context, payload) { // 获取支付宝支付结果
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetAliPayStatus, context, payload, 1000)
+      })
+    },
     CreateAliPayOrder (context, payload) { // 创建支付宝订单
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.CreateAliPayOrder, context, payload, 1000)

src/util/Api.js

@@ -77,6 +77,10 @@ const $api = {
   UpdateUserInfo: { // 更新用户信息
     method: 'put',
     url: `${prefix}/app/customer/:id`
+  },
+  GetAliPayStatus: { // 获取支付宝支付结果
+    method: 'get',
+    url: `${prefix}/app/order/:id/paystatus`
   }
 }