17pdf_front_end/layouts/components/navbar.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-17 15:19:11
 * @LastEditTime: 2022-10-26 16:24:26
-->
<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 class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-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 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>
                  </div>
                  <el-button v-if="userInfo?.memberInfo.flag === 1" class="btn-renew">
                    续费
                  </el-button>
                  <el-button v-else>
                    订阅
                  </el-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>
                </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="https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" />
          </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.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>
  </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'
export default {
  components: {
    login,
    register,
    userManage
  },
  data() {
    return {
      dialogVisiable: false,
      interfaceType: 'login',
    }
  },
  computed: mapState([
    'token',
    'userInfo'
  ]),
  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.interfaceType = type
    },
    handlerCloseDialog() {
      this.$refs[`${this.interfaceType}Ref`].resetInterfaceStatus()
    },
    // 展示注册界面
    showChange(type) {
      this.interfaceType = type
    },
    handlerLogout() {
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      this.$store.commit('DEL_TOKEN', '')
      this.$router.push('/')
    },
    handlerClose() {
      this.dialogVisiable = false
    }
  }
}

</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>