web/apps/mobile/src/composables/quick-monitor/component/QuickMonitor.vue

<template>
  <van-popover
    v-model="showPopover"
    v-if="model.canFollow"
    trigger="click"
    :placement="placement"
    :offset="calcOffset"
  >
    <FollowPopoverContentCard
      :used="model.expands?.used"
      :surplus="model.expands?.surplus"
      @toTimeline="toProjectDetail"
      @toMyFollow="toMonitorList"
      @applyMore="applyMoreMonitor"
      @cancelFollow="cancelMonitor"
    />
    <template #reference>
      <TabActionItem
        showText
        :direction="direction"
        class="action-monitor"
        @click.native.stop="changePopoverState"
      >
        <AppIcon
          slot="icon"
          :name="model.follow ? 'yijiankong' : 'jiankong'"
          svg
          size="20"
        ></AppIcon>
        <template #text>{{ model.follow ? '已监控' : '监控' }}</template>
      </TabActionItem>
    </template>
  </van-popover>
</template>
<script>
import TabActionItem from '@/views/article/ui/TabActionItem.vue'
import FollowPopoverContentCard from '@/views/article/ui/FollowPopoverContentCard.vue'
import { useQuickMonitorModel } from '@/composables/quick-monitor/index'
import { Popover } from 'vant'
import { AppIcon } from '@/ui'
import { reactive, toRefs, toRef } from 'vue'
import { mapGetters } from 'vuex'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'

const confMap = {
  project: {
    key: '项目',
    pushActiveKey: 2,
    applyMoreSource: 'article_project_more',
    limitSource: 'article_project_limit',
    toPushSettingDialogMessage:
      '您可前往“工作台-商机-项目进度监控”查看项目最新招标/采购进度。',
    successDialogMessage: '监控成功，您可前往“工作台-商机-项目进度监控”查看',
    monitorListLink: LINKS.项目进度监控
  },
  ent: {
    key: '企业',
    pushActiveKey: 4,
    applyMoreSource: 'article_ent_more',
    limitSource: 'article_ent_limit',
    toPushSettingDialogMessage:
      '您可前往“工作台-商机-企业情报监控”查看项目最新招标/采购进度。',
    successDialogMessage: '监控成功，您可前往“工作台-商机-企业情报监控”查看',
    monitorListLink: LINKS.企业情报监控
  },
  client: {
    key: '业主',
    pushActiveKey: 3,
    applyMoreSource: 'article_client_more',
    limitSource: 'article_client_limit',
    toPushSettingDialogMessage:
      '您可前往“工作台-商机-业主监控”查看项目最新招标/采购进度。',
    successDialogMessage: '监控成功，您可前往“工作台-商机-业主监控”查看',
    monitorListLink: LINKS.业主监控
  }
}

