1

YM

2024-06-05 c4b8209d92daa8c6e8ec20bdd56fecf4a95d0990

 src/components/headNav/headNav.vue

@@ -1,481 +1,503 @@
<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="logo"></view>
            <view class="" style="margin-left: .19rem;font-size: .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;">
               <!-- 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>
            </view>
            <!-- <img style="border-radius: 50%;display: inline-block;" src="../../static/image/search.png" alt="" /> -->
            <!-- <img class="cursor" @click="changePassword(1)" src="@/static/image/profile.svg" alt="" /> -->
            <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="" />
               <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="" />
         </view>
      </view>
      <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="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-item index="0">
                  <span slot="title">首页</span>
               </el-menu-item>
               <el-menu-item index="1">
                  <span slot="title">中医人物数据库</span>
               </el-menu-item>
               <el-menu-item index="2">
                  <span slot="title">世医医家数据库</span>
               </el-menu-item>
               <el-menu-item index="3">
                  <span slot="title">中医医学流派</span>
               </el-menu-item>
               <el-menu-item index="4">
                  <span slot="title">中医地域图谱</span>
               </el-menu-item>
               <el-menu-item index="5">
                  <span slot="title">中医医事制度</span>
               </el-menu-item>
            </el-menu>
         </view>
      </el-dialog>
      <!-- <view class="" style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">水水水水</view> -->
      <!-- <el-card v-if="menuNav"
  <view class="headNav">
    <view class="NavTop flex" :style="{ backgroundImage: 'url(' + bg + ')' }">
      <view
        class="santiaogang"
        style="
          width: 0.34rem;
          height: 0.34rem;
          margin-right: 3rem;
          cursor: pointer;
        "
        title="导航菜单"
        @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
          style="margin-left: 0.19rem; font-size: 0.24rem; font-weight: 900"
        >
          {{ text }}
        </view>
      </view>
      <view class="NavTopr flex">
        <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;
          "
        >
          <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"
            @confirm="toggleSearch"
            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=""
          />
          <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=""
        />
      </view>
    </view>
    <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 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-item index="0">
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="1">
            <span slot="title">中医人物数据库</span>
          </el-menu-item>
          <el-menu-item index="2" class="oActive">
            <span slot="title">世医医家数据库</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">中医学术流派</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">中医地域图谱</span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title">中医医事制度</span>
          </el-menu-item>
        </el-menu>
      </view>
    </el-dialog>
    <!-- <view  style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">水水水水</view> -->
    <!-- <el-card v-if="menuNav"
         style="position: fixed;left: 0;top: 0; z-index: 999999999; width: 240px;height: 100vh;">
         
      </el-card> -->
   </view>
  </view>
</template>

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

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

            // this.isExpanded = !this.isExpanded;
            // this.searchInput = '';
         },
         // 切换搜索框的展开和收起状态  
         toggleSearch() {
            // console.log('撒旦范德萨发生的',this.searchInput);
            this.isExpanded = !this.isExpanded;
            this.$nextTick(() => {
               if (this.searchInput.trim() !== '') {
                  console.log('搜索', this.searchInput);
               } else {
                  console.log('不搜索');
               }

               this.searchInput = '';
               console.log(this.isExpanded);
            })
         }
      }
   }
