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

components/BuyTicket.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-01 14:10:22
+ * @LastEditTime: 2022-11-02 16:33:02
+-->
+<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>
+      </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>
+   <button class="play-now" style="margin-left: 68px" @click="handlePlayNow">立即支付</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [],
+      choosedTicket: {},
+      paymethod: '',
+      border: {
+        border0: '2px solid #9688ff',
+        border1: '2px solid #27d6c5',
+        border2: '2px solid #e1b973',
+        border3: '2px solid #ff6a98'
+      }
+    }
+  },
+  created() {
+    this.getVipList()
+  },
+  methods: {
+    resetInterfaceStatus() {
+      
+    },
+    chooseTicket(item) {
+      this.choosedTicket = item
+    },  
+    getTickets(item) {
+      return item.productCode.split('.')[1]
+    },
+    getVipList() {
+      this.$axios.post('pricing/getPricingList',{client: 'web',language: 'zh'}).then((res)=> {
+        if(res.code === 200) {
+          this.list = res.result.pricingList.filter(item => item.mode !== 1)  // 加云的不展示
+          this.choosedTicket = this.list[this.list.length - 1]
+          this.paymethod = 'alipay'
+        }
+      })
+    },
+    choosePayMethod(type,payment) {
+      this.paymethod = type
+      const params = {
+        client: 'web',
+        payment,
+        targetType: 'pricing',
+        targetId: this.choosedTicket.id
+      }
+      this.$axios.post('subscription/create',params)
+    },  
+    handlePlayNow() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ticket0 {
+  background: linear-gradient(#b98dff, #7384ff);
+}
+.ticket1 {
+  background: linear-gradient(#60b8ff, #27d6c5);
+}
+.ticket2 {
+  background: linear-gradient(#ff8e4a, #e1b973);
+}
+.ticket3 {
+  background: linear-gradient(#ff8279, #ff6a98);
+}
+</style>

components/BuyVip.vue

@@ -0,0 +1,211 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-31 20:41:42
+ * @LastEditTime: 2022-11-02 19:06:53
+-->
+<template>
+  <div>
+    <div v-show="!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>
+        <div class="flex justify-between">
+          <div v-for="(item,idx) in list" :key="idx" class="w-116px h-130px relative cursor-pointer" :style="{'border': choosedVip.period === item.period ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="chooseVip(item)">
+            <span v-if="idx === 2" class="note">仅{{Math.round(10 * item.price/getMonth(item)) / 10}}/月</span>
+            <div class="w-full h-79px text-16px font-[#878787] leading-79px text-center font-400"><span class="text-26px font-500">{{item.price}}</span>元</div>
+            <div style="border-top: 1px solid #b8b8b8;" class="w-90px mx-auto h-49px text-16px text-black leading-49px text-center font-400">{{getMonth(item)}}个月</div>
+          </div>
+        </div>
+      </div>  
+      <div class="py-27px px-35px">
+        <p class="text-16px text-[#4d4d4d] mb-14px">支付方式:</p>
+        <div class="pay-method" :style="{'border': paymethod === 'wechat' ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="choosePayMethod('wechat')">
+          <img src="http://cn-file.17pdf.com/website/member_v2/members_ic_pay_weixin.png">
+        </div>
+        <div class="pay-method" :style="{'border': paymethod === 'alipay' ? '2px solid #FF4F4F' : '1px solid #b3b3b3'}" @click="choosePayMethod('alipay')">
+          <img src="http://cn-file.17pdf.com/website/member_v2/members_ic_pay_zhifubao.png">
+        </div>
+      </div>
+      <button v-if="paymethod === 'alipay'" class="play-now" @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 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>
+    </div>
+
+    <div v-show="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 {
+      list: [],
+      choosedVip: {},
+      paymethod: '',
+      qrcode: '',
+      count: 60,
+      success: false
+    }
+  },
+  created() {
+    // this.resetInterfaceStatus()
+    this.getVipList()
+  },
+  methods: {
+    resetInterfaceStatus() {
+    //   this.getVipList()
+    },
+    handleFreshWechetCode() {
+      this.count = 60
+      this.choosePayMethod('wechat')
+    },
+    chooseVip(item) {
+      this.choosedVip = item
+      this.choosePayMethod(this.paymethod)
+    },  
+    getMonth({period}) {
+      return period.split('.')[0]
+    },
+    getVipList() {
+      // 默认选择支付宝支付，调用相关信息
+      this.paymethod = 'alipay'
+      this.$axios.get('setPricing/list').then((res)=> {
+        if(res.code === 200) {
+          this.list = res.result.filter(item => item.mode !== 0)  // 免费模式的不展示
+          this.choosedVip = this.list[this.list.length - 1]
+        }
+      })
+    },
+    choosePayMethod(type) {
+      this.paymethod = type
+      const params = {
+        client: 'web',
+        payment: this.paymethod === 'wechat' ? 1 : 0,
+        targetType: 'SetPricing',
+        targetId: this.choosedVip.id
+      }
+      this.$axios.post('subscription/create',params).then((res) => {
+        if(res.code === 200) {
+          if(this.paymethod === 'wechat') {
+            this.qrcode = res.result.order.qrcodeUrl
+            this.getWechatPayStatus(res.result.order.id)
+          }
+        }
+      })
+    }, 
+    getWechatPayStatus(id) {
+      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.count = 0 
+              setTimeout(() => {
+                this.$emit('close')
+                this.$router.push('/members/me/expenses')
+              }, 1000);
+            }else {
+              this.count--
+            }
+          })
+        }
+      }, 2000);
+      if(this.count === 0) {
+        this.$once('hook:beforeDestroy',()=> {
+          clearInterval(interval)
+          interval = null
+        })
+      }
+    },
+    handlePlayNow() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.vip-wechat-qrcode {
+  img {
+    display: block;
+  }
+}
+.note {
+  width: 69px;
+  height: 26px;
+  background: url(http://cn-file.17pdf.com/website/member_v2/members_tag_price.png) no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  position: absolute;
+  top: -11px;
+  left: -7px;
+  font-size: 14px;
+  text-indent: 4px;
+  text-align: left; 
+}
+.pay-method{
+  width: 116px;
+  height: 50px;
+  border: 1px solid #b3b3b3;
+  border-radius: 2px;
+  margin: 0 20px 0 0;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+.play-now{
+  width: 376px;
+  height: 58px;
+  margin-left: 35px;
+  background: #ff4f4f;
+  font-size: 24px;
+  border-radius: 2px;
+  color: #fff;
+  font-weight: 400;
+}
+.pay-tittle{
+		height: 80px;
+		line-height: 80px;
+		color: rgb(51,51,51);
+		font-size: 20px;
+		text-align: center;
+	}
+	.pay-content{
+		text-align: center;
+		img{
+			margin: 50px auto 30px;
+		}
+		span{
+			color: rgb(195,195,195);
+			margin-bottom: 125px;
+			font-size: 14px;
+			display: block;
+			margin-top: 100px;
+		}
+  }
+</style>
+

components/LoginBar.vue

@@ -5,19 +5,43 @@ import { mapActions } from 'vuex'
 
 export default {
   data() {
+    const regPhone = /^1[3456789]\d{9}$/
+    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
     return {
       form: {
         username:'',
         password:''
       },
+      forgetForm: {
+        account:'',
+        code: '',
+        key:''
+      },
+      resetForm: {
+        newPassword: '',
+        confirm_newPassword: '',
+        verifyCode: '',
+        type: '1'
+      },
+      receiver:'',
       checked:true,
       logging:false,
-      interfaceStatus: 'login'
+      interfaceStatus: 'login',
+      forgetPswErrTip: '',
+      codeImg:'',
+      sending: false,
+      clock: 60,
+      resetPswTip:'',
+      regEmail,
+      regPhone,
     }
   },
   computed: {
     loginBtnDisabled() {
       return !(this.form.username && this.form.password)
+    },
+    forgetDisabled() {
+      return !(this.forgetForm.account && this.forgetForm.code)
     }
   },
   mounted() {
@@ -48,7 +72,8 @@ export default {
             this.getUserInfo()
           })
         }
-      }).catch(()=> {this.logging = false})
+      })
+      .finally(()=> {this.logging = false})
     },
     getUserInfo()  {
       this.$axios.get('members/getMemberInfo').then((res)=> {
@@ -61,21 +86,123 @@ export default {
     },
     handlerForgetPsw() {
       this.interfaceStatus = 'forgetPsw'
+      this.handleGetVcodeImage()
+    },
+    // 手机号码发送验证码
+    handlePostCode() {
+      if(this.sending) return
+      const params = {
+        action: '1', // 找回密码
+        receiver: this.forgetForm.account
+      }
+      if(this.regPhone.test(this.form.username)) params.type = '1'
+      if(this.regEmail.test(this.form.username)) params.type = '0'
+      this.$axios.get('auth/getVerifyCode', {params}).then((res)=> {
+        if(res.code === 200) {
+          this.sending = true
+          let interval = setInterval(() => {
+            this.clock--
+            if(this.clock === 0) {
+              this.$once('hook:beforeDestroy',()=> {
+                clearInterval(interval)
+                interval = null
+              })
+              this.clock = 60
+              this.sending = false
+            }
+          }, 1000);
+        }
+      })
+    },
+    // 获取二维码图片
+    handleGetVcodeImage() {
+      const params = {
+        width: '140',
+        height: '46',
+        codeCount: '6',
+        lineCount: '1',
+        type: 'forget_password'
+      }
+      this.$axios.get('/auth/getImageCode',{params,responseType: 'arraybuffer'}).then((res)=> {
+        this.codeImg = 'data:image/png;base64,' + btoa(
+          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
+        )
+        this.forgetForm.key = res.headers['x-auth-token']
+      })   
     },
     resetInterfaceStatus() {
+      this.forgetForm.account = ''
+      this.forgetForm.code = ''
+      this.forgetPswErrTip = ''
+      this.resetPswTip = ''
+      this.resetForm.newPassword = ''
+      this.resetForm.confirm_newPassword = ''
+      this.resetForm.verifyCode = ''
+      this.resetForm.forgetPswErrTip = ''
       setTimeout(() => {
         this.interfaceStatus = 'login'
       }, 500);
     },
-    // 输入账号和密码后才能登录
-    // const loginBtnDisabled = computed<boolean>(()=> !(form.username && form.password))
     // 切换注册页面
     handlerRegister() {
       this.$emit('register','register')
     },
     // 重置密码验证
     handlerResetPsw() {
-      this.interfaceStatus = 'resetPsw'
+      if(!this.regPhone.test(this.forgetForm.account) && !this.regEmail.test(this.forgetForm.account)) {
+        this.forgetPswErrTip = '请输入正确的邮箱或手机号码'
+        return
+      }
+      this.logging = true
+      this.$axios.post('auth/checkExist',qs.stringify(this.forgetForm)).then((res)=> {
+        if(res.code === 200) {
+          if(this.regPhone.test(this.forgetForm.account)) {
+            this.interfaceStatus = 'resetPhonePsw'
+          }
+          if(this.regEmail.test(this.forgetForm.account)) {
+            this.postEmail()
+          }
+        }else {
+          this.forgetPswErrTip = res.msg
+          this.handleGetVcodeImage()
+        }
+      }).finally(()=> {
+        this.logging = false
+      })
+    },
+    // 邮箱找回密码，发送邮箱
+    postEmail() {
+      const params = {
+        action: '1',
+        type: '0',
+        receiver: this.forgetForm.account
+      }
+      this.$axios.get('auth/getVerifyCode', {params}).then((res) => {
+        if(res.code === 200 ) {
+          this.interfaceStatus = 'resetEmailPsw'
+        }
+      })
+    },
+    handlerConfirmReset() {
+     if(this.resetForm.newPassword !== this.resetForm.confirm_newPassword) {
+        this.resetPswTip = '两次输入的密码不一致'
+      }else if(this.resetForm.newPassword.length < 6) {
+        this.resetPswTip = '密码位数不能少于6位'
+      }else if(this.resetForm.newPassword.charCodeAtlength> 16){
+        this.resetPswTip = '密码位数不能大于16位'
+      }else {
+        this.resetPswTip = ''
+        this.submitReset()
+      }
+    },
+    submitReset() {
+      this.resetForm.account = this.forgetForm.account
+      this.$axios.post('members/resetPassword', this.resetForm).then((res)=> {
+        if(res.code === 200) {
+          this.$message.success('修改成功')
+          this.handlerClose()
+        }
+      })
     },
     handlerClose() {
       this.$emit('close')
@@ -105,9 +232,9 @@ export default {
               <a class="forgotpwd cursor-pointer" @click="handlerForgetPsw">忘记密码？</a>
             </span>
           </div>
-          <div class="error-mess" >
+          <!-- <div class="error-mess" >
             <span id="error-message error-tip">账号或密码错误</span>
-          </div>
+          </div> -->
           <div class="tips">
             <span>只有QQ/微信账号，如何进行网页登录</span>
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -133,19 +260,44 @@ export default {
         <p>找回账号密码</p>
       </div>
       <div class="getbackpwd_content">
-        <input v-model="form.username" class="getbackpwd_input_user account" type="text" placeholder="邮箱/手机号">
+        <input v-model="forgetForm.account" class="getbackpwd_input_user account" type="text" placeholder="邮箱/手机号">
         <br />
-        <input class="getbackpwd_input_vcode" type="text" value="" placeholder="验证码">
+        <input v-model="forgetForm.code" class="getbackpwd_input_vcode" type="text" placeholder="验证码">
+        <img :src="codeImg" class="mt-10px cursor-pointer" @click="handleGetVcodeImage">
         <br />
-        <div class="error-mess">
-          <span id="error-message error-tip">验证码错误</span>
+        <div v-if="forgetPswErrTip !== ''" class="error-mess">
+          <span id="error-message error-tip">{{forgetPswErrTip}}</span>
         </div>
-        <button id="btn-validate" type="submit" class="validate now_validate" @click="handlerResetPsw">立即验证
+        <button id="btn-validate" type="submit" class="validate" :class="{'now_validate': forgetDisabled}" @click="handlerResetPsw">立即验证
         </button>
-        <div class="loading"></div>
+        <div v-show="logging" class="loading"></div>
+      </div>
+    </div>
+    <div v-if="interfaceStatus === 'resetPhonePsw'" class="phone-reset">
+      <div class="changepwd-tittle">
+        <p>手机验证</p>
+      </div>
+      <div class="getbackpwd_content setnewpwd">
+          <p class="phone_num">{{forgetForm.account}}</p>
+          <div class="mobilevali">
+            <input v-model="resetForm.verifyCode" class="getbackpwd_input_vcode input_vcode_conform" placeholder="验证码">
+            <span class="sent-vcode sent-vcode-getbackpwd" :class="{'sent-vcode-disabled': sending}" @click="handlePostCode"><a>{{sending ? clock+'秒' : '发送验证码'}}</a></span>
+          </div>
+          <br />
+          <p>设置新密码</p>
+          <input v-model="resetForm.newPassword" class="getbackpwd_input_pwd input_newpwd" type="password" value="" placeholder="新密码（6-16个字符，区分大小写）">
+          <br />
+          <input v-model="resetForm.confirm_newPassword" class="getbackpwd_input_pwd input_newpwd_conform" type="password" placeholder="确认新密码">
+          <br />
+          <div v-if="resetPswTip !== ''" class="error-mess">
+            <span id="error-message error-tip">{{resetPswTip}}</span>
+          </div>
+          <button id="btn-validate-conform" type="submit" class="validate" @click="handlerConfirmReset">确认
+          </button>
+          <div class="loading"></div>
       </div>
     </div>
-    <div v-if="interfaceStatus === 'resetPsw'" class="user-reset">
+    <div v-if="interfaceStatus === 'resetEmailPsw'" class="user-reset">
       <div class="changepwd-tittle">
           <p>邮箱验证</p>
         </div>
@@ -262,6 +414,7 @@ export default {
         border-radius: 3px;
         padding: 10px 20px;
         margin-left: 10px; 
+        cursor:pointer;
         margin-top: 10px;
         float: right;
         width: 120px;
@@ -482,6 +635,7 @@ export default {
       border: 1px solid rgb(255, 79, 79);
       border-radius: 3px;
       padding: 10px 20px;
+      cursor:pointer;
       margin-left: 10px; 
       margin-top: 10px;
       float: right;
@@ -517,7 +671,6 @@ export default {
       position: relative;
       clear: both;
       top: 15px;
-      display: none;
       span{
         background: #808080;
         color: rgb(255, 255, 255);
@@ -541,6 +694,128 @@ export default {
     }
   }
 }
+.phone-reset {
+  .changepwd-tittle {
+    color: rgb(255, 79, 79);
+    text-align: center;
+    p {
+      font-size: 20px;
+    }
+  }
+  .getbackpwd_content {
+    text-align: center;
+    font-size: 14px;
+    .mobilevali{
+      height: 85px;
+      padding: 0 36px;
+    }
+    &.setnewpwd p{
+      font-size: 18px;
+      text-align: left;
+      padding-left: 36px;
+      height: 20px;
+    }
+    p {
+      color: rgb(102, 102, 102);
+      font-size: 24px;
+    }
+    .getbackpwd_input_user {
+      height: 60px;
+      width: 360px;
+      border-width: 0 0 1px 0;
+      border-color: rgb(238, 238, 238);
+      padding-left: 42px;
+      padding-top: 16px;
+      line-height: 44px;
+      outline:none;
+      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat 0px 28px;
+    }
+    .getbackpwd_input_pwd {
+      height: 60px;
+      width: 360px;
+      border-width: 0 0 1px 0;
+      border-color: rgb(238, 238, 238);
+      padding-left: 42px;
+      padding-top: 16px;
+      line-height: 44px;
+      outline:none;
+      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
+    }
+    .getbackpwd_input_vcode {
+      height: 60px;
+      width: 220px;
+      border-width: 0 0 1px 0;
+      border-color: rgb(238, 238, 238);
+      padding-left: 42px;
+      padding-top: 16px;
+      line-height: 44px;
+      float: left;
+      outline:none;
+      background: url(http://cn-file.17pdf.com/website/account/ic_login_input_code.png) no-repeat 0px 28px;
+    }
+    .sent-vcode {
+      border: 1px solid rgb(255, 79, 79);
+      border-radius: 3px;
+      padding: 10px 20px;
+      margin-left: 10px; 
+      margin-top: 10px;
+      cursor:pointer;
+      float: right;
+      width: 120px;
+      a {
+        color: rgb(255, 79, 79);
+      }
+    }
+    .sent-vcode-disabled {
+      border: 1px solid rgb(153, 153, 153);
+      a {
+        color: rgb(153, 153, 153);
+      }
+    }
+    .vcode-content {
+      float: right;
+      padding: 15px 30px 15px 0px;
+      display: inline-block;
+      background: url(http://cn-file.17pdf.com/website/account/path.png) no-repeat 0px 28px;
+      a{
+        width: 90px;
+        color: rgb(148, 143, 141);
+        font-size: 20px;
+        transform: rotate(-6deg);
+        letter-spacing: 1px;
+        display: inline-block;
+        &:hover, &:active {
+          text-decoration: none;
+        }
+      } 
+    }
+    .error-mess {
+      position: relative;
+      clear: both;
+      top: 15px;
+      span{
+        background: #808080;
+        color: rgb(255, 255, 255);
+        padding: 5px 15px;
+        border-radius: 4px;
+      }
+    }
+    .validate {
+      width: 360px;
+      height: 48px;
+      font-size: 16px;
+      color: rgb(255, 255, 255);
+      border: none;
+      background-color: rgb(255,82,79);
+      margin: 31px 0 40px 0;
+      border-radius: 4px;
+      outline:none;
+    }
+    .now_validate{
+      background-color: rgb(204, 204, 204);
+    }
+  }
+}
 .user-reset {
   .changepwd-tittle {
       color: rgb(255, 79, 79);

components/RegisterBar.vue

@@ -1,74 +1,3 @@
-<!--
- * @Description: 
- * @Author: 欧阳承珺
- * @LastEditors: 欧阳承珺
- * @Date: 2022-10-20 17:51:51
- * @LastEditTime: 2022-10-26 10:26:29
--->
-<!-- <script lang="ts" setup>
-import { ref,reactive, computed } from 'vue'
-import { userApi } from '@/api/user'
-
-const { registerUser } = userApi()
-
-const emit = defineEmits(['login'])
-const showVcode = ref(false)    // 展示验证码
-const errMsg = ref('')    // 点击注册反馈错误信息
-const form = reactive({
-  username: '',
-  password: '',
-  password_confirm:'',
-  code: ''
-  // phone_zone: '86'
-})
-
-const regPhone = /^1[3456789]\d{9}$/;
-const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
-
-// 输入账号和密码后才能登录
-const loginBtnDisabled = computed<boolean>(()=> !(form.username && form.password))
-
-// 输入为手机号格式失焦显示验证码校验
-const handlerUsernameBlur = (e:any)=> {
-  showVcode.value = regPhone.test(e.target.value)
-}
-
-// 点击注册前置校验
-const vailidate = ()=> {
-  if(!regPhone.test(form.username) && !regEmail.test(form.username)) {
-    errMsg.value = '手机号/邮箱格式不对'
-  }else if(form.password !== form.password_confirm) {
-    errMsg.value = '两次输入的密码不一致'
-  }else if(form.password.length < 6) {
-    errMsg.value = '密码位数不能少于6位'
-  }else if(form.password.length> 16){
-    errMsg.value = '密码位数不能大于16位'
-  }else {
-    errMsg.value = ''
-    handlerRegisterUser()
-  }
-}
-// 弹窗关闭，初始化注册面板
-const resetInterfaceStatus = () => {
-  errMsg.value = '';
-  form.username = ''
-  form.password = ''
-  form.password_confirm = ''
-  form.code = ''
-  showVcode.value = false
-}
-const handlerRegisterUser = async () => {
-  const res = await registerUser(form)
-}
-const handlerLogin = ()=> {
-  emit('login','login')
-}
-
-defineExpose({
-  resetInterfaceStatus
-});
-</script> -->
-
 <script>
 import qs from 'qs'
 export default {
@@ -79,11 +8,13 @@ export default {
       form: {
         username: '',
         password: '',
-        password_confirm:'',
-        code: ''
+        passwordConfirm:'',
+        verifyCode: '',
         // phone_zone: '86'
       },
       errMsg: '',
+      sending: false,
+      clock: 60,
       showVcode: false,
       regEmail,
       regPhone,
@@ -91,7 +22,7 @@ export default {
   },
   computed: {
     loginBtnDisabled() {
-      return !(this.form.username && this.form.password && this.form.password_confirm)
+      return !(this.form.username && this.form.password && this.form.passwordConfirm)
     }
   },
   methods: {
@@ -99,7 +30,7 @@ export default {
     vailidate() {
       if(!this.regPhone.test(this.form.username) && !this.regEmail.test(this.form.username)) {
         this.errMsg = '手机号/邮箱格式不对'
-      }else if(this.form.password !== this.form.password_confirm) {
+      }else if(this.form.password !== this.form.passwordConfirm) {
         this.errMsg = '两次输入的密码不一致'
       }else if(this.form.password.length < 6) {
         this.errMsg = '密码位数不能少于6位'
@@ -117,6 +48,31 @@ export default {
         }
       })
     },
+    handlePostCode() {
+      if(this.sending) return
+      const params = {
+        action: '0', // 注册用户
+        receiver: this.form.username
+      }
+      if(this.regPhone.test(this.form.username)) params.type = '1'
+      if(this.regEmail.test(this.form.username)) params.type = '0'
+      this.$axios.get('auth/getVerifyCode', {params}).then((res)=> {
+        if(res.code === 200) {
+          this.sending = true
+          let interval = setInterval(() => {
+            this.clock--
+            if(this.clock === 0) {
+              this.$once('hook:beforeDestroy',()=> {
+                clearInterval(interval)
+                interval = null
+              })
+              this.clock = 60
+              this.sending = false
+            }
+          }, 1000);
+        }
+      })
+    },
     handlerLogin() {
       this.$axios.post('login',qs.stringify(this.form)).then((res)=> {
         this.$store.dispatch('login',res.result).then((token)=> {
@@ -127,11 +83,12 @@ export default {
       })
     },
     getUserInfo()  {
-      const res = this.$axios.get('members/getMemberInfo')
-      if(res.code === 200) {
-        this.$store.commit('setUser',res.result)
-        // localStorage.setItem('userInfo',res.result)
-      }
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+        }
+      })
     },
     handlerUsernameBlur(e) {
       this.showVcode = this.regPhone.test(e.target.value)
@@ -141,8 +98,8 @@ export default {
       this.errMsg = '';
       this.form.username = ''
       this.form.password = ''
-      this.form.password_confirm = ''
-      this.form.code = ''
+      this.form.passwordConfirm = ''
+      this.form.verifyCode = ''
       this.showVcode = false
     },
     handlerChangeLogin() {
@@ -165,11 +122,11 @@ export default {
       <br />
       <input id="signup_pwd1" v-model="form.password" class="login_input_password" type="password" placeholder="密码（6-16个字符，区分大小写）">
       <br />
-      <input id="signup_pwd2" v-model="form.password_confirm" class="login_input_password" type="password" placeholder="确认密码">
+      <input id="signup_pwd2" v-model="form.passwordConfirm" class="login_input_password" type="password" placeholder="确认密码">
       <br />
       <div v-show="showVcode" class="vcode_content">
-        <input class="input_vcode_signup" placeholder="验证码">
-        <span class="sent-vcode sent-vcode-signup"><a>发送验证码</a></span>
+        <input v-model="form.verifyCode" class="input_vcode_signup" placeholder="验证码">
+        <span class="sent-vcode sent-vcode-signup" :class="{'sent-vcode-disabled': sending}" @click="handlePostCode"><a>{{sending ? clock+'秒' : '发送验证码'}}</a></span>
       </div>
       <div v-show="errMsg !== ''" class="error-mess error-mess-signup">
         <span id="error-message error-tip">{{errMsg}}</span>

components/UserManage.vue

@@ -106,7 +106,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .accountmanage-tittle {
   color: rgb(255, 79, 79);
   text-align: center;

layouts/components/footer-bar2.vue

@@ -0,0 +1,278 @@
+<!--
+ * @Description: 
+ * @Author: 李阳滨
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-1 09:00:00
+ * @LastEditTime: 2022-11-03 13:50:08
+-->
+<template>
+  <div class="footer">
+    <div
+      class="containers footer-container mx-auto px-15px w-full bg-[#222] text-[#fff] text-[18px] text-center <tiny:p-0"
+    >
+      <div
+        class="footer-row flex justify-between py-50px pr-60px pl-30px text-left leading-[1.428571429] 2xl:py-50px 2xl:pr-180px 2xl:pl-90px <xl:px-16px <tiny:block <tiny:m-0 <tiny:pt-40px <tiny:px-16px <tiny:pb-20px"
+      >
+        <!-- 产品 -->
+        <div class="product w-[11.83333%] px-15px">
+          <h4
+            class="title text-[18px] my-10px font-medium leading-[1.1] <tiny:flex <tiny:justify-between <tiny:items-center <tiny:py-15px <tiny:px-0 <tiny:m-0 <tiny:text-[16px] <tiny:leading-[19px]"
+          >
+            产品
+            <img
+              src="http://cn-file.17pdf.com/website/download/arrow.png"
+              :class="{ active: footerProduct }"
+              class="w-20px align-middle tiny:hidden"
+              @click="changePro"
+            />
+          </h4>
+          <ul
+            :class="{
+              footerHeiZero: !footerProduct,
+              footerHeiProFull: footerProduct,
+            }"
+            class="p-0 mt-0 mb-10px <tiny:transition-all <tiny:duration-500 <tiny:ease-in-out <tiny:m-0"
+          >
+            <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
+              <a
+                href="/pricing"
+                class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
+                >订阅服务</a
+              >
+            </li>
+            <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
+              <a
+                href="/sdk"
+                class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
+                >SDK介绍</a
+              >
+            </li>
+          </ul>
+        </div>
+        <!-- 帮助 -->
+        <div class="help w-[11.83333%] px-15px">
+          <h4
+            class="title text-[18px] my-10px font-medium leading-[1.1] <tiny:flex <tiny:justify-between <tiny:items-center <tiny:py-15px <tiny:px-0 <tiny:m-0 <tiny:text-[16px] <tiny:leading-[19px]"
+          >
+            帮助
+            <img
+              src="http://cn-file.17pdf.com/website/download/arrow.png"
+              :class="{ active: footerHelp }"
+              class="w-20px align-middle tiny:hidden"
+              @click="changeHelp"
+            />
+          </h4>
+          <ul
+            :class="{
+              footerHeiZero: !footerHelp,
+              footerHeiHelpFull: footerHelp,
+            }"
+            class="p-0 mt-0 mb-10px <tiny:transition-all <tiny:duration-500 <tiny:ease-in-out <tiny:m-0"
+          >
+            <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
+              <a
+                href="/question"
+                class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
+                >常见问题</a
+              >
+            </li>
+            <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
+              <a
+                href="/privacy"
+                class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
+                >隐私政策</a
+              >
+            </li>
+            <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
+              <a
+                href="/terms"
+                class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
+                >服务协议</a
+              >
+            </li>
+          </ul>
+        </div>
+        <!-- 关于 -->
+        <div
+          class="aboutus w-[34.75%] px-15px <tiny:mt-20px <tiny:mx-0 <tiny:mb-16px"
+        >
+          <h4
+            class="title text-[18px] my-10px font-medium leading-[1.1] <tiny:flex <tiny:justify-between <tiny:items-center <tiny:py-15px <tiny:px-0 <tiny:m-0 <tiny:text-[16px] <tiny:leading-[19px]"
+          >
+            关于我们
+          </h4>
+          <ul class="p-0 mt-0 mb-10px">
+            <li
+              class="text-[#fff] opacity-50 text-[14px] leading-[1.428571429] <tiny:mt-0 <tiny:opacity-100 <tiny:text-[#ffffff66]"
+            >
+              长沙凯钿软件有限公司（Changsha Kdan Software
+              Ltd.），简称凯钿软件，成立于2009年，主要致力于办公软件开发。主要产品有PDF阅读器系列：PDF
+              Reader、17PDF阅读器等，用户可以在不同设备上进行文件的读取，编辑等操作。同时长沙凯钿软件提供PDF文档阅读，注释，编辑，转档等SDK一站式解决方案。
+            </li>
+            <li
+              class="text-[#fff] opacity-50 text-[14px] leading-[1.428571429] <tiny:mt-0 <tiny:opacity-100 <tiny:text-[#ffffff66] flex <tiny:mt-20px"
+            >
+              <span class="whitespace-nowrap">地 址&nbsp; ：</span
+              ><span
+                >湖南省长沙市芙蓉区定王台街道建湘路393号长沙
+                世茂环球金融中心4707-4708号</span
+              >
+            </li>
+            <li
+              class="text-[#fff] opacity-50 text-[14px] leading-[1.428571429] <tiny:mt-0 <tiny:opacity-100 <tiny:text-[#ffffff66] <tiny:mt-20px"
+            >
+              备案号：<a
+                class="record opacity-100"
+                href="https://beian.miit.gov.cn"
+                rel="noreferrer"
+                target="_blank"
+                >湘ICP备14006207号-4</a
+              >
+            </li>
+          </ul>
+        </div>
+        <!-- 联系 -->
+        <div class="schedule w-[17.58333%] px-15px <xl:w-[23.58333%]">
+          <div class="contact float-right mt-10px text-left <tiny:mt-20px">
+            <div class="tel-container flex">
+              <span class="tel-icon inline-block w-36px h-36px mr-10px"></span>
+              <div class="tel-text">
+                <div
+                  class="tel text-[18px] leading-[25px] opacity-60 <tiny:opacity-100 <tiny:text-[#ffffff66]"
+                >
+                  0731-84225961
+                </div>
+                <div
+                  class="time text-[12px] leading-[17px] opacity-50 <tiny:opacity-100 <tiny:text-[#ffffff66]"
+                >
+                  周一至周五09:00-18:00
+                </div>
+              </div>
+            </div>
+            <div class="qq-icon mt-15px h-36px <tiny:mt-20px">
+              <div
+                class="qq flex h-full text-[#fff]"
+                href="tencent://message/?uin=188917181&amp;Site"
+              >
+                <i></i>
+                <div class="text-[18px] opacity-80 leading-[25px] align-middle">
+                  <div class="num <tiny:opacity-100 <tiny:text-[#ffffff66]">
+                    188917181
+                  </div>
+                  <div
+                    class="service text-[12px] opacity-60 leading-[17px] w-auto border-none p-0 m-0"
+                  >
+                    客服群
+                  </div>
+                </div>
+              </div>
+              <!-- <a target="_blank" href="mailto:support@17pdf.com" class="mail"></a> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="copyright pb-30px leading-[1.428571429] <tiny:text-left <tiny:pt-0 <tiny:px-16px <tiny:pb-60px"
+      >
+        <div
+          style="position: relative; z-index: 99999"
+          class="inline-block mr-20px relative z-99999"
+        >
+          <a
+            href="http://wljg.csaic.gov.cn/1932/authority?key=2c41f2f0e0cb7a8aff016d7196632e71"
+            target="_blank"
+          >
+            <img
+              src="https://17pdf.com/assets/home/siteBase_cs-6477fbceec57aea92a7156f2a0bb8a685f89eb535f9fd337a41e16160f3de3ee.png"
+              width="74"
+              height="24"
+              title="亮照"
+              alt="亮照"
+              border="0"
+            />
+          </a>
+        </div>
+        <p
+          class="text-muted inline-block text-[#fff] text-[12px] opacity-50 mt-0 mx-0 mb-10px <tiny:opacity-100 <tiny:text-[#ffffff66]"
+        >
+          © 2018-2022 Build to Connect, Inc. All Rights Reserved.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+// 底部产品展示
+const footerProduct = ref(false)
+// 底部帮助展示
+const footerHelp = ref(false)
+function changePro(): void {
+  footerProduct.value = !footerProduct.value
+}
+function changeHelp(): void {
+  footerHelp.value = !footerHelp.value
+}
+</script>
+
+<style>
+/* 去除浮动坍塌 */
+.container:before,
+.container:after {
+  content: ' ';
+  display: table;
+  clear: both;
+}
+@media screen and (max-width: 959px) {
+  .footer .footer-container .footer-row > div {
+    width: 100%;
+    padding: 0;
+  }
+}
+/* 底部信息第一个 */
+@media screen and (max-width: 959px) {
+  .footer .footer-container .product,
+  .footer .footer-container .help {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
+.footer .footer-container .footer-row .title img {
+  transition: transform 0.2s;
+}
+.footer .footer-container .footer-row .title img.active {
+  transform: rotate(180deg);
+}
+/* 联系 */
+@media screen and (max-width: 959px) {
+  .footer .footer-container .schedule .contact {
+    float: initial;
+  }
+}
+.footer .footer-container .contact .tel-container .tel-icon {
+  background-image: url(http://cn-file.17pdf.com/website/index/ic_foot_phone_normal.png);
+}
+.footer .footer-container .contact .qq-icon .qq i {
+  display: inline-block;
+  height: 36px;
+  width: 36px;
+  background-image: url(http://cn-file.17pdf.com/website/index/ic_foot_qq_normal.png);
+  vertical-align: middle;
+  margin-right: 10px;
+}
+/* 隐藏区 */
+@media screen and (max-width: 959px) {
+  .footerHeiZero {
+    height: 0;
+    overflow: hidden;
+  }
+  .footerHeiProFull {
+    height: 70px;
+    overflow: hidden;
+  }
+  .footerHeiHelpFull {
+    height: 110px;
+    overflow: hidden;
+  }
+}
+</style>

layouts/components/navbar.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:11
- * @LastEditTime: 2022-10-26 16:24:26
+ * @LastEditTime: 2022-11-02 16:32:44
 -->
 <template>
   <div class="h-80px flex relative z-3 justify-between px-[10%] border-b-1 border-b-[#f0f0f0] border-b-solid">
@@ -30,7 +30,8 @@
               <div class="px-24px pt-24px min-w-300px">
                 <div class="flex pb-22px cursor-pointer" style="border-bottom: 1px solid #f0f0f0;">
                   <a href="/members/me/expenses">
-                    <img class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+                    <img v-if="userInfo?.memberInfo.subscriberType === 1" class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+                    <img v-else class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" >
                   </a>
                   <div class="pl-20px">
                     <p class="mt-15px mb-10px text-[#333]">{{userInfo?.memberInfo?.name}}</p>
@@ -39,22 +40,21 @@
                 </div>
                 <div class="flex py-14px mt-20px justify-between">
                   <div>
-                    <p class="text-18px text-[#333] leading-24px">17会员</p>
-                    <p class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+                    <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-18px text-[#333] leading-24px">17会员</p>
+                    <p v-else class="text-18px text-[#333] leading-24px">免费用户</p>
+                    <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+                    <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
                   </div>
-                  <el-button v-if="userInfo?.memberInfo.flag === 1" class="btn-renew">
-                    续费
-                  </el-button>
-                  <el-button v-else>
-                    订阅
-                  </el-button>
+                  <button class="btn-renew" @click="$router.push('/pricing')">
+                    {{userInfo?.memberInfo.subscriberType === 1 ? '续费' : '订阅会员'}}
+                  </button>
                 </div>
                 <div class="flex py-14px my-8px justify-between" style="border-bottom: 1px solid #f0f0f0;">
                   <div>
                     <p class="text-18px text-[#333] leading-24px"><span class="text-500 text-bg-$btn-color-primary text-22px leading-18px tracking-1px">{{userInfo?.memberInfo?.points}}</span><span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">/{{userInfo?.memberInfo?.totalPoints}}</span></p>
                     <p class="text-12px text-[#999] leading-17px">转换券</p>
                   </div>
-                  <el-button class="btn-recharge">充值</el-button>
+                  <button class="btn-recharge" @click="handlerOpenLogin('ticket')">充值</button>
                 </div>
                 <div class="w-full h-64px leading-64px text-[#666] cursor-pointer hover:text-bg-$btn-color-primary" style="border-bottom: 1px solid #f0f0f0;" @click="handlerOpenLogin('manage')">
                   账号管理
@@ -64,7 +64,7 @@
                 </div>
               </div>
             </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="https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" />
+            <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>
       </div>
@@ -73,22 +73,24 @@
         <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>
-    <el-dialog 
-      :visible.sync="dialogVisiable"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      width="480px"
-      append-to-body
-      center
-      :custom-class="interfaceType === 'manage' ? 'manage-dialog': 'login-dialog'"
-      @close="handlerCloseDialog"
-    >
-      <login v-show="interfaceType === 'login'" ref="loginRef"  @register="showChange" @close="handlerClose"></login>
-      <register v-show="interfaceType === 'register'" ref="registerRef" @login="showChange" @close="handlerClose"></register>
-      <UserManage v-show="interfaceType === 'manage'" ref="manageRef" @close="handlerClose"></UserManage>
-    </el-dialog>
-  </no-ssr>
+    <no-ssr>
+      <el-dialog 
+        :visible="visiable"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :width="dialogWidth"
+        append-to-body
+        center
+        :custom-class="interface === 'manage' ? 'manage-dialog': 'login-dialog'"
+        @close="handlerCloseDialog"
+      >
+        <login v-show="interface === 'login'" ref="loginRef"  @register="showChange" @close="handlerCloseDialog"></login>
+        <register v-show="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog"></register>
+        <UserManage v-show="interface === 'manage'" ref="manageRef" @close="handlerCloseDialog"></UserManage>
+        <BuyVip v-if="interface === 'vip'" ref="vipRef" @close="handlerCloseDialog"></BuyVip>
+        <BuyTicket v-if="interface === 'ticket'" ref="ticketRef" @close="handlerCloseDialog"></BuyTicket>
+      </el-dialog>
+    </no-ssr>
   </div>
 </template>
 
@@ -98,22 +100,44 @@ import { mapState } from 'vuex'
 import login from '~/components/LoginBar.vue'
 import register from '~/components/RegisterBar.vue'
 import userManage from '~/components/UserManage.vue'
+import BuyVip from '~/components/BuyVip.vue'
+import BuyTicket from '~/components/BuyTicket.vue'
 export default {
   components: {
     login,
     register,
-    userManage
+    userManage,
+    BuyVip,
+    BuyTicket
   },
   data() {
     return {
       dialogVisiable: false,
-      interfaceType: 'login',
     }
   },
-  computed: mapState([
-    'token',
-    'userInfo'
-  ]),
+  computed: {
+    ...mapState([
+      'token',
+      'userInfo',
+      'globalLoginVisiable',
+      'globalInterfaceType'
+    ]),
+    visiable() {
+      return this.dialogVisiable || this.globalLoginVisiable
+    },
+    interface() {
+      return this.globalInterfaceType || 'login'
+    },
+    dialogWidth() {
+      if(this.interface === 'vip') {
+        return '512px'
+      }else if(this.interface === 'ticket') {
+        return '558px'
+      }else {
+        return '480px'
+      }
+    }
+  },
   mounted() {
     if(localStorage.getItem('userInfo')) {
       this.$store.commit('setUser',JSON.parse(localStorage.getItem('userInfo')))
@@ -123,14 +147,16 @@ export default {
   methods: {
     handlerOpenLogin(type) {
       this.dialogVisiable = true
-      this.interfaceType = type
+      this.$store.commit('SET_INTERFACE', type)
     },
     handlerCloseDialog() {
-      this.$refs[`${this.interfaceType}Ref`].resetInterfaceStatus()
+      this.dialogVisiable = false
+      this.$store.commit('OPEN_LOGIN',false)
+      this.$refs[`${this.interface}Ref`].resetInterfaceStatus()
     },
-    // 展示注册界面
+    // 切换弹窗界面
     showChange(type) {
-      this.interfaceType = type
+      this.$store.commit('SET_INTERFACE', type)
     },
     handlerLogout() {
       localStorage.removeItem('token')
@@ -138,9 +164,6 @@ export default {
       this.$store.commit('DEL_TOKEN', '')
       this.$router.push('/')
     },
-    handlerClose() {
-      this.dialogVisiable = false
-    }
   }
 }
 

layouts/components/navbar2.vue

@@ -0,0 +1,282 @@
+<!--
+ * @Description: 
+ * @Author: 李阳滨
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-31 11:32:24
+ * @LastEditTime: 2022-11-03 15:33:53
+-->
+<template>
+  <div>
+    <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]"
+    >
+      <nav
+        class="nav-header w-full max-w-1120px h-full mx-auto my-0 tiny:flex tiny:justify-between tiny:items-center tiny:py-0 tiny:px-20px lg:max-w-none lg:pl-[10%] lg:pr-[10%]"
+      >
+        <div
+          class="navbar-header tiny:float-left <tiny:flex <tiny:items-center <tiny:justify-between <tiny:h-56px <tiny:py-0 <tiny:px-16px"
+        >
+          <!-- logo -->
+          <a class="home" href="/">
+            <img
+              src="http://cn-file.17pdf.com/website/index/logo_pdf_top.png"
+              class="tiny:ml-16px <tiny:w-170px align-middle"
+            />
+          </a>
+          <!-- 按钮 -->
+          <button
+            type="button"
+            class="navbar-toggle relative float-right bg-transparent border border-solid border-transparent rounded-4px tiny:hidden <tiny:block p-0 m-0 border-none"
+            data-toggle="collapse"
+            data-target="#navBar"
+            @click="changeNavShow()"
+          >
+            <span class="hamburger_box inline-block relative w-15px h-14px">
+              <span class="hamburger_inner" :class="{ beX: navShow }"></span>
+            </span>
+          </button>
+        </div>
+        <!-- 登录等选项 -->
+        <div
+          id="navBar"
+          class="navbar-collapse menu px-15px transition-all duration-500 ease-in tiny:w-auto tiny:border-0 tiny:shadow-none <tiny:py-0 <tiny:px-16px <tiny:rounded-4px"
+          aria-expanded="false"
+          :class="{ hZero: !navShow, hFull: navShow }"
+        >
+          <ul
+            class="nav navbar-nav tiny:float-left <tiny:pb-20px ting:flex tiny:items-center"
+          >
+            <li class="relative block tiny:float-left text-[0px]">
+              <a
+                href="/converter"
+                class="index-menu-converter converter_menu relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
+                title="行业领先的PDF转换器，支持将PDF与其他格式文件的互转，在线文件格式转换"
+                >格式转换</a
+              >
+            </li>
+            <li class="relative block tiny:float-left text-[0px] tiny:ml-35px">
+              <a
+                href="/pricing"
+                class="index-menu-pricing relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
+                title="订阅基础套餐和商务套餐，畅享无缝衔接无纸化办公"
+                >订阅服务</a
+              >
+            </li>
+            <li class="relative block tiny:float-left text-[0px] tiny:ml-35px">
+              <a
+                href="/sdk"
+                class="index-menu-sdk relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
+                title="为企业用户跨平台集成PDF阅读器核心功能，实现文本编辑、表单填写、OCR等进阶功能。"
+                >SDK介绍</a
+              >
+            </li>
+            <li class="relative block tiny:float-left text-[0px] tiny:ml-35px">
+              <a
+                class="download-contain relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
+                href="/pdf-reader/download"
+                >下载</a
+              >
+            </li>
+            <li
+              v-if="!token"
+              class="relative block tiny:float-left text-[0px] tiny:ml-35px lg:ml-105px xl:ml-135px"
+            >
+              <a
+                type="button"
+                class="btn_login relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0 inline-flex justify-center items-center h-40px w-72px py-0 px-18px border border-solid border-gray-[#e93636] rounded-4px ml-9px cursor-pointer text-[#e93636] <tiny:ml-0"
+                @click="handlerOpenLogin('login')"
+                >登录</a
+              >
+              <a
+                type="button"
+                class="btn_sign_up relative block no-underline text-[16px] p-0 leading-[22px] <tiny:py-8px <tiny:px-0 inline-flex justify-center items-center h-40px w-72px py-0 px-18px border border-solid border-gray-[#e93636] rounded-4px ml-9px cursor-pointer text-[#e93636] bg-[#ff4f4f] text-[#fff] rounded-4px border-none ml-25px"
+                @click="handlerOpenLogin('register')"
+                >注册</a
+              >
+            </li>
+            <img v-else class="w-36px h-36px rounded-full <tiny:mt-8px mr-0 md-0 cursor-pointer text-[0px] tiny:ml-35px lg:ml-135px xl:ml-190px" :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')" />
+          </ul>
+        </div>
+      </nav>
+    </div>
+    <div
+      v-show="navShow"
+      class="top-menu-overlay fixed top-60px left-0 w-full h-full z-100 bg-[#00000033]"
+    ></div>
+
+    <no-ssr>
+      <el-dialog 
+        :visible="dialogVisiable"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        width="480px"
+        append-to-body
+        center
+        :custom-class="interface === 'manage' ? 'manage-dialog': 'login-dialog'"
+        @close="handlerCloseDialog"
+      >
+        <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>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import login from '~/components/LoginBar.vue'
+import register from '~/components/RegisterBar.vue'
+export default {
+  components: {
+    login,
+    register
+  },
+  data() {
+    return {
+      navShow: false,
+      dialogVisiable: false,
+      interface: 'login'
+    }
+  },
+  computed: {
+    ...mapState([
+      'token',
+      'userInfo'
+    ]),
+  },
+  methods: {
+    handlerOpenLogin(type) {
+      this.interface = type
+      this.dialogVisiable = true
+      // this.$store.commit('SET_INTERFACE', type)
+    },
+    handlerCloseDialog() {
+      this.dialogVisiable = false
+      // this.$store.commit('OPEN_LOGIN',false)
+      this.$refs[`${this.interface}Ref`].resetInterfaceStatus()
+    },
+    // 切换弹窗界面
+    showChange(type) {
+      this.interface = type
+      // this.$store.commit('SET_INTERFACE', type)
+    },
+    // 头部展示
+    changeNavShow() {
+      this.navShow = !this.navShow
+    }
+  }
+}
+</script>
+
+<style>
+body {
+  min-width: 0px;
+}
+
+@media screen and (max-width: 959px) {
+  .nav-header.active {
+    background-color: #fff;
+  }
+}
+
+/* 头部 */
+.navbar {
+  margin: 0px !important;
+  border: none;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+@media screen and (max-width: 959px) {
+  .nav-header {
+    position: fixed;
+    height: auto;
+    background-color: #fafafa;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+
+/* 三条短横线 */
+.nav-header .hamburger_box .hamburger_inner,
+.nav-header .hamburger_box .hamburger_inner::after,
+.nav-header .hamburger_box .hamburger_inner::before {
+  position: absolute;
+  right: 0;
+  width: 15px;
+  height: 2px;
+  background-color: #333;
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  transition-duration: 0.3s;
+  transition-timing-function: ease;
+}
+
+.nav-header .hamburger_box .hamburger_inner::before {
+  top: 6px;
+}
+
+.hamburger_inner::after {
+  top: 12px;
+}
+
+.nav-header .hamburger_box .hamburger_inner::after,
+.nav-header .hamburger_box .hamburger_inner::before {
+  display: block;
+  content: '';
+}
+
+@media screen and (max-width: 959px) {
+  .beX {
+    top: 0px;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  .beX::before {
+    top: 0px;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    opacity: 0;
+  }
+
+  .beX::after {
+    top: 0px;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+  }
+}
+
+/* 右侧 */
+.navbar-collapse {
+  border-top: 1px solid transparent;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media screen and (min-width: 960px) {
+  .nav-header .navbar-collapse .navbar-nav {
+    display: flex;
+    align-items: center;
+  }
+}
+/*注册  */
+.nav-header .navbar-collapse .navbar-nav li .btn_sign_up {
+  color: white;
+}
+/* 遮盖层 */
+.top-menu-overlay {
+  content: '';
+}
+/* 头部隐藏区 */
+@media screen and (max-width: 959px) {
+  .hZero {
+    height: 0;
+    overflow: hidden;
+  }
+
+  .hFull {
+    height: 212px;
+    overflow: hidden;
+  }
+}
+</style>

layouts/default.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:11:18
- * @LastEditTime: 2022-10-21 13:27:27
+ * @LastEditTime: 2022-10-31 17:58:22
 -->
 <template>
   <div class="font-primary">
@@ -15,5 +15,5 @@
 
 <script lang="ts" setup>
 import Navbar from './components/navbar.vue'
-import FooterBar from './components/footerbar.vue'
+import FooterBar from './components/FooterBar.vue'
 </script>

layouts/downnav.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+      <Navbar2></Navbar2>
+      <Nuxt></Nuxt>
+      <footerBar2></footerBar2>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import Navbar2 from './components/navbar2.vue'
+  import footerBar2 from './components/footer-bar2.vue'
+  </script>

layouts/userCenter.vue

@@ -0,0 +1,223 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-01 20:18:40
+ * @LastEditTime: 2022-11-02 11:08:22
+-->
+<template>
+  <div class="font-primary">
+    <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]">
+        <div class="person">
+          <div>
+            <a href="/members/me/expenses" class="members">
+              <img v-if="userInfo?.memberInfo.subscriberType === 1" src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+              <img v-else src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" >
+            </a>
+            <br>
+            <p class="username">{{userInfo?.memberInfo?.name}}</p>
+            <p class="user-showname block mt-16px">{{userInfo?.memberInfo?.email || userInfo?.memberInfo?.phone}}</p>
+          </div>
+          <div class="flex py-14px mt-20px justify-between text-left">
+            <div>
+              <p v-if="userInfo?.memberInfo.subscriberType === 1" class="user-vip text-18px mb-6px text-[#333] font-500 leading-24px">17会员</p>
+              <p v-else class="text-18px text-[#333] font-500 leading-24px mb-6px">免费用户</p>
+              <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-12px text-[#999] pl-28px mb-6px leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+              <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
+            </div>
+            <button class="btn-renew" @click="handlerBuy('vip')">
+              {{userInfo?.memberInfo.subscriberType === 1 ? '续费' : '订阅会员'}}
+            </button>
+          </div>
+          <div class="flex py-14px my-8px justify-between text-left">
+            <div class="user-ticket">
+              <p class="text-18px text-[#333] leading-24px mb-6px"><span class="font-500 text-bg-$btn-color-primary text-18px leading-24px tracking-1px">{{userInfo?.memberInfo?.points}}</span><span class="text-bg-$btn-color-primary text-14px leading-18px">张</span><span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">/{{userInfo?.memberInfo?.totalPoints}}张</span></p>
+              <p class="text-12px text-[#999] leading-17px">转换券</p>
+            </div>
+            <button class="btn-recharge" @click="handlerBuy('ticket')">充值</button>
+          </div>
+        </div>
+
+        <ul class="menus-ul">
+          <li class="my_convert" :class="{active: $route.path === '/members/me/expenses'}">
+            <a href="/members/me/expenses" class='myexpenses'>
+              我的转档
+            </a>
+          </li>
+          <li class='my_pricing' :class="{active: $route.path === '/members/me/points'}">
+            <a href="/members/me/points">消费记录</a>
+            <ul :class="{active: $route.path === '/members/me/points'}">
+              <li >
+                <a :class="{active: $route.path === '/members/me/points'}" href="/members/me/points" class='mypoints'>
+                  转换券购买
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      <Nuxt class="w-[70%]"></Nuxt>
+    </div>
+    <FooterBar></FooterBar>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Navbar from './components/navbar.vue'
+import FooterBar from './components/FooterBar.vue'
+
+export default {
+  components: {
+    Navbar,
+    FooterBar,
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapState([
+      'userInfo',
+    ]),
+  },
+  methods: {
+    handlerBuy(type) {
+      this.$store.commit('OPEN_LOGIN', true)
+      this.$store.commit('SET_INTERFACE', type)
+    },
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.person{
+  width: 100%;
+  text-align: center;
+  padding: 30px 0px 8px;
+  border-bottom: 1px solid rgb(218,218,218);
+  a.members {
+    width: 80px;
+    height: 80px;
+    border-radius: 100%;
+    box-shadow: rgba(0,0,0,0.2);
+    display: inline-block;
+    overflow: hidden;
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .username{
+    height: 30px;
+    font-size: 20px;
+    color: rgb(51,51,51);
+  }
+  .user-showname{
+    height: 21px;
+    font-size: 14px;
+    color: rgb(153,153,153);
+  }
+}
+.user-vip{
+  background: url('~assets/images/common/ic_member.svg') no-repeat;
+  background-size: 24px;
+  padding-left: 28px;
+}
+.user-ticket {
+  padding-left: 28px;
+  background: url('~assets/images/common/ic_coupon.svg') no-repeat;
+  background-size: 24px;
+}
+.menus-ul {
+  list-style: none;
+  font-size: 18px;
+  padding-left: 0px;
+  width: 100%;
+  max-width: 250px;
+  margin-top: 24px;
+  li {
+    margin-bottom: 8px;
+    cursor: pointer;
+    a {
+      color: rgb(51, 51, 51);
+      display: block;
+      width: 100%;
+      height: 48px;
+      line-height: 48px;
+    }
+    ul {
+      list-style: none;
+      padding-left: 0px;
+      display: none;
+      &.active {
+        display: block;
+      }
+      li {
+        font-size: 16px;
+        border: 0px !important;
+        &:hover{
+          a{
+            color: rgb(255, 79, 79);
+          }
+        }
+        a {
+        color: rgb(153, 153, 153);
+          &.active{
+            color: rgb(255, 79, 79);
+          }
+        }
+      }
+    }
+  }
+}
+.my_pricing{
+  padding: 0px 32px;
+  background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
+  &:hover{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_elect.png) no-repeat left 12px;
+    & > a{
+      color: #ff4f4f;
+    }
+  }
+  &.active:hover{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
+    & > a{
+      color: rgb(51, 51, 51);
+    }
+  }
+  & > a{
+    background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian.png) no-repeat right 14px;
+  }
+  &.active > a{
+    background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian_normal.png) no-repeat right 14px;
+  }
+}
+.my_convert{
+  padding: 0px 32px;
+  background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_nor.png) no-repeat left 12px;
+  &:hover{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px;
+    & > a{
+      color: #ff4f4f;
+    }
+  }
+  &.active{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px;
+    a{
+      color: rgb(255, 79, 79);
+    }
+  }
+}
+.mypoints {
+  &.active {
+    a {
+      color: rgb(255, 79, 79);
+    }
+  }
+}
+</style>

nuxt.config.js

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 11:06:52
- * @LastEditTime: 2022-10-26 16:52:30
+ * @LastEditTime: 2022-11-01 16:50:24
  */
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
@@ -32,7 +32,7 @@ export default {
     '~/plugins/axios',
     {src: '~plugins/element-ui', ssr: false},
     {src: '@/plugins/localStorage', ssr: false},
-
+    {src: '@/plugins/vueqr', ssr: false},
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

package.json

@@ -22,6 +22,7 @@
     "throttle-debounce": "^5.0.0",
     "vue": "^2.7.10",
     "vue-fragment": "^1.6.0",
+    "vue-qr": "^4.0.9",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10",
     "vuex-persistedstate": "^4.1.0"

pages/members/me/expenses.vue

@@ -0,0 +1,151 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-01 19:27:42
+ * @LastEditTime: 2022-11-02 13:47:12
+-->
+<template>
+  <div>
+    <div class="expenses-date-tips flex content-center py-6px ">
+      <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小时内下载文件至本地永久保存
+        </span>
+        <span v-if="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容量文件，超出部分文件将不再保留
+          </div>
+        </span>
+      </div>
+    </div>
+
+    <div class="py-15px">
+      <p class="text-[20px] leading-28px text-[#333]">我的转档</p>
+      <div class="mt-10px mb-16px">
+        <button class="btn btn-download">下载</button>
+        <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>
+  </div>
+</template>
+
+<script> 
+import { mapState } from 'vuex' 
+export default {
+  layout: 'userCenter',
+  data() {
+    return {
+      tableData:[]
+    }
+  },
+  computed: {
+    ...mapState([
+      'userInfo',
+    ]),
+  },
+}
+</script>
+
+<style lang="scss">
+.expenses-date-tips {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: linear-gradient(90deg, #FFFAFA 10.37%, rgba(255, 243, 243, 0) 91.75%), linear-gradient(90deg, #FFF2F6 2.26%, rgba(255, 242, 246, 0.21) 101.41%);
+  border: 1px solid rgba(255, 79, 79, 0.2);
+  border-radius: 12px;
+  .text-container {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+    img {
+      margin-left: 8px;
+    }
+  }
+  span {
+    font-size: 14px;
+    line-height: 24px;
+    vertical-align: middle;
+  }
+  .text {
+    display: inline-flex;
+    align-items: center;
+  }
+  .tip {
+    position: relative;
+    font-size: 0;
+    .tip-text {
+      display: none;
+      position: absolute;
+      left: -3px;
+      width: 258px;
+      padding: 15px 14px 10px 10px;
+      background: url('http://cn-file.17pdf.com/website/members/ic_tip.svg') left top no-repeat;
+      background-size: auto 100%;
+      font-size: 12px;
+      line-height: 18px;
+      color: #fff;
+      border-radius: 4px;
+    }
+    &:hover .tip-text {
+      display: block;
+    }
+  }
+}
+.btn {
+  height: 30px;
+  line-height: 28px;
+  font-size: 12px;
+  border-radius: 2px;
+  display: inline-block;
+  padding: 0px 9px 0px 33px;
+  &-download {
+    color: #fff;
+    background: #FF4F4F url(http://cn-file.17pdf.com/website/members/ic_download.svg) no-repeat 8px center;
+    margin-right: 7px;
+    &_disabled {
+      background-color: #FFA7A7;
+    }
+  }
+  &-delete {
+    border: 1px solid #d8d8d9;
+    color: #666;
+    background: url(http://cn-file.17pdf.com/website/members/ic_delete_normal.png) no-repeat 8px 5px;
+    &_disabled {
+      color: #ccc;
+      border-color: #ccc;
+    }
+  }
+}
+.el-table {
+  th {
+    background-color: #f4f4f4 !important;
+    font-size: 16px;
+    color: #666666;
+    font-weight: normal;
+  }
+}
+.table-empty {
+  margin-top: 50px;
+  height: 200px;
+  background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
+}
+</style>

pages/members/me/points.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-02 10:18:11
+ * @LastEditTime: 2022-11-02 13:49:41
+-->
+<template>
+  <div>
+    <div>
+      <p class="py-15px text-20px leading-28px">转换券购买记录</p>
+    </div>
+    <el-table :data="tableData">
+      <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>   
+  </div>
+
+</template>
+
+<script>
+export default {
+  layout: 'userCenter',
+  data() {
+    return {
+      tableData:[]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-table {
+  th {
+    background-color: #f4f4f4 !important;
+    font-size: 16px;
+    color: #666666;
+    font-weight: normal;
+  }
+}
+.table-empty {
+  margin-top: 50px;
+  height: 200px;
+  background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
+}
+</style>

pages/pdf-reader/download.vue

@@ -0,0 +1,582 @@
+<!--
+ * @Description: 
+ * @Author: 李阳滨
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-31 10:30:00
+ * @LastEditTime: 2022-11-03 18:01:40
+-->
+<template>
+  <div class="pdf-reader-wrapper">
+    <!-- 17pdf reader -->
+    <div
+      class="footer:mt-80px top-banner relative z-1 sm:top-[-80px] sm:mb-[-80px] <sm:top-[-56px] <sm:mb-[-56px]"
+    >
+      <div
+        class="top-banner-container w-full sm:w-full sm:flex sm:justify-between sm:items-center sm:max-w-1120px sm:mx-auto sm:my-opx sm:pt-80px sm:px-20px sm:pb-0 <sm:pt-56px <sm:px-16px <sm:pb-0px"
+      >
+        <div class="top-banner-text sm:w-[51.85185%] <sm:text-center">
+          <h1
+            class="sm:text-[46px] sm:leading-[55px] <sm:mt-32px <sm:text-[34px] <sm:leading-[41px] m-0 text-[#333]"
+          >
+            17PDF Reader
+          </h1>
+          <h2
+            class="sm:my-12px sm:mx-0 sm:text-[33px] sm:leading-[50px] <sm:mt-8px <sm:mx-0 <sm:mb-12px text-[26px] leading-[39px] font-medium text-[#4d4d4d] tracking-1px"
+          >
+            移动端PDF文件解决方案
+          </h2>
+          <div
+            class="desc sm:mb-34px sm:text-[18px] sm:leading-[25px] <sm:mb-24px <sm:text-[16px] <sm:leading-[22px] font-normal text-[#4d4d4dcc]"
+          >
+            17PDF
+            Reader是一款综合型PDF阅读器和编辑器，方便您在手机和平板上阅读、浏览、注释、转换、编辑页面、添加水印、签名、填表、加密解密、扫描、打印、分享PDF文件，助力高效学习与办公！
+          </div>
+          <a
+            class="sm:w-186px sm:h-48px sm:text-[22px] sm:leading-[33px] cursor-pointer <sm:w-full <sm:max-w-184px <sm:h-40px <sm:mb-36px <sm:text-[16px] <sm:leading-[24px] inline-flex justify-center items-center bg-[#ff4f4f] rounded-2px font-bold text-[#fff] no-underline"
+            @click="moveDownload"
+            >免费下载</a
+          >
+        </div>
+        <div class="img-container sm:w-[32.037%] sm:pt-36px">
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_top@2x.png"
+            alt=""
+            class="<sm:max-w-328px <sm:mx-auto <sm:my-0 w-full align-middle"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- reader-wrapper 2-->
+    <div class="feature-wrapper reader-wrapper bg-[#fff]">
+      <div
+        class="feature-content sm:flex-row-reverse sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
+      >
+        <div class="text sm:w-[50%]">
+          <h3
+            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
+          >
+            随时随地 阅读批注
+          </h3>
+          <div class="feature-desc">
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
+            >
+              支持自定义浏览/阅读模式，全屏阅读、裁边模式、TTS语音朗读等多种模式任选，给您更方便快捷的移动端阅读体验；
+            </div>
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
+            >
+              阅读过程中，您可以使用高亮、手绘、图形、文本框、签名、图章等多样注释工具快速批注PDF。做笔记更高效，方便重点内容的记忆。
+            </div>
+          </div>
+        </div>
+        <div
+          class="img-container sm:w-[40.740741%] <sm:mt-32px <sm:text-center"
+        >
+          <img
+            src="~/assets/images/common/pdf_annotate.png"
+            alt=""
+            class="w-full <sm:max-w-440px <sm:my-0 <sm:mx-auto"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- convert-wrapper 3-->
+    <div class="feature-wrapper convert-wrapper bg-[#fafafa]">
+      <div
+        class="feature-content sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
+      >
+        <div class="text sm:w-[50%]">
+          <h3
+            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
+          >
+            快速准确 转换文件
+          </h3>
+          <div class="feature-desc">
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
+            >
+              支持PDF转换为Word、Excel、PPT、TXT、JPG/PNG，支持批量转换；
+            </div>
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
+            >
+              一键转档，精准快速。转换后完美保留原始数据、样式和布局。
+            </div>
+          </div>
+        </div>
+        <div
+          class="img-container <sm:mt-32px <sm:text-center sm:w-[38.888889%]"
+        >
+          <img
+            src="~/assets/images/common/pdf_converter.png"
+            alt=""
+            class="w-full <sm:max-w-490px <sm:my-0 <sm:mx-auto"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- edit-wrapper 4-->
+    <div class="feature-wrapper edit-wrapper bg-[#fff]">
+      <div
+        class="feature-content sm:flex-row-reverse sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
+      >
+        <div class="text sm:w-[50%]">
+          <h3
+            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
+          >
+            编辑PDF 可以很简单
+          </h3>
+          <div class="feature-desc">
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
+            >
+              丰富实用的PDF编辑工具帮助您在移动设备上更方便地编辑和管理PDF页面；
+            </div>
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
+            >
+              重新排序、插入、旋转、拆分/提取、删除页面；
+            </div>
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
+            >
+              一键合并PDF，添加水印，加密解密，完成静态和交互式表单填写、分享和打印等。
+            </div>
+          </div>
+        </div>
+        <div class="img-container <sm:mt-32px <sm:text-center sm:w-[45.37037%]">
+          <img
+            src="~/assets/images/common/pic_edit.png"
+            alt=""
+            class="w-full <sm:max-w-490px <sm:my-0 <sm:mx-auto"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- manager-wrapper 5-->
+    <div class="feature-wrapper manager-wrapper bg-[#fafafa]">
+      <div
+        class="feature-content sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
+      >
+        <div class="text sm:w-[50%]">
+          <h3
+            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
+          >
+            管理文件 轻松又高效
+          </h3>
+          <div class="feature-desc">
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
+            >
+              支持文件分享、移动、复制、重命名、压缩或删除，管理文件更轻松；
+            </div>
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
+            >
+              同时支持读取系统文件、SD卡、U盘内文件，或通过WiFi传输与电脑端共享文件。
+            </div>
+          </div>
+        </div>
+        <div
+          class="img-container <sm:mt-32px <sm:text-center sm:w-[40.740741%]"
+        >
+          <img
+            src="~/assets/images/common/pdf_manage.png"
+            alt=""
+            class="w-full <sm:max-w-440px <sm:my-0 <sm:mx-auto"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- packs-wrapper 6-->
+    <div class="feature-wrapper packs-wrapper sm:bg-[#fff] <sm:bg-[#fafafa]">
+      <div
+        class="feature-content sm:flex-row-reverse sm:flex sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
+      >
+        <div class="text sm:w-[50%]">
+          <h3
+            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
+          >
+            个性化定制 套餐任你选
+          </h3>
+          <div class="feature-desc">
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
+            >
+              购买17会员即享文档格式无限转，一键转换，轻松快捷；
+            </div>
+            <div
+              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
+            >
+              超值年费套餐尊享高阶纯净版APP，另可根据转档需要单独购买转换券，随心定制你的个性化购买方案。
+            </div>
+          </div>
+        </div>
+        <div
+          class="img-container <sm:mt-32px <sm:text-center sm:w-[29.62963%] sm:mr-[6.944444%]"
+        >
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_06@2x.png"
+            alt=""
+            class="w-full max-w-280px <sm:my-0 <sm:mx-auto"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 下载图片 -->
+    <div
+      id="download-wrapper"
+      class="download-wrapper sm:pt-100px sm:px-20px sm:pb-0 sm:bg-[#fafafa] <sm:px-16px <sm:py-0"
+    >
+      <h3
+        class="font-medium text-[#000000d8] sm:mt-20px sm:mb-10px sm:text-center sm:text-[36px] sm:leading-[54px] <sm:mt-60px <sm:mx-0px <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:text-center"
+      >
+        Android应用商店下载
+      </h3>
+      <div
+        class="download-content font-normal text-[#4d4d4dcc] sm:max-w-950px sm:mt-0px sm:mx-auto sm:mb-72px sm:text-center sm:text-[18px] sm:-leading-[25px] <sm:mb-24px <sm:text-[16px] <sm:leading-[22px] <sm:text-center"
+      >
+        免费下载安装17PDF
+        Reader，您的移动PDF助手助您轻松阅读、注释、编辑、转换、管理、扫描PDF文件。<br />若您未找到相应的下载商城，我们建议您直接下载APK安装包。
+      </div>
+      <div
+        class="download-container w-full max-w-1180px my-0 mx-auto pb-100px <sm:max-w-328px <sm:pb-44px sm:w-full sm:max-w-562px sm:my-0px sm:mx-auto sm:pb-46px tiny:w-full tiny:max-w-870px xl:w-full xl:max-w-1180px"
+      >
+        <!-- 1 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            华为
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/huawei.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="huawei inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://appgallery.huawei.com/#/app/C10280806"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 2 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px <sm:mr-0"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            小米
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/xiaomi.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="xiaomi inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://app.mi.com/details?id=com.kdanmobile.android.pdfreader.google.pad"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 3 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px tiny:mr-0 xl:mr-54px"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            vivo
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_logo_vivo.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="vivo inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="http://info.appstore.vivo.com.cn/detail/89081"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 4 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px xl:mr-0px <sm:mr-0"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            魅族
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/meizu.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="meizu inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="http://app.meizu.com/apps/public/detail?package_name=com.kdanmobile.android.pdfreader.google.pad"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 5 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            应用宝
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_logo_yingyongbao.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="yingyongbao inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://sj.qq.com/myapp/detail.htm?apkName=com.kdanmobile.android.pdfreader.google.pad"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 6 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px tiny:mr-0 xl:mr-54px <sm:mr-0"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            360
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_logo_360.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="safe inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="http://m.app.so.com/detail/index?pname=com.kdanmobile.android.pdfreader.google.pad&amp;id=1949500"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 7 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            豌豆荚
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/wandoujia.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="wandoujia inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://www.wandoujia.com/apps/6500966"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 8 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px xl:mr-0px <sm:mr-0"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            酷安
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_logo_kuan.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="kuan inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://www.coolapk.com/apk/com.kdanmobile.android.pdfreader.google.pad"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 9 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px tiny:mr-0 xl:mr-54px"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            百度
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/pic_logo_baidu.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="baidu inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://mobile.baidu.com/item?pid=1335810"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 10 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px <sm:mr-0"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            应用汇
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/yingyonghui.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="yingyonghui inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="http://www.appchina.com/app/com.kdanmobile.android.pdfreader.google.pad"
+            target="_blank"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+        <!-- 11 -->
+        <div
+          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
+        >
+          <div
+            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
+          >
+            APK
+          </div>
+          <img
+            src="http://cn-file.17pdf.com/website/download/download_logo_apk.png"
+            alt=""
+            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
+          />
+          <a
+            class="apk inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
+            href="https://cn-file.17pdf.com/downloads/PDF_Reader_KdanShare.apk"
+            data-agl-cvt="6"
+            >前往下载</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'downnav',
+  methods: {
+    moveDownload() {
+      const scrollPart = document.querySelector("#download-wrapper"); 
+      const top = scrollPart.getBoundingClientRect().top;
+      const pageY = window.pageYOffset;
+      const endPosition = top + pageY;
+      const startTime = +new Date();
+      const duration = 500; // ms
+
+      function run() {
+        const time = +new Date() - startTime;
+        window.scrollTo(0, pageY + top * (time / duration));
+        run.timer = requestAnimationFrame(run);
+        if (time >= duration) {
+          window.scrollTo(0, endPosition);
+          cancelAnimationFrame(run.timer);
+        }
+      }
+      requestAnimationFrame(run);
+    } 
+  }
+}
+</script>
+
+<style scoped>
+/* 17pdf reader展示區容器 */
+.pdf-reader-wrapper .top-banner {
+  background: #fafafa
+    url(http://cn-file.17pdf.com/website/download/pic_topbanner.png) no-repeat
+    center;
+}
+
+@media screen and (max-width: 767px) {
+  .pdf-reader-wrapper .top-banner {
+    background-size: 100% auto;
+    background-position: center 80px;
+    background-image: url(http://cn-file.17pdf.com/website/download/pic_topbanner_min.png);
+  }
+}
+
+/* 文字前面的红点 */
+.pdf-reader-wrapper
+  .feature-wrapper
+  .feature-content
+  .text
+  .feature-item:before {
+  display: block;
+  content: '';
+  flex: none;
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+  background-color: #ff4f4f;
+  border-radius: 50%;
+}
+
+/* 个性定制容器 */
+.packs-wrapper {
+  background: url(http://cn-file.17pdf.com/website/download/pic_tuan.png)
+    no-repeat center;
+}
+
+@media screen and (max-width: 767px) {
+  .pdf-reader-wrapper .packs-wrapper {
+    background-size: 100% auto;
+    background-position: center top;
+    background-image: url(http://cn-file.17pdf.com/website/download/pic_tuan_min.png);
+  }
+}
+
+/* 下载图片容器 */
+.pdf-reader-wrapper .download-wrapper .download-container:after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
+/* 下载圖片 */
+.pdf-reader-wrapper .download-wrapper .download-container .download-box {
+  box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 14%);
+}
+
+@media screen and (max-width: 767px) {
+  .pdf-reader-wrapper .download-wrapper .download-container .download-box {
+    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 14%);
+  }
+}
+</style>

pages/pricing.vue

@@ -1,61 +1,150 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-26 16:53:24
+ * @LastEditTime: 2022-10-31 21:17:57
+-->
 <template>
-    <div>
-        <div class="pricing_banner w-full h-340px bg-no-repeat mb-77px pt-86px ">
-            <div class=" w-634px h-168px bg-[#d2b99799] my-0 mx-auto text-center text-[#fff] pt-30px">
-                <p class="bg_title text-[48px] leading-[1.428571429]">17会员中心</p>
-                <p class="bg_text text-[18px] leading-[1.428571429]">文件格式无限转档，纯净无广告，更多进阶功能等你体验</p>
-                <button type="button"
-                    class="bg_button w-145px h-48px rounded-[29px] text-[18px] leading-[48px] my-22px mx-auto border-0 ">立即订阅</button>
-            </div>
-
+  <div>
+    <div class="pricing_banner w-full h-340px bg-no-repeat mb-77px pt-86px">
+        <div
+        class="w-634px h-168px bg-[#d2b99799] my-0 mx-auto text-center text-[#fff] pt-30px"
+        >
+        <p class="bg_title text-[48px] leading-[1.428571429]">17会员中心</p>
+        <p class="bg_text text-[18px] leading-[1.428571429]">
+            文件格式无限转档，纯净无广告，更多进阶功能等你体验
+        </p>
+        <button
+            type="button"
+            class="bg_button w-145px h-48px rounded-[29px] text-[18px] leading-[48px] my-22px mx-auto border-0"
+            @click="handlSubmit"
+        >
+            立即订阅
+        </button>
+        </div>
+    </div>
+    <div class="pricing_wrap">
+        <div class="pricing_content first">
+        <div class="content_title flex justify-center items-center mb-50px">
+            <img
+            src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate2_title.png"
+            alt="引號"
+            class="w-18px h-9px inline-block"
+            />
+            <p
+            class="text-[32px] text-[#d5b07d] leading-[48px] inline-block px-24px"
+            >
+            会员主打特权
+            </p>
+            <img
+            src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate1_title.png"
+            alt="引號"
+            class="w-18px h-9px inline-block"
+            />
         </div>
-        <div class="pricing_wrap ">
-            <div class="pricing_content first">
-                <div class="content_title flex justify-center items-center mb-50px ">
-                    <img src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate2_title.png" alt="引號"
-                        class="w-18px h-9px inline-block">
-                    <p class="text-[32px] text-[#d5b07d] leading-[48px] inline-block px-24px">会员主打特权</p>
-                    <img src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate1_title.png" alt="引號"
-                        class="w-18px h-9px inline-block">
-                </div>
-                <div class="content_line w-780px mx-auto">
-                    <div class="content_box flex justify-between items-center mb-65px">
-                        <img src="http://cn-file.17pdf.com/website/pricings/v2/pic_members_removeads.png" alt="AD"
-                            class="big_img align-middle">
-                        <div class="text_container w-420px pl-20px">
-                            <p class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]">移除广告</p>
-                            <p class="box_text text-[18px] leading-[27px] text-[#666]">PDF
-                                Reader会员拥有移除广告特权，尊享纯净版客户端，办公全程无干扰</p>
-                        </div>
-                    </div>
-                    <div class="content_box flex justify-between items-center mb-65px">
-                        <div class="text_container w-420px pl-20px">
-                            <p class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]">免费无限转换格式</p>
-                            <p class="box_text text-[18px] leading-[27px] text-[#666]">支持PDF to
-                                Word、PPT、Excel、TXT、JPG/PNG无限次数转换，高效稳定</p>
-                        </div>
-                        <img src="http://cn-file.17pdf.com/website/pricings/member_fuction_pic_trans.png" alt=""
-                            class="big_img align-middle">
-                    </div>
-                </div>
-                <div class="button_subscribe mt-5px mb-80px text-center">
-                    <button type="button"
-                        class="bg_button w-330px h-56px rounded-[29px] text-[26px] leading-[56px] text-[#fff] font-medium">立即订阅</button>
-                </div>
+        <div class="content_line w-780px mx-auto">
+            <div class="content_box flex justify-between items-center mb-65px">
+            <img
+                src="http://cn-file.17pdf.com/website/pricings/v2/pic_members_removeads.png"
+                alt="AD"
+                class="big_img align-middle"
+            />
+            <div class="text_container w-420px pl-20px">
+                <p
+                class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]"
+                >
+                移除广告
+                </p>
+                <p class="box_text text-[18px] leading-[27px] text-[#666]">
+                PDF Reader会员拥有移除广告特权，尊享纯净版客户端，办公全程无干扰
+                </p>
             </div>
+            </div>
+            <div class="content_box flex justify-between items-center mb-65px">
+            <div class="text_container w-420px pl-20px">
+                <p
+                class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]"
+                >
+                免费无限转换格式
+                </p>
+                <p class="box_text text-[18px] leading-[27px] text-[#666]">
+                支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换，高效稳定
+                </p>
+            </div>
+            <img
+                src="http://cn-file.17pdf.com/website/pricings/member_fuction_pic_trans.png"
+                alt=""
+                class="big_img align-middle"
+            />
+            </div>
+        </div>
+        <div class="button_subscribe mt-5px mb-80px text-center">
+            <button
+            type="button"
+            class="bg_button w-330px h-56px rounded-[29px] text-[26px] leading-[56px] text-[#fff] font-medium"
+            @click="handlSubmit"
+            >
+            立即订阅
+            </button>
+        </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>
+  </div>
 </template>
 
-
+<script>
+export default {
+  data() {
+    return {
+        visiable: false
+    }
+  },
+  methods: {
+    handlSubmit() {
+      if (!this.$store.state.token) {
+        this.visiable = true
+        return
+      }
+      this.$store.commit('OPEN_LOGIN', true)
+      this.$store.commit('SET_INTERFACE', 'vip')
+    },
+    login() {
+      this.visiable = false
+      this.$store.commit('OPEN_LOGIN', true)
+      this.$store.commit('SET_INTERFACE', 'login')
+    },
+    register() {
+      this.visiable = false
+      this.$store.commit('OPEN_LOGIN', true)
+      this.$store.commit('SET_INTERFACE', 'register')
+    }
+  },
+}
+</script>
 
 <style>
 .pricing_banner {
-    background: url(http://cn-file.17pdf.com/website/member_v2/members_banner_bg.png) no-repeat;
-    background-size: 100% 100%;
+  background: url(http://cn-file.17pdf.com/website/member_v2/members_banner_bg.png)
+    no-repeat;
+  background-size: 100% 100%;
 }
+
 .bg_button {
-    background: linear-gradient(140.3deg, #c6995c, #e7caa3);
+  background: linear-gradient(140.3deg, #c6995c, #e7caa3);
 }
-</style>
+</style>

pages/resetPsw.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="family text-[14px] leading-[1.42857143] text-[#333] bg-[#fff]">
+    <div class="header h-80px">
+      <nav
+        class="nav-header-password col-md-12 leading-[80px] relative min-h-1px px-15px"
+      >
+        <div class="logo p-0">
+          <!-- 此处a需不需要改 -->
+          <a
+            href="https://17pdf.com"
+            class="text-[#666] text-[24px] no-underline bg-transparent"
+          >
+            <span class="logo-img m-0 py-20px pl-170px"></span>
+            <span>17PDF Reader</span>
+          </a>
+        </div>
+      </nav>
+    </div>
+    <div class="pc-container px-15px mx-auto sm:w-750px">
+      <section class="password-reset-form py-72px px-0">
+        <div class="px-15px mx-auto sm:w-750px">
+          <div class="row mx-[-15px]">
+            <div class="col-md-3 relative min-h-1px px-15px"></div>
+            <div
+              class="col-md-6 relative min-h-1px px-15px tiny:w-[70%] tiny:my-0 tiny:mx-auto"
+            >
+              <h2
+                class="text-center text-[#00bbd3] text-[30px] mb-32px text-center mt-20px leading-[1.1] font-medium"
+              >
+                设置新密码
+              </h2>
+            </div>
+          </div>
+          <div class="row form-wrapper mx-[-15px]">
+            <div class="col-md-3 relative min-h-1px px-15px"></div>
+            <div
+              class="col-md-6 relative min-h-1px px-15px tiny:w-[70%] tiny:my-0 tiny:mx-auto"
+            >
+              <h3
+                v-show="showError"
+                class="warning text-[24px] mt-20px mb-10px font-medium laeding-[1.1]"
+              >
+                密码重置失败，请确认两次密码一致！
+              </h3>
+         
+                <input type="hidden" name="_method" value="put" /><input
+                  type="hidden"
+                  name="authenticity_token"
+                  value="QBgQOkuMzY9y68DxLhdc/7SYTXa5vCi1AOwaPmWairZQEy8t4DnUteFfBA8cJWji/bkgBGwDpQrcSnHum6baJQ=="
+                />
+                <div class="form-group mb-34px">
+                  <label
+                    for="password"
+                    class="text-[#333] text-[14px] font-normal max-w-full mb-5px"
+                    >请输入新密码</label
+                  >
+                  <input
+                    id="password"
+                    v-model="newPassword"
+                    type="password"
+                    class="form-control h-40px w-full py-6px px-12px text-[14px] leading-[1.42857143] text-[#555] bg-[#fff] border border-solid border-gray-[#ccc] m-0"
+                  />
+                </div>
+
+                <div class="form-group mb-34px">
+                  <label
+                    for="password-confirmation"
+                    class="text-[#666] text-[14px] font-normal max-w-full mb-5px"
+                    >请输入新密码</label
+                  >
+                  <input
+                    id="password-confirmation"
+                    v-model="confirm_newPassword"
+                    type="password"
+                    class="form-control h-40px w-full py-6px px-12px text-[14px] leading-[1.42857143] text-[#555] bg-[#fff] border border-solid border-gray-[#ccc] m-0"
+                  />
+                </div>
+
+                <button
+                  class="btn btn-block bg-[#fdc656] text-[#fff] h-50px w-full py-6px px-12px mb-0 text-[14px] m-0 font-normal leading-[1.42857143] text-center whitespace-nowrap align-middle cursor-pointer border border-solid border-transparent"
+                  type="submit"
+                  @click="resetPassword"
+                >
+                  确认修改
+                </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <footer class="footer-password">
+      <div
+        class="container-password footer-container w-full bg-[#222] text-[#fff] text-[18px] text-center px-15px mx-auto"
+      >
+        <div class="row footer-row py-50px px-100px text-left mx-[-15px]">
+          <div
+            class="col-xs-2 w-[16.66666667%] float-left relative min-h-1px px-15px"
+          ></div>
+          <div class="col-xs-3 w-[25%] float-left relative min-h-1px px-15px">
+            <h4 class="title text-[18px] my-10px font-medium leading-[1.1]">
+              PDF
+            </h4>
+            <ul class="p-0 mt-0 mb-10px">
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  href="https://17pdf.com"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >产品</a
+                >
+              </li>
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  href="https://17pdf.com/sdk"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >SDK介绍</a
+                >
+              </li>
+            </ul>
+          </div>
+
+          <div class="col-xs-3 w-[25%] float-left relative min-h-1px px-15px">
+            <h4 class="title text-[18px] my-10px font-medium leading-[1.1]">
+              下载
+            </h4>
+            <ul class="p-0 mt-0 mb-10px">
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  target="_blank"
+                  href="https://www.kdanmobile.com/zh-cn/pdf-reader/"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >PDF Reader</a
+                >
+              </li>
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  target="_blank"
+                  href="https://markups.kdanmobile.com/"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >Markup</a
+                >
+              </li>
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  target="_blank"
+                  href="https://www.kdanmobile.com/zh-cn/pdf-reader/"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >Connoisser</a
+                >
+              </li>
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  target="_blank"
+                  href="https://chrome.google.com/webstore/detail/pdf-markup-my-web-markups/cbjngbfjehiofmihfpodinolkcokdojp"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >网页插件</a
+                >
+              </li>
+            </ul>
+          </div>
+
+          <div class="col-xs-3 w-[25%] float-left relative min-h-1px px-15px">
+            <h4 class="title text-[18px] my-10px font-medium leading-[1.1]">
+              联系我们
+            </h4>
+            <div class="icon mt-28px">
+              <a
+                class="call mt-20px mr-20px no-underline"
+                title="0731-84225961"
+              ></a>
+              <a
+                target="_blank"
+                href="http://weibo.com/kdanmobilesoftware"
+                class="weibo mt-20px mr-20px no-underline"
+              ></a>
+              <a
+                class="qq mt-20px mr-20px no-underline"
+                href="tencent://message/?uin=231368992&amp;Site"
+              ></a>
+            </div>
+          </div>
+        </div>
+        <p class="text-muted text-[14px] text-[#777] mb-10px mt-0 mx-0">
+          <a target="_blank" href="https://17pdf.com/terms" class="text-muted"
+            >服务条款</a
+          >
+          |
+          <a target="_blank" href="https://17pdf.com/privacy" class="text-muted"
+            >隐私政策</a
+          >
+          | ©2022 Kdanmobile All Rights Reserved.
+        </p>
+        <p class="text-muted text-[14px] text-[#777] mb-10px mt-0 mx-0">
+          凯钿公司 版权所有
+        </p>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import qs from 'qs'
+export default {
+  layout: 'custom',
+  data() {
+    return {
+      confirm_newPassword: '',
+      newPassword: '',
+      showError: false
+    }
+  },
+  methods: {
+    resetPassword() {
+      if(this.newPassword === '' || this.confirm_newPassword !== this.newPassword || this.newPassword.length < 6) {
+        this.showError = true
+        return
+      }
+      const data = qs.parse(location.href.split('?')[1])
+      const params = {
+        account: data.account,
+        verifyCode: data.verifyCode,
+        type: '0',
+        newPassword: this.newPassword
+      }
+      this.$axios.post('members/resetPassword', params).then((res) => {
+        if(res.code === 200) {
+          this.$router.push('/')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+/* 字体 */
+.family {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+/* 头部边框 */
+.nav-header-password {
+  border-bottom: 1px solid #dadada;
+}
+
+/* logo背景图 */
+.logo-img {
+  background: url(~/assets/images/password/logo_pdf_top_red-f4311f231ebc70c4ba5ac8e1e6af907a48ea69f1f159c501a277ade70dfd7022.png)
+    no-repeat 85% 50%;
+}
+
+/* input被focus */
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%),
+    0 0 8px rgb(102 175 233 / 60%);
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
+}
+
+.btn:hover {
+  background-color: #fab93d;
+}
+
+.container-password::before,
+.container-password::after,
+.row::before,
+.row::after {
+  content: ' ';
+  display: table;
+  clear: both;
+}
+
+/* windi css不能实现的 */
+.form-control {
+  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+  -webkit-transition: border-color ease-in-out 0.15s,
+    -webkit-box-shadow ease-in-out 0.15s;
+  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+
+/* 确认按钮 */
+.btn {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* 底部图标 */
+.call:before {
+  content: url(~/assets/images/password/ic_foot_phone_normal-6c4b69f54ec3fd9ba9c181a1a776c0ea4695c2c4f26c134b88f41796d14c72af.png);
+}
+
+.weibo:before {
+  content: url(~/assets/images/password/ic_foot_weibo_normal-c0b566a8cc73aa0577487c8f179327856e74b0572a787211917c3a2e671f8628.png);
+}
+
+.qq:before {
+  content: url(~/assets/images/password/ic_foot_qq_normal-e67510e549266f75e77757d308306b01185370fffc5a105438d91601b6a486ec.png);
+}
+</style>

pages/sdk.vue

@@ -1,5 +1,5 @@
 <template>
-  <Fragment>
+  <div>
     <div class="content">
       <div class="section" style="height: calc(100vh - 80px)">
         <div class="banner">
@@ -191,25 +191,25 @@
     <ul v-show="active !== 0" class="index">
       <li v-for="idx in 6" :key="idx" :class="{active: active===idx}" @click="handlerToSection(idx)"></li>
     </ul>
-
-    <el-dialog 
-      :visible.sync="modalViable"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      width="480px"
-      @close="resetStatus"
-    >
-      <sdk-form ref="sdkForm"></sdk-form>
-    </el-dialog>
-  </Fragment>
+    <no-ssr>
+      <el-dialog 
+        :visible.sync="modalViable"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        width="480px"
+        @close="resetStatus"
+      >
+        <sdk-form ref="sdkForm"></sdk-form>
+      </el-dialog>
+    </no-ssr>
+  </div>
 </template>
 
 <script>
 import { throttle } from 'throttle-debounce';
-import { Fragment } from 'vue-fragment'
 import sdkForm from '~/components/SdkForm.vue'
 export default {
-  components: {Fragment, sdkForm},
+  components: { sdkForm},
   data() {
     return {
       modalViable: false,
@@ -255,8 +255,9 @@ export default {
     // noLeadind<T> 代表第一次不触发函数执行，解决了鼠标滚轮事件在防抖处理后还触发两次绑定事件的问题
   },
   beforeDestroy() {
-    window.beforeDestroy('resize',this.getLastSectionH)
-    window.beforeDestroy('scroll',this.handlerScroll)
+     window.removeEventListener('resize',this.getLastSectionH)
+     window.removeEventListener('scroll',this.handlerScroll)
+     window.onmousewheel=document.onmousewheel=''
   },
   methods: {
     // 获取最后一个selection的高度

plugins/axios.js

@@ -3,28 +3,39 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-19 13:58:11
- * @LastEditTime: 2022-10-26 15:50:35
+ * @LastEditTime: 2022-11-03 15:36:24
  */
 import { Message } from 'element-ui';
 
-export default function({store, app:{ $axios, rediret}} ) {
+export default function({store, app:{ $axios }, redirect} ) {
   $axios.onRequest(config => {
     $axios.setToken(store.state.token, 'Bearer') 
   })
 
   $axios.onError(error => {
     const code = parseInt(error.response && error.response.status)
+    if(code === 401) {
+      redirect('/')
+      Message.error('登录过期，请重新登录')
+      store.commit('OPEN_LOGIN',false)
+      store.commit('DEL_TOKEN','')
+      localStorage.removeItem('token')
+      localStorage.removeItem('userInfo')
+      return Promise.resolve(false)
+    }
     if (code !== 200) {
-      Message.error(error.response.data.msg)
-      // redirect('/400')
+      Message.error(error.response?.data?.msg)
     }
   })
 
   $axios.onResponse((res) => {
-    if (res.data.code !== 200) {
+    if(res?.config?.url === '/auth/getImageCode') {
+      return res
+    }else if(res.data && res?.data?.code !== 200) {
       Message.error(res.data.msg)
+    }else {
+      return res.data
     }
-    return res.data
   })
 
 }

plugins/vueqr.js

@@ -0,0 +1,11 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-01 16:44:17
+ * @LastEditTime: 2022-11-01 16:50:15
+ */
+import Vue from 'vue'
+import vueQr from 'vue-qr'
+
+Vue.use(vueQr)

store/index.js

@@ -3,15 +3,17 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-25 17:19:19
- * @LastEditTime: 2022-10-26 17:16:34
+ * @LastEditTime: 2022-11-02 16:03:41
  */
 export const state = () => ({
   userInfo: {
     memberInfo: {},
     pricingList: [],
-    setPricingList: []
+    setPricingList: [],
   },
   token: '',
+  globalLoginVisiable: false,
+  globalInterfaceType: false
 })
 
 export const mutations = {
@@ -23,6 +25,12 @@ export const mutations = {
   },
   DEL_TOKEN(state,data) {
     state.token = data
+  },
+  OPEN_LOGIN(state, data) {
+    state.globalLoginVisiable = data
+  },
+  SET_INTERFACE(state, data) {
+    state.globalInterfaceType = data
   }
 }
 

windi.config.js

@@ -1,9 +1,21 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-19 17:25:48
+ * @LastEditTime: 2022-11-03 13:41:21
+ */
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
   theme: {
     screens: {
       'footer': '1550px',
+      '2xl': '1550px',
+      'xl': '1280px',
+      'lg': '1120px',
+      'tiny': '960px',
+      'sm': '768px'
     },
     extend: {
       fontFamily: {