storevisit-ui-mobile/src/views/home/bottomBtn.vue

<template>
  <div class="bottomBtn">
    <div style="color: #999; font-size: 12px; margin: 0 10px">
      <!--      昨日新增的数据统一在上午9点更新.-->
      <span v-if="reportInfoData.newUser">
        <van-icon name="info-o" />
        &nbsp;新人入职后5个工作日不用提交日报.
      </span>
    </div>
    <div class="lineGrey"></div>
    <div v-if="approvalButton" class="contentborder">
      <van-cell class="homeTitle" title="汇报审批" to="/dailyApprovalList">
        <template #title>
          <span class="custom-title">汇报审批&nbsp;&nbsp;</span>
          <van-tag v-if="approvalPendingNum > 0" type="danger">{{ approvalPendingNum }}</van-tag>
        </template>
        <template #right-icon>
          <van-icon class="homeCellIcon" name="arrow" size="16" />
        </template>
      </van-cell>
      <div class="lineGrey"></div>
    </div>
    <!-- <div  class="contentborder"  v-if="todayGoal.storeAddressCheckNum>0">
      <van-cell class="homeTitle" title="待规范门店地址" to="/storeAddress">
        <template #title><span class="custom-title">待规范门店地址</span>&nbsp<van-tag type="danger">{{ todayGoal.storeAddressCheckNum }}</van-tag></template>
        <template #right-icon><van-icon class="homeCellIcon" name="arrow" size="16"/></template>
      </van-cell>
      <div class="lineGrey"></div>
    </div> -->
    <div class="contentborder">
      <van-cell class="homeTitle" title="流程审批" to="/signApprovalList">
        <template #title>
          <span class="custom-title">流程审批</span>&nbsp
          <van-tag v-if="proccessPendingNum > 0" type="danger">{{ proccessPendingNum }}</van-tag>
        </template>
        <template #right-icon><van-icon class="homeCellIcon" name="arrow" size="16" /></template>
      </van-cell>
      <div class="lineGrey"></div>
    </div>
    <!-- 同城店建店审批 -->
    <div
      class="contentborder"
      v-if="reportInfoData.storeApprovalNum != null && reportInfoData.storeApprovalNum > 0">
      <van-cell class="homeTitle" title="同城店建店审批" to="/newStoreApprovalList">
        <template #title>
          <span class="custom-title">同城店建店审批&nbsp;&nbsp;</span>
          <van-tag type="danger">{{ reportInfoData.storeApprovalNum }}</van-tag>
        </template>
        <template #right-icon>
          <van-icon class="homeCellIcon" name="arrow" size="16" />
        </template>
      </van-cell>
      <div class="lineGrey"></div>
    </div>
    <div class="contentborder">
      <van-button
        v-if="reportType == 3 && showButton"
        class="Btn1"
        plain
        size="small"
        type="info"
        @click="doubleWeeklyLink"
        >填写半月报</van-button
      >
      <van-button
        v-if="reportType == 2 && showButton"
        class="Btn1"
        plain
        size="small"
        type="info"
        @click="weeklyLink"
        >填写周报</van-button
      >
      <van-button
        v-if="reportType == 1 && showButton"
        class="Btn1"
        plain
        size="small"
        type="info"
        @click="dailyLink"
        >填写日报</van-button
      >
      <van-button
        v-if="reportType < 4 && isCommit"
        class="Btn1"
        plain
        size="small"
        type="info"
        @click="dailyLinks"
        >查看我的历史汇报</van-button
      >
    </div>
    <!-- <p class="updataTime" v-if="type != 4 && tabVal != '-1'">更新时间:{{ updataTime }}</p> -->
    <div class="ownerBirthdayReminds" v-if="ownerBirthdayBoxFlag && ownerBirthdayReminds">
      <div class="ownerBirthdayBox">
        <div class="title"><img :src="require('@/assets/hua.png')" />金牌店生日提醒</div>
        <div class="content">{{ this.ownerBirthdayReminds }},将在3日后生日,请及时送上生日祝福!</div>
        <img class="dangao" :src="require('@/assets/dangao.png')" />
      </div>
      <div class="close" @click="ownerBirthdayBoxFlag = false">
        <img :src="require('@/assets/close.png')" />
      </div>
    </div>
  </div>
