web/apps/mobile/src/components/dataExport/popupDataexport.vue

<template>
  <div class="popupDataexport">
    <van-popup v-model="show">
      <div class="warm">
        <div class="close" @click="show = false"></div>
        <div class="content_box">
          <p class="title">温馨提示</p>
          <div class="text_box">
            您选择的数据超过了导出数据最大值<span class="blue">20,000</span
            >，请优化条件后导出。您也可联系客服：<span
              @click="call_phone('400-108-6670')"
              >400-108-6670</span
            >，或添加<span class="blue">客服微信</span>进行定制化导出。
          </div>
          <div class="qr_box">
            <img :src="img" alt="" />
          </div>
          <div class="desc">客服微信</div>
          <div class="btn_box">
            <div class="btn">
              <div
                :class="choose ? 'choosed' : 'nochoose'"
                @click="btnClick"
              ></div>
            </div>
            <p class="text">后续不再提醒</p>
          </div>
        </div>
        <div class="footer" @click="next">
          <span>继续导出20000条</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Popup } from 'vant'
import { mapState, mapActions } from 'vuex'
import { callPhone } from '@/utils/callFn'
import { debounce } from 'lodash'
import { setDontPromptAgain, getDontPromptAgain } from '@/api/modules'
export default {
  name: 'popupDataexport',
  components: {
    [Popup.name]: Popup
  },
  props: {},
  computed: {
    ...mapState('user', ['power'])
  },
  data() {
    return {
      show: false,
      choose: false,
      img: '',
      isPrompt: true
    }
  },
  created() {
    getDontPromptAgain().then((res) => {
      if (!res) {
        return
      }
      this.isPrompt = res.isPrompt
    })
  },
  mounted() {
    this.getQRimg()
  },
  methods: {
    ...mapActions('user', ['getPower']),
    btnClick() {
      this.choose = !this.choose
      this.setDontPrompt()
    },
    setDontPrompt: debounce(function () {
      if (this.choose) {
        setDontPromptAgain({ status: 1 }).then((res) => {
          this.isPrompt = false
        })
      } else {
        setDontPromptAgain({ status: 0 }).then((res) => {
          this.isPrompt = true
        })
      }
    }, 300),
    call_phone(tel) {
      if (this.$envs.inApp || this.$envs.inWX) {
        callPhone(tel)
      }
    },
    next() {
      this.$emit('next', { choose: this.choose })
    },
    async getQRimg() {
      if (this.power) {
        if (this.power.customers && this.power.customers.length > 0) {
          let customer = this.power.customers
          customer.forEach((e) => {
            if (e.remark === '客户经理') {
              this.img = e.wxer
            }
          })
          if (this.img == '') {
            this.img = customer[0].wxer
          }
        }
      } else {
        await this.getPower()
        this.getQRimg()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popupDataexport {
  .van-popup {
    background-color: rgba(0, 0, 0, 0);
  }
  .warm {
    width: 303px;
    height: 445px;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    .close {
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      right: 8px;
      top: 8px;
      z-index: 2;
      background-image: url(@/assets/image/dataExport/close.png);
      background-size: contain;
    }
    .content_box {
      padding: 24px 30px 16px 30px;
      .title {
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        text-align: center;
        color: #171826;
      }
      .text_box {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #5f5e64;
        margin-top: 8px;
        .blue {
          color: #2abed1;
        }
      }
      .qr_box {
        border: 1px solid #0000001a;
        border-radius: 8px;
        width: 141px;
        height: 141px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-top: 24px;
        img {
          width: 134px;
          height: 134px;
        }
      }
      .desc {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #1b1a2a;
        margin-top: 12px;
      }
    }
    .btn_box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      .btn {
        width: 24px;
        height: 24px;
        justify-content: center;
        display: flex;
        align-items: center;
      }
      .choosed {
        width: 24px;
        height: 24px;
        background-image: url('@/assets/image/dataExport/choose_right.png');
        background-size: contain;
      }
      .nochoose {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid #0000001a;
      }
      .text {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        color: #9b9ca3;
        margin-left: 4px;
      }
    }
    .footer {
      border-top: 1px solid #0000001a;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #2abed1;
      font-size: 18px;
      height: 45px;
    }
  }
}
</style>