horzi_rai_wxa/components/modalDialog.vue

<template>
  <view>
    <u-modal v-model="show" :content-style="{ fontSize: '32rpx' }" @confirm="contentBtn" :show-title="false" confirm-text="知道了" :confirm-style="{ fontWeight: '700' }">
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>

    <!-- 关注公众号 -->
    <u-modal
      v-model="goFollowShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="goFollowShowBtn"
      :show-cancel-button="true"
      confirm-text="去关注"
      @cancel="cancel"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="accounts"></rich-text>
      </view>
    </u-modal>

    <u-modal
      v-model="cancelShow"
      :content="canceltext"
      :content-style="{ fontSize: '32rpx', lineHeight: '80rpx' }"
      :confirm-style="{ fontWeight: '700' }"
      @confirm="cancelShowBtn"
      @cancel="cancelBtn"
      :show-title="false"
      :show-cancel-button="true"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
    ></u-modal>

    <!-- 立即申请 -->
    <u-modal
      v-model="applyIsShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="applyIsShowBtn"
      :show-cancel-button="true"
      :confirm-text="isShowAlert ? '立即上传' : '立即申请'"
      @cancel="applyIsShowCancel"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="jurisdictionText"></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">
        <!-- <rich-text :nodes="hasPermissionText"></rich-text> -->
        <text>您暂无权限参加此活动</text>
        <text>若想参加可以联系对口销售</text>
        <view
          >{{ jurisdictionList.SellerName }} : <text @click="mobileDial" class="seller-mobile"> {{ jurisdictionList.SellerMobile }}</text></view
        >
        <text>申请开通对应的试用权限</text>
      </view>
    </u-modal>
    <u-modal v-model="showRelation" confirm-text="知道了" :confirm-style="{ fontWeight: '700' }" :content="contentRelation"></u-modal>

    <!-- 修改手机号 -->
    <u-modal
      width="650"
      v-model="editIsShowDlg"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="GoOutboundMobileBtn"
      :show-cancel-button="true"
      confirm-text="无需修改"
      cancel-text="前去修改"
      cancel-color="#3385FF"
      @cancel="GoOutboundMobileIsGo"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
    >
      <view class="slot-content">
        <rich-text :nodes="editIsShowAccounts"></rich-text>
      </view>
    </u-modal>

    <u-modal
      v-model="mailboxBindingDlg"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="gmailboxBindingDlgBtn"
      :show-cancel-button="true"
      confirm-text="设置"
      @cancel="cancelMailboxBindingDlg"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="mailboxText"></rich-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,
      showRelation: false,
      showhasPermission: false,
      contentRelation: "申请已提交,请等待销售人员与您联系",
      content: "",
      accounts: "",
      canceltext: "",
      jurisdictionText: "",
      hasPermissionText: "",
      editIsShowAccounts: "",
      editIsShowDlg: false,
      mailboxBindingDlg: false,
      mailboxText: "您当前绑定的联系方式为邮箱，请先设置您的外呼号码",
      isShowAlert: false, //获取权限弹窗是否展示免费月卡接口
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    signupType: {
      // type: Number,
    },
    signupStatus: {
      type: String,
      default: "Success",
    },
    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;
    },
    signupType() {
      if (this.signupStatus !== "Success") return;
      if (this.signupType == 1) {
        this.content = `${this.countryCode}-${this.mobileEdit}<br/>预约成功，已加入您的活动日程 <br/><br/> 请关注【查研观向小助手】公众号，及时获取活动信息变更提醒

`;
        this.accounts = `
					${this.countryCode}-${this.mobileEdit}<br/>
					预约成功，已加入您的活动日程<br/><br/>

					想要及时获取活动时间变更通知，请关注【查研观向小助手】公众号
				`;
      } else if (this.signupType == 999) {
        this.content = "设置成功<br /> <br/>请关注【查研观向小助手】公众号，会前15分钟为您推送微信提醒";
        this.accounts = `设置成功，会前15分钟会为您推送微信消息提醒<br/><br/>
									请关注【查研观向小助手】公众号，以获取微信消息提醒`;
      } else if (this.signupType == "summaryIsHandel") {
        this.content = "会议纪要预约成功 <br/><br/> 请关注【查研观向小助手】公众号，若有调研纪要发布/更新，将及时为您推送微信消息";
        this.accounts = `
						会议纪要预约成功<br/><br/>

						请关注【查研观向小助手】公众号，若有调研纪要发布/更新，将及时为您推送微信消息	`;
      } else {
        this.content = `报名成功，已加入您的活动日程 <br/><br/> 请关注【查研观向小助手】公众号，${this.signupType == 'CClass' ? '及时获取活动信息变更提醒':'会前1小时为您推送微信提醒'}`;
        this.accounts = `
						报名成功，已加入您的活动日程<br/><br/>

						想要及时获取活动时间变更通知，请关注【查研观向小助手】公众号	`;
      }
    },
    signupStatus() {
      if (this.signupStatus == "Success") return;
      if (this.signupStatus == "FullStarffed") {
        this.content = "此活动报名人数已满，请留意下期活动";
      } else if (this.signupStatus == "TwoPeople") {
        this.content = "单机构最多2人报名同一活动，您所在机构报名人数已满";
      } else if (this.signupStatus == "BreakPromise") {
        this.content = "由于爽约次数过多，您暂时被限制报名资格";
      } else if (this.signupStatus == "Overtime") {
        this.content = "活动开始前1小时内无法预约，请联系对口销售处理";
      }
    },
    "idTypeCancel.type": {
      handler: function () {
        if (this.idTypeCancel.type == 1) {
          this.canceltext = "您要取消此次活动预约外呼吗？";
        } else {
          this.canceltext = "您要取消此次活动的报名吗？";
        }
      },
      deep: true,
    },
    isCancelShow() {
      this.cancelShow = this.isCancelShow;
    },
    applyForIsShow() {
      this.jurisdictionText = this.isShowAlert ? "上传名片并填写简单信息，24小时内我们会为您开通一个月的免费月卡" : this.jurisdictionList.PopupMsg;
      this.applyIsShow = this.applyForIsShow;
    },
    isShowhasPermission() {
      this.hasPermissionText = this.jurisdictionList.PopupMsg;
      this.showhasPermission = this.isShowhasPermission;
    },
  },
  methods: {
    contentBtn() {
      this.$parent.isShow = false;
      this.show = false;
      this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
    },
    //去关注
    goFollowShowBtn() {
      this.$parent.goFollow = false;
      this.goFollowShow = false;
      this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
      uni.navigateTo({
        url: "/activityPages/accountsOfficial/accountsOfficial",
      });
    },
    cancel() {
      this.$parent.goFollow = false;
      this.goFollowShow = false;

      this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
    },
    cancelBtn() {
      this.$parent.isCancelShow = false;
      this.cancelShow = false;
    },
    cancelShowBtn() {
      activity
        .signupCancel({
          ActivityId: this.idTypeCancel.id,
          SignupType: this.idTypeCancel.type,
        })
        .then((res) => {
          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() {
      this.applyIsShow = false;
      this.$parent.applyForIsShow = false;
      if (this.hasPermission == 3) {
        uni.navigateTo({
          url: "/pageMy/applyTrial/applyTrial?tryType=Activity&detailId=" + this.jurisdictionList.ActivityId,
        });
      } else if (this.hasPermission == 4) {
        this.showRelation = true;
      } else if (this.hasPermission == 5) {
        this.showhasPermissionBtn();
      }
    },
    applyIsShowCancel() {
      this.applyIsShow = false;
      this.$parent.applyForIsShow = false;
    },
    showhasPermissionBtn() {
      User.applyTry({
        TryType: "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;
    },
    showhasPermissionCancel() {
      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;
      }
    },
    GoOutboundMobileIsGo() {
      this.$parent.editIsShow = false;
      this.editIsShowDlg = false;
      this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
      uni.navigateTo({
        url:
          "/activityPages/editOutbound/editOutbound?title=修改外呼号码&identification=修改&goOnNextStep=" +
          this.goOnNextStep +
          "&id=" +
          this.idTypeCancel.cutId +
          "&cellphone=" +
          this.countryCode +
          "-" +
          this.mobileEdit,
      });
    },
    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,
      });
    },
    cancelMailboxBindingDlg() {
      this.$parent.mailboxBinding = false;
      this.mailboxBindingDlg = false;
    },
    //获取权限弹窗是否展示免费月卡接口
    async userIsShowAlert() {
      const res = await FreeButton.userIsShowAlert();
      if (res.Ret === 200) {
        this.isShowAlert = res.Data.IsShow;
      }
    },
  },
  mounted() {
    this.userIsShowAlert();
  },
};
</script>

<style scoped 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>