Merge branch 'develop_oycj' of Server_Service/17pdf_front_end into master

components/BuyTicket.vue

@@ -3,33 +3,59 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-01 14:10:22
- * @LastEditTime: 2022-11-02 16:33:02
+ * @LastEditTime: 2022-11-07 16:07:10
 -->
 <template>
   <div>
-    <p class="text-18px text-[#666] text-center font-400">购买券</p>
-    <div class="py-27px">
-      <div class="flex justify-between">
-        <div v-for="(item,idx) in list" :key="idx" class="w-116px h-130px relative cursor-pointer" @click="chooseTicket(item)">
-          <div :class="`ticket${idx}`" class="w-full h-79px text-14px text-[#fff] leading-79px text-center font-200"><span class="text-36px mr-6px">{{getTickets(item)}}</span>券</div>
-          <div :style="{'border': choosedTicket.productCode === item.productCode ? border[`border${idx}`] : '1px solid #f0f0f0'}" class="w-full mx-auto h-49px text-20px text-black leading-49px text-center font-200">￥{{item.price}}</div>
+    <div v-show="orderStatus !== 'success'">
+      <p class="text-18px text-[#666] text-center font-400">购买券</p>
+      <div class="py-27px">
+        <div class="flex justify-between">
+          <div v-for="(item,idx) in list" :key="idx" class="w-116px h-130px relative cursor-pointer" @click="chooseTicket(item)">
+            <div :class="`ticket${idx}`" class="w-full h-79px text-14px text-[#fff] leading-79px text-center font-200"><span class="text-36px mr-6px">{{getTickets(item)}}</span>券</div>
+            <div :style="{'border': choosedTicket.productCode === item.productCode ? border[`border${idx}`] : '1px solid #f0f0f0'}" class="w-full mx-auto h-49px text-20px text-black leading-49px text-center font-200">￥{{item.price}}</div>
+          </div>
         </div>
+      </div>  
+      <div class="py-27px">
+        <p class="text-16px text-[#999] mb-14px">选择支付方式</p>
+          <div class="pay-method" :style="{'border': paymethod === 'alipay' ? '2px solid #3fa9e7' : '1px solid #f0f0f0'}" @click="choosePayMethod('alipay',0)">
+            <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/alipay_logo.png"> 支付宝
+          </div>
+          <div class="pay-method" :style="{'border': paymethod === 'wechat' ? '2px solid #4bcb70' : '1px solid #f0f0f0'}" @click="choosePayMethod('wechat',1)">
+            <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/wechat_logo.png"> 微信
+          </div>
       </div>
-   </div>  
-   <div class="py-27px">
-      <p class="text-16px text-[#999] mb-14px">选择支付方式</p>
-        <div class="pay-method" :style="{'border': paymethod === 'alipay' ? '2px solid #3fa9e7' : '1px solid #f0f0f0'}" @click="choosePayMethod('alipay',0)">
-          <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/alipay_logo.png"> 支付宝
+      <button v-if="paymethod === 'alipay'" class="play-now" style="margin-left: 68px" @click="handlePlayNow">立即支付</button>
+      <div v-else class="text-center">
+        <div v-if="count <= 0">
+          <div>
+            <p class="text-18px mb-15px">二维码过期，请刷新</p>
+            <el-button @click="handleFreshWechetCode">刷新</el-button>
+          </div>
         </div>
-        <div class="pay-method" :style="{'border': paymethod === 'wechat' ? '2px solid #4bcb70' : '1px solid #f0f0f0'}" @click="choosePayMethod('wechat',1)">
-          <img class="inline-block" src="http://cn-file.17pdf.com/website/pricings/wechat_logo.png"> 微信
+        <div v-else>
+          <no-ssr>
+            <vue-qr :size="176" :text="qrcode"></vue-qr>
+          </no-ssr>
+          <p class="text-[#666] text-18px leading-20px">扫一扫 即可支付</p>
         </div>
