1

src/api/api.ts

@@ -47,12 +47,13 @@ export const openPay = (data) => {
     });
   };
   
-export const getOrderInfo = (orderSn) => {
+export const getOrderInfo = (orderSn:string) => {
     return request({
       url: `/service/pay/order/info/${orderSn}`,
       method: "get",
       config: {
         timeout: 10000,
+        loading: true,//隐藏进度条
         headers: {
             "Content-Type": "application/json;charset=UTF-8",
         },

src/assets/base.css

@@ -73,3 +73,17 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #999;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+  border: 2px solid #fff;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}

src/components/Toast/Confirm.vue

@@ -98,6 +98,7 @@ export default {
   background: rgba(0, 0, 0, 0.5);
   .wrapper {
     width: calc(100% - 40px);
+    max-width: 400px;
     border-radius: 10px 10px 10px 10px;
     background: #fff;
     border-radius: 4px;

src/stores/user.ts

@@ -3,13 +3,14 @@ import { defineStore } from 'pinia'
 
 export const useUserStore = defineStore('user', () => {
   const token = ref(localStorage.getItem('token'))
-  const openId = ref(localStorage.getItem('openId'))
+  const openId = ref('o3S0L1Hyd3O0vYI2Kr1lFDEtEO2k'||localStorage.getItem('openId'))
   const info = ref({
     userName: '我的测试',
     orderSn: '',
   })
   const isEur = ref(false)
   const getToken = computed(() => token.value || localStorage.getItem('token'))
+  const getOpenId = computed(() => openId.value || localStorage.getItem('openId'))
   function setToken(newToken: string) {
     token.value = newToken
   }
@@ -17,6 +18,7 @@ export const useUserStore = defineStore('user', () => {
     [name].value = value
     localStorage.setItem(value, name)
   }
+
   isEur.value = window.location.hostname.includes('eur')
-  return { token, getToken, setToken, info, isEur, openId, setUserData }
+  return { token, getToken, getOpenId, setToken, info, isEur, openId, setUserData }
 })

src/views/mobile/index.vue

@@ -107,8 +107,9 @@ async function handleWxlogin(wxAppId:string) {
     getWeChatCode(wxAppId)
   }else if(code){//存在code 换取openid
     const res = wxLogin({code,orderSn:orderSn.value})
-    setUserData(res.openId,'openId')
-    console.log('wxLogin', res)
+    if(!res.errmsg){
+      setUserData(res.openid,'openId')
+    }
   }
 }
 async function handleOpenPay() {

src/views/pc/index.vue

@@ -7,83 +7,85 @@ import logoEn from '@/assets/images/logoEn.png'
 import { useUserStore } from '@/stores/user'
 import QrcodeVue from 'qrcode.vue'
 import { show, showConfirm } from '@/components/Toast'
-import { openPay, queryOrderStatus } from '@/api/api'
-import { useRouter, useRoute } from 'vue-router';
+import { openPay, queryOrderStatus, getOrderInfo } from '@/api/api'
+import { useRouter, useRoute } from 'vue-router'
 import { GetRequest } from '@/utils/index'
 import { getCurrentInstance } from 'vue'
 
-//得到i18n的locale token, info, 
+//得到i18n的locale token, info,
 const { locale: language } = useI18n()
 let t1 = null
 const route = useRoute()
 const { isEur, info } = useUserStore()
-console.log('route',route)
+console.log('route', route)
 const orderSn = ref(route.query.id || GetRequest('orderSn'))
-let { $cdn } = getCurrentInstance()?.proxy;
+let { $cdn } = getCurrentInstance()?.proxy
 let PAYSID = {
   wechatPay: 0,
   alipay: 1,
-  paypal: 2,
-};
+  paypal: 2
+}
 const selectedPayType = ref('alipay')
 watch(selectedPayType, () => {
   getCode()
 })
 const qrCodeUrl = ref('')
+const orderDetal = ref({})
 const response = ref({
   price: 0.01,
   src: ''
 })
-console.log('orderSn',orderSn,route)
+console.log('orderSn', orderSn, route)
 onMounted(() => {
+  getDetial()
   getCode()
 })
 
 function inverRequest() {
-      clearInterval(t1);
-      t1 = null;
-      t1 = setInterval(() => {
-        handleQueryOrderStatus();
-      }, 5000);
+  clearInterval(t1)
+  t1 = null
+  t1 = setInterval(() => {
+    handleQueryOrderStatus()
+  }, 5000)
 }
 async function handleQueryOrderStatus() {
-      if (t1) {
-        let params = {
-          orderSn:orderSn.value,
-          // orderType: Number(orderType),//预订单无支付方式
-          payType: Number(PAYSID[selectedPayType.value]),
-        };
-        let res = await queryOrderStatus(params);
-        let response = res.data;
-        if (response.code === 0 && response.data) {
-          t1 = null;
-          t1 && clearInterval(t1);
-          showConfirm({
-          text: '支付成功',
-          type: 'success',
-          callback: (val) => {
-            console.log('点击支付，支付成功', val)
-          }
-        })
-          // this.$store.dispatch('getInfo', {url: '/user/getUserInfo', name: 'info'})
-          // this.$toast.show('success', this.$t('mall.member.buySuccessTip'), () => {
-          //   this.$router.push('/information')
-          // })
+  if (t1) {
+    let response = await getOrderInfo(orderSn.value)
+    console.log('response', response)
+    if (response.payStatus === 0) {
+      //未支付
+      console.log('未支付')
+    } else {
+      //支付失败
+      t1 = null
+      t1 && clearInterval(t1)
+      showConfirm({
+        text: response.payStatus === 2 ? '支付失败' : '支付成功',
+        type: response.payStatus === 2 ? 'err' : 'success',
+        callback: (val) => {
+          console.log('点击支付，支付成功', val)
         }
-      }
+      })
+    }
+  }
+}
+function getDetial() {
+  getOrderInfo(orderSn.value).then((res) => {
+    orderDetal.value = res
+  })
 }
 async function getCode() {
   qrCodeUrl.value = ''
   let paysidtype = {
-  wechatPay: 2,
-  alipay: 3,
-  paypal: 0
-}
+    wechatPay: 2,
+    alipay: 3,
+    paypal: 0
+  }
   openPay({
-    orderSn:orderSn.value,
-    payType:paysidtype[selectedPayType.value],
-    openId:'',
-  }).then(res => {
+    orderSn: orderSn.value,
+    payType: paysidtype[selectedPayType.value],
+    openId: ''
+  }).then((res) => {
     qrCodeUrl.value = res.qrCodeUrl
     inverRequest()
   })
@@ -128,7 +130,8 @@ async function getCode() {
               <img :src="`${$cdn}images/tag-icon.png`" class="t-click" alt />
               {{ $t('mall.wechatPay') }}
             </div>
-            <div v-if="isEur"
+            <div
+              v-if="isEur"
               class="pay-type paypal-pay"
               @click="selectedPayType = 'paypal'"
               :class="{ 'is-active': selectedPayType === 'paypal' }"
@@ -142,8 +145,9 @@ async function getCode() {
           <div class="pay-info">
             <p class="label">{{ $t('mall.payNum') }}：</p>
             <p class="price">￥{{ response.price }}</p>
-            <div class="pay-qrcode" style="min-height:220px">
-              <QrcodeVue v-if="qrCodeUrl"
+            <div class="pay-qrcode" style="min-height: 220px">
+              <QrcodeVue
+                v-if="qrCodeUrl"
                 :value="qrCodeUrl"
                 class="enter-x flex justify-center xl:justify-start"
                 :size="190"
@@ -251,7 +255,7 @@ async function getCode() {
         line-height: 1;
         font-size: 12px;
       }
-      .t-icon{
+      .t-icon {
         width: 30px;
         height: 30px;
         padding: 6px;
@@ -264,7 +268,7 @@ async function getCode() {
         bottom: 0;
         display: none;
         display: none;
-    }
+      }
     }
     .pay-icon {
       position: absolute;