tangning před 2 roky
rodič
revize
40990f70d0
2 změnil soubory, kde provedl 79 přidání a 52 odebrání
  1. 51 20
      src/stores/user.ts
  2. 28 32
      src/views/mobile/index.vue

+ 51 - 20
src/stores/user.ts

@@ -1,24 +1,55 @@
 import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 
-export const useUserStore = defineStore('user', () => {
-  const token = ref(localStorage.getItem('token'))
-  const openId = ref(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
-  }
-  function setUserOpenId(value:string) {
-    openId.value = value
-    localStorage.setItem('openId', value,)
-  }
+// export const useUserStore = defineStore('user', () => {
+//   const token = ref(localStorage.getItem('token'))
+//   const openId = ref(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
+//   }
+//   function setUserOpenId(value:string) {
+//     openId.value = value
+//     localStorage.setItem('openId', value,)
+//   }
+
+//   isEur.value = window.location.hostname.includes('eur')
+//   console.log('setUserOpenId',openId,getOpenId)
+//   return { token, getToken, getOpenId, setToken, info, isEur, openId, setUserOpenId }
+// })
 
-  isEur.value = window.location.hostname.includes('eur')
-  return { token, getToken, getOpenId, setToken, info, isEur, openId, setUserOpenId }
+// 想要使用必须先引入 defineStore;
+// 这里我们使用的是es6 的模块化规范进行导出的。
+
+// defineStore 方法有两个参数,第一个参数是模块化名字(也就相当于身份证一样,不能重复)
+
+// 第二个参数是选项,对象里面有三个属性,相比于vuex 少了一个 mutations.
+export const useUserStore = defineStore('user', {
+  state(){  // 存放的就是模块的变量
+    return {
+      token: localStorage.getItem('token'),
+      openId: localStorage.getItem('openId'),
+      isEur: window.location.hostname.includes('eur'),
+    }
+  },
+  getters:{ // 相当于vue里面的计算属性,可以缓存数据
+    getToken(state){
+      return state.token || localStorage.getItem('token')
+    },
+    getOpenId(state){
+      return state.openId || localStorage.getItem('openId')
+    }
+  },
+  actions:{ // 可以通过actions 方法,改变 state 里面的值。
+    setUserOpenId(value:string){
+      this.openId = value
+      localStorage.setItem('openId', value,)
+    }
+  }
 })

+ 28 - 32
src/views/mobile/index.vue

@@ -9,7 +9,9 @@ const payType = ref('0')
 const route = useRoute()
 const orderDetal = ref({})
 const orderSn = ref(route.query.id || GetRequest('id'))
-const { getToken, getOpenId, openId, isEur, info, setUserOpenId } = useUserStore()
+const userStore = useUserStore();
+const isEur = userStore.isEur
+const openId = computed(() => userStore.getOpenId);
 const is_weixn = computed(() => {
   var wx = window.navigator.userAgent.toLowerCase()
   if (wx.match(/MicroMessenger/i) == 'micromessenger') {
@@ -18,10 +20,6 @@ const is_weixn = computed(() => {
     return false
   }
 })
-// const openId = computed(()=>{
-//   console.log('getOpenId',getOpenId, openId)
-//   return getOpenId
-// })
 // let PAYSID = {
 //   wechatPay: is_weixn.value ? 1 : 0,
 //   alipay: 4,
@@ -29,34 +27,31 @@ const is_weixn = computed(() => {
 // }
 //判断是否微信
 onMounted(() => {
-  console.log('getOpenId',getOpenId, openId)
-  console.log('useUserStore', getToken, openId, isEur, info, is_weixn)
   getDetial()
 })
 async function handelPay() {
   let apiData = {
     orderSn: orderSn.value,
     payType: is_weixn.value ? '1' : payType.value,
-    openId:openId,
+    openId:openId.value,
+  }
+  const res = await openPay(apiData)
+  console.log('apiData', res)
+  if (is_weixn.value) {
+    //微信内支付
+    onBridgeReady(res)
+  } else if (res.form || res.h5Url) {
+    console.log('payType', res.form || res.h5Url)
+    window.location.href = res.form || res.h5Url
+  } else {
+    showConfirm({
+      text: '支付异常',
+      type: 'err',
+      callback: (val) => {
+        console.log('我的测试计划', val)
+      }
+    })
   }
-  console.log('handelPay', apiData,openId)
-  // const res = await openPay(apiData)
-  // console.log('apiData', res)
-  // if (is_weixn.value) {
-  //   //微信内支付
-  //   onBridgeReady(res)
-  // } else if (res.form || res.h5Url) {
-  //   console.log('payType', res.form || res.h5Url)
-  //   window.location.href = res.form || res.h5Url
-  // } else {
-  //   showConfirm({
-  //     text: '支付异常',
-  //     type: 'err',
-  //     callback: (val) => {
-  //       console.log('我的测试计划', val)
-  //     }
-  //   })
-  // }
 }
 // 调微信支付
 function onBridgeReady(obj) {
@@ -105,14 +100,15 @@ function handleType(params: string) {
 function getDetial() {
   getOrderInfo(orderSn.value).then((res) => {
     orderDetal.value = res
-    if(is_weixn.value){
+    // if(is_weixn.value){
       handleWxlogin(res.wxAppId)
-    }
+    // }
   })
 }
 async function handleWxlogin(wxAppId: string) {
+  // userStore.setUserOpenId('o3S0L1Hyd3O0vYI2Kr1lFDEtEO2k')
   const code = GetRequest('code')
-  if (!openId && !code) {
+  if (!openId.value && !code) {
     //微信登录
     getWeChatCode(wxAppId)
   } else if (code) {
@@ -120,7 +116,7 @@ async function handleWxlogin(wxAppId: string) {
     const res = await wxLogin({ code, orderSn: orderSn.value })
     console.log('openid',res)
     if (res.openid) {
-      setUserOpenId(res.openid)
+      userStore.setUserOpenId(res.openid)
     }
   }
 }
@@ -128,7 +124,7 @@ async function handleOpenPay() {
   openPay({
     orderSn: GetRequest('orderSn'),
     payType: payType.value,
-    openId:openId,
+    openId:openId.value,
   }).then((res) => {
     let url = res.qrCodeUrl
   })
@@ -140,7 +136,7 @@ async function handleOpenPay() {
     <div class="contentInfo">
       <div class="info">
         <div class="cell">
-          <span>当前账号</span>
+          <span>当前账号{{ getOpenId }}</span>
           <span>{{orderDetal.userName}}</span>
         </div>
         <div class="cell">