世医页面

YM

2024-04-19 dbe7eb53558f3f7ac95beeb705518d7156b062cf

 src/components/headNav/headNav.vue

@@ -1,49 +1,113 @@
<template>
   <view class="headNav">
      <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
         <view class="santiaogang" style="width: .34rem;height: .34rem;margin-right: 3rem;"
            @click="menuNav = !menuNav"><img style="width: 100%;height: 100%;"
               src="@/static/中医人物知识库0201/三条杠.png" alt="" /></view>
         <view class="flex" style="letter-spacing: 5rpx;">
      <view
        class="santiaogang"
        style="width: 0.34rem; height: 0.34rem; margin-right: 3rem;cursor: pointer;"
        @click="menuNav = !menuNav"
        ><img
          style="width: 100%; height: 100%"
          src="@/static/中医人物知识库0201/三条杠.png"
          alt=""
      /></view>
      <view class="flex" style="letter-spacing: 5rpx">
            <view class="logo"></view>
            <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
        <view
          class=""
          style="
            margin-left: 0.19rem;
            font-size: 0.24rem;
            font-family: cursive;
            font-weight: 900;
          "
        >
               {{text}}
            </view>
         </view>
         <view class="NavTopr flex">
            <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}"
               style="border-radius: .5rem; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;">
        <view
          class="flex searchCss"
          :style="{ backgroundColor: isExpanded == true ? '#fff' : '' }"
          style="
            border-radius: 0.5rem;
            width: 2.33rem;
            margin-right: 0.3rem;
            justify-content: flex-end;
          "
        >
               <!-- overflow: hidden;  -->
               <input :style="{'display': isExpanded == true ? 'block' : 'none'}" type="text"
                  style="margin-left: .02rem; flex: 1; background-color: #fff; font-size: .13rem;"
                  @blur="InputBlur" class="search-input" v-model="searchInput" placeholder="请输入搜索内容" />
               <view class="search-logo" @click="toggleSearch"
                  :style="{'backgroundColor':searchBg==true?'#244A7B':'#DA7A2B'}"
                  style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
          <input
            :style="{ display: isExpanded == true ? 'block' : 'none' }"
            type="text"
            style="
              margin-left: 0.02rem;
              flex: 1;
              background-color: #fff;
              font-size: 0.13rem;
            "
            @blur="InputBlur"
            class="search-input"
            v-model="searchInput"
            placeholder="请输入搜索内容"
          />
          <view
            class="search-logo"
            @click="toggleSearch"
            :style="{
              backgroundColor: searchBg == true ? '#244A7B' : '#DA7A2B'
            }"
            style="
              background-color: #000;
              border-radius: 50%;
              margin-top: -4rpx;
            "
          ></view>
            </view>
            <el-dropdown trigger="click" @command="handleCommand">
               <!-- <view @click="iconClick(2)" class="s2 ss1 "></view> -->
               <img class="cursor" @click="changePassword(1)" src="@/static/image/profile.svg" alt="" />
          <img
            class="cursor"
            @click="changePassword(1)"
            src="@/static/image/profile.svg"
            alt=""
          />
               <el-dropdown-menu v-if="isCommand" slot="dropdown">
                  <el-dropdown-item command="1">修改密码</el-dropdown-item>
                  <el-dropdown-item command="2" >退出登录</el-dropdown-item>
               </el-dropdown-menu>
            </el-dropdown>
            <img class="cursor" @click="changePassword(2)" src="@/static/image/quote.svg" style="margin-right: 0;"
               alt="" />
        <img
          class="cursor"
          @click="changePassword(2)"
          src="@/static/image/quote.svg"
          style="margin-right: 0"
          alt=""
        />
         </view>
      </view>
      <view class="mImage" :style="{backgroundImage: 'url('+ bg1 + ')'}"></view>
      <el-dialog :visible.sync="menuNav" class="leftListBg" :modal="false" title="对话框标题">
    <view
      class="mImage"
      :style="{ backgroundImage: 'url(' + bg1 + ')' }"
    ></view>
    <el-dialog
      :visible.sync="menuNav"
      class="leftListBg"
      :modal="false"
      title="对话框标题"
    >
         <!-- 背景 -->
         <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" />
         <view class="" style="position: relative;z-index: 999;">
      <view class="" style="position: relative; z-index: 999">
            <view class="flex flex-center LeftLogo">
               <!-- <img src="@/static/image/logo.png" ></img> -->
               <view class="img"></view>
            </view>
            <el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo"
               @select="handleSelect">
        <el-menu
          :default-active="idIndex"
          active-text-color="#ffffff"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
               <el-menu-item index="0">
                  <span slot="title">首页</span>
               </el-menu-item>
@@ -74,45 +138,45 @@
</template>

<script>
   import {getlogout} from '@/api/index.js'
