horzi_rai_wxa/components/modalDialog.vue

<template>
  <view>
    <u-modal
      v-model="isModalShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="confirmModal"
      :show-cancel-button="true"
      :confirm-text="confirmText"
      :cancel-text="editIsShowDlg ? '前去修改' : '取消'"
      @cancel="cancelModal"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
    <!-- 修改手机号 -->

    <!-- 拨打电话 -->
    <u-modal
      v-model="showhasPermission"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="showhasPermissionBtn"
      :show-cancel-button="true"
      confirm-text="提交申请"
      @cancel="showhasPermissionCancel"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <!-- 2 - 活动视频  3 - 产业视频 -->
        <block v-if="jurisdictionList.isAudioVideo == 2 || jurisdictionList.isAudioVideo == 3">
          <text>您暂无权限查看此视频</text>
          <text>若想查看可以联系对口销售</text>
        </block>
        <block v-else>
          <text>您暂无权限参加此活动</text>
          <text>若想参加可以联系对口销售</text>
        </block>

        <view
          >{{ jurisdictionList.SellerName }} : <text @click="mobileDial" class="seller-mobile"> {{ jurisdictionList.SellerMobile }}</text></view
        >
        <text>申请开通对应的试用权限</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { User, activity, FreeButton } from "@/config/api.js";
