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,index) in collectList" :key="item.ActivityId"
			:style="{'border-color':item.ActivityType==1?'#8FA4C4':'#E7E0CD'}">
				<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="goDetail(item)">
					<image v-if="item.IsResearchPoints" src="https://hzstatic.hzinsights.com/cygx/icon/Research_Points.png"></image>
					<image v-else-if="item.IsResearch" src="https://hzstatic.hzinsights.com/cygx/icon/Research_normal.png"></image>
					<image v-if="item.IsExternalLabel" src="https://hzstatic.hzinsights.com/cygx/icon/activity_external.png"></image>
					{{ item.ActivityName }}
				</view>
				<view class="activity-time-city-row" @click="goDetail(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">
					<block v-if="item.ActiveState == 1">
						<text v-if="item.IsShowOutboundCall && item.ActivityTypeId == 1"
						class="main-button" @click="signupIsAddOfCancel(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
						<text v-if="item.IsShowAppointment" @click="summaryIsHandel(item)">{{ item.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</text>
						<text v-if="item.IsShowMeetingReminder" @click="meetingReminderAdd(item.ActivityId, item.IsCancelMeetingReminder)">
							{{ item.IsCancelMeetingReminder == 0 ? "消息提醒" : "取消提醒" }}
						</text>
						<view v-if="item.IsShowHelpSsk">
							<text @click="askingGo(item)">帮我带问</text>
						</view>
						<text v-if="item.IsShowOutboundCall && item.ActivityTypeId != 1"
						 class="main-button" @click="signupIsAddOfCancel(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
						<text v-if="item.IsShowDetails" @click="goDetail(item)" class="main-button">查看详情</text>
						<block v-if="item.IsShowSignup">
							<block v-if="item.IsCClassMeeting && !item.IsYidongConduct">
								<text class="main-button" @click="signupIsAddOfCancel(item, 3, 'CClass')">{{ item.IsSignup == 1 ? "取消报名" : "我要报名" }}</text>
							</block>
							<block v-else>
								<text class="main-button" v-if="item.IsSignup !== 1" @click="wanttosignup(item)">我要报名</text>
								<text class="main-button" v-else @click="signupIsAddOfCancel(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="askingGo(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"
			/>
		</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";
	
	export default {
		mixins: [myActivityMixin],
		components:{modalDialog,SelectPopup},
		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;
		.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;
			}
		}
		.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>