import { getlogout } from "@/api/index.js";
   export default {
      name: "headNav",
      props: {
         text: {
            type: String,
            default () {
               return '标题'
        return "标题";
            }
         },
         searchBg: {
            type: Boolean,
            default () {
               return true
        return true;
            }
         },
         bg: {
            type: String,
            default () {
               return '/static/image/topBg.png'
        return "/static/image/topBg.png";
            }
         },
         bg1: {
            type: String,
            default () {
               return '/static/image/line.png'
        return "/static/image/line.png";
            }
         },
         idIndex: {
            type: String,
            default () {
               return '1'
        return "1";
            }
         }
      },
      data() {
         return {
            isExpanded: false, // 控制搜索框是否展开  
            searchInput: '', // 搜索框输入的内容  
      searchInput: "", // 搜索框输入的内容
            menuNav: false,
            dialogVisible: false,
            isCommand: true
@@ -124,126 +188,124 @@
            if (index == 1) {
               // console.log('sdfdsf');
               // 检查 localStorage 中是否存在 token
               if (localStorage.getItem('access_token')) {
        if (localStorage.getItem("access_token")) {
                  // token 存在
                  console.log('access_token');
                  this.isCommand = true
          console.log("access_token");
          this.isCommand = true;
               } else {
                  // token 不存在
                  // console.log('Token does not exist.');
                  this.isCommand = false
          this.isCommand = false;
                  // uni.navigateTo({
                  //    url: '/pages/Login/Login'
                  // })
                  console.log('不存在');
          console.log("不存在");
                  uni.showModal({
                     // 询问用户是否退出登录
                     title: '请重新登录',
                     content: '您确定要重新登录吗?',
            title: "请重新登录",
            content: "您确定要重新登录吗?",
                     success: async (res) => {
                        console.log(res, 'reresresrer');
              console.log(res, "reresresrer");
                        if (res.confirm) {
                           setTimeout(() => {
                              uni.reLaunch({
                                 url: '/pages/Login/Login',
                    url: "/pages/Login/Login"
                              });
                           }, 1500);
									
                        } else if (res.cancel) {
                           // console.log('用户点击取消');
                           uni.showToast({
                              title: '用户点击取消',
                              icon: 'none',
                  title: "用户点击取消",
                  icon: "none"
                           });
                        }
                     },
            }
                  });
               }
               // uni.navigateTo({
               //    url: '/pages/changePassword/changePassword'
               // })
            } else if (index == 2) {
               console.log('帮助');
        console.log("帮助");
            }
         },
         // 修改获取退出按钮
         handleCommand(int) {
            if (int == 1) {
               console.log('修改密码');
        console.log("修改密码");
               uni.navigateTo({
                  url: '/pages/changePassword/changePassword'
               })
          url: "/pages/changePassword/changePassword"
        });
            } else if (int == 2) {
               // console.log('退出登录');
               uni.showModal({
                  // 询问用户是否退出登录
                  title: '退出登录',
                  content: '您确定要退出登录吗?',
          title: "退出登录",
          content: "您确定要退出登录吗?",
                  success: async (res) => {
                     console.log(res, 'reresresrer');
            console.log(res, "reresresrer");

                     if (res.confirm) {
                        // 退出接口
                        await getlogout().then(res => {
              await getlogout().then((res) => {
                           //确定退出拿到token并清除token
                           let TOKEN = uni.getStorageSync('access_token');
                let TOKEN = uni.getStorageSync("access_token");
                           uni.clearStorageSync();
                           //退出成功！并跳转到其他页面
                           uni.showToast({
                              title: '退出成功',
                              icon: 'none',
                  title: "退出成功",
                  icon: "none"
                           });
                        })
              });
                        setTimeout(() => {
                           uni.reLaunch({
                              url: '/pages/Login/Login',
                  url: "/pages/Login/Login"
                           });
                        }, 1500);
                     } else if (res.cancel) {
                        // console.log('用户点击取消');
                        uni.showToast({
                           title: '用户点击取消',
                           icon: 'none',
                title: "用户点击取消",
                icon: "none"
                        });
                     }
                  },
          }
               });
            }
         },
         aaa() {
            console.log('ss');
      console.log("ss");
         },
         handleSelect(index) {
            console.log(index);
            if (index === '0') {
      if (index === "0") {
               uni.navigateTo({
                  url: '/pages/index/index?id=' + 0
          url: "/pages/index/index?id=" + 0
               });
            } else if (index === '1') {
      } else if (index === "1") {
               uni.navigateTo({
                  url:'/pages/characterRelation/characterRelation?id=' + 1
          url: "/pages/characterRelation/characterRelation?id=" + 1
               });
            } else if (index === '2') {
      } else if (index === "2") {
               uni.navigateTo({
                  url: '/pages/inherit/index?id=' + 2
          url: "/pages/inherit/index?id=" + 2
               });
            } else if (index === '3') {
      } else if (index === "3") {
               uni.navigateTo({
                  url: '/pages/dataDisplay/dataDisplay?id=' + 3
          url: "/pages/dataDisplay/dataDisplay?id=" + 3
               });
            } else if (index === '4') {
      } else if (index === "4") {
               uni.navigateTo({
                  url: '/pages/territory/territory?id=' + 4
          url: "/pages/territory/territory?id=" + 4
               });
            } else if (index === '5') {
      } else if (index === "5") {
               uni.navigateTo({
                  url: '/pages/TcmSystem/TcmSystem?id=' + 5
          url: "/pages/TcmSystem/TcmSystem?id=" + 5
               });
            }
         },
         // 搜索框的的移出
         InputBlur() {

            // this.isExpanded = !this.isExpanded;
            // this.searchInput = '';
         },
@@ -252,28 +314,28 @@
            // console.log('撒旦范德萨发生的',this.searchInput);
            this.isExpanded = !this.isExpanded;
            this.$nextTick(() => {
               if (this.searchInput.trim() !== '') {
                  console.log('搜索', this.searchInput);
        if (this.searchInput.trim() !== "") {
          console.log("搜索", this.searchInput);
               } else {
                  console.log('不搜索');
          console.log("不搜索");
               }

               this.searchInput = '';
        this.searchInput = "";
               console.log(this.isExpanded);
            })
      });
         }
      }
   }
};
</script>