export default {
  data() {
    return {
      goFollowShow: false,
      show: false,
      cancelShow: false,
      applyIsShow: false,
      showhasPermission: false,
      accounts: "",
      jurisdictionText: "",
      hasPermissionText: "",
      editIsShowAccounts: "",
      editIsShowDlg: false,
      mailboxBindingDlg: false,
      isShowAlert: false, //获取权限弹窗是否展示免费月卡接口
      contentType: "",
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    signupType: {
      // type: Number,
    },
    goFollow: {
      type: Boolean,
    },
    isCancelShow: {
      type: Boolean,
      default: false,
    },
    idTypeCancel: {
      type: Object,
    },
    jurisdictionList: {
      type: Object,
    },
    applyForIsShow: {
      //潜在用户
      type: Boolean,
    },
    isShowhasPermission: {
      //联系销售
      type: Boolean,
    },
    hasPermission: {
      //权限字段
      type: String,
    },
    editIsShow: {
      type: Boolean,
    },
    countryCode: {
      type: String,
    },
    mobileEdit: {
      type: String,
    },
    goOnNextStep: {
      type: Boolean,
      default: false,
    },
    mailboxBinding: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    mailboxBinding() {
      this.mailboxBindingDlg = this.mailboxBinding;
    },
    editIsShow() {
      this.editIsShowDlg = this.editIsShow;
      if (this.editIsShow) {
        this.editIsShowAccounts = `
						默认外呼号码是您当前绑定的手机号：<br />
						${this.countryCode}-${this.mobileEdit}<br/><br/>
						是否需要修改您的外呼号码?
					`;
      }
    },
    goFollow() {
      this.goFollowShow = this.goFollow;
    },
    isShow() {
      this.show = this.isShow;
    },
    isCancelShow() {
      this.cancelShow = this.isCancelShow;
    },
    applyForIsShow() {
      this.content = this.isShowAlert ? "上传名片并填写简单信息，24小时内我们会为您开通一个月的免费月卡" : this.jurisdictionList.PopupMsg;
      this.applyIsShow = this.applyForIsShow;
    },
    isShowhasPermission() {
      this.hasPermissionText = this.jurisdictionList.PopupMsg;
      this.showhasPermission = this.isShowhasPermission;
    },
  },
  computed: {
    isModalShow: {
      get() {
        let isShow = this.show || this.cancelShow || this.goFollowShow || this.applyIsShow || this.mailboxBindingDlg;
        return isShow;
      },
      set() {},
    },
    confirmText() {
      let text = this.mailboxBindingDlg
        ? "设置"
        : this.applyIsShow && this.isShowAlert
        ? "立即上传"
        : this.applyIsShow && !this.isShowAlert
        ? "立即申请"
        : this.goFollowShow
        ? "去关注"
        : this.show
        ? "知道了"
        : this.editIsShowDlg
        ? "无需修改"
        : "";
      return text;
    },
    content: {
      get() {
        let str = this.mailboxBindingDlg ? "您当前绑定的联系方式为邮箱，请先设置您的外呼号码" : this.applyIsShow || this.goFollowShow || this.show ? this.jurisdictionList.PopupMsg : "";
        return str;
      },
      set() {},
    },
  },
  methods: {
    /**
     *
     *
     *
     * 确定
     *
     *
     */
    confirmModal() {
      this.show
        ? this.contentBtn()
        : this.goFollowShow
        ? this.goFollowShowBtn()
        : this.cancelShow
        ? this.cancelShowBtn()
        : this.applyIsShow
        ? this.applyIsShowBtn()
        : this.mailboxBindingDlg
        ? this.gmailboxBindingDlgBtn()
        : this.editIsShowDlg
        ? this.GoOutboundMobileBtn()
        : "";
      this.initData();
    },
    /**
     *
     *
     *
     * 取消
     *
     *
     */
    cancelModal() {
      if (this.editIsShowDlg) {
        this.GoOutboundMobileIsGo;
      } else {
        this.initData();
        this.$emit("cancelShowBtn");
      }
    },
    /**
     *
     *
     *
     * 重置
     *
     *
     */
    initData() {
      this.$parent.isShow = false;
      this.show = false;
      this.$parent.goFollow = false;
      this.goFollowShow = false;
      this.applyIsShow = false;
      this.$parent.applyForIsShow = false;
      this.$parent.mailboxBinding = false;
      this.mailboxBindingDlg = false;
      this.$parent.signupType = "";
      this.$parent.isCancelShow = false;
      this.cancelShow = false;
    },

    showhasPermissionBtn() {
      // isAudioVideo -- 3 产业视频
      User.applyTry({
        TryType: this.jurisdictionList.isAudioVideo == 1 ? "MicroAudio" : this.jurisdictionList.isAudioVideo == 2 || this.jurisdictionList.isAudioVideo == 3 ? "MicroVideo" : "Activity",
        DetailId: this.jurisdictionList.ActivityId,
      }).then((res) => {
        this.showhasPermission = false;
        this.$parent.isShowhasPermission = false;
      });
    },
    mobileDial() {
      uni.makePhoneCall({
        phoneNumber: this.jurisdictionList.SellerMobile, // 拨打电话
      });
      this.showhasPermission = false;
      this.$parent.isShowhasPermission = false;
    },

    GoOutboundMobileBtn() {
      this.$parent.editIsShow = false;
      this.editIsShowDlg = false;
      if (this.goOnNextStep) {
        this.goFollowShow = true;
      } else {
        this.show = true;
      }
    },

    gmailboxBindingDlgBtn() {
      this.$parent.mailboxBinding = false;
      this.mailboxBindingDlg = false;
      this.$parent.signupType = "";
      uni.navigateTo({
        url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=邮箱&goOnNextStep=" + this.goOnNextStep + "&id=" + this.idTypeCancel.cutId,
      });
    },
    //获取权限弹窗是否展示免费月卡接口
    async userIsShowAlert() {
      const res = await FreeButton.userIsShowAlert();
      if (res.Ret === 200) {
        this.isShowAlert = res.Data.IsShow;
      }
    },

    /**
     * 取消
     *  */
    cancelMailboxBindingDlg() {
      this.$parent.mailboxBinding = false;
      this.mailboxBindingDlg = false;
    },
    GoOutboundMobileIsGo() {
      this.$parent.editIsShow = false;
      this.editIsShowDlg = false;
      uni.navigateTo({
        url:
          "/activityPages/editOutbound/editOutbound?title=修改外呼号码&identification=修改&goOnNextStep=" +
          this.goOnNextStep +
          "&id=" +
          this.idTypeCancel.cutId +
          "&cellphone=" +
          this.countryCode +
          "-" +
          this.mobileEdit,
      });
    },

    //获取权限弹窗是否展示免费月卡接口
    async userIsShowAlert() {
      const res = await FreeButton.userIsShowAlert();
      if (res.Ret === 200) {
        this.isShowAlert = res.Data.IsShow;
      }
    },

    /**
     *
     *
     *
     *
     *
     *confirm  模块
     *
     *
     *
     *
     *
     *
     */
    //正常的
    contentBtn() {
      this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
    },
    //去关注
    goFollowShowBtn() {
      this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
      uni.navigateTo({
        url: "/activityPages/accountsOfficial/accountsOfficial",
      });
    },
    async cancelShowBtn() {
      const res = await activity.signupCancel({
        ActivityId: this.idTypeCancel.id,
        SignupType: this.idTypeCancel.type,
      });

      if (res.Ret == 200) {
        this.idTypeCancel.cutId = res.Data.ActivityId;
        if (this.signupType == 1) {
          uni.showToast({
            title: "预约外呼已取消",
            duration: 2000,
          });
        } else {
          uni.showToast({
            title: "已取消报名",
            duration: 2000,
          });
        }
        this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
      }
      this.$parent.isCancelShow = false;
      this.cancelShow = false;
    },
    //立即申请
    applyIsShowBtn() {
      if (this.hasPermission == 3) {
        uni.navigateTo({
          url: "/pageMy/applyTrial/applyTrial?tryType=Activity&detailId=" + this.jurisdictionList.ActivityId,
        });
      } else if (this.hasPermission == 4) {
        uni.showModal({
          content: "申请已提交,请等待销售人员与您联系",
          confirmText: "知道了",
          showCancel: false,
          confirmColor: "#3385FF",
        });
      } else if (this.hasPermission == 5) {
        this.showhasPermissionBtn();
      }
    },
    //去设置
    gmailboxBindingDlgBtn() {
      uni.navigateTo({
        url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=邮箱&goOnNextStep=" + this.goOnNextStep + "&id=" + this.idTypeCancel.cutId,
      });
    },
    // 拨打电话的取消弹框
    showhasPermissionCancel() {
      this.showhasPermission = false;
      this.$parent.isShowhasPermission = false;
    },
  },
  mounted() {
    // 免费送月卡
    // this.userIsShowAlert();
  },
};
</script>

<style lang="scss">
.slot-content {
  width: 100%;
  padding: 50rpx;
  text-align: center;
  font-size: 32rpx;
  color: #0f1826;
  line-height: 48rpx;
}
.seller-mobile {
  display: inline-block;
  color: #2979ff;
}
.u-model__footer__button.data-v-3626fcec {
  border-right: 1rpx solid #333;
}
</style>