国际化

src/components/Toast/Confirm.vue

@@ -7,29 +7,30 @@
       </div>
       <div class="body">
         <div class="typeImg">
-          <img style="height:48px;width:48px" v-if="type == 'success'" src="@/assets/images/icon/success.png" alt="" />
-          <img style="height:48px;width:48px" v-else-if="type == 'warn'" src="@/assets/images/icon/warn.png" alt="" />
-          <img style="height:48px;width:48px" v-else src="@/assets/images/icon/error.png" alt="" />
+          <img
+            style="height: 48px; width: 48px"
+            v-if="type == 'success'"
+            src="@/assets/images/icon/success.png"
+            alt=""
+          />
+          <img
+            style="height: 48px; width: 48px"
+            v-else-if="type == 'warn'"
+            src="@/assets/images/icon/warn.png"
+            alt=""
+          />
+          <img
+            style="height: 48px; width: 48px"
+            v-else
+            src="@/assets/images/icon/error.png"
+            alt=""
+          />
         </div>
         <span>{{ options.text }}</span>
       </div>
       <div class="footer">
-        <button
-          @click="
-            cancelCallback
-          "
-          size="mini"
-          type="gray"
-        >
-          取消
-        </button>
-        <button
-          @click="confirmCallback"
-          size="mini"
-          type="primary"
-        >
-          确认
-        </button>
+        <!-- <button @click="cancelCallback" size="mini" type="gray">取消</button> -->
+        <button @click="confirmCallback" size="mini" type="primary">确认</button>
       </div>
     </div>
   </div>
@@ -48,12 +49,12 @@ export default {
     },
     options: {
       type: Object,
-      default: ()=>{
+      default: () => {
         return {
-          title:'',
-          text:'',
-          type:'success',
-          callback:()=>{}
+          title: '',
+          text: '',
+          type: 'success',
+          callback: () => {}
         }
       }
     },
@@ -62,16 +63,11 @@ export default {
       type: Function,
       default: () => {}
     },
-    // 确认按钮
-    confirmCallback: {
-      type: Function,
-      default: () => {}
-    },
     // 取消按钮
-    cancelCallback: {
-      type: Function,
-      default: () => {}
-    }
+    // cancelCallback: {
+    //   type: Function,
+    //   default: () => {}
+    // }
   },
   setup(props) {
     // 点击 target 目标元素外部相当于点击了取消
@@ -79,7 +75,14 @@ export default {
     // onClickOutside(target, () => {
     //   props.cancelCallback()
     // })
-    return { target }
+    function cancelCallback() {
+      props.close()
+    }
+    function confirmCallback() {
+      props.options.callback()
+      props.close()
+    }
+    return { target,confirmCallback,cancelCallback }
   }
 }
 </script>
@@ -122,26 +125,26 @@ export default {
         margin-right: 3px;
         font-size: 16px;
       }
