代码提交

pages/payStatus/index.vue

@@ -0,0 +1,176 @@
+<!--
+    @name: 支付状态
+    @author: kahu
+    @date: 2023-11-08 12:10
+    @description：index
+    @update: 2023-11-08 12:10
+-->
+<script setup>
+import { useRouter } from "@/hooks/useRouter";
+import { computed, ref, unref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { checkH5Pay } from "@/api/order";
+import { CacheKey } from "@/utils/config";
+
+const {getParams, goBack, push, pushToTab} = useRouter()
+
+const type = ref(0) // 支付状态 ： 0支付中 1支付成功 2支付失败
+
+const title = computed(() => {
+  if (type.value === 0) return '支付中...'
+  if (type.value === 1) return '支付成功'
+  if (type.value === 2) return '支付失败'
+})
+
+const routerParams = ref({})
+
+/**
+ * 去订单列表
+ * @param type 0 待支付 1 待发货
+ */
+function toOrderList(type) {
+  push({url: '/pages/orderList/orderList'}, {data: {type}, type: 'reLaunch'})
+}
+
+function toBackHome() {
+  pushToTab({url: '/pages/index/index'})
+}
+
+/**
+ * 查询服务端支付状态
+ */
+async function queryOrderStatus() {
+  const payInfoStr = uni.getStorageSync(CacheKey.PAY_INFO);
+  if (payInfoStr) {
+    const parse = JSON.parse(payInfoStr);
+    const res = await checkH5Pay(parse);
+    type.value = res ? 1 : 2
+    uni.removeStorageSync(CacheKey.PAY_INFO)
+  } else {
+    // 没有订单缓存直接跳到订单页面
+    toOrderList(0)
+  }
+}
+
+onLoad(async (options) => {
+  // #ifdef H5
+  uni.showModal({
+    content: '请确认支付是否完成',
+    success: async () => {
+      await queryOrderStatus()
+    }
+  })
+  // #endif
+  const params = getParams(options);
+  if (params && params.type === 1) {
+    type.value = 1
+  } else {
+    type.value = 2
+  }
+})
+</script>
+
+<template>
+  <view class="pay-status">
+    <uv-navbar
+        :fixed="false"
+        :title="title"
+        left-arrow
+        @leftClick="goBack"
+    />
+    <view class="status-main flex flex-column flex-ai__center">
+      <image
+          class="icon"
+          v-if="Number(type)===2"
+
+          src="@/static/icon/pay/pay-error.png"
+      />
+      <image
+          class="icon col-icon"
+          v-else-if="Number(type)===0"
+          src="@/static/icon/logo.png"
+      />
+      <image
+          class="icon"
+          v-else
+          src="@/static/icon/pay/pay-success.png"
+      />
+
+      <view class="text">
+        {{ title }}
+      </view>
+    </view>
+    <view class="button-group flex flex-ai__center flex-jc__center">
+      <view
+          class="animation-button button white-button"
+          v-if="Number(type)===1"
+          @click="toBackHome"
+      >
+        继续逛逛
+      </view>
+      <view
+          class="animation-button button"
+          v-if="Number(type)===1"
+          @click="toOrderList(1)"
+      >
+        查看订单
+      </view>
+      <view
+          class="animation-button button"
+          v-if="Number(type)===2"
+          @click="toOrderList(0)"
+      >
+        重新支付
+      </view>
+    </view>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.pay-status {
+  width: 100%;
+
+  .status-main {
+    @include usePadding(0, 130);
+    width: 100%;
+
+    .icon {
+      width: 170rpx;
+      height: 170rpx;
+      margin-bottom: 20rpx;
+    }
+
+    .col-icon {
+      width: 240rpx;
+      height: 120rpx;
+    }
+  }
+
+  .button-group {
+    margin-bottom: 30rpx;
+    gap: 30rpx;
+    display: flex;
+    justify-content: center;
+
+    .button {
+      width: 230rpx;
+      height: 80rpx;
+      background: #333333;
+      font-size: 34rpx;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .white-button {
+      background: $white-color;
+      color: #333;
+      border: 1rpx solid #333;
+    }
+  }
+}
+</style>