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"/> -->
        <img src="~/assets/images/common/bars.svg"/>
      </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 mr-4px">
        <div class="showConverter relative">
          <NuxtLink to="/converter" active-class="menu-active" class="inline-block mx-0 mt-28px md-35px hover:text-[#E93636] hover:opacity-70"
          title="行业领先的PDF转换器，支持将PDF与其他格式文件的互转，在线文件格式转换">
            格式转换
          </NuxtLink>
          <div class="more_menu clear">
	          <img src="http://cn-file.17pdf.com/website/converter/jiao.png" class="horn">
            <div class="package_type">
		          <h3>会员专享</h3>
  	          <ul>
  		          <li>
  			          <a href=' /converter?type=docx'>
  				          <img src="@/assets/images/converter/ic_pdf_word.png">
  				          <span>PDF to Word</span>
  			          </a>
  		          </li>
  		          <li>
           			  <a href=' /converter?type=pptx'>
           				  <img src="http://cn-file.17pdf.com/website/converter/ic_pdf_ppt.png">
           				  <span>PDF to PowerPoint</span>
           			  </a>
             		</li>
            		<li>
           	  		<a href=' /converter?type=xlsx'>
           	  			<img src="http://cn-file.17pdf.com/website/converter/ic_pdf_execl.png">
           	  			<span>PDF to Excel</span>
           	  		</a>
           	  	</li>
           		  <li>
           			  <a href=' /converter?type=txt'>
           		  		<img src="@/assets/images/converter/ic_pdf_txt.png">
           			  	<span>PDF to TXT</span>
           			  </a>
           		  </li>
           		  <li>
           		  	<a href=' /converter?type=jpg'>
           		  		<img src="@/assets/images/converter/imagePDFtoJPG.png">
           		  		<span>PDF to JPG</span>
           		  	</a>
           		  </li>
           		  <li>
           		  	<a href=' /converter?type=png'>
           		  		<img src="@/assets/images/converter/pngPDFtoPNG.png">
           		  		<span>PDF to PNG</span>
           		  	</a>
           		  </li>
           	  </ul>
            </div>
          </div>
        </div>
        <NuxtLink to="/pricing" active-class="menu-active" class="inline-block mt-28px mr-0 md-0 ml-35px hover:text-[#E93636] hover:opacity-70"
        title="订阅基础套餐和商务套餐，畅享无缝衔接无纸化办公">
          订阅服务
        </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"
        title="为企业用户跨平台集成PDF阅读器核心功能，实现文本编辑、表单填写、OCR等进阶功能。">
          SDK介绍
        </NuxtLink>
        <NuxtLink to="/pdf-reader/download" active-class="menu-active" class="inline-block mt-28px mr-0px md-0 ml-35px hover:text-[#E93636] hover:opacity-70">下载</NuxtLink>
        <NuxtLink to="/pdfreaderpro" active-class="menu-active" class="inline-block mt-28px mr-35px md-0 ml-35px hover:text-[#E93636] hover:opacity-70 relative">PDF Reader Pro <span class="icon">PC端</span></NuxtLink>
      </div>
      <div v-if="token">
        <client-only>
          <el-popover
            ref="popover"
            v-model="popover"
            placement="bottom-end"
            trigger="hover"
            :visible-arrow="false"
            :close-delay="800"
            :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
          >
            <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 h-64px rounded-1/2 object-cover"  :src="userInfo.avatarUrl" >
                    <img v-else class="w-64px h-64px rounded-1/2 object-cover"  :src="userInfo.avatarUrl" >
                  </a>
                  <a href="/members/me/expenses">
                    <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>
                  </a>
                </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>
                  <a href="/pricing">
                    <button class="btn-renew">
                      {{userInfo?.subscriberType === 1 ? '续费' : '订阅会员'}}
                    </button>
                  </a>
                </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 class="text-[14px]">张</span></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>
            <a slot="reference" href="/members/me/expenses">
              <img  class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer object-cover" :src="userInfo.avatarUrl" />
            </a>
          </el-popover>
        </client-only>
      </div>
      <div v-else class="flex items-center ml-30px">
        <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="true"
        :close-on-press-escape="false"
        :width="dialogWidth"
        append-to-body
        center
        :custom-class="interface === 'manage' ? 'manage-dialog': 'login-dialog'"
        @close="handlerCloseDialog"
      >
        <login v-if="interface === 'login'" ref="loginRef"  @register="showChange" @close="handlerCloseDialog" @loginSucess="handleLoginSucess"></login>
        <register v-if="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog" @loginSucess="handleLoginSucess"></register>
        <UserManage v-if="interface === 'manage'" ref="manageRef" @close="handlerCloseDialog" :dialogVisiable="dialogVisiable"></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
        this.$refs.popover.updatePopper()
      })
      setTimeout(() => {
        this.popover = false
      }, 2000);
    },
    handlerOpenLogin(type) {
      this.dialogVisiable = true
      this.$store.commit('OPEN_LOGIN', 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" scoped>
  .icon {
    position: absolute;
    top: -10px;
    right: -41px;
    background: #FF3030;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    color: #FFFFFF;
    &::after {
      position: absolute;
      left: 0;
      bottom: -4px;
      content: '';
      display: block;
      width: 0px;
      height: 0px;
      border: solid 5px transparent;
      border-right: none;
      border-left-color: #FF3030;
      border-top-color: #FF3030;
      border-radius: 1px;
    }
  }
</style>
<style lang="scss">
.menu-active {
  color: #E93636;
}
.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;
}
.clear {
  zoom: 1;
}
.showConverter{
  .more_menu {
    width: 800px;
    padding: 30px 40px;
    position: absolute;
    top: 70px;
    left: -132px;
    background: #fff;
    box-shadow: 0px 2px 12px rgb(0 0 0 / 12%);
    border-radius: 3px;
    z-index: 100;
    display: none;
    .horn {
      position: absolute;
      left: 135px;
      top: -16px;
    }
    .package_type{
      h3 {
        margin: 0 0 10px;
        color: #333333;
        font-size: 14px;
        font-weight: normal;
        line-height: 16px;
      }
      ul {
        display: flex;
        margin: 0;
        padding: 0;
  
        li {
          list-style: none;
          text-align: center;
          width: 130px;
          height: 120px;
  
          a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
  
            img {
              margin-top: 0;
              margin-left: 15px;
              vertical-align: middle;
            }
            span {
              color: #333333;
              font-size: 12px;
              margin-top: 5px;
              display: block;
              white-space: nowrap;
              transition: all .5s;
            }
            &:hover{
              img {
                box-shadow: 0px 0px 6px rgb(255 79 79 / 25%);
              }
              span {
                color: #ff4f4f;
              }
            }
          }
        }
      }
    } 
  }
  &:hover{
    .more_menu{
      display: block;
    }
  }
}
</style>