-      .typeImg{
+      .typeImg {
         margin-bottom: 20px;
       }
     }
     .footer {
       //   text-align: right;
-      border-top: 1px solid #EBEBEB;
+      border-top: 1px solid #ebebeb;
       padding: 20px;
       .xtx-button {
         margin-left: 20px;
       }
-      button{
+      button {
         height: 40px;
-        background: #29B2FF;
+        background: #29b2ff;
         border-radius: 4px 4px 4px 4px;
         opacity: 1;
         font-size: 14px;
         font-family: PingFang SC-Regular, PingFang SC;
         font-weight: 400;
-        color: #FFFFFF;
+        color: #ffffff;
         border: none;
         padding: 10px 50px;
         text-align: center;

src/components/Toast/index.ts

@@ -45,7 +45,6 @@ export function show(options: union) {
 export function showConfirm(options:showConfirmType) {
     // 创建虚拟dom  (组件对象， props)
     function close() {
-        console.log('close')
         render(null, divConfirm);
     }
     const vnode = createVNode(Confirm, {options, close,});

src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import i18n from './i18n/index.js'
 
+import 'element-plus/dist/index.css'
 import './assets/main.css'
 
 const app = createApp(App)

src/router/index.ts

@@ -10,7 +10,7 @@ const routesP = [{
   redirect: '/',
   component: pc,
   children: [{
-    path: '/',
+    path: '/:id',
     name: 'index',
     component: pcHome
   }]
@@ -22,7 +22,7 @@ const routesM = [{
   redirect: '/',
   component: mobile,
   children: [{
-    path: '/',
+    path: '/:id',
     name: 'index',
     component: mobileHome
   }]

src/utils/api.js

@@ -55,12 +55,10 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
     (response) => {
         hideLoading();
-        if (response.data.code == 402) {
-            ElMessage.error(response.data.msg);
-            router.push("/");
-        }else if(response.data.code !== 200){
-            ElMessage.error(response.data);
-            return response.data
+        if (response.data.code !== 200) {
+            ElMessage.error(response.data.message);
+            return  Promise.reject(response.data)
+            // router.push("/");
         }
         else return response.data?.data;
     },
@@ -70,6 +68,7 @@ instance.interceptors.response.use(
         let message = "";
         if (error.response && error.response.status) {
             const status = error.response.status;
+            console.log('Error',error.response)
             switch (status) {
                 case 400:
                     message = "请求错误";

src/views/mobile/index.vue

@@ -3,10 +3,12 @@ import { showConfirm } from '@/components/Toast'
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { openPay, getOrderInfo } from '@/api/api'
+import { useRoute } from 'vue-router';
 import { GetRequest } from '@/utils/index'
 const payType = ref('0')
-const orderSn = ref(GetRequest('orderSn'))
+const route = useRoute()
 const orderDetal = ref({})
+const orderSn = ref(route.params.id || GetRequest('orderSn'))
 const is_weixn = computed(() => {
   if (typeof WeixinJSBridge == 'undefined') {
     return false
@@ -26,17 +28,24 @@ onMounted(() => {
 const { token, info, isEur } = useUserStore()
 async function handelPay() {
   let apiData = {
-    orderSn: GetRequest('orderSn'),
+    orderSn: orderSn.value,
     payType: !is_weixn.value ? '1' : payType.value,
     openId: 'dolor exercitation velit'
   }
-  const res = await openPay(apiData)
-  console.log('apiData', res)
+  // const res = await openPay(apiData)
+  // console.log('apiData', res)
   if (is_weixn.value) {
     //微信内支付
     onBridgeReady(res)
   } else {
-    window.location.href = res.form || res.h5Url
+    showConfirm({
+          text: '成功了',
+          type: 'warn',
+          callback: (val) => {
+            console.log('我的测试计划', val)
+          }
+        })
+    // window.location.href = res.form || res.h5Url
   }
 }
 // 调微信支付

src/views/pc/index.vue

@@ -14,7 +14,9 @@ import { getCurrentInstance } from 'vue'
 
 //得到i18n的locale token, info, 
 const { locale: language } = useI18n()
+const route = useRoute()
 const { isEur, info } = useUserStore()
+const orderSn = ref(route.params.id || GetRequest('orderSn'))
 let { $cdn } = getCurrentInstance()?.proxy;
 let PAYSID = {
   wechatPay: 2,
@@ -30,14 +32,16 @@ const response = ref({
   price: 0.01,
   src: ''
 })
+console.log('orderSn',orderSn,route)
 onMounted(() => {
   getCode()
 })
 
 
 async function getCode() {
+  qrCodeUrl.value = ''
   openPay({
-    orderSn:GetRequest('orderSn'),
+    orderSn:orderSn.value,
     payType:PAYSID[selectedPayType.value],
     openId:'',
   }).then(res => {
@@ -99,7 +103,7 @@ 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:280px">
+            <div class="pay-qrcode" style="min-height:220px">
               <QrcodeVue v-if="qrCodeUrl"
                 :value="qrCodeUrl"
                 class="enter-x flex justify-center xl:justify-start"