GCLS_Page_Personal/src/components/common/EditTitle.vue

<!--  -->
<template>
  <div class="GCLS-center-top">
    <h2 class="title">{{ title }}
        <span :class="['message-box',is_exist == 'true'?'hasMessage':'noMessage']" v-if="from=='message'" @click="handleReadAllMessage">{{$t("Key802")}}</span>
    </h2>

    <div class="GCLS-center-op" v-if="isDel == 1">
      <template v-if="!isShowCheckBox">
        <el-button
          size="small"
          class="common-btn edit-btn"
          @click="changeIsDel(true)"
        >
          <img src="@/assets/Personalcenter/edit-icon.png" class="edit-icon" />
          <!-- 编辑 -->
          <span>{{ $t("Key123") }}</span>
        </el-button>
      </template>
      <template v-else>
        <span class="choice-num">{{ selectedCount }}/{{ listCount }}</span>
        <el-popover
          placement="top"
          width="160"
          class="delOrgBox"
          v-model="isPop"
        >
          <p>{{ $t("Key478") }} {{ selectedCount }} {{ $t("Key479") }}？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="isPop = false">{{
              $t("Key83")
            }}</el-button>
            <!-- 确定 -->
            <el-button type="primary" size="mini" @click="sureDel">{{
              $t("Key94")
            }}</el-button>
          </div>

          <el-button
            size="small"
            class="common-btn delete-btn"
            slot="reference"
          >
            <img
              src="@/assets/Personalcenter/delete-icon.png"
              class="edit-icon"
            />
            <!-- 删除 -->
            <span>{{ $t("Key172") }}</span>
          </el-button>
        </el-popover>
        <el-button
          size="small"
          class="common-btn cancle-btn"
          @click="changeIsCancle(false)"
        >
          <!-- 取消 -->
          <span>{{ $t("Key83") }}</span>
        </el-button>
        <el-button
          size="small"
          class="common-btn complete-btn"
          @click="changeIsDel(false)"
        >
          <img
            src="@/assets/Personalcenter/complete-icon.png"
            class="edit-icon"
          />
          <!-- 完成 -->
          <span>{{ $t("Key82") }}</span>
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getLearnWebContent } from "@/api/ajax";
export default {
  components: {},
  props: [
    "title",
    "isDel",
    "isShow",
    "isShowCheckBox",
    "changeIsDel",
    "changeIsCancle",
    "delCount",
    "listCount",
    "deleteMyCollection",
    "from"
  ],
  data() {
    return {
      isPop: false,
    };
  },
  computed: {
    ...mapGetters(["is_exist"]),
    selectedCount() {
      return this.delCount;
    },
  },
  watch: {},
  //方法集合
  methods: {
    async sureDel() {
      await this.deleteMyCollection();
      this.isPop = false;
    },
    handleReadAllMessage(){
        let MethodName = "message-message_manager-ReadMyMessage";
        let data = {
            is_all_read: 'true'
        };
        getLearnWebContent(MethodName, data).then((res) => {
            // this.is_exist = res.is_exist;
            if(res.status==1){
                this.$emit('load','1')
                this.$store.dispatch("message/updateIsExist", 'false');
            }
            
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.GCLS-center-top {
  width: 100%;
  height: 78px;
  padding: 24px 32px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  > .title {
    font-size: 20px;
    line-height: 150%;
    color: #000000;
    margin: 0;
    .message-box{
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        background: url('../../assets/Personalcenter/icon-message.png') 24px center no-repeat;
        background-size: 16px;
        padding: 0 0 0 46px;
        cursor: pointer;
        &.noMessage{
            opacity: 0.55;
        }
    }
  }
  > .GCLS-center-op {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .choice-num {
      margin-right: 10px;
      font-size: 16px;
      line-height: 150%;
      color: #000000;
    }
    .common-btn {
      > span {
        display: flex;
        align-items: center;
      }
      .edit-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }
  }
}
</style>
<style lang='scss'>
.GCLS-center-top {
  .common-btn {
    cursor: pointer;
    > span {
      display: flex;
      align-items: center;
    }
  }

  .el-button--small,
  .el-button--small.is-round {
    padding: 7px 16px;
    font-size: 16px;
  }
  .cancle-btn {
    width: 96px;
    height: 40px;
    padding: 7px 31px;
  }
  .edit-btn {
    &.el-button {
      border: 1px solid rgba(44, 44, 44, 0.15);
      color: #000;
    }
    &.el-button:active {
      color: #000;
      border-color: #d3d4d6;
      outline: 0;
    }
    &.el-button:hover {
      background: #f4f4f5;
      border-color: #d3d4d6;
    }
  }
  .cancle-btn {
    &.el-button {
      border: 1px solid rgba(44, 44, 44, 0.15);
      color: #000;
    }
    &.el-button:active {
      color: #000;
      border-color: #d3d4d6;
      outline: 0;
    }
    &.el-button:hover {
      background: #f4f4f5;
      border-color: #d3d4d6;
    }
  }
  .delete-btn {
    &.el-button {
      border: 1px solid #fff;
      color: #eb5757;
    }
    &.el-button:active {
      color: #fff;
      border-color: #fff;
      outline: 0;
    }
    &.el-button:hover {
      background: #f3b2b2;
    }
  }
  .complete-btn {
    &.el-button {
      border: 1px solid #ff9900;
      color: #ff9900;
    }
    &.el-button:active {
      color: #ff9900;
      border-color: #ff9900;
      outline: 0;
    }
    &.el-button:hover {
      background: #f5dab1;
    }
  }
}
</style>