-   </div>
-   <button class="play-now" style="margin-left: 68px" @click="handlePlayNow">立即支付</button>
+      </div>
+    </div>
+    <div v-show="orderStatus === 'success'">
+      <div class="pay-tittle">
+      <p>支付成功</p>
+      </div>
+      <div class="pay-content">
+        <img src="http://cn-file.17pdf.com/website/pricings/check.png" />
+        <span>嘿嘿嘿...尽情享受您的特权吧</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+
 export default {
   data() {
     return {
@@ -41,7 +67,11 @@ export default {
         border1: '2px solid #27d6c5',
         border2: '2px solid #e1b973',
         border3: '2px solid #ff6a98'
-      }
+      },
+      qrcode: '',
+      count: 60,
+      orderStatus: false,
+      interval: ''
     }
   },
   created() {
@@ -54,6 +84,10 @@ export default {
     chooseTicket(item) {
       this.choosedTicket = item
     },  
+    handleFreshWechetCode() {
+      this.count = 60
+      this.choosePayMethod('wechat')
+    },
     getTickets(item) {
       return item.productCode.split('.')[1]
     },
@@ -67,18 +101,71 @@ export default {
       })
     },
     choosePayMethod(type,payment) {
+      this.interval = null
+      clearInterval(this.interval)
       this.paymethod = type
+      if(type === 'wechat') {
+        const params = {
+          client: 'web',
+          payment,
+          targetType: 'Pricing',
+          targetId: this.choosedTicket.id
+        }
+        this.$axios.post('subscription/create',params).then((res) => {
+          if(res.code === 200) {
+            this.qrcode = res.result.order.qrcodeUrl
+            this.getWechatPayStatus(res.result.order.id)
+          }
+        })
+      }
+    }, 
+    getWechatPayStatus(id) {
+      this.interval = setInterval(() => {
+        if(this.count > 0) {
+          this.$axios.get(`order/getWxOrder?orderId=${id}`).then((res)=>{
+            this.orderStatus = res?.result?.statusName
+            if(this.orderStatus === 'success') {
+              this.count = 0 
+              setTimeout(() => {
+                this.$emit('close')
+                // 更新个人信息
+                this.getUserInfo()
+              }, 1000);
+            }else {
+              this.count--
+            }
+          })
+        }
+      }, 2000);
+      if(this.count === 0) {
+        this.$once('hook:beforeDestroy',()=> {
+          clearInterval(this.interval)
+          this.interval = null
+        })
+      }
+    }, 
+    handlePlayNow() {
       const params = {
         client: 'web',
-        payment,
-        targetType: 'pricing',
+        payment: 0,
+        targetType: 'Pricing',
         targetId: this.choosedTicket.id
       }
-      this.$axios.post('subscription/create',params)
-    },  
-    handlePlayNow() {
-
-    }
+      this.$axios.post('subscription/create',params).then((res) => {
+        if(res.code === 200) {
+          window.open(res.result.order.pagePayUrl)
+        }
+      }) 
+    },
+    getUserInfo() {
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+          this.$router.push('/members/me/expenses')
+        }
+      })
+    },
   }
 }
 </script>

components/BuyVip.vue

@@ -3,11 +3,11 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-31 20:41:42
- * @LastEditTime: 2022-11-02 19:06:53
+ * @LastEditTime: 2022-11-07 10:53:47
 -->
 <template>
   <div>
-    <div v-show="!success">
+    <div v-show="orderStatus !== 'success'">
       <p class="text-22px text-[#666] text-center font-500">升级成为会员</p>
       <div class="py-27px px-35px">
         <p class="text-16px text-[#4d4d4d] mb-30px">开通时长:</p>
@@ -45,7 +45,7 @@
       </div>
     </div>
 
-    <div v-show="success">
+    <div v-show="orderStatus === 'success'">
       <div class="pay-tittle">
       <p>支付成功</p>
       </div>
