horzi_rai_wxa/components/modalDialog.vue

<template>
  <view>
    <u-modal
      v-model="isModalShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="confirmModal"
      :confirm-text="confirmText"
      :cancel-text="editIsShowDlg ? '前去修改' : signupType == 'summaryIsHandel' || jurisdictionList.SignupStatus !== 'Success' ? '取消' : '不加入'"
      :show-cancel-button="show_cancel_button"
      @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>
    <!-- 修改手机号 -->
    <block v-if="jurisdictionList.IsResearch">
      <u-modal
        v-model="showhasPermission"
        :content-style="{ fontSize: '32rpx' }"
        @confirm="showhasPermissionBtn"
        :show-cancel-button="!jurisdictionList.IsResearchSpecial"
        :confirm-text="!jurisdictionList.IsResearchSpecial ? '提交申请' : '知道了'"
        @cancel="showhasPermissionCancel"
        :show-title="false"
        :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
        :confirm-style="{ fontWeight: '700' }"
      >
        <view class="slot-content" v-if="jurisdictionList.IsResearch">
          <rich-text :nodes="jurisdictionList.PopupMsg || ''"></rich-text>
        </view>
      </u-modal>
    </block>
    <block v-else>
      <!-- 拨打电话 -->
      <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>
    </block>
  </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(newVal) {
      this.editIsShowDlg = newVal;
      if (newVal) {
        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 || this.editIsShowDlg;
        return isShow;
      },
      set() {},
    },
    confirmText() {
      let text = this.mailboxBindingDlg
        ? "设置"
        : this.applyIsShow && this.isShowAlert
        ? "立即上传"
        : this.applyIsShow && !this.isShowAlert
        ? "立即申请"
        : this.editIsShowDlg
        ? "无需修改"
        : this.goFollowShow
        ? "去关注"
        : this.show
        ? this.jurisdictionList.SignupStatus !== "Success" || this.signupType == "summaryIsHandel"
          ? "知道了"
          : "加入"
        : "";
      return text;
    },
    content: {
      get() {
        let str = this.mailboxBindingDlg
          ? "您当前绑定的联系方式为邮箱，请先设置您的外呼号码"
          : this.editIsShowDlg
          ? this.editIsShowAccounts
          : this.applyIsShow || this.goFollowShow || this.show
          ? this.jurisdictionList.PopupMsg
          : "";
        return str;
      },
      set() {},
    },
    show_cancel_button() {
      return this.content == "该活动为非公开活动，如有专家访谈需求请联系对口销售" ? false : true;
    },
  },
  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();
      if (this.jurisdictionList.isActivityDetail) {
        this.$parent.getActivityDetail();
      }
    },
    /**
     *
     *
     *
     * 取消
     *
     *
     */
    cancelModal() {
      if (this.editIsShowDlg) {
        this.GoOutboundMobileIsGo();
      } else {
        this.initData();
        this.$emit("cancelShowBtn");
      }
      if (this.jurisdictionList.isActivityDetail) {
        this.$parent.getActivityDetail();
      }
    },
    /**
     *
     *
     *
     * 重置
     *
     *
     */
    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;
      this.editIsShowDlg = false;
    },

    async showhasPermissionBtn() {
      if (this.jurisdictionList.IsResearchSpecial) {
      } else {
        // isAudioVideo -- 3 产业视频
        let type =
          this.jurisdictionList.isAudioVideo == 1 ? "MicroAudio" : this.jurisdictionList.isAudioVideo == 2 ? "ActivityVideo" : this.jurisdictionList.isAudioVideo == 3 ? "MicroVideo" : "Activity";
        const res = await User.applyTry({
          TryType: type,
          DetailId: this.jurisdictionList.ActivityId,
        });
        if (res.Ret === 200) {
          uni.showModal({
            title: "",
            content: "提交申请成功，请耐心等待",
            showCancel: false,
            confirmColor: "#376cbb",
          });
        }
      }
      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);
      if (this.signupType == "summaryIsHandel" || this.jurisdictionList.SignupStatus !== "Success") return;
      this.addCalendarHandler();
    },
    //去关注
    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: "#376cbb",
        });
      } 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;
    },
    handleAddCalendar() {
      wx.getSetting({
        success: (res) => {
          // 判断是否已经授权
          if (!res.authSetting["scope.addPhoneCalendar"]) {
            wx.authorize({
              scope: "scope.addPhoneCalendar",
              success: () => {
                // 用户已授权，调用添加日程 API
                wx.showModal({
                  title: "提示",
                  content: "日历授权成功",
                  confirmText: "加入日历",
                  confirmColor: "#376cbb",
                  success: (res) => {
                    if (res.confirm) {
                      this.addCalendarHandler();
                    }
                  },
                });
              },
              fail(res) {
                // 用户拒绝授权，提示用户授权
                wx.showModal({
                  title: "提示",
                  content: "需要获取用户日历权限",
                  confirmText: "前往设置",
                  confirmColor: "#376cbb",
                  success(res) {
                    if (res.confirm) {
                      wx.openSetting(); // 打开小程序设置页面，可以让用户开启需要的权限
                    }
                  },
                });
              },
            });
          } else {
            this.addCalendarHandler();
          }
        },
      });
    },
    addCalendarHandler() {
      // 已经授权，调用添加日程 API
      let dateTime = new Date(this.jurisdictionList.ActivityTime);
      let timeOffset = this.jurisdictionList.ActivityType == 1 ? 900 : 7200;
      wx.addPhoneCalendar({
        title: this.jurisdictionList.ActivityTypeName, // 日程标题，必填项
        startTime: dateTime.getTime() / 1000, // 日程开始时间，必填项
        alarmOffset: timeOffset, // 线下活动，活动开始时间前2小时 || 线上活动，活动开始时间前15分钟
        success(res) {
          // 日程添加成功的回调函数
          wx.showToast({
            title: "添加日程成功",
            icon: "success",
            duration: 2000,
          });
        },
        fail(res) {
          console.log(res);
          // 日程添加失败的回调函数
          if (res.errMsg == "addPhoneCalendar:fail authorization refuesed") {
            wx.showToast({
              title: "添加失败，请确认系统日历已开启",
              icon: "none",
              duration: 2000,
            });
          }else if (res.errMsg == "addPhoneCalendar:fail auth deny") {
            wx.showToast({
              title: "添加失败，请确认允许小程序添加日历",
              icon: "none",
              duration: 2000,
            });
          } else {
            wx.showToast({
              title: "已取消添加",
              icon: "none",
              duration: 2000,
            });
          }
        },
      });
    },
  },
  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: #376cbb;
}
.u-model__footer__button.data-v-3626fcec {
  border-right: 1rpx solid #333;
}
</style>