Jelajahi Sumber

feat(threePay): 优化微信支付页面及流程逻辑

- 三方支付页面增加自定义导航样式
- 支付页面增加用户登录逻辑,未登录自动触发手机号登录
- 微信支付跳转环境由 release 改为 develop 版本
- 统一支付金额单位,前端显示价格除以100保留两位小数
- 支付页面增加自定义顶部导航栏组件替代原生导航
- 增加确认支付按钮,优化页面交互体验
- 确认订单支付后清空购物车,避免重复支付风险
- 修正部分配置文件注释,启用本地开发环境地址
zhangtao 1 hari lalu
induk
melakukan
d559e208eb

+ 2 - 2
src/config/index.ts

@@ -4,7 +4,7 @@ const mapEnvVersion = {
    */
   // develop: 'http://192.168.1.166:8080', // 张
   // develop: 'http://192.168.1.101:8080',
-  // develop: 'http://192.168.0.157:8080',
+  develop: 'http://192.168.0.157:8080',
   // develop: 'http://192.168.1.253:8080',
   // develop: 'http://192.168.0.19:8080', // 邓
   // develop: 'http://192.168.0.217:8080', // 黄
@@ -13,7 +13,7 @@ const mapEnvVersion = {
   // develop: 'http://74949mkfh190.vicp.fun', // 付
   // develop: 'http://47.109.84.152:8081',
   // develop: 'https://5ed0f7cc.r9.vip.cpolar.cn',
-  develop: 'https://smqjh.api.zswlgz.com',
+  // develop: 'https://smqjh.api.zswlgz.com',
   /**
    * 体验版
    */

+ 2 - 1
src/pages.json

@@ -278,7 +278,8 @@
           "name": "smqjh-threePay",
           "islogin": false,
           "style": {
-            "navigationBarTitleText": "支付"
+            "navigationBarTitleText": "支付",
+            "navigationStyle": "custom"
           }
         },
         {

+ 2 - 1
src/store/user.ts

@@ -525,12 +525,13 @@ export const useUserStore = defineStore('user', {
       uni.showLoading({ mask: true })
       const query = {
         orderNumber,
+        phone: String(this.userInfo.mobile),
       }
       const queryString = Object.entries(query)
         .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
         .join('&')
       const path = 'subPack-common/threePay/index'
-      window.location.href = window.location.href = `weixin://dl/business/?appid=wx43b5b906cc30ed0b&path=${path}&query=${queryString}&env_version=release`
+      window.location.href = `weixin://dl/business/?appid=wx43b5b906cc30ed0b&path=${path}&query=${encodeURIComponent(queryString)}&env_version=develop`
       uni.hideLoading()
       // #endif
     },

+ 47 - 14
src/subPack-common/threePay/index.vue

@@ -2,14 +2,45 @@
 import type { wxpay } from '@/api/globals'
 import router from '@/router'
 
-definePage({ name: 'smqjh-threePay', islogin: false, style: { navigationBarTitleText: '支付' } })
+definePage({ name: 'smqjh-threePay', islogin: false, style: { navigationBarTitleText: '支付', navigationStyle: 'custom' } })
 
+const { token } = storeToRefs(useUserStore())
 const orderNumber = ref()
 onLoad((options: any) => {
   orderNumber.value = options.orderNumber
-  handlePay()
+  if (options.phone && !token.value) {
+    handleLogin(options.phone)
+  }
+  else {
+    handlePay()
+  }
+  console.log(options, '============options=======')
 })
 const priceInfo = ref<wxpay>()
+function handleLogin(phoneCode: string) {
+  uni.showLoading({ mask: true })
+  uni.login({
+    provider: 'weixin',
+    success: async (res) => {
+      const data = await Apis.sys.auth({
+        params: {
+          grant_type: 'wechat',
+          code: res.code,
+          phoneCode,
+        },
+      })
+      console.log(data, '============data=======')
+
+      token.value = `Bearer ${data.data.access_token}`
+      useUserStore().getUserInfo()
+      handlePay()
+    },
+    complete: () => {
+      uni.hideLoading()
+    },
+  })
+}
+
 async function handlePay() {
   const res = await useUserStore().handleCommonPayMent(orderNumber.value)
   priceInfo.value = res
@@ -22,7 +53,6 @@ async function handleGoPay() {
     }
     catch {
       // console.log(111)
-      useGlobalToast().show({ msg: '支付失败!请重试' })
     }
   }
 }
@@ -91,18 +121,21 @@ onUnload(() => {
 </script>
 
 <template>
-  <view class="px20rpx pt20rpx">
-    <view class="text-center text-48rpx text-#FF4A39">
-      ¥{{ priceInfo?.price }}
-    </view>
-    <view class="mb20rpx mt24rpx text-center text-26rpx text-[#999]">
-      支付剩余时间:<text class="text-[#FF4A39] font-semibold">
-        {{ countdownText }}
-      </text>
+  <view>
+    <wd-navbar title="支付" :bordered="false" :z-index="99" safe-area-inset-top fixed />
+    <view v-if="priceInfo" class="px20rpx pt20rpx">
+      <view class="text-center text-48rpx text-#FF4A39">
+        ¥{{ (priceInfo?.price / 100).toFixed(2) }}
+      </view>
+      <view class="mb20rpx mt24rpx text-center text-26rpx text-[#999]">
+        支付剩余时间:<text class="text-[#FF4A39] font-semibold">
+          {{ countdownText }}
+        </text>
+      </view>
+      <wd-button block @click="handleGoPay">
+        确认支付
+      </wd-button>
     </view>
-    <wd-button block @click="handleGoPay">
-      确认支付
-    </wd-button>
   </view>
 </template>
 

+ 1 - 0
src/subPack-xsb/confirmOrder/index.vue

@@ -164,6 +164,7 @@ async function handlePay() {
     // #endif
     // #ifdef H5
     useUserStore().handleCommonWechatPay(orderNumber)
+    isPay.value = false
     await useUserStore().clearCart(orderInfo.value.skuList)
     totalProduct.value = null
     // #endif