export default {
  name: 'QuickMonitor',
  components: {
    [Popover.name]: Popover,
    FollowPopoverContentCard,
    TabActionItem,
    AppIcon
  },
  props: {
    id: {
      type: String,
      default: '',
      required: true
    },
    type: {
      type: String,
      default: 'project',
      validator(t) {
        return ['project', 'ent', 'client'].includes(t)
      }
    },
    // 是否使用popover
    popover: {
      type: Boolean,
      default: false
    },
    cache: {
      type: Boolean,
      default: false
    },
    // 默认doFetch请求
    auto: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'column',
      validator(d) {
        return ['row', 'column'].includes(d)
      }
    },
    placement: {
      type: String,
      default: 'top'
    },
    beforeAction: Function
  },
  setup(props, { emit }) {
    const useMonitor = useQuickMonitorModel({
      type: props.type,
      cache: props.cache,
      params: {
        id: props.id
      }
    })

    const { model, fid } = toRefs(reactive(useMonitor))
    const { follow } = toRef(model)
    const { doFetch, doChange } = useMonitor

    if (props.auto) {
      doFetch().then((res) => {
        emit('afterFetch', res)
      })
    }

    return {
      useMonitor,
      model,
      follow,
      fid,
      doFetch,
      doChange
    }
  },
  data() {
    return {
      showPopover: false
      // model: {
      //   canFollow: false,
      //   follow: false,
      //   expands: {
      //     surplus: 0,
      //     used: 0
      //   }
      // }
    }
  },
  computed: {
    ...mapGetters('user', ['isLogin', 'isMember', 'isBusiness']),
    isMemberOrBusiness() {
      return this.isMember || this.isBusiness
    },
    conf() {
      return confMap[this.type] || confMap.project
    },
    calcOffset() {
      if (this.placement === 'top-start') {
        return [5, 10]
      } else if (this.placement === 'top-end') {
        return [-5, 10]
      } else {
        return undefined
      }
    }
  },
  methods: {
    toProjectDetail() {
      const params = {
        fid: this.fid,
        sid: this.id
      }
      sessionStorage.setItem('bigvip-fid', JSON.stringify(params))
      openAppOrWxPage(LINKS.项目详情页)
    },
    toMonitorList() {
      openAppOrWxPage(this.conf.monitorListLink)
      this.showPopoverList(false)
    },
    applyMoreMonitor() {
      if (this.isMemberOrBusiness) {
        // 弹窗提示监控更多项目/企业/业主
        this.concatKfDialog({
          title: `申请监控更多${this.conf.key}`,
          message: `您可联系客服，申请升级产品套餐，监控更多${this.conf.key}`
        })
      } else {
        // 留资页面
        this.$leaveInfo.toLeaveInfoPage({
          source: `${this.$env.platform}_${this.conf.applyMoreSource}`
        })
      }
      this.showPopoverList(false)
    },
    async concatKfDialog({ message, title }) {
      try {
        await this.$dialog.alert({
          title: title || '',
          messageAlign: 'center',
          className: 'j-confirm-dialog',
          confirmButtonText: '联系客服',
          showCancelButton: true,
          cancelButtonText: '我再想想',
          message: message
        })
        // 联系客服
        openAppOrWxPage(LINKS.客服)
      } catch (error) {
        console.log('我再想想', error)
      }
    },
    async cancelMonitorDialog() {
      return await this.$dialog.alert({
        title: '确定不再监控？',
        messageAlign: 'center',
        className: 'j-confirm-dialog',
        confirmButtonText: '我再想想',
        showCancelButton: true,
        cancelButtonText: '确定取消',
        message: `取消监控，将错过${this.conf.key}最新动态推送`
      })
    },
    async cancelMonitor() {
      try {
        await this.cancelMonitorDialog()
      } catch (error) {
        this.doCancelMonitor()
      }
    },
    showPopoverList(f = false) {
      this.showPopover = f
    },
    async changePopoverState() {
      if (this.model.follow) {
        // 已监控
        if (this.popover) {
          this.showPopoverList(!this.showPopover)
        } else {
          this.doMonitor()
        }
      } else {
        this.doMonitor()
      }
    },
    async successMonitorAndToPushSettingDialog() {
      try {
        await this.$dialog.alert({
          title: '监控成功',
          messageAlign: 'center',
          className: 'j-confirm-dialog',
          confirmButtonText: '去开启',
          showCancelButton: true,
          cancelButtonText: '暂不开启',
          message: `${this.conf.toPushSettingDialogMessage}为保证您能及时获取新增监控信息推送，请前往开启推送提醒。`
        })
        // 去开启提醒
        this.$router.push({
          path: '/push/pushsetting',
          query: {
            active: this.conf.pushActiveKey
          }
        })
      } catch (error) {
        console.log('暂不开启推送提醒', error)
      }
    },
    // 监控
    /**
     * 监控操作业务流程
     * 0. 前置权益判断
     *  0.1 判断是否非大会员、非商机管理用户
     *    > 否，留资弹窗
     * 1. 监控成功
     *  1.1 判断是否开启推送提醒
     *    > 是，提醒开启推送提醒 success-monitor
     *    > 否，toast 提醒监控成功 success-toast
     * 2. 监控失败
     *  2.1 超出可监控项目个数
     *    2.1.1 判断是否非大会员、非商机管理用户
     *      > 是，弹窗提醒 max-monitor
     *      > 否，留资弹窗
     *  2.2 其他错误，toast 提醒
     * @return {Promise<void>}
     */
    async doMonitor() {
      if (this.beforeAction) {
        const r = await this.beforeAction()
        if (!r) {
          return
        }
      }
      const loading = this.$toast.loading()
      // do something...
      try {
        const { success, msg, data } = await this.doChange()
        loading.clear()
        console.log(msg)
        if (success) {
          // 判断是否开启推送提醒
          if (data?.msg_open) {
            // 推送提醒已经开启
            this.$toast(this.conf.successDialogMessage)
          } else {
            // 提醒未开启
            this.successMonitorAndToPushSettingDialog()
          }
        } else {
          // 判断是否超出可监控项目个数
          if (data?.limit_status) {
            if (this.isMemberOrBusiness) {
              const count = data?.limit_status || 0
              this.concatKfDialog({
                title: `监控${this.conf.key}个数已达上限`,
                message: `您最多可监控${count}个${this.conf.key}，可联系客服，申请监控更多${this.conf.key}`
              })
            } else {
              // 留资
              this.$leaveInfo.toLeaveInfoPage({
                source: `${this.$env.platform}_${this.conf.limitSource}`
              })
            }
          }
          // if (msg) {
          //   this.$toast(msg)
          // }
        }
        this.syncValue(true)
      } catch (error) {
        loading.clear()
      }
    },
    // 取消监控
    async doCancelMonitor() {
      const loading = this.$toast.loading()
      const { success, msg } = await this.doChange()
      if (success) {
        console.log('取消监控成功')
      } else {
        console.log('取消监控失败', msg)
      }
      loading.clear()
      this.syncValue(false)
    },
    syncValue(v) {
      this.$emit('input', v)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .tab-action-item {
    height: 100%;
  }
  .icon-jiankong {
    color: #9b9ca3;
  }
  .icon-yijiankong {
    color: #ff9f40;
  }
}
</style>