|
|
@@ -0,0 +1,211 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Author: 欧阳承珺
|
|
|
+ * @LastEditors: 欧阳承珺
|
|
|
+ * @Date: 2022-10-17 15:19:11
|
|
|
+ * @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">
|
|
|
+ <div class="flex items-center ml-16px">
|
|
|
+ <a href="/" title="17PDF Reader阅读器支持文件扫描和文件格式转换">
|
|
|
+ <img src="http://cn-file.17pdf.com/website/index/logo_pdf_top.png"></img>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-[#666] flex">
|
|
|
+ <NuxtLink to="/converter" active-class="menu-active" class="inline-block mx-0 mt-28px md-35px hover:text-[#E93636] hover:opacity-70">格式转换</NuxtLink>
|
|
|
+ <NuxtLink to="/pricing" active-class="menu-active" class="inline-block mt-28px mr-0 md-0 ml-35px hover:text-[#E93636] hover:opacity-70">订阅服务</NuxtLink>
|
|
|
+ <NuxtLink to="/sdk" active-class="menu-active" class="inline-block mt-28px mr-0 md-0 ml-35px hover:text-[#E93636] hover:opacity-70">SDK介绍</NuxtLink>
|
|
|
+ <NuxtLink to="/pdf-reader/download" active-class="menu-active" class="inline-block mt-28px mr-100px md-0 ml-35px hover:text-[#E93636] hover:opacity-70">下载</NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div v-if="!!token">
|
|
|
+ <no-ssr>
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ trigger="hover"
|
|
|
+ :close-delay="800"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <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 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>
|
|
|
+ <p class="text-[#999]">{{userInfo?.memberInfo?.email || userInfo?.memberInfo?.phone}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex py-14px mt-20px justify-between">
|
|
|
+ <div>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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')">
|
|
|
+ 账号管理
|
|
|
+ </div>
|
|
|
+ <div class="w-full h-64px leading-64px text-[#666] cursor-pointer hover:text-bg-$btn-color-primary" @click="handlerLogout">
|
|
|
+ 退出
|
|
|
+ </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="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>
|
|
|
+ <div v-if="!token" class="flex items-center">
|
|
|
+ <button class="border-1 rounded-4px ml-9px text-$btn-color-primary border-$btn-color-primary border-solid w-70px h-42px leading-22px cursor-pointer hover:opacity-70" @click="handlerOpenLogin('login')">登录</button>
|
|
|
+ <button class="bg-$btn-color-primary rounded-4px ml-25px text-[#fff] w-70px h-42px leading-22px cursor-pointer hover:bg-[#f34545]" @click="handlerOpenLogin('register')">注册</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <no-ssr>
|
|
|
+ <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>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+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,
|
|
|
+ BuyVip,
|
|
|
+ BuyTicket
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisiable: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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')))
|
|
|
+ this.$store.commit('SET_TOKEN',localStorage.getItem('token'))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlerOpenLogin(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.$store.commit('SET_INTERFACE', type)
|
|
|
+ },
|
|
|
+ handlerLogout() {
|
|
|
+ localStorage.removeItem('token')
|
|
|
+ localStorage.removeItem('userInfo')
|
|
|
+ this.$store.commit('DEL_TOKEN', '')
|
|
|
+ this.$router.push('/')
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.menu-active {
|
|
|
+ color: #E93636;
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+.login-dialog {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0 5px 15px rgb(0 0 0 / 50%)
|
|
|
+}
|
|
|
+.manage-dialog {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: unset !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn-renew {
|
|
|
+ font-size: 14px;
|
|
|
+ color: white;
|
|
|
+ height: 36px;
|
|
|
+ width: 82px;
|
|
|
+ background: linear-gradient(128deg, #cca166, #edd3b0);
|
|
|
+ box-shadow: 0px 2px 6px 0px rgb(219 184 137 / 57%);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.btn-recharge {
|
|
|
+ width: 82px;
|
|
|
+ height: 36px;
|
|
|
+ background-color: #FF4F4F;
|
|
|
+ box-shadow: 0px 2px 6px rgb(255 79 79 / 20%);
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+</style>
|
Darkhorsedamon