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

assets/main.scss

@@ -5,7 +5,6 @@ html {
 }
 
 body {
-  min-width: 1200px;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }

components/BuyTicket.vue

@@ -35,9 +35,9 @@
           </div>
         </div>
         <div v-else>
-          <no-ssr>
+          <client-only>
             <vue-qr :size="176" :text="qrcode"></vue-qr>
-          </no-ssr>
+          </client-only>
           <p class="text-[#666] text-18px leading-20px">扫一扫 即可支付</p>
         </div>
       </div>

components/BuyVip.vue

@@ -37,9 +37,9 @@
           </div>
         </div>
         <div v-else>
-          <no-ssr>
+          <client-only>
             <vue-qr :size="176" :text="qrcode"></vue-qr>
-          </no-ssr>
+          </client-only>
           <p class="text-[#666] text-18px leading-20px">扫一扫 即可支付</p>
         </div>
       </div>

components/SdkForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Fragment>
+  <div>
     <div v-if="postSuccess" class="success-modal">
         <img src="http://cn-file.17pdf.com/website/sdk/ic_store_success.png" alt="success">
         <div class="title">感谢您与我们联系。</div>
@@ -331,7 +331,7 @@
       </div>
       <div class="submit" @click="handlerSubmit"><span>提交</span></div>
     </div>
-  </Fragment>
+  </div>
 </template>
 
 <script>  

layouts/components/NavBar.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:11
- * @LastEditTime: 2022-11-02 16:32:44
+ * @LastEditTime: 2022-11-11 17:47:39
 -->
 <template>
   <div class="h-80px flex relative z-3 justify-between px-[10%] border-b-1 border-b-[#f0f0f0] border-b-solid">
@@ -20,7 +20,7 @@
         <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">
-        <no-ssr>
+        <client-only>
           <el-popover
             placement="bottom"
             trigger="hover"
@@ -66,14 +66,14 @@
             </div>
             <img v-if="!!token" slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" :src="userInfo?.memberInfo.subscriberType === 1 ? 'https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg' : 'http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg'" @click="$router.push('/members/me/expenses')" />
           </el-popover>
-        </no-ssr>
+        </client-only>
       </div>
       <div v-if="!token" class="flex items-center">
         <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>
     </div>
-    <no-ssr>
+    <client-only>
       <el-dialog 
         :visible="visiable"
         :close-on-click-modal="false"
@@ -90,13 +90,14 @@
         <BuyVip v-if="interface === 'vip'" ref="vipRef" @close="handlerCloseDialog"></BuyVip>
         <BuyTicket v-if="interface === 'ticket'" ref="ticketRef" @close="handlerCloseDialog"></BuyTicket>
       </el-dialog>
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 
 
 <script>
 import { mapState } from 'vuex'
+import { removeToken } from '~/utils/cookie';
 import login from '~/components/LoginBar.vue'
 import register from '~/components/RegisterBar.vue'
 import userManage from '~/components/UserManage.vue'
