Procházet zdrojové kódy

修改购买劵,新增转档前没有劵了弹出框,修改配置

liyangbin před 2 roky
rodič
revize
7d7e3b6731
5 změnil soubory, kde provedl 56 přidání a 16 odebrání
  1. 28 6
      components/BuyTicket.vue
  2. 2 2
      layouts/components/NavBar.vue
  3. 1 1
      package.json
  4. 23 5
      pages/converter.vue
  5. 2 2
      pages/index.vue

+ 28 - 6
components/BuyTicket.vue

@@ -55,6 +55,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 
 export default {
   data() {
@@ -71,12 +72,30 @@ export default {
       qrcode: '',
       count: 60,
       orderStatus: false,
-      interval: ''
+      // interval: ''
     }
   },
   created() {
     this.getVipList()
   },
+  computed: {
+    ...mapState([
+      "globalLoginVisiable",
+    ]),
+  },
+  watch:{
+    globalLoginVisiable(newVal){
+      if(!newVal){
+        this.list=[]
+        this.choosedVip = {},
+        this.paymethod = '',
+        this.qrcode = '',
+        this.orderStatus = false,
+        this.count = 60
+        this.getVipList()
+      }
+    }
+  },
   methods: {
     resetInterfaceStatus() {
       
@@ -101,8 +120,8 @@ export default {
       })
     },
     choosePayMethod(type,payment) {
-      this.interval = null
-      clearInterval(this.interval)
+      // this.interval = null
+      // clearInterval(this.interval)
       this.paymethod = type
       if(type === 'wechat') {
         const params = {
@@ -113,6 +132,7 @@ export default {
         }
         this.$axios.post('subscription/create',params).then((res) => {
           if(res.code === 200) {
+            // console.log("展示微信二维码")
             this.qrcode = res.result.order.qrcodeUrl
             this.getWechatPayStatus(res.result.order.id)
           }
@@ -120,11 +140,13 @@ export default {
       }
     }, 
     getWechatPayStatus(id) {
-      this.interval = setInterval(() => {
+      let interval = setInterval(() => {
         if(this.count > 0) {
           this.$axios.get(`order/getWxOrder?orderId=${id}`).then((res)=>{
             this.orderStatus = res?.result?.statusName
+            // console.log("查询微信支付")
             if(this.orderStatus === 'success') {
+              // console.log("微信支付成功")
               this.count = 0 
               // 支付成功关定时器
               clearInterval(interval)
@@ -145,8 +167,8 @@ export default {
       }, 2000);
       if(this.count === 0) {
         this.$once('hook:beforeDestroy',()=> {
-          clearInterval(this.interval)
-          this.interval = null
+          clearInterval(interval)
+          interval = null
         })
       }
     }, 

+ 2 - 2
layouts/components/NavBar.vue

@@ -71,7 +71,7 @@
         </NuxtLink>
         <NuxtLink to="/pdf-reader/download" active-class="menu-active" class="inline-block mt-28px mr-100px md-0 ml-35px hover:text-[#E93636] hover:opacity-70">下载</NuxtLink>
       </div>
-      <div v-if="!!token">
+      <div v-if="token">
         <client-only>
           <el-popover
             ref="popover"
@@ -125,7 +125,7 @@
           </el-popover>
         </client-only>
       </div>
-      <div v-if="!token" class="flex items-center ml-30px">
+      <div v-else class="flex items-center ml-30px">
         <button class="border-1 rounded-4px ml-9px text-$btn-color-primary border-$btn-color-primary border-solid w-70px h-42px leading-22px cursor-pointer hover:opacity-70" @click="handlerOpenLogin('login')">登录</button>
         <button class="bg-$btn-color-primary rounded-4px ml-25px text-[#fff] w-70px h-42px leading-22px cursor-pointer hover:bg-[#f34545]" @click="handlerOpenLogin('register')">注册</button>
       </div>

+ 1 - 1
package.json

@@ -23,7 +23,7 @@
     "throttle-debounce": "^5.0.0",
     "vue-fragment": "^1.6.0",
     "vue-qr": "^4.0.9",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^3.2.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",

+ 23 - 5
pages/converter.vue

@@ -36,7 +36,14 @@
                 <a class="text-[#ff4f4f] no-underline leading-normal">充值</a>
               </span>
               <div class="need-volume float-right right-48px text-16px text-[#666] leading-48px mr-20px">
-                所需券:<span class="text-[#0dd299] text-16px" :class="{'text-red-500': requiredCoupon > userInfo?.points}">{{ requiredCoupon }}券</span> / 剩余券:<span class="text-[#0dd299] text-16px">{{ Object.keys(this.userInfo).length === 0 ? 0 : userInfo.points }}券</span>
+                所需券:
+                <span class="text-[#0dd299] text-16px" :class="{'text-red-500': requiredCoupon > userInfo?.points}">
+                  {{ requiredCoupon }}券
+                </span> 
+                / 剩余券:
+                <span class="text-[#0dd299] text-16px">
+                  {{ Object.keys(this.userInfo).length === 0 ? 0 : userInfo.points }}券
+                </span>
               </div>
             </div>
             <div class="transfer-panel">
@@ -302,13 +309,23 @@
             <span class="text-$btn-color-primary cursor-pointer" @click="register">注册</span>
           </div>
         </el-dialog>
+
+        <el-dialog :visible.sync="noMia" width="480px" append-to-body center top = "25vh" >
+          <div class="modal-content">
+            <div class="less-tittle w-full h-64px leading-64px text-[20px] text-[#ff4f4f] text-center mt-[-50px] mb-30px">劵不足</div>
+            <div class="less-content text-center mb-30px">
+              <img src="http://cn-file.17pdf.com/website/converter/kongjianbuzu_ic.png" class="mb-26px mx-auto">
+              <p class="text-[14px] text-[#c3c3c3]">您的劵不足,我们背不住了</p>
+            </div>
+          </div>
+        </el-dialog>
       </client-only>
     </div>
 </template>
 
 <script>
-import { client } from 'process'
 import { mapState } from 'vuex'
+
 export default {
     data() {
         return {
@@ -320,7 +337,8 @@ export default {
             getFileStatusTimer: null,
             changeSucesssNumTotal: 0,
             changeSucesssFileList: [],
-            visiable: false
+            visiable: false,
+            noMia:false
         };
     },
     middleware: "user",
@@ -528,7 +546,8 @@ export default {
             // if (this.fileList.length === 0) return
             const points = this.userInfo.points;
             if (this.requiredCoupon > points) {
-                alert("券数不足,请充值");
+                // alert("券数不足,请充值");
+                this.noMia = true
                 return;
             }
             const filterFileList = this.fileList.filter(function (item) {
@@ -716,7 +735,6 @@ export default {
             });
         }
     },
-    components: { client }
 }
 </script>
 

+ 2 - 2
pages/index.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 <template>
   <div class="page-home">
-    <client-only>
+    
       <el-carousel ref="carousel" indicator-position="none" trigger="click" :interval="4000" loop  height="100vh" @change="handlerCarouselChange">
         <el-carousel-item>
           <div class="home-banner banner ">
@@ -96,7 +96,7 @@ export default {
           </div>
         </el-carousel-item>
       </el-carousel>
-    </client-only>
+    
     <!-- 自定义轮播点 -->
     <ul class="indicators">
       <li v-for="index in 2" :key="index" :class="index === indexActive?'is-active':''" class="indicator cursor-pointer" @click="next(index)">