horzi_rai_wxa/components/activity/showResearchDlg.vue

<template>
  <view class="show_Research_Dlg">
    <u-modal
      ref="modalResearch"
      async-close
      v-model="isShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="confirmModal"
      :show-cancel-button="!isShowView"
      :confirm-text="isShowView ? '知道了' : '确定'"
      cancel-text="取消"
      @cancel="cancelModal"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <block v-if="!checkResearchList.CheckPermission"> 签约买方研选套餐才可参与此活动，请联系对口销售 </block>
        <block v-else-if="!checkResearchList.CheckTime"> <rich-text :nodes="content"></rich-text></block>
        <block v-else-if="!checkResearchList.CheckPoints">
          <view class="title-box txt-check">
            点数不足，若想报名,<br />请联系对口销售
            <text style="display: inline-block; color: #3385ff" @click="promptTextHandler">升级套餐</text>
          </view>
          <view class="content-box">
            <text>当前剩余点数：</text>
            <text>{{ checkResearchList.CompanyPoints }}</text>
          </view>
          <view class="content-box">
            <text>本次会议扣除点数：</text>
            <text>{{ checkResearchList.ActivityPoints }}</text>
          </view>
        </block>
        <block v-else-if="!checkResearchList.CheckEmail">
          <text class="title-box">应上市公司要求，该会议报名需 提供邮箱，请填写您的工作邮箱</text>
          <view class="content-input">
            <input v-model="inputVal" type="text" placeholder="请输入正确的邮箱地址" />
          </view>
        </block>
        <block v-else-if="checkResearchList.CheckPoints">
          <view class="title-box"> 确定报名参加吗？ </view>
          <view class="content-box">
            <text>当前剩余点数：</text>
            <text>{{ checkResearchList.CompanyPoints }}</text>
          </view>
          <view class="content-box">
            <text>本次会议扣除点数：</text>
            <text>{{ checkResearchList.ActivityPoints }}</text>
          </view>
        </block>
      </view>
    </u-modal>
    <u-modal
      v-model="show"
      :show-title="false"
      confirm-text="知道了"
      :content-style="{ fontSize: '32rpx' }"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content slot-content-text">
        <rich-text :nodes="TextContent"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { User, activity, FreeButton } from "@/config/api.js";
export default {
  data() {
    return {
      content: "该活动已截止报名<br />若想参加，请联系对口销售",
      type: 3,
      inputVal: "",
      show: false,
      TextContent:
        "5万/年含无限量调研纪要查阅以及15次公开专家访谈或30次重点公司、专家小范围交流；<br /><br />10万/年含无限量调研纪要查阅以及40次公开专家访谈或80次重点公司、专家小范围交流或20次私享专家一对一",
    };
  },
  props: {
    isResearchModalShow: {
      default: false,
      type: Boolean,
    },
    checkResearchList: {
      default: {},
      type: Object,
    },
    jurisdictionList: {
      default: {},
      type: Object,
    },
  },
  watch: {},
  computed: {
    isShowView() {
      let list = this.checkResearchList;
      let isNum = !list.CheckPermission || !list.CheckPoints ? true : false;
      return isNum;
    },
    isShow: {
      get() {
        return this.isResearchModalShow;
      },
      set() {},
    },
  },
  methods: {
    cancelModal() {
      this.$emit("update:isResearchModalShow", false);
      this.$emit("update:checkResearchList", {});
    },
    promptTextHandler() {
      this.cancelModal();
      this.$nextTick(() => {
        this.show = true;
      });
    },
    async confirmModal() {
      if (!this.checkResearchList.CheckPermission || !this.checkResearchList.CheckTime || !this.checkResearchList.CheckPoints) {
        this.cancelModal();
        return;
      } else if (!this.checkResearchList.CheckEmail) {
        this.$refs.modalResearch.clearLoading();
        if (!this.inputVal)
          return uni.showToast({
            title: "邮箱不能为空",
            icon: "none",
            duration: 2000,
          });
        this.cancelModal();
        const res = await activity.activityEmailBinding({
          Email: this.inputVal,
        });
        if (res.Ret === 200) {
          this.$parent.researchPointsHandler(this.jurisdictionList.ActivityId, this.checkResearchList.childrenType,this.jurisdictionList);
        }
        this.inputVal = "";
        return;
      } else if (this.checkResearchList.CheckPoints) {
        this.$parent.myIsApplyHandler(this.jurisdictionList.ActivityId, this.checkResearchList.childrenType);
        this.cancelModal();
        return;
      }
    },
  },
};
</script>

<style lang="scss">
.show_Research_Dlg {
  .title-box {
    color: #333333;
    font-weight: 600;
    font-size: 32rpx;
    line-height: 44rpx;
    margin-bottom: 35rpx;
  }
  .content-box {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 44rpx;
    color: #333333;
    display: flex;
    justify-content: center;
    text:nth-child(2) {
      color: #3385ff;
    }
  }
  .content-input {
    display: flex;
    input {
      width: 100%;
      height: 78rpx;
      line-height: 78rpx;
      background: #f7f7f7;
      text-align: left;
      padding-left: 30rpx;
    }
  }
  .txt-check {
    text {
      margin-left: 8rpx;
    }
  }
}
.slot-content {
  width: 100%;
  padding: 50rpx;
  text-align: center;
  font-size: 32rpx;
  color: #0f1826;
  line-height: 48rpx;
}
.slot-content-text {
  text-align: left;
}
.seller-mobile {
  display: inline-block;
  color: #2979ff;
}
.u-model__footer__button.data-v-3626fcec {
  border-right: 1rpx solid #333;
}
</style>