@@ -161,6 +162,8 @@ export default {
     handlerLogout() {
       localStorage.removeItem('token')
       localStorage.removeItem('userInfo')
+      this.$store.commit('setUser', {})
+      removeToken('Token')
       this.$store.commit('DEL_TOKEN', '')
       this.$router.push('/')
     },

layouts/components/navbar.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:11
- * @LastEditTime: 2022-11-02 16:32:44
+ * @LastEditTime: 2022-11-11 17:47:39
 -->
 <template>
   <div class="h-80px flex relative z-3 justify-between px-[10%] border-b-1 border-b-[#f0f0f0] border-b-solid">
@@ -20,7 +20,7 @@
         <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">
-        <no-ssr>
+        <client-only>
           <el-popover
             placement="bottom"
             trigger="hover"
@@ -66,14 +66,14 @@
             </div>
             <img v-if="!!token" slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" :src="userInfo?.memberInfo.subscriberType === 1 ? 'https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg' : 'http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg'" @click="$router.push('/members/me/expenses')" />
           </el-popover>
-        </no-ssr>
+        </client-only>
       </div>
       <div v-if="!token" class="flex items-center">
         <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>
     </div>
-    <no-ssr>
+    <client-only>
       <el-dialog 
         :visible="visiable"
         :close-on-click-modal="false"
@@ -90,13 +90,14 @@
         <BuyVip v-if="interface === 'vip'" ref="vipRef" @close="handlerCloseDialog"></BuyVip>
         <BuyTicket v-if="interface === 'ticket'" ref="ticketRef" @close="handlerCloseDialog"></BuyTicket>
       </el-dialog>
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 
 
 <script>
 import { mapState } from 'vuex'
+import { removeToken } from '~/utils/cookie';
 import login from '~/components/LoginBar.vue'
 import register from '~/components/RegisterBar.vue'
 import userManage from '~/components/UserManage.vue'
@@ -161,6 +162,8 @@ export default {
     handlerLogout() {
       localStorage.removeItem('token')
       localStorage.removeItem('userInfo')
+      this.$store.commit('setUser', {})
+      removeToken('Token')
       this.$store.commit('DEL_TOKEN', '')
       this.$router.push('/')
     },

layouts/components/navbar2.vue

@@ -3,10 +3,10 @@
  * @Author: 李阳滨
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-31 11:32:24
- * @LastEditTime: 2022-11-03 15:33:53
+ * @LastEditTime: 2022-11-11 15:34:02
 -->
 <template>
-  <div>
+  <div class="min-w-0px">
     <div
       class="navbar navbar-default header relative min-h-50px z-3 m-0 bg-transparent tiny:rounded-4px tiny:h-80px <tiny:z-112 <tiny:border-none bg-[#f8f8f8] border-gray-[#e7e7e7]"
     >
@@ -104,7 +104,7 @@
       class="top-menu-overlay fixed top-60px left-0 w-full h-full z-100 bg-[#00000033]"
     ></div>
 
-    <no-ssr>
+    <client-only>
       <el-dialog 
         :visible="dialogVisiable"
         :close-on-click-modal="false"
@@ -118,7 +118,7 @@
         <login v-show="interface === 'login'" ref="loginRef"  @register="showChange" @close="handlerCloseDialog"></login>
         <register v-show="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog"></register>
       </el-dialog>
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 
@@ -169,9 +169,6 @@ export default {
 </script>
 
 <style>
-body {
-  min-width: 0px;
-}
 
 @media screen and (max-width: 959px) {
   .nav-header.active {

layouts/default.vue

@@ -3,10 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:11:18
- * @LastEditTime: 2022-11-10 15:20:31
+ * @LastEditTime: 2022-11-11 15:37:15
 -->
 <template>
-  <div class="font-primary">
+  <div class="font-primary min-w-1200px">
     <Navbar></Navbar>
     <Nuxt></Nuxt>
     <FooterBar></FooterBar>

layouts/downnav.vue

@@ -1,5 +1,12 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-10 15:14:20
+ * @LastEditTime: 2022-11-11 15:38:50
+-->
 <template>
-    <div>
+    <div class="min-w-0px">
       <Navbar2></Navbar2>
       <Nuxt></Nuxt>
       <footerBar2></footerBar2>

layouts/userCenter.vue

@@ -3,10 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-01 20:18:40
- * @LastEditTime: 2022-11-10 15:20:36
+ * @LastEditTime: 2022-11-11 15:53:32
 -->
 <template>
-  <div class="font-primary">
+  <div class="font-primary min-w-1200px">
     <Navbar></Navbar>
     <div class="flex mt-50px px-[10%] mb-30px justify-between">
       <div class="w-[27%] min-w-260px px-24px pb-80px mb-20px bg-[#fafafa]">

middleware/user.js

@@ -3,14 +3,13 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-08 09:15:06
- * @LastEditTime: 2022-11-08 09:42:08
+ * @LastEditTime: 2022-11-11 17:41: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))
       }
     })
   }

package.json

@@ -17,6 +17,7 @@
     "@nuxtjs/composition-api": "^0.33.1",
     "core-js": "^3.25.3",
     "element-ui": "^2.15.10",
+    "js-cookie": "^3.0.1",
     "nuxt": "^2.15.8",
     "qs": "^6.11.0",
     "throttle-debounce": "^5.0.0",

pages/converter.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-19 17:25:48
- * @LastEditTime: 2022-11-08 09:28:05
+ * @LastEditTime: 2022-11-11 17:21:16
 -->
 <script>
 import { mapState } from 'vuex'
