horzi_rai_wxa/activityPages/activitySearch/activitySearch.vue

<template>
	<view class="container activity-content">
		<!-- tabs -->
		<view class="top-content">
			<!-- 搜索 -->
			<view class="searchTarget-header">
				<input type="text" placeholder="请输入关键字" placeholder-class="sea_ipt_placeholder" class="sea_ipt"
					v-model="searchTxt" focus="true" confirm-type="search" @confirm="searchHandle" />
				<icon type="search" size="15" class="sea_ico" />
				<view class="ipt-right">
					<icon type="clear" size="16" color="#E0E0E0" v-show="searchTxt" @click="clearIpt" />
					<text class="line">|</text>
					<text @click="searchHandle" style="color: #3385FF;">搜索</text>
				</view>
			</view>
			<view class="search-cont-top" v-if="!isShowSearch&&historySearchList.length">
				<view class="cont-tit">
					<text>搜索历史</text>
					<image src="@/static/img/empty_ico.png" class="empty_ico" @click="clearHistory"></image>
				</view>
				<view class="targetList">
					<view class="target-item" v-for="(item,index) in historySearchList" :key="index"
						@click="chooseTarget(item)">{{item}}</view>
				</view>
			</view>
			<!-- 选择 -->
			<view class="select-conyent" v-if="isShowSearch">
				<van-dropdown-menu active-color="#333333">
					<van-dropdown-item id="statusstate" :title="activeStateName" @close="closeTheWindow('statusstate')">
						<view class="menu-items">
							<view class="menu-items-box" @click="overallBtn('statusstate',key)"
								v-for="key in listActivityStaus" :key="key.Id">
								<view class="items-box">
									<u-icon v-if="key.IsChoose" name="checkbox-mark" color="#2C83FF" size="24"></u-icon>
								</view>
								<text>{{key.StatusName}}</text>
							</view>
						</view>
						<view style="background-color: #f8f8fa;width: 100%;">
							<view style="margin: 0 auto;width: 682rpx;border-bottom: 2rpx solid #E5E5E5;">
							</view>
						</view>
						<view class="menu-items">
						<view class="menu-items-box" @click="timeListBtn('statusstate', key)"
								v-for="key in activityTimeList" :key="key.Id">
								<view class="items-box">
									<u-icon v-if="key.IsChoose" name="checkbox-mark" color="#2C83FF" size="24"></u-icon>
								</view>
								<text>{{ key.StatusName }}</text>
						</view>
						</view>
						<view class="replacement-box">
							<view class="replacement">
								<text @click="replacementBtn('statusstate')" class="replacement-box">重置</text>
								<text @click="replacementConfirm('statusstate')">确定</text>
							</view>
						</view>
					</van-dropdown-item>
					<van-dropdown-item id="industry" :title="chartPermissionName" @close="closeTheWindow('industry')">
						<view class="decide">
							<view class="items-box">
								<u-icon v-if="isShowJurisdiction" name="checkbox-mark" color="#2C83FF" size="24">
								</u-icon>
							</view>
							<text @click="isJurisdiction">始终只展示有权限的行业</text>
						</view>
						<view style="background-color: #f8f8fa;width: 100%;">
							<view style="margin: 0 auto;width: 682rpx;border-bottom: 2rpx solid #E5E5E5;">	
							</view>
						</view>
						<view class="menu-items">
							<view class="menu-items-box" v-for="item in listChartPermission"
								:key="item.ChartPermissionId" @click="overallClick('industry',item)">
								<view class="items-box">
									<u-icon v-if="item.IsChoose" name="checkbox-mark"
										:color="isShowJurisdiction?'#ccc':'#2C83FF'" size="24"></u-icon>
								</view>
								<text>{{item.PermissionName}}</text>
							</view>
						</view>
						<view class="replacement">
							<text @click="replacementBtn('industry')" class="replacement-box">重置</text>
							<text @click="replacementConfirm('industry')">确定</text>
						</view>
					</van-dropdown-item>
					<van-dropdown-item id="genre" :title="activityTypeName" @close="closeTheWindow('genre')">
						<view class="menu-items">
							<view class="menu-items-box" @click="overallActivity('genre',item)"
								v-for="(item,index) in listActivityType" :key="item.ActivityTypeId">
								<view class="items-box">
									<u-icon v-if="item.IsChoose" name="checkbox-mark" color="#2C83FF" size="24">
									</u-icon>
								</view>
								<text>{{item.ActivityTypeName}}</text>
							</view>
						</view>
						<view class="replacement">
							<text @click="replacementBtn('genre')" class="replacement-box">重置</text>
							<text @click="replacementConfirm('genre')">确定</text>
						</view>
					</van-dropdown-item>



				</van-dropdown-menu>
			</view>

		</view>
		<view class="box-content" v-if="haveData" :class="{head:tabsActive==1}">
			<view class="content-list" v-for="(item,index) in collectList" :key="index">
				<view class="list-top" @click="goDetail(item)">
					<view class="list-top-box">
						<text class="title">{{item.ActivityTypeName}}</text>
						<view class="city" v-if="item.City">
							<image src="../../static/img/location.png" mode=""></image>
							<text>{{item.City}}</text>
						</view>
					</view>
					<text style="color: #2ACDD9; font-size: 26rpx;" v-if="item.ActiveState==1">未开始</text>
					<text style="color: #FF4040; font-size: 26rpx;" v-if="item.ActiveState==2">进行中</text>
					<text style="color: #999999; font-size: 26rpx;" v-if="item.ActiveState==3">已结束</text>
				</view>
				<view class="" style="display: flex;">
					<view class="list-center" @click="goDetail(item)">
						<text class="title" v-if="item.IsBrackets==1">{{item.ActivityName}}</text>
						<text class="title-two" v-else>{{item.ActivityName}}</text>
						<view class="setting-center">
							<view class="">
								<view class="box-expert" style="padding-bottom: 30rpx ;"
									v-if="item.ActivityTypeName=='专家电话会'||item.ActivityTypeName=='专家线下沙龙'">
									<view style="width: 140rpx;">
										专家背景：
									</view>
									<view style="width:400rpx;"><rich-text :nodes="item.Expert"></rich-text></view>
								</view>
								<text style="padding-bottom: 30rpx ;"
									v-if="item.ActivityTypeName=='公司调研电话会'||item.ActivityTypeName=='公司线下调研'">嘉宾：{{item.DistinguishedGuest}}</text>
								<text style="padding-bottom: 30rpx ;"
									v-if="item.ActivityTypeName=='分析师电话会'||item.ActivityTypeName=='分析师线下沙龙'">主讲人：{{item.Speaker}}</text>
							</view>
						</view>
						<text style="padding-bottom: 30rpx ;">活动时间：{{item.ActivityTimeText}}</text>
					</view>

					<view class="" style="display: flex;align-items: center;padding-right: 30rpx;">
						<u-icon style="padding-bottom: 30rpx ;" name="arrow-right" color="#BDBDBD" size="34"></u-icon>
					</view>
				</view>
				<view class="list-bottom"
					v-if="item.ActiveState==1 &&(item.IsLimitPeople==1 && item.ActivityTypeName=='公司调研电话会')">
					<view class="multi-text">
						<text v-if="item.IsSignup!==1"
							@click="wanttosignup(item.ActivityId)">我要报名（{{item.SignupNum}}/{{item.LimitPeopleNum}}）</text>
						<text v-else
							@click="signupCancel(item.ActivityId,2,item.ActivityTime)">{{item.SignupType ==1?'取消外呼':'取消报名'}}（{{item.SignupNum}}/{{item.LimitPeopleNum}}）</text>

					</view>
				</view>
				<view class="list-bottom" v-else-if="item.ActiveState==1">
					<view class="multi"
						v-if="item.ActivityTypeId==1||item.ActivityTypeId==2||(item.ActivityTypeId==3&&item.IsLimitPeople==0)">
						<text class="multi-outbound" v-if="item.IsSignup!==1"
							@click="signupAdd(item.ActivityId,1)">预约外呼</text>
						<text class="multi-outbound" v-else
							@click="signupCancel(item.ActivityId,1,item.ActivityTime)">取消外呼</text>
						<text class="multi-remind" v-if="item.IsCancelMeetingReminder==0"
							style="border-left: 1px solid #E5E5E5;"
							@click="meetingReminderAdd(item.ActivityId)">会议提醒</text>
						<text class="multi-remind" v-else style="border-left: 1px solid #E5E5E5;"
							@click="meetingReminderCancel(item.ActivityId)">取消会议提醒</text>
					</view>
					<view class="multi-text" v-else>
						<text v-if="item.IsSignup!==1"
							@click="signupAdd(item.ActivityId,3)">我要报名（{{item.SignupNum}}/{{item.LimitPeopleNum}}）</text>
						<text v-else
							@click="signupCancel(item.ActivityId,3,item.ActivityTime)">取消报名（{{item.SignupNum}}/{{item.LimitPeopleNum}}）</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage>1" />
		</view>
		<view class="nodata" v-else>
			<image src="@/static/img/act_search.png" mode="" class="nodata_ico"></image>
			<text>未找到搜索结果</text>
		</view>
		<modalDialog :isShow="isShow" :signupType="signupType" :goFollow="goFollow" :signupStatus="signupStatus"
			:isCancelShow="isCancelShow" :idTypeCancel="idTypeCancel" @cancelShowBtn="cancelEnsure"
			:isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :hasPermission="hasPermission"
			:jurisdictionList="jurisdictionList" />
		<areaCode :isAreaCode="isAreaCode" :areaCode="areaCode" />
		<view class="select-box">
			<u-popup v-model="selectShow" mode="bottom">
				<view style="color: #333333;font-size: 28rpxrpx;">请选择参会方式</view>
				<view style="color: #2C83FF;" @click="signupAdd('id',1)">预约外呼</view>
				<view style="color: #2C83FF;" @click="signupAdd('id',2)">自主拨入</view>
				<view style="color: #A9AFB8;" @click="selectShow=false">取消</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		activity,
		User
	} from "@/config/api.js"
	import {
		Throttle
	} from '@/config/util.js'
	import modalDialog from '@/components/modalDialog.vue'
	import myMixin from '../index.js'
	let app = getApp()
	export default {
		data() {
			return {
				searchTxt: '',
				isShowSearch: false,
				status: 'loadmore',
				totalPage: '',
				haveData: true,
				activeState: "1,2,3", //活动进行状态
				activeStateName: '全部状态',
				selectShow: false,
			}
		},
		mixins: [myMixin],
		components: {
			modalDialog
		},
		onLoad(option) {
			this.$store.dispatch("checkHandle",'load').then(res=>{
				app.globalData.isAuth = res.IsAuth;
				app.globalData.isBind = res.IsBind;
				if (res.IsAuth) { //未授权
					uni.navigateTo({
						url: '/pages/authGuide/authGuide'
					})
				} else if (res.IsBind && !res.IsAuth) { //已授权未绑定
					uni.navigateTo({
						url: '/pages/login/login'
					})}
				if (this.$db.get('historySearchListActivity')) {
					let historyList = JSON.parse(this.$db.get('historySearchListActivity'));
					this.historySearchList = historyList;
				}
				if (option.text) {
					this.activeState = option.statesId //活动进行状态
					this.activityTypeIds = option.typeIds //活动类型id 多个用 , 隔开
					this.chartPermissionIds = option.chartIds //行业id 多个用 , 隔开
					this.activeStateName = option.stateName
					this.chartPermissionName = option.chartName
					this.activityTypeName = option.typeName
					this.searchTxt = option.text
					this.activityTimeStatus = option.timeStatus;
					this.isGain = false
					this.isShowSearch = true
				} else {
					this.isGain = true
				}
				if (option.text) {
					this.searchHandle()
				}
				this.countryCcode()
			})
			
		},
		/* 触底 */
		onReachBottom: Throttle(function() {
			if (this.status === 'nomore') return;
			this.status = 'loading';
			this.page_no++;
			this.getList()
		}),
		methods: {
			preserve() {
			const arr = []
			const str = []
			this.listActivityStaus.forEach(item => {
				if (item.IsChoose) {
					arr.push(item.Id)
					str.push(item.StatusName)
				}
			})
			if (str.length == this.listActivityStaus.length) {
				this.activeStateName = '所有状态'
			} else if (str.length <= 0) {
				this.activeStateName = '活动状态'
			} else {
				this.activeStateName = str.join(',')
			}
			this.activeState = arr.join(',')
			const arrTwo = []
			this.activityTimeList.forEach(key => {
				if (key.IsChoose) {
					arrTwo.push(key.Id)
				}
			})
			this.activityTimeStatus = arrTwo.join(',')
			const hyArr = []
			const hyStr = []
			this.listChartPermission.forEach(key => {
				if (key.IsChoose) {
					hyArr.push(key.ChartPermissionId)
					hyStr.push(key.PermissionName)
				}
			})
			if (hyStr.length == this.listChartPermission.length) {
				this.chartPermissionName = '所有行业'
			} else if (hyStr.length <= 0) {
				this.chartPermissionName = '行业分类'
			} else {
				this.chartPermissionName = hyStr.join(',')
			}
			this.chartPermissionIds = hyArr.join(',')
			const lxArr = []
			const lxStr = []
			this.listActivityType.forEach(key => {
				if (key.IsChoose) {
					lxArr.push(key.ActivityTypeId)
					lxStr.push(key.ActivityTypeName)
				}
			})
			if (lxStr.length == this.listActivityType.length) {
				this.activityTypeName = '所有活动'
			} else if (lxStr.length <= 0) {
				this.activityTypeName = '活动类型'
			} else {
				this.activityTypeName = lxStr.join(',')
			}
			this.activityTypeIds = lxArr.join(',')
			this.getList()
		},
		shareOption() {
			const arr = this.activeState.split(',').map(item => item - 0)
			this.listActivityStaus.forEach(item => {
				if (arr.indexOf(item.Id) !== -1) {
					item.IsChoose = true
				} else {
					item.IsChoose = false
				}
			})
			const arrTwo = this.activityTimeStatus.split(',').map(item => item - 0)
			this.activityTimeList.forEach(item => {
				if (arrTwo.indexOf(item.Id) !== -1) {
					item.IsChoose = true
				} else {
					item.IsChoose = false
				}
			})
			const hyarr = this.chartPermissionIds.split(',').map(item => item - 0)
			this.listChartPermission.forEach(key => {
				if (hyarr.indexOf(key.ChartPermissionId) !== -1) {
					key.IsChoose = true
				} else {
					key.IsChoose = false
				}
			})
			const lxarr = this.activityTypeIds.split(',').map(item => item - 0)
			this.listActivityType.forEach(key => {
				if (lxarr.indexOf(key.ActivityTypeId) !== -1) {
					key.IsChoose = true
				} else {
					key.IsChoose = false
				}
			})
			this.preserve()
		},
			searchHandle() {
				if (this.searchTxt) {
					//添加搜索记录
					if (!this.historySearchList.includes(this.searchTxt)) {
						this.historySearchList.unshift(this.searchTxt);
						this.$db.set('historySearchListActivity', JSON.stringify(this.historySearchList))
					}
					this.isShowSearch = true
					if (this.isGain) {
						this.empty()
						this.getList()
					}
					this.getUserSearchContent()
				} else {
					this.$util.toast('请输入关键字')
				}
			},
			// 选择历史搜索
			chooseTarget(item) {
				this.searchTxt = item;
				this.collectList = [];
				this.page_no = 1;
				this.searchHandle()
			},
			/* 历史搜索清空 */
			clearHistory() {
				this.historySearchList = [];
				this.$db.del('historySearchListActivity');
			},
			//获取列表
			getList() {
				activity.getActivityList({
					PageSize: this.pageSize,
					CurrentIndex: this.page_no,
					ActiveState: this.activeState, //活动进行状态
					ActivityTypeIds: this.activityTypeIds, //活动类型id 多个用 , 隔开
					ChartPermissionIds: this.chartPermissionIds, //行业id 多个用 , 隔开
					KeyWord: this.searchTxt,
					WhichDay:this.activityTimeStatus
				}).then(res => {
					if (res.Ret !== 200) return
					this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
					this.totalPage = res.Data.Paging.Pages; //总页数
					if (this.page_no === 1) {
						this.collectList = res.Data.List || [];
						this.haveData = this.collectList.length ? true : false
						if (this.refresh) {
							uni.stopPullDownRefresh();
							this.refresh = false;
						}
					} else {
						this.collectList.push(...res.Data.List)
					}
				})
			},
			//获取活动详情接口
			getUserSearchContent(name) {
				activity.getUserSearchContent({
					IsShowJurisdiction: this.isId
				}).then(res => {
					if (this.isGain) {
						res.Data.ListActivityStaus.forEach(item => {
							item.IsChoose = true
						})
					}
					this.isShowJurisdiction = res.Data.IsShowJurisdiction
					this.listActivityStaus = res.Data.ListActivityStaus
					this.listActivityType = res.Data.ListActivityType
					this.listChartPermission = res.Data.ListChartPermission || []
					this.listChartPermissionInit = res.Data.ListChartPermission2
					if (this.isGain) {
						// this.preserve()
					} else {
						this.shareOption()
					}
					if (name == 'traverse') {
						const hyArr = []
						this.listChartPermission.forEach(key => {
							if (key.IsChoose) {
								hyArr.push(key.ChartPermissionId)
							}
						})

						this.chartPermissionIds = hyArr.join(',')
					}
				})
			},
			empty() {
				this.listActivityStaus.forEach(item => item.IsChoose = true)
				this.activeState = '1,2,3'
				this.activeStateName = '全部状态'
				this.chartPermissionIds = ''
				this.activityTimeList.forEach(key => {key.IsChoose=false})
				this.activityTimeStatus=''
				this.listChartPermission.forEach(item => item.IsChoose = false)
				this.chartPermissionName = '行业分类'
				this.listActivityType.forEach(item => item.IsChoose = false)
				this.activityTypeIds = ''
				this.activityTypeName = '活动类型'
			},
			/* 表单清空 */
			clearIpt() {
				this.searchTxt = ''
				this.collectList = []
				this.haveData = true
				this.isShowSearch = false
			},
			//取消弹框的确认事件
			cancelEnsure(obj, type, unm) {
				this.init()
				if (obj.cutId == 0 || obj.name == 'conference') return
				this.modification(obj.cutId, 'IsSignup', obj.state)
				this.collectList.forEach(item => {
					if (obj.cutId == item.ActivityId) {
						item.IsSignup = obj.state
						if (unm) {
							item.SignupNum = item.SignupNum - 1
							this.modification(obj.cutId, 'SignupNum', item.SignupNum > 0 ? item.SignupNum - 1 : 0)
						} else {
							this.modification(obj.cutId, 'SignupNum', item.SignupNum + 1)
							item.SignupNum = item.SignupNum + 1
						}
					}
				})
			},
			//添加会议提醒接口
			meetingReminderAdd(id) {
				if (app.globalData.isBind && !app.globalData.isAuth) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				activity.meetingReminderAdd({
					ActivityId: id
				}).then(res => {
					if (res.Ret == 200) {
						this.hasPermission = res.Data.HasPermission
						if (this.hasPermission == 1) {
							if (res.Data.GoFollow && res.Data.SignupStatus !== 'Success' || !res.Data
								.GoFollow) {
								this.isShow = true
							} else {
								this.goFollow = res.Data.GoFollow
							}
							this.signupType = 999
							this.signupStatus = res.Data.SignupStatus
							this.idTypeCancel = {
								cutId: res.Data.ActivityId,
								state: 1,
								name: 'conference'
							}
							this.collectList.forEach(item => {
								if (id == item.ActivityId) {
									item.IsCancelMeetingReminder = 1
								}
								this.modification(id, 'IsCancelMeetingReminder', 1)
							})
						} else if (this.hasPermission == 2) {
							this.jurisdictionList.SellerMobile = res.Data.SellerMobile
							this.jurisdictionList.PopupMsg = res.Data.PopupMsg
							this.isShowhasPermission = true
						} else if (this.hasPermission == 3 || this.hasPermission == 4) {
							this.jurisdictionList.PopupMsg = res.Data.PopupMsg
							this.applyForIsShow = true
						}

					}
				})
			},
			//取消会议提醒接口
			meetingReminderCancel(id) {
				activity.meetingReminderCancel({
					ActivityId: id
				}).then(res => {
					if (res.Ret == 200) {
						uni.showModal({
							confirmText: '知道了',
							confirmColor: '#3385FF',
							content: res.Msg,
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.collectList.forEach(item => {
										if (id == item.ActivityId) {
											item.IsCancelMeetingReminder = 0
										}
										this.modification(id, 'IsCancelMeetingReminder', 0)
									})
								}
							}
						})
					}
				})
			},
			modification(id, type, num) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				if (prevPage.$page.fullPath == "/pages/activity/activity") {
					const index = prevPage.$vm.collectList.findIndex(item => item.ActivityId == id)
					if(index>=0) {
					prevPage.$vm.collectList[index][type] = num
					}


				}
			}

		},
		onShow() {
			this.$store.dispatch("statistics",{PageType:'ActivitSearch'})
		},
		/**
		 * 用户点击分享
		 */
		onShareAppMessage: function(res) {
			return {
				title: '活动',
				path: '/activityPages/activitySearch/activitySearch?statesId=' + this.activeState + '&typeIds=' + this
					.activityTypeIds + '&chartIds=' + this.chartPermissionIds + '&stateName=' + this.activeStateName +
					'&chartName=' + this.chartPermissionName + '&typeName=' + this.activityTypeName + '&text=' + this
					.searchTxt +"&timeStatus=" + this.activityTimeStatus,
				success: (res) => {},
				fail: (err) => {}
			}
		},
		/* 下拉刷新 */
		onPullDownRefresh: Throttle(function() {
			this.page_no = 1;
			this.refresh = true;
			if (this.tabsActive == 0) {
				this.getList()
			} else {
				this.getScheduleList()
			}
		}),
	}
</script>

<style scoped lang="scss">
	@import '../index.scss';
</style>