</template>
<script>
import { getReportInfo } from '@/api/index';
export default {
  props: {
    tabVal: {
      type: [String, Number],
      default: '-1',
    },
  },
  data() {
    return {
      reportInfoData: {},
      approvalButton: false,
      JZQuota: false,
      GZdata: false,
      approvalPendingNum: 0,
      proccessPendingNum: 0,
      powerGrade: '2',
      showButton: false,
      isCommit: null,
      updataTime: '',
      type: '-1',
      ownerBirthdayBoxFlag: false,
      ownerBirthdayReminds: null,
      reportType: null,
    };
  },
  activated() {
    this.getReportInfo();
  },
  methods: {
    getReportInfo() {
      getReportInfo({ isContent: false }).then((res) => {
        if (res.code == 200) {
          if (res.data.postType == 'GZ') {
            this.GZdata = true;
          } else {
            this.GZdata = false;
          }
          if (res.data.postType == 'JZ') {
            this.JZQuota = true;
          } else {
            this.JZQuota = false;
          }
          localStorage.setItem('powerGrade', res.data.positionId);
          localStorage.setItem('userDeptLevel', res.data.userDeptLevel);
          localStorage.setItem('isDiy', res.data.diy);
          localStorage.setItem('uType', res.data.userType);
          localStorage.setItem('jzType', res.data.jzType);
          localStorage.setItem('customerVisits', res.data.customerManagerVisits);
          localStorage.setItem('postType', res.data.postType);
          localStorage.setItem('reportType', res.data.reportType);
          this.proccessPendingNum = res.data.proccessPendingNum;
          this.reportInfoData = res.data;
          this.approvalButton = res.data.approvalButton;
          this.powerGrade = res.data.positionId;
          this.showButton = res.data.showButton;
          this.reportType = res.data.reportType;
          if (res.data.reportTargetAll != null) {
            this.updataTime = res.data.reportTargetAll.updateTime;
          }
          this.approvalPendingNum = res.data.approvalPendingNum;
          this.type = res.data.userType;
          // 金牌店老板生日提醒
          if (res.data.ownerBirthdayReminds && res.data.ownerBirthdayReminds.length) {
            this.ownerBirthdayBoxFlag = true;
            this.ownerBirthdayReminds = res.data.ownerBirthdayReminds.join(',');
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    dailyLink() {
      if (!this.isAllow()) return;
      this.$router.push('/daily');
    },
    weeklyLink() {
      if (!this.isAllow()) return;
      this.$router.push('/weekly');
    },
    doubleWeeklyLink() {
      if (!this.isAllow()) return;
      this.$router.push('/doubleWeekly');
    },
    dailyLinks() {
      if (!this.isAllow()) return;
      this.$router.push('/myHistoricalDaily');
    },
    // 是否允许填写汇报
    isAllow() {
      let reportRemark = this.reportInfoData.reportRemark;
      if (reportRemark) {
        this.$dialog
          .alert({
            message: reportRemark,
          })
          .then(() => {});
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.bottomBtn {
  .ownerBirthdayReminds {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .ownerBirthdayBox {
      width: 90%;
      // height: 369px;
      background: url('../../assets/ownerBirthdayBG.png') no-repeat center center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        text-align: center;
        font-size: 20px;
        color: #99443b;
        font-weight: bold;
        display: flex;
        align-items: flex-end;
        padding-top: 40px;
        position: relative;
        img {
          width: 35px;
          height: 35px;
          position: absolute;
          left: -55px;
        }
      }
      .content {
        width: 80%;
        line-height: 30px;
        font-size: 16px;
        color: #555555;
        text-align: center;
        margin-top: 20px;
      }
      .dangao {
        width: 80%;
        height: 160px;
        margin-top: 20px;
        margin-bottom: 35px;
      }
    }
    .close {
      img {
        width: 35px;
        height: 35px;
        margin-top: 20px;
      }
    }
  }
}
</style>