@@ -22,9 +22,9 @@ export default {
       <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
       <div class="text-container">
         <span class="text">
-          转档后的文件支持在云端保留24小时，<span v-if="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
+          转档后的文件支持在云端保留24小时，<span v-show="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
         </span>
-        <span v-if="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
+        <span v-show="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
           <img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
           <div class="tip-text">
             若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留

pages/index.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 <template>
   <div class="page-home">
-    <no-ssr>
+    <client-only>
       <el-carousel ref="carousel" indicator-position="none" loop  height="100vh" @change="handlerCarouselChange">
         <el-carousel-item>
           <div class="home-banner banner ">
@@ -72,7 +72,7 @@ export default {
           </div>
         </el-carousel-item>
       </el-carousel>
-    </no-ssr>
+    </client-only>
     <!-- 自定义轮播点 -->
     <ul class="indicators">
       <li v-for="index in 2" :key="index" :class="index === indexActive?'is-active':''" class="indicator">
@@ -169,7 +169,7 @@ export default {
     </div>
     <div class="home_user_say">
       <h3>5年口碑 · 品质之选</h3>
-      <no-ssr>
+      <client-only>
         <el-carousel class="user_say_carousel">
           <el-carousel-item class="item">
             <ul class="clear">
@@ -248,7 +248,7 @@ export default {
             </ul>
           </el-carousel-item>
         </el-carousel>
-      </no-ssr>
+      </client-only>
     </div>
     <div class="free_signup">
       <p>开启17PDF Reader高效办公学习旅程</p>

pages/members/me/expenses.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-11-01 19:27:42
- * @LastEditTime: 2022-11-08 09:44:09
+ * @LastEditTime: 2022-11-11 17:41:37
 -->
 <template>
   <div>
@@ -11,9 +11,9 @@
       <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
       <div class="text-container">
         <span class="text">
-          转档后的文件支持在云端保留24小时，<span v-if="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
+          转档后的文件支持在云端保留24小时，<span v-show="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
         </span>
-        <span v-if="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
+        <span v-show="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
           <img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
           <div class="tip-text">
             若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留
@@ -29,21 +29,22 @@
         <button class="btn btn-delete">删除</button>
       </div>
     </div>
-
-    <el-table :data="tableData">
-      <el-table-column type="selection" width="40"></el-table-column>
-      <el-table-column label="格式转换" ></el-table-column>
-      <el-table-column label="目标文件" ></el-table-column>
-      <el-table-column label="文件大小" ></el-table-column>
-      <el-table-column label="消耗券数" ></el-table-column>
-      <el-table-column label="状态" ></el-table-column>
-      <!-- 表格无数据显示 -->
-      <div slot="empty">
-        <div class="table-empty"></div>
-        <p class="text-14px" style="color:rgba(0,0,0,0.54)">没有任何消费记录</p>
-        <p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
-      </div>
-    </el-table>
+    <client-only>
+      <el-table :data="tableData">
+        <el-table-column type="selection" width="40"></el-table-column>
+        <el-table-column label="格式转换" ></el-table-column>
+        <el-table-column label="目标文件" ></el-table-column>
+        <el-table-column label="文件大小" ></el-table-column>
+        <el-table-column label="消耗券数" ></el-table-column>
+        <el-table-column label="状态" ></el-table-column>
+        <!-- 表格无数据显示 -->
+        <div slot="empty">
+          <div class="table-empty"></div>
+          <p class="text-14px" style="color:rgba(0,0,0,0.54)">没有任何消费记录</p>
+          <p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
+        </div>
+      </el-table>
+    </client-only>
   </div>
 </template>
 

pages/pricing.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-26 16:53:24
- * @LastEditTime: 2022-10-31 21:17:57
+ * @LastEditTime: 2022-11-11 17:14:07
 -->
 <template>
   <div>
@@ -90,20 +90,22 @@
         </div>
         </div>
     </div>
-    <el-dialog
-        :visible.sync="visiable"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        width="480px"
-        append-to-body
-        center>
-        <div class="changepwd-tittle">
-            <p class="text-20px text-center text-$btn-color-primary">提示</p>
-        </div>
-        <div class="text-16px text-[#707070] text-center my-30px">
-            您还未登录或注册，请先<span class="text-$btn-color-primary cursor-pointer" @click="login">登录</span>或<span class="text-$btn-color-primary cursor-pointer" @click="register">注册</span>
-        </div>
-    </el-dialog>
+    <client-only>
+      <el-dialog
+          :visible.sync="visiable"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          width="480px"
+          append-to-body
+          center>
+          <div class="changepwd-tittle">
+              <p class="text-20px text-center text-$btn-color-primary">提示</p>
+          </div>
+          <div class="text-16px text-[#707070] text-center my-30px">
+              您还未登录或注册，请先<span class="text-$btn-color-primary cursor-pointer" @click="login">登录</span>或<span class="text-$btn-color-primary cursor-pointer" @click="register">注册</span>
+          </div>
+      </el-dialog>
+    </client-only>
   </div>
 </template>
 

pages/question.vue

@@ -95,7 +95,7 @@ class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fa
                     </div>
                 </div>
                 <!-- 文件注释 -->
-                <div class="list note hidden" :class="{active: '#note' == ins.hash}">
+                <div class="list hidden" :class="{active: '#note' == ins.hash}">
                     <div class="item mb-30px">
                         <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.如何使用手绘&amp;手写？</h3>
                         <p class="text-[16px] leading-[30px]">

pages/sdk.vue

@@ -191,7 +191,7 @@
     <ul v-show="active !== 0" class="index">
       <li v-for="idx in 6" :key="idx" :class="{active: active===idx}" @click="handlerToSection(idx)"></li>
     </ul>
-    <no-ssr>
+    <client-only>
       <el-dialog 
         :visible.sync="modalViable"
         :close-on-click-modal="false"
@@ -201,7 +201,7 @@
       >
         <sdk-form ref="sdkForm"></sdk-form>
       </el-dialog>
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 

pages/terms.vue

@@ -1,8 +1,6 @@
 <script>
-import { Fragment } from 'vue-fragment'
 
 export default {
-  components: {Fragment},
   layout: 'custom',
   data() {
     return {
@@ -29,7 +27,7 @@ export default {
 }
 </script>
 <template>
-  <Fragment>
+  <div>
     <div v-if="type === 'chinese'" class="terms chinese">
       <div class="title"><span>PDF Reader（17PDF Reader）</span><p>服务协议</p></div>
       <div class="content">
@@ -221,7 +219,7 @@ export default {
         <p>This Agreement and the relationship between Build to Connect, Inc. and User shall be governed by and interpreted with the laws of Taiwan, the Republic of China (R.O.C.), excluding its conflicts of law provisions. In the event of dispute in relation to the Services, User agrees to submit to the personal and exclusive jurisdiction of the Tainan District Court in Taiwan, the Republic of China (R.O.C.).</p>
       </div>
     </div>
-  </Fragment>
+  </div>
 </template>
 
 <style lang="scss">

plugins/axios.js

@@ -3,9 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-19 13:58:11
- * @LastEditTime: 2022-11-03 15:36:24
+ * @LastEditTime: 2022-11-11 16:28:13
  */
 import { Message } from 'element-ui';
+import { removeToken } from '~/utils/cookie';
 
 export default function({store, app:{ $axios }, redirect} ) {
   $axios.onRequest(config => {
@@ -19,6 +20,8 @@ export default function({store, app:{ $axios }, redirect} ) {
       Message.error('登录过期，请重新登录')
       store.commit('OPEN_LOGIN',false)
       store.commit('DEL_TOKEN','')
+      store.commit('setUser', {})
+      removeToken('Token')
       localStorage.removeItem('token')
       localStorage.removeItem('userInfo')
       return Promise.resolve(false)

store/index.js

@@ -3,8 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-25 17:19:19
- * @LastEditTime: 2022-11-02 16:03:41
+ * @LastEditTime: 2022-11-11 17:41:17
  */
+import { setToken, cookieParse } from '~/utils/cookie'
+
 export const state = () => ({
   userInfo: {
     memberInfo: {},
@@ -37,10 +39,17 @@ export const mutations = {
 
 export const actions = {
 
+
   nuxtServerInit ({commit, state}, {req}) {
-      if (req && req.headers && req.headers.token) {
-        commit('SET_TOKEN', req.headers.token)
+    let token = null
+    if (req && req.headers && req.headers.cookie) {
+      const parsed = cookieParse(req.headers.cookie)
+      try {
+        token = parsed.Token
+      } catch (err) {
       }
+      commit('SET_TOKEN', token)
+    }
   },
 
   login ({ commit }, params) {
@@ -48,6 +57,7 @@ export const actions = {
       this.$axios.get(`auth/getToken?code=${params}`).then(res => {
         const token = res.result.accessToken
         localStorage.setItem('token',token)
+        setToken('Token', token)
         commit('SET_TOKEN', token)
         resolve(token)
       }).catch(err => {

utils/cookie.js

@@ -0,0 +1,31 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-11 11:27:09
+ * @LastEditTime: 2022-11-11 13:43:02
+ */
+const Cookies = process.client ? require('js-cookie') : undefined
+
+export function getToken (TokenKey) {
+  return Cookies ? Cookies.get(TokenKey) : ''
+}
+
+export function setToken (TokenKey, token) {
+  return Cookies && Cookies.set(TokenKey, token)
+}
+
+export function removeToken (TokenKey) {
+  return Cookies && Cookies.remove(TokenKey)
+}
+
+// 解析cookie中的参数
+export function cookieParse (cookie) {
+  if (!cookie) { return {} }
+  const cookies = {}
+  cookie.split(';').forEach(item => {
+    const parts = item.split('=')
+    cookies[parts[0].trim()] = parts[1].trim()
+  })
+  return cookies
+}