17pdf_front_end/layouts/components/NavBar.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-17 15:19:11
 * @LastEditTime: 2022-11-16 17:06:45
-->
<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">
      <nuxt-link to="/" title="17PDF Reader阅读器支持文件扫描和文件格式转换">
        <img src="http://cn-file.17pdf.com/website/index/logo_pdf_top.png"/>
      </nuxt-link>
      <!-- <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">
        <client-only>
          <el-popover
            ref="popover"
            v-model="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?.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?.name}}</p>
                    <p class="text-[#999]">{{userInfo?.email || userInfo?.phone}}</p>
                  </div>
                </div>
                <div class="flex py-14px mt-20px justify-between">
                  <div>
                    <p v-if="userInfo?.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?.subscriberType === 1" class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.day}}</span>天到期</p>
                    <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
                  </div>
                  <button class="btn-renew" @click="$router.push('/pricing')">
                    {{userInfo?.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?.points}}</span><span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">/{{userInfo?.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 slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" :src="userInfo?.subscriberType === 1 ? 'http://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>
        </client-only>
      </div>
      <div v-if="!token" class="flex items-center">
        <button class="border-1 rounded-4px ml-9px text-$btn-color-primary border-$btn-color-primary border-solid w-70px h-42px leading-22px cursor-pointer hover:opacity-70" @click="handlerOpenLogin('login')">登录</button>
        <button class="bg-$btn-color-primary rounded-4px ml-25px text-[#fff] w-70px h-42px leading-22px cursor-pointer hover:bg-[#f34545]" @click="handlerOpenLogin('register')">注册</button>
      </div>
    </div>
    <client-only>
      <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" @loginSucess="handleLoginSucess"></login>
        <register v-show="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog" @loginSucess="handleLoginSucess"></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>
    </client-only>
  </div>
</template>


<script>
import { mapState } from 'vuex'
import { removeToken } from '~/utils/cookie';
import login from '~/components/LoginBar.vue'
import register from '~/components/RegisterBar.vue'
import userManage from '~/components/UserManage.vue'
import BuyVip from '~/components/BuyVip.vue'
import BuyTicket from '~/components/BuyTicket.vue'
export default {
  components: {
    login,
    register,
    userManage,
    BuyVip,
    BuyTicket
  },
  data() {
    return {
      dialogVisiable: false,
      popover: 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'
      }
    }
  },
  methods: {
    handleLoginSucess() {
      this.$nextTick(()=> {
        this.popover = true
      })
      setTimeout(() => {
        this.popover = false
      }, 2000);
    },
    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')
      localStorage.removeItem('file')
      this.$store.commit('setUser', {})
      removeToken('Token')
      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>