import { getlogout } from "@/api/index.js";
export default {
  name: "headNav",
  props: {
    text: {
      type: String,
      default() {
        return "标题";
      }
    },
    searchBg: {
      type: Boolean,
      default() {
        return true;
      }
    },
    bg: {
      type: String,
      default() {
        return "/static/image/topBg.png";
      }
    },
    bg1: {
      type: String,
      default() {
        return "/static/image/line.png";
      }
    },
    idIndex: {
      type: String,
      default() {
        return "1";
      }
    }
  },
  data() {
    return {
      isExpanded: false, // 控制搜索框是否展开
      searchInput: "", // 搜索框输入的内容
      menuNav: false,
      dialogVisible: false,
      isCommand: true
    };
  },
  methods: {
    // 修改密码
    changePassword(index) {
      if (index == 1) {
        // 检查 localStorage 中是否存在 token
        if (localStorage.getItem("access_token")) {
          // token 存在
          this.isCommand = true;
        } else {
          // token 不存在
          this.isCommand = false;
          // uni.navigateTo({
          //    url: '/pages/Login/Login'
          // })
          uni.showModal({
            // 询问用户是否退出登录
            title: "请重新登录",
            content: "您确定要重新登录吗?",
            success: async (res) => {
              if (res.confirm) {
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/Login/Login"
                  });
                }, 1500);
              } else if (res.cancel) {
                // console.log('用户点击取消');
              }
            }
          });
        }
        // uni.navigateTo({
        //    url: '/pages/changePassword/changePassword'
        // })
      } else if (index == 2) {
        console.log("帮助");
      }
    },
    // 修改获取退出按钮
    handleCommand(int) {
      if (int == 1) {
        uni.navigateTo({
          url: "/pages/changePassword/changePassword"
        });
      } else if (int == 2) {
        uni.showModal({
          // 询问用户是否退出登录
          title: "退出登录",
          content: "您确定要退出登录吗?",
          success: (res) => {
            if (res.confirm) {
              // 退出接口
              getlogout().then((res) => {
                //确定退出拿到token并清除token
                let TOKEN = uni.getStorageSync("access_token");
                uni.clearStorageSync();
                //退出成功！并跳转到其他页面
                this.$message.success("退出成功");
                uni.reLaunch({
                  url: "/pages/Login/Login"
                });
              });
            } else if (res.cancel) {
              // console.log('用户点击取消');
            }
          }
        });
      }
    },
    handleSelect(index) {
      if (index === "0") {
        uni.navigateTo({
          url: "/pages/index/index?id=" + 0
        });
      } else if (index === "1") {
        uni.navigateTo({
          url: "/pages/character/index?id=" + 1
        });
      } else if (index === "2") {
        uni.navigateTo({
          url: "/pages/inherit/index?id=" + 2
        });
      } else if (index === "3") {
        uni.navigateTo({
          url: "/pages/academicGenres/index?id=" + 3
        });
      } else if (index === "4") {
        uni.navigateTo({
          url: "/pages/territory/territory?id=" + 4
        });
      } else if (index === "5") {
        uni.navigateTo({
          url: "/pages/TcmSystem/TcmSystem?id=" + 5
        });
      }
    },
    // 搜索框的的移出
    InputBlur() {
      // this.isExpanded = !this.isExpanded;
      // this.searchInput = '';
    },
    // 切换搜索框的展开和收起状态
    toggleSearch() {
      this.isExpanded = !this.isExpanded;
      this.$nextTick(() => {
        if (this.searchInput.trim() !== "") {
          uni.navigateTo({
            url:
              "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput
          });
        }
        this.searchInput = "";
      });
    }
  }
};
</script>

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

      .img {
         width: .52rem;
         height: .52rem;
         background-image: url(@/static/image/logo3.png);
         background-repeat: no-repeat;
         background-size: 100% 100%;
         /* image-rendering: pixelated; */
      }
   }
  .img {
    width: 0.52rem;
    height: 0.52rem;
    background-image: url(@/static/image/logo3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* image-rendering: pixelated; */
  }
}

   @media screen and (min-width:2560px)and (max-width:3840px) {
::v-deep .el-menu .is-active {
  background-color: #244a7b !important;
  border-radius: 0.5rem;
}

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

      }
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  .LeftLogo .img {
    background-image: url(@/static/image/logo4.png);
  }
}

      .LeftLogo .img {
         background-image: url(@/static/image/logo4.png);
      }
   }
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .LeftLogo .img {
    background-image: url(@/static/image/logo.png);
  }
}

   @media screen and (min-width:1366px) and (max-width:1920px) {
::v-deep .uni-input-placeholder {
  padding-left: 0.05rem;
}

      ::v-deep .el-menu .is-active {
         background-color: #244A7B !important;
         border-radius: .5rem;
.headNav {
  /* 粘性定位 */
  position: sticky;
  top: 0;
  z-index: 99999999;
}

      }
.NavTop {
  /* background-image: url("../../static/image/topBg.png"); */
  background-size: 100% 100%;
  padding: 0.16rem 0.24rem;
  color: #fff !important;

      .LeftLogo .img {
         background-image: url(@/static/image/logo.png);
      }
   }
  img {
    width: 0.1rem;
    height: 0.1rem;
    vertical-align: middle;
  }

   ::v-deep .uni-input-placeholder {
      padding-left: .05rem;
   }
  .logo {
    width: 0.32rem;
    height: 0.32rem;
    background: url(@/static/image/logo.png) 0 0 no-repeat;
    background-size: 100% 100%;
  }

   .headNav {
      /* 粘性定位 */
      position: sticky;
      top: 0;
      z-index: 9;
   }
  .NavTopr {
    vertical-align: top;

   .NavTop {
      /* background: url(@/static/image/topBg.png); */
    img {
      width: 0.34rem;
      height: 0.34rem;
      margin-right: 0.3rem;
      vertical-align: middle;
    }
  }
}

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

      img {
         width: .1rem;
         height: .1rem;
         vertical-align: middle;
      }
.search-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;

      .logo {
         width: .32rem;
         height: .32rem;
         background: url(@/static/image/logo.png) 0 0 no-repeat;
         background-size: 100% 100%;
      }
  img {
    margin: 0 !important;
    margin-bottom: 4rpx !important;
  }
}

      .NavTopr {
         vertical-align: top;
.search-bar {
  width: 160rpx;
  /* 初始宽度 */
  transition: width 0.3s ease;
  /* 过渡动画 */
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  border-radius: 30rpx;
  background-color: #fff;
}

         img {
            width: .34rem;
            height: .34rem;
            margin-right: .30rem;
            vertical-align: middle;
         }
      }
   }