<style scoped>
   .LeftLogo {
      width: 100%;
      margin: .52rem 0 .5rem;
  margin: 0.52rem 0 0.5rem;

      .img {
         width: .52rem;
         height: .52rem;
    width: 0.52rem;
    height: 0.52rem;
         background-image: url(@/static/image/logo3.png);
         background-repeat: no-repeat;
         background-size: 100% 100%;
@@ -282,11 +344,9 @@
   }

   @media screen and (min-width:2560px)and (max-width:3840px) {

      ::v-deep .el-menu .is-active {
         background-color: #244A7B !important;
         border-radius: .5rem;

    background-color: #244a7b !important;
    border-radius: 0.5rem;
      }

      .LeftLogo .img {
@@ -295,11 +355,9 @@
   }

   @media screen and (min-width:1366px) and (max-width:1920px) {

      ::v-deep .el-menu .is-active {
         background-color: #244A7B !important;
         border-radius: .5rem;

    background-color: #244a7b !important;
    border-radius: 0.5rem;
      }

      .LeftLogo .img {
@@ -308,7 +366,7 @@
   }

   ::v-deep .uni-input-placeholder {
      padding-left: .05rem;
  padding-left: 0.05rem;
   }

   .headNav {
@@ -322,18 +380,18 @@
      /* background: url(@/static/image/topBg.png); */

      background-size: 100% 100%;
      padding: .16rem .24rem;
  padding: 0.16rem 0.24rem;
      color: #fff !important;

      img {
         width: .1rem;
         height: .1rem;
    width: 0.1rem;
    height: 0.1rem;
         vertical-align: middle;
      }

      .logo {
         width: .32rem;
         height: .32rem;
    width: 0.32rem;
    height: 0.32rem;
         background: url(@/static/image/logo.png) 0 0 no-repeat;
         background-size: 100% 100%;
      }
@@ -342,9 +400,9 @@
         vertical-align: top;

         img {
            width: .34rem;
            height: .34rem;
            margin-right: .30rem;
      width: 0.34rem;
      height: 0.34rem;
      margin-right: 0.3rem;
            vertical-align: middle;
         }
      }
@@ -352,17 +410,13 @@

   .mImage {
      width: 100%;
      height: .2rem;
  height: 0.2rem;
      /* background-image: url(@/static/image/line.png); */
      background-size: cover;
      /* 背景图片覆盖整个元素 */
      background-position: center;
      background-color: #fff;
   }





   .search-container {
      width: 100%;
@@ -409,9 +463,9 @@
   }

   .search-logo {
      width: .34rem;
  width: 0.34rem;
      /* logo图标的宽度 */
      height: .34rem;
  height: 0.34rem;
      /* logo图标的高度 */
      margin-left: 10rpx;
      /* 与输入框之间的间距 */
@@ -439,23 +493,23 @@
   }

   ::v-deep .el-menu .is-active {
      background-color: #244A7B !important;
      border-radius: .5rem;
  background-color: #244a7b !important;
  border-radius: 0.5rem;

      /* padding: 0 .14rem !important; */
   }

   .el-menu-item {
      height: .34rem;
      line-height: .3rem;
      font-size: .16rem;
  height: 0.34rem;
  line-height: 0.3rem;
  font-size: 0.16rem;
      font-weight: 500;
      margin: .13rem .14rem !important;
  margin: 0.13rem 0.14rem !important;
      /*    display: flex;
      justify-content: center;
      align-items: center; */
      text-align: left;
      padding-left: .4rem !important;
  padding-left: 0.4rem !important;
   }

   ::v-deep .el-dialog__body {