horzi_rai_wxa/components/activity/purchaserActivityList.vue

<template>
  <block v-if="isLoad">
    <view class="purchaser-activity-list" v-if="collectList && collectList.length > 0">
      <view class="purchaser-activity-box" v-for="item in collectList" :key="item.ActivityId" :style="{ 'border-color': item.ActivityType == 1 ? '#8FA4C4' : '#E7E0CD' }">
        <view class="purchaser-activity-state">
          <image v-if="item.ActiveState == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_started_activity.png" class="img-status"></image>
          <image v-else-if="item.ActiveState == 2" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/in_progress_activity.png" class="img-status"></image>
          <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/end_activity.png" class="img-status"></image>
        </view>
        <view class="purchaser-activity-head">
          <text :class="item.ActivityType == 1 ? 'online' : 'offline'" class="activity-which-line">{{ item.ActivityType == 1 ? "线上" : "线下" }}</text>
          <text class="activity-label-text">
            {{ item.ActivityTypeName }}
          </text>
          <text class="activity-label-text">
            {{ item.Label }}
          </text>
        </view>
        <view class="activity-title text_twoLine" @click="goDetailCheck(item)">
          <image class="recommend-icon" v-if="item.TopTime > 0 && item.ActiveState == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/recommend_YX.png"></image>
          <image v-if="item.IsResearchPoints" src="https://hzstatic.hzinsights.com/cygx/icon/Research_Points.png"></image>
          <image v-else-if="item.IsExternalLabel" src="https://hzstatic.hzinsights.com/cygx/icon/activity_external.png"></image>
          {{ item.ActivityName }}
        </view>
        <view class="activity-time-city-row" @click="goDetailCheck(item)">
          <text class="activity-time">{{ item.SourceType == 2 ? "" : item.ActivityTimeText }}</text>
          <view class="activity-city" v-if="item.City">
            <image src="https://hzstatic.hzinsights.com/cygx/icon/location-new.png"></image>
            {{ item.City }}
          </view>
        </view>
        <view class="activity-buttons-row" v-if="isUserBindingPhoneNumber">
          <block v-if="item.ActiveState == 1">
            <text v-if="item.IsShowOutboundCall && item.ActivityTypeId == 1" class="main-button" @click="signupCheck(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
            <text v-if="item.IsShowAppointment" @click="summaryHandelCheck(item)">{{ item.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</text>
            <text v-if="item.IsShowMeetingReminder" @click="meetingReminderCheck(item.ActivityId, item.IsCancelMeetingReminder)">
              {{ item.IsCancelMeetingReminder == 0 ? "消息提醒" : "取消提醒" }}
            </text>
            <text v-if="item.IsShowHelpSsk" @click="askingCheck(item)">帮我带问</text>
            <text v-if="item.IsShowOutboundCall && item.ActivityTypeId != 1" class="main-button" @click="signupCheck(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
            <text v-if="item.IsShowDetails" @click="goDetailCheck(item)" class="main-button">查看详情</text>
            <block v-if="item.IsShowSignup">
              <block v-if="item.IsCClassMeeting && !item.IsYidongConduct">
                <text class="main-button" @click="signupCheck(item, 3, 'CClass')">{{ item.IsSignup == 1 ? "取消报名" : "我要报名" }}</text>
              </block>
              <block v-else>
                <text class="main-button" v-if="item.IsSignup !== 1" @click="wanttosignupCheck(item)">我要报名</text>
                <text class="main-button" v-else @click="signupCheck(item, 2)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
              </block>
            </block>
          </block>
          <view class="bottom-box real-time" v-if="item.ActiveState == 2 && item.ActivityTypeId == 1">
            <text class="main-button" @click="askingCheck(item, '提问')">实时提问</text>
          </view>
        </view>
      </view>
      <slot name="finished"></slot>
      <SelectPopup :selectShow.sync="selectShow" @signupIsAddOfCancel="signupIsAddOfCancel" :selectYdong="selectYdong" />
      <!-- 所有自定义弹框 -->
      <modalDialog
        :isShow="isShow"
        :signupType="signupType"
        :goFollow="goFollow"
        :hasPermission="hasPermission"
        :jurisdictionList="jurisdictionList"
        :editIsShow="editIsShow"
        :isCancelShow="isCancelShow"
        :idTypeCancel="idTypeCancel"
        :countryCode="countryCode"
        :mobileEdit="mobileEdit"
        :goOnNextStep="goOnNextStep"
        :isShowhasPermission="isShowhasPermission"
        :applyForIsShow="applyForIsShow"
        :mailboxBinding="mailboxBinding"
      />
      <ShowResearchDlg :isResearchModalShow.sync="isResearchModalShow" :jurisdictionList="jurisdictionList" :checkResearchList.sync="checkResearchList" />
    </view>
    <slot v-else></slot>
  </block>
  <view v-else> </view>
</template>

<script>
import myActivityMixin from "@/components/activity/indexActivity.js";
import modalDialog from "@/components/modalDialog.vue";
import SelectPopup from "@/components/activity/selectPopup";
import { activity } from "@/config/api.js";
import ShowResearchDlg from "@/components/activity/showResearchDlg.vue";
export default {
  mixins: [myActivityMixin],
  components: { modalDialog, SelectPopup, ShowResearchDlg },
  props: {
    // 1-未开始、进行中 0-已结束
    activityType: {
      type: Number,
      default: 1,
    },
    whichDay: {
      type: String,
      default: "",
    },
    typeName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      pageSize: 10,
      page_no: 1,
      collectList: [],
      pages: 0,
      isLoad: false,
    };
  },
  methods: {
    // 获取列表数据
    async getActivityList() {
      const res = await activity.getActivityListNew({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        IsResearch: true,
        ActiveState: this.activityType == 1 ? "" : 3,
        WhichDay: this.whichDay,
        ActivityTypeId: this.typeName,
      });
      if (res.Ret === 200) {
        if (this.page_no === 1) {
          this.collectList = res.Data.List || [];
        } else {
          this.collectList = this.collectList.concat(res.Data.List || []);
        }
        this.pages = res.Data.Paging.Pages || 0;
        this.isLoad = true;
      }
    },
    reloadActivityList() {
      this.page_no = 1;
      this.getActivityList();
    },
    loadActivityMore() {
      this.page_no++;
      this.getActivityList();
    },
  },
  created() {
    // this.getActivityList()
  },
};
</script>

<style scoped lang="scss">
// 从查研观向11.0 版本开始陆续更换各个页面的页面主题。先从研选页面开始
.purchaser-activity-box {
  width: 100%;
  padding: 40rpx 20rpx 30rpx;
  border-top: solid 10rpx;
  border-radius: 16rpx;
  background-color: white;
  margin-bottom: 20rpx;
  position: relative;
  .purchaser-activity-state {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 42rpx;
    image {
      width: 122rpx;
      height: 42rpx;
    }
  }
  .purchaser-activity-head {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    .activity-which-line {
      min-width: 110rpx;
      height: 40rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      line-height: 34rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333333;
      font-weight: 500;
    }
    .online {
      background-color: #dfe8ff;
    }
    .offline {
      background-color: #f2e8cc;
    }
    .activity-label-text {
      white-space: nowrap;
      margin-left: 20rpx;
      background-color: #f0f1f3;
      color: #333333;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
      height: 40rpx;
      min-width: 154rpx;
      padding: 0 12rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        padding: 4rpx 12rpx;
        text-align: center;
      }
    }
  }
  .activity-title {
    font-weight: 700;
    margin-bottom: 20rpx;
    image {
      width: 73rpx;
      height: 30rpx;
      vertical-align: bottom;
      margin-right: 8rpx;
      margin-bottom: 4rpx;
    }
    .recommend-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }
  .activity-time-city-row {
    display: flex;
    margin-bottom: 40rpx;
    .activity-time {
      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      color: #333333;
      margin-right: 20rpx;
      white-space: nowrap;
    }
    .activity-city {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      line-height: 34rpx;
      color: #376cbb;
      overflow: hidden;
      image {
        height: 24rpx;
        min-width: 24rpx;
        width: 24rpx;
      }
      text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .activity-buttons-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text {
      height: 52rpx;
      min-width: 136rpx;
      width: 136rpx;
      padding: 4rpx 20rpx;
      box-sizing: border-box;
      color: #376cbb;
      background-color: white;
      border: solid 2rpx #376cbb;
      white-space: nowrap;
      font-size: 24rpx;
      line-height: 44rpx;
      margin-left: 20rpx;
      border-radius: 52rpx;
    }
    .main-button {
      color: white;
      background-color: #376cbb;
    }
  }
}
</style>