.search-bar.expanded {
  width: 100%;
  /* 展开后的宽度 */
}

   .mImage {
      width: 100%;
      height: .2rem;
      /* background-image: url(@/static/image/line.png); */
      background-size: cover;
      /* 背景图片覆盖整个元素 */
      background-position: center;
      background-color: #fff;
   }
.search-input {
  flex: 1;
  /* 占据剩余空间 */
  padding-left: 10rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #fff; */
  outline: none;
  color: #000;
  height: auto;
  min-height: auto;
}

.search-logo {
  width: 0.34rem;
  /* logo图标的宽度 */
  height: 0.34rem;
  /* logo图标的高度 */
  margin-left: 10rpx;
  /* 与输入框之间的间距 */
  cursor: pointer;
  background-image: url(@/static/image/search.svg);
  background-size: 100% 100%;
}

.leftListBg {
  border-radius: 0;

  .leftListBgImage {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(1.29);
  }
}

.el-menu-vertical-demo {
  border-right: 0 !important;
  background-color: transparent;
}

   .search-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
::v-deep .el-menu .is-active {
  background-color: #244a7b !important;
  border-radius: 0.5rem;

      img {
         margin: 0 !important;
         margin-bottom: 4rpx !important;
      }
   }
  /* padding: 0 .14rem !important; */
}

   .search-bar {
      width: 160rpx;
      /* 初始宽度 */
      transition: width 0.3s ease;
      /* 过渡动画 */
      display: flex;
      align-items: center;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      border-radius: 30rpx;
      background-color: #fff;
   }

   .search-bar.expanded {
      width: 100%;
      /* 展开后的宽度 */
   }

   .search-input {
      flex: 1;
      /* 占据剩余空间 */
      padding-left: 10rpx;
      box-sizing: border-box;
      /* border: 1rpx solid #fff; */
      outline: none;
      color: #000;
      height: auto;
      min-height: auto;
   }

   .search-logo {
      width: .34rem;
      /* logo图标的宽度 */
      height: .34rem;
      /* logo图标的高度 */
      margin-left: 10rpx;
      /* 与输入框之间的间距 */
      cursor: pointer;
      background-image: url(@/static/image/search.svg);
      background-size: 100% 100%;
   }

   .leftListBg {
      border-radius: 0;

      .leftListBgImage {
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
         transform: scale(1.29);
      }
   }

   .el-menu-vertical-demo {
      border-right: 0 !important;
      background-color: transparent;
   }

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

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

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

   ::v-deep .el-dialog__body {
      padding-top: 0 !important;
   }
::v-deep .el-dialog__body {
  padding-top: 0 !important;
}

   ::v-deep .el-dialog {
      margin-top: 0 !important;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 2.51rem;
   }
::v-deep .el-dialog {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 2.51rem;
}

   ::v-deep .el-dialog__header {
      display: none;
   }
::v-deep .el-dialog__header {
  display: none;
}

   /* ::v-deep .el-menu-vertical-demo */
</style>
/* ::v-deep .el-menu-vertical-demo */
</style>