@@ -68,7 +68,7 @@ export default {
       paymethod: '',
       qrcode: '',
       count: 60,
-      success: false
+      orderStatus: false
     }
   },
   created() {
@@ -121,12 +121,13 @@ export default {
       let interval = setInterval(() => {
         if(this.count > 0) {
           this.$axios.get(`order/getWxOrder?orderId=${id}`).then((res)=>{
-            if(res?.result?.trade_state === 'SUCCESS') {
-              this.success = true
+            this.orderStatus = res?.result?.statusName
+            if(this.orderStatus === 'success') {
               this.count = 0 
               setTimeout(() => {
                 this.$emit('close')
-                this.$router.push('/members/me/expenses')
+                // 更新个人信息
+                this.getUserInfo()
               }, 1000);
             }else {
               this.count--
@@ -141,6 +142,15 @@ export default {
         })
       }
     },
+    getUserInfo() {
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+          this.$router.push('/members/me/expenses')
+        }
+      })
+    },
     handlePlayNow() {
 
     }

middleware/user.js

@@ -0,0 +1,17 @@
+/*
+ * @Description: 获取用户信息更新
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-08 09:15:06
+ * @LastEditTime: 2022-11-08 09:42:08
+ */
+export default function({store, app: {$axios}}) {
+  if(store.state.token !== '') {
+    $axios.get('members/getMemberInfo').then((res)=> {
+      if(res.code === 200) {
+        store.commit('setUser',res.result)
+        localStorage.setItem('userInfo',JSON.stringify(res.result))
+      }
+    })
+  }
+}

pages/converter.vue

@@ -3,11 +3,12 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-19 17:25:48
- * @LastEditTime: 2022-10-31 17:58:58
+ * @LastEditTime: 2022-11-08 09:28:05
 -->
 <script>
 import { mapState } from 'vuex'
 export default {
+  middleware: 'user',
   computed: mapState([
     'userInfo'
   ])

pages/index.vue

@@ -1,14 +1,25 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-const indexActive = ref(1)
-const carousel = ref()
-// elementui走马灯组件bug：item只有两个时变换的方向有问题
-// fix：多增加一份item，自定义轮播点
-const handlerCarouselChange = (cur:number)=> {
-  if(cur === 1 || cur === 3) {
-    indexActive.value = 2
-  }else {
-    indexActive.value = 1
+<script>
+export default {
+  middleware: 'user',
+  data() {
+    return {
+      indexActive: 1
+    }
+  },
+  methods: {
+    // elementui走马灯组件bug：item只有两个时变换的方向有问题
+    // fix：多增加一份item，自定义轮播点
+    handlerCarouselChange (cur) {
+      if(cur === 1 || cur === 3) {
+        this.indexActive = 2
+      }else {
+        this.indexActive = 1
+      }
+    },
+    openInterface (){
+      this.$store.commit('OPEN_LOGIN', true)
+      this.$store.commit('SET_INTERFACE', 'register')
+    } 
   }
 }
 </script>
@@ -242,7 +253,7 @@ const handlerCarouselChange = (cur:number)=> {
     <div class="free_signup">
       <p>开启17PDF Reader高效办公学习旅程</p>
       <span>现在注册即送10张格式转换券！</span>
-      <a>立即注册</a>
+      <a class="cursor-pointer" @click="openInterface">立即注册</a>
 	  </div>
   </div>
 </template>

pages/members/me/expenses.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-01 19:27:42
- * @LastEditTime: 2022-11-07 17:17:09
+ * @LastEditTime: 2022-11-08 09:44:09
 -->
 <template>
   <div>
@@ -51,7 +51,7 @@
 import { mapState } from 'vuex' 
 export default {
   layout: 'userCenter',
-  middleware: 'auth',
+  middleware: ['auth','user'],
   data() {
     return {
       tableData:[]

pages/members/me/points.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-02 10:18:11
- * @LastEditTime: 2022-11-07 17:17:13
+ * @LastEditTime: 2022-11-08 09:44:32
 -->
 <template>
   <div>
@@ -29,7 +29,7 @@
 <script>
 export default {
   layout: 'userCenter',
-  middleware: 'auth',
+  middleware: ['auth','user'],
   data() {
     return {
       tableData:[]