1

src/components/Toast/Confirm.vue

@@ -31,7 +31,7 @@
       </div>
       <div class="footer">
         <!-- <button @click="cancelCallback" size="mini" type="gray">取消</button> -->
-        <button @click="confirmCallback" size="mini" type="primary">{{$t('confirm.text')}}</button>
+        <button @click="confirmCallback" size="mini" type="primary">{{confirm}}</button>
       </div>
     </div>
   </div>
@@ -40,8 +40,8 @@
 
   <script lang="ts">
 // 注意：当前组件不是在 #app 下进行渲染，无法使用 #app 下的环境（全局组件，全局指令，原型属性函数）
+import i18n from '@/i18n'
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 // import { onClickOutside } from '@vueuse/core'
 export default {
   name: 'showConfirm',
@@ -75,8 +75,7 @@ export default {
   setup(props) {
     // 点击 target 目标元素外部相当于点击了取消
     const target = ref(null)
-    const { locale: language, t } = useI18n()
-    let current = language
+    let current = (localStorage && localStorage.getItem('language'))
     if (!current) {
       current = window.navigator.language || window.navigator.userLanguage || null
         if (current && !/^zh/.test(current)) {
@@ -96,7 +95,7 @@ export default {
       props.options.callback()
       props.close()
     }
-    return { options:props.options,target,confirmCallback,cancelCallback }
+    return { options:props.options,target,confirmCallback,cancelCallback,confirm:i18n.global.t('confirm.text') }
   }
 }
 </script>

src/views/pc/index.vue

@@ -13,7 +13,7 @@ import { GetRequest } from '@/utils/index'
 import { getCurrentInstance } from 'vue'
 
 //得到i18n的locale token, info,
-const { locale: language, t  } = useI18n()
+const { locale: language, t } = useI18n()
 let t1 = null
 const route = useRoute()
 const { isEur, info } = useUserStore()
@@ -24,7 +24,7 @@ let PAYSID = {
   alipay: 1,
   paypal: 2
 }
-const selectedPayType = ref(isEur?'paypal':'alipay')
+const selectedPayType = ref(isEur ? 'paypal' : 'alipay')
 watch(selectedPayType, () => {
   getCode()
 })
@@ -57,7 +57,11 @@ async function handleQueryOrderStatus() {
       t1 = null
       t1 && clearInterval(t1)
       showConfirm({
-        text: response.autoPay? t('payInfo.autoPayTips') : response.payStatus === 2 ? t('payInfo.payfail') : t('mall.paySuccessTip'),
+        text: response.autoPay
+          ? t('payInfo.autoPayTips')
+          : response.payStatus === 2
+          ? t('payInfo.payfail')
+          : t('mall.paySuccessTip'),
         type: response.payStatus === 2 ? 'err' : 'success',
         callback: () => {
           if (response.payStatus === 2) {
@@ -90,7 +94,7 @@ async function getCode() {
     payType: paysidtype[selectedPayType.value],
     openId: ''
   }).then((res) => {
-    qrCodeUrl.value = res.qrCodeUrl ||res.redirect
+    qrCodeUrl.value = res.qrCodeUrl || res.redirect
     inverRequest()
   })
 }
@@ -112,22 +116,53 @@ async function getCode() {
           </div>
           <div class="account">
             <span class="label"
-              >{{ $t(`mall.${orderDetal.orderType == 'incrementOrder'?'vip':orderDetal.orderType == 'downOrder'?'downdesc':'goqy'}`) }}：
-              <span v-for="(item,index) in orderDetal.goodsInfo" :key="index" style="margin-right:10px">
+              >{{
+                $t(
+                  `mall.${
+                    orderDetal.orderType == 'incrementOrder'
+                      ? 'vip'
+                      : orderDetal.orderType == 'downOrder'
+                      ? 'downdesc'
+                      : 'goqy'
+                  }`
+                )
+              }}：
+              <span
+                v-for="(item, index) in orderDetal.goodsInfo"
+                :key="index"
+                style="margin-right: 10px"
+              >
                 <span v-if="item">
                   <span v-if="index != 0">、</span>
-                  <span style="margin-right:5px" v-if="orderDetal.orderType != 'incrementOrder'">
-                    {{ orderDetal.orderType == 'downOrder'?`${item.name} (${item.sceneNum})`:language === 'zh' ?item.name:item.nameEn }}
+                  <span style="margin-right: 5px" v-if="orderDetal.orderType != 'incrementOrder'">
+                    {{
+                      orderDetal.orderType == 'downOrder'
+                        ? `${item.name} (${item.sceneNum})`
+                        : language === 'zh'
+                        ? item.name
+                        : item.nameEn
+                    }}
                   </span>
-                  <span style="margin-right:5px" v-else>
-                    {{ item.type==1?$t('payInfo.gjhy'):isEur?$t('payInfo.zyhys'):$t('payInfo.zyhy') }}
+                  <span style="margin-right: 5px" v-else>
+                    {{
+                      item.type == 1
+                        ? $t('payInfo.gjhy')
+                        : isEur
+                        ? $t('payInfo.zyhys')
+                        : $t('payInfo.zyhy')
+                    }}
                   </span>
-                   <span v-if="orderDetal.orderType != 'downOrder'">× {{item.count}}</span>
-                </span> 
+                  <span v-if="orderDetal.orderType != 'downOrder'">× {{ item.count }}</span>
+                </span>
                 <!-- <span v-else>1</span> -->
-                <span v-if="orderDetal.orderType == 'incrementOrder'">，{{ item.type==1?$t(`payInfo.expirationmon`,{num:item.monthQy || 1}):$t(`payInfo.expiration`,{num:1}) }}</span>
-                </span
-              ></span
+                <span v-if="orderDetal.orderType == 'incrementOrder'"
+                  >，{{
+                    item.type == 1
+                      ? $t(`payInfo.expirationmon`, { num: item.monthQy || 1 })
+                      : $t(`payInfo.expiration`, { num: 1 })
+                  }}</span
+                >
+              </span></span
             >
           </div>
           <div class="pay-types">
@@ -160,7 +195,12 @@ async function getCode() {
               @click="selectedPayType = 'paypal'"
               :class="{ 'is-active': selectedPayType === 'paypal' }"
             >
-              <img style="height:26px;width:100px" src="@/assets/images/paypal.png" class="t-icon" alt />
+              <img
+                style="height: 26px; width: 100px"
+                src="@/assets/images/paypal.png"
+                class="t-icon"
+                alt
+              />
               <h-icon type="vip_true" class="select-icon"></h-icon>
               <img src="@/assets/images/vip_true.svg" class="t-click" alt />
               <!-- paypal -->
@@ -168,7 +208,7 @@ async function getCode() {
           </div>
           <div class="pay-info">
             <p class="label">{{ $t('mall.payNum') }}：</p>
-            <p class="price">{{isEur?'$':'￥'}}{{ orderDetal.orderMoney }}</p>
+            <p class="price">{{ isEur ? '$' : '￥' }}{{ orderDetal.orderMoney }}</p>
             <div class="pay-qrcode" style="min-height: 220px" v-if="!isEur">
               <QrcodeVue
                 v-if="qrCodeUrl"
@@ -184,7 +224,9 @@ async function getCode() {
                 }}
               </p>
             </div>
-            <div v-else v-show="qrCodeUrl" class="payment" @click="handlePay">{{ orderDetal.autoPay == 1?$t('payInfo.autoRenew'):$t('payInfo.payOrder') }}</div>
+            <div v-else v-show="qrCodeUrl" class="payment" @click="handlePay">
+              {{ orderDetal.autoPay == 1 ? $t('payInfo.autoRenew') : $t('payInfo.payOrder') }}
+            </div>
             <div v-show="!isEur" :class="`pay-scan-tip ${language === 'zh' ? '' : 'isEn'}`"></div>
           </div>
         </div>
@@ -334,11 +376,11 @@ async function getCode() {
       display: block;
     }
   }
-  .payment{
+  .payment {
     width: 216px;
     height: 55px;
     line-height: 55px;
-    background: #29B2FF;
+    background: #29b2ff;
     margin: 60px auto 0 auto;
     border-radius: 4px 4px 4px 4px;
     opacity: 1;
@@ -346,7 +388,7 @@ async function getCode() {
     font-size: 16px;
     font-family: PingFang SC-Regular, PingFang SC;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #ffffff;
     cursor: pointer;
   }
   .pay-scan-tip {