Xf-association/src/components/top-header/index.vue

<template>
  <div class="header">
    <div class="main-cen">
      <div class="dis_just">
        <div class="left">
          欢迎您进入广州市建设工程消防协会！
          <span v-if="$store.state.token"
            >{{ $store.state.userInfo.Account
            }}<span
              style="cursor: pointer; color: red; margin-left: 14px"
              @click="$store.commit('CLEAR_Token_UserInfo')"
              >退出</span
            ></span
          ><span style="cursor: pointer; color: red" v-else @click="login"
            >请登录</span
          ><span v-if="!$store.state.token" style="margin: 0px 10px">|</span
          ><span
            style="cursor: pointer; color: red"
            v-if="!$store.state.token"
            class="links"
            @click="joinVip"
            >会员申请</span
          >
        </div>
        <div class="right">
          <span v-if="$store.state.token" style="cursor: pointer" @click="userInfo"
            >会员中心</span
          ><span v-if="$store.state.token" style="margin: 0px 10px">|</span>
          <span class="links" @click="suggestion">网站建议</span>
        </div>
      </div>
      <div class="dis_flex">
        <img
          @click="$router.replace('/')"
          src="@/assets/images/logo.png"
          alt=""
        />
        <div class="right">
          <input
            v-model.trim="searchKey"
            class="input_x"
            type="text"
            placeholder="请输入关键词搜索"
          />
          <div class="btn" @click="submit">
            <img src="@/assets/images/icon_search@2x.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!--顶部-->
    <membership ref="membership"></membership>
    <suggestion ref="suggestion"></suggestion>
    <login-dialog ref="login"></login-dialog>
    <user-info ref="userInfo"></user-info>
  </div>
</template>

<script>
import loginDialog from "@/components/login-dialog/index.vue";
import membership from "@/components/membership";
import suggestion from "@/components/suggestion";
import userInfo from "@/components/userInfo/index.vue";
export default {
  components: { loginDialog, membership, suggestion,userInfo },
  data() {
    return {
      week: "",
      searchKey: "",
    };
  },
  created() {
    if (this.$route.query && this.$route.query.mid && this.$route.query.Newpwd)
      this.$api
        .XfWebApiGetMemberApplyRc({
          mid: this.$route.query.mid,
          Newpwd: this.$route.query.Newpwd,
        })
        .then((res) => {
          this.$confirm("入会申请已驳回，是否前往重新编辑", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              res.Data.Newpwd = this.$route.query.Newpwd;
              this.$refs.membership.showInit(res.Data);
            })
            .catch(() => {});
        });
  },
  methods: {
    userInfo() {
      this.$refs.userInfo.showInit();
    },
    login() {
      this.$refs.login.showInit();
    },
    //入会申请
    joinVip() {
      this.$refs.membership.showInit();
    },
    //网站建议
    suggestion() {
      this.$refs.suggestion.showInit();
    },
    submit() {
      if (!this.searchKey) {
        this.$message.warning("请输入关键词");
        return;
      }
      this.$router.push({
        path: "searchKey",
        query: {
          key: this.searchKey,
        },
      });
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  color: #303030;
  position: relative;
  z-index: 1;
  height: 180px;
  background: url("../../assets/images/BG_db@2x.png") no-repeat center center;
  background-size: cover;
  flex-shrink: 0;
}
.main-cen {
  max-width: 1200px;
  margin: 0 auto;
}
.dis_just {
  font-size: 14px;
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > .left {
  }
  & > .right {
    & > span {
      margin-right: 6px;
    }
  }
}
.dis_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > img {
    cursor: pointer;
    width: 400px;
    height: 70px;
  }
  & > .right {
    display: flex;
    align-items: center;
    & > .input_x {
      padding: 11px;
      border: 1px solid #3975C6;
      height: 40px;
      line-height: 40px;
    }
    & > .btn {
      width: 52px;
      height: 40px;
      background-color: #3975C6;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
.links {
  cursor: pointer;
  user-select: none;
}
</style>