crm-xcx/pages-roadshow/addActivity/byCell.vue

<template>
	<view class="addactiyity-container">
		<van-form>
			<van-field
				:value="formatRsLable(formData.selectResearchers[0].researcherId)" 
				is-link 
				readonly
				clickable
				name="picker"
				label="研究员"
				type="textarea"
				rows="1"
				autosize
				placeholder="选择研究员"
				@click.native="clickRsChoose(0,'disable')"
				disabled
			/>
			
			<van-field 
				:value="formatterLabelTime(formData.selectResearchers[0].startTime)"
				is-link 
				readonly 
				clickable
				name="datetimePicker" 
				label="开始时间" 
				placeholder="选择开始时间"
				@click.native="clickTimeChoose(0,'start')"
			/>
			
			<van-field 
				:value="formatterLabelTime(formData.selectResearchers[0].endTime)"
				is-link
				readonly
				clickable
				name="datetimePicker"
				label="结束时间"
				placeholder="选择结束时间"
				@click.native="clickTimeChoose(0,'end')"
			/>
			
			<van-field 
				:value="formData.activityType" 
				:disabled="edit_id||isRaiRole"
				is-link 
				readonly 
				clickable 
				name="picker" 
				label="活动类型"
				placeholder="选择活动类型" 
				@click.native="() => { if(edit_id||isRaiRole) return; isActivityPicker = true }"
			/>

			<van-field 
				:value="formData.roadshowType" 
				v-if="['路演','公开会议'].includes(formData.activityType)" 
				is-link
				readonly 
				clickable 
				name="picker" 
				:label="`${dynamic_prefix}形式`" 
				:placeholder="`选择${dynamic_prefix}形式`"
				@click.native="isRoadshowTypePicker = true" 
			/>

			<van-field 
				:value="formData.roadshowPlatform"
				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线上'" 
				clickable
				:label="`${dynamic_prefix}平台`" 
				:placeholder="`输入${dynamic_prefix}平台(eg：进门财经、腾讯会议)`" 
				@change="bindInputHandle('roadshowPlatform',$event)"
			/>

			<van-field 
				:value="formData.roadshowCity"
				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线下'" 
				is-link
				readonly
				clickable
				:label="`${dynamic_prefix}城市`" 
				:placeholder="`选择${dynamic_prefix}城市`"
				@click.native="clickAreaChoose" 
			/>

			<van-field 
				:value="formData.companyName" 
				v-if="['路演'].includes(formData.activityType)" 
				is-link 
				readonly
				clickable 
				label="客户名称" 
				placeholder="客户名称" 
				@click.native="goSearchCompany" 
			/>
			
			<view class="company-info" v-if="formData.activityType === '路演' && formData.companyId && companyInfo">
				<!-- ficc角色看ficc信息 -->
				<template v-if="!isRaiRole">
					<template v-if="companyInfo.EnglishCompany===1">
						<p>所属国家：{{companyInfo.EnglishCountry}}</p>
						<p>累计点击量：{{companyInfo.EnglishViewTotal}}</p>
					</template>
					<template v-else>
						<p>客户状态：{{ companyInfo.Status }}</p>
						<p>所属行业：{{ companyInfo.IndustryName }}</p>
						<p>开通品种：{{ companyInfo.PermissionName }}</p>
						<p>累计报告阅读次数：{{ companyInfo.ReportReadTotal }}</p> 
					</template>
				</template>
				<!-- 权益角色看权益信息 -->
				<template v-else>
					<p>客户状态：{{companyInfo.Status}}</p>
					<p>所属行业：{{companyInfo.IndustryName}}</p>
					<p>行业权限：{{companyInfo.PermissionName}}</p>
					<p>累计互动次数：{{companyInfo.ReportReadTotal}}</p>
				</template>
			</view>

			<van-field 
				:value="formData.meetingTheme" 
				v-if="['公开会议'].includes(formData.activityType)" 
				clickable
				label="会议主题" 
				type="textarea" 
				rows="1" 
				autosize 
				placeholder="请输入会议主题" 
				@change="bindInputHandle('meetingTheme',$event)"
			/>

			<van-field 
				:value="formData.partnersName" 
				v-if="['公开会议'].includes(formData.activityType)" 
				clickable
				label="合作方名称" 
				type="textarea" 
				rows="1" 
				autosize 
				placeholder="请输入合作方名称（多个合作方用','隔开）" 
				@change="bindInputHandle('partnersName',$event)"
			/>

			<van-field 
				:value="formData.activityClass" 
				v-if="['报告电话会'].includes(formData.activityType)" 
				is-link
				readonly
				clickable 
				label="活动类别" 
				placeholder="请选择活动类别" 
				@click.native="isActivityClassPicker = true" 
			/>

			<!-- 追加后的研究员 -->
			<view class="add-user-list" v-for="addindex in addResearchersIdx" :key="addindex" v-if="addResearchersIdx.length">
				<view class="del-cont" @click="delResearcherHandle(addindex)">
					<van-icon name="close" />
				</view>
				<van-field 
					:value="formatRsLable(formData.selectResearchers[addindex].researcherId)"
					is-link
					readonly
					clickable
					name="picker"
					label="研究员"
					placeholder="选择研究员"
					@click.native="clickRsChoose(addindex)"
				/>
				<van-field
					:value="formatterLabelTime(formData.selectResearchers[addindex].startTime)"
					is-link
					readonly
					clickable
					name="datetimePicker"
					label="开始时间"
					placeholder="选择开始时间"
					:formatter="formatterLabelTime"
					@click.native="clickTimeChoose(addindex,'start')"
				/>

				<van-field
					:value="formatterLabelTime(formData.selectResearchers[addindex].endTime)"
					is-link
					readonly
					clickable
					name="datetimePicker"
					label="结束时间"
					placeholder="选择结束时间"
					:formatter="formatterLabelTime"
					@click.native="clickTimeChoose(addindex,'end')"
				/>
			</view>

			<view class="add-user-btn" @click="addResearcherHandle"
				v-if="['路演', '公开会议'].includes(formData.activityType) && !edit_id">
				<van-icon name="add-o" />添加研究员
			</view>
		</van-form>

		<div class="submit-bot">
			<van-button type="primary" plain color="#3385FF" class="btn" size="small" block round @click="cancelHandle">取消</van-button>
			<van-button type="primary" color="#3385FF" class="btn" size="small" block round @click="submitHandle">确定</van-button>
		</div>


		<!-- 选择活动类型 -->
		<van-popup :show="isActivityPicker" position="bottom">
			<van-picker 
				show-toolbar 
				:columns="activiytyTypes" 
				:default-index="activiytyTypes.indexOf(formData.activityType)" 
				@confirm="confirmActivityType"
				@cancel="isActivityPicker=false" 
			/>
		</van-popup>
		
		<!-- 选择活动类别 -->
		<van-popup :show="isActivityClassPicker" position="bottom">
			<van-picker 
				show-toolbar 
				:columns="telTypeList"
				:default-index="telTypeList.indexOf(formData.activityClass)" 
				@confirm="confirmActivityClass"
				@cancel="isActivityClassPicker=false" 
			/>
		</van-popup>

		<!-- 选择路演形式 -->
		<van-popup :show="isRoadshowTypePicker" position="bottom">
			<van-picker 
				show-toolbar 
				:columns="['线上','线下']" 
				:default-index="['线上','线下'].indexOf(formData.roadshowType)"
				@confirm="confirmRoadshowType"
				@cancel="isRoadshowTypePicker=false" 
			/>
		</van-popup>

		<!-- 选择研究员 -->
		<van-popup :show="isResearcherPicker" position="bottom">
			<!-- 内部会议可多选研究员,且只有ficc会有内部会议 -->
			<template v-if="!['路演', '公开会议'].includes(formData.activityType)">
				<view class="select-rs-header">
					<text class="cancel" @click="cancelResearcher">取消</text>
					<text class="ensure" @click="confirmResearcher">确认</text>
				</view>
				<van-tree-select 
					:items="ficcReasearcherList" 
					:main-active-index="rs_picker.firstindex" 
					:active-id="rs_picker.id"
					@click-nav="clickFirstHandle" 
					@click-item="clickItemHandle" 
				/>
			</template>
			<template v-else>
				<van-cascader
					v-if="isResearcherPicker"
					v-model="this.formData.selectResearchers[this.selectRsIndex].researcherId"
					title="请选择研究员"
					active-color="#3385FF"
					:options="researcherList"
					@close="isResearcherPicker=false"
					@finish="chooseResearcher"
				/>
			</template>
		</van-popup>

		<!-- 选择时间 -->
		<van-popup :show="isTimePicker" position="bottom">
			<van-datetime-picker 
				:value="pickerForm.time" 
				type="datetime" 
				:formatter="formatterPickerTime"
				@confirm="confirmTime" 
				@cancel="() => {isTimePicker = false;pickerForm.time=''}" 
			/>
		</van-popup>

		<!-- 选择地区 -->
		<van-popup :show="isAreaPicker" position="bottom">
			<van-area
				:value="pickerForm.area"
				:area-list="areaList" 
				:columns-num="isRaiRole?3:2"
				@confirm="confirmArea" 
				@cancel="isAreaPicker = false"
			/>
		</van-popup>
	</view>
</template>

<script>
	import {
		addActivity,
		editActivity
	} from '@/api/roadshow/index.js';
	import {
		getDefaultOption
	} from './common.js';
	import mixin from './mixin.js';
	import { validateForm } from '../utils/validate.js';
	
	const moment = require('../utils/_moment.js');
	moment.locale('zh-cn'); 
	export default {
		mixins: [mixin],
		data() {
			return {
				defaultResearcher: []
			};
		},
		methods: {

			/* 设置默认状态 */
			initSetState(options) {
				const {
					RoleTypeCode
				} = JSON.parse(uni.getStorageSync('userInfo')) || null;
				const {
					defaultActivityType,
					activityTypeList
				} = getDefaultOption(RoleTypeCode, 1);

				this.activiytyTypes = activityTypeList;
				this.formData.activityType = defaultActivityType;
				if(this.isRaiRole){
					this.formData.activityType = "路演"
				}else{
					delete this.areaList.county_list
				}
				
				if(options.defaultOpt) {
					this.defaultResearcher = JSON.parse(options.defaultOpt);
					// 研究员默认结构 内部会议/电话会为数组
					
					this.formData.selectResearchers = ['内部会议','报告电话会'].includes(defaultActivityType) 
						? [{
								researcherId: [ this.defaultResearcher[0].researcherId ],
								startTime: this.defaultResearcher[0].startTime,
								endTime: this.defaultResearcher[0].endTime
							}]
						: this.defaultResearcher;
				}
				
				uni.setNavigationBarTitle({
					title: this.edit_id ? '修改活动' : '添加活动'
				})

			},
		},

		onLoad(options) {
			this.initSetState(options);
		},

		onShow() {
			this.getResearcherList();
			this.getTelType();
			
			if(uni.getStorageSync('roadshow_compantyId')) {
				this.formData.companyId = Number(uni.getStorageSync('roadshow_compantyId'));
        this.formData.englishCompany = Number(uni.getStorageSync('roadshow_isEnglishCompany'))
				this.getCompanyInfo();
				uni.removeStorageSync('roadshow_compantyId');
        uni.removeStorageSync('roadshow_isEnglishCompany');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addactiyity-container {
		padding-bottom: 200rpx;

		.add-user-btn {
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 0;
			color: #3385ff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.del-cont {
			font-size: 50rpx;
			color: #f00;
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 30rpx;
		}

		.submit-bot {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			height: 140rpx;
			padding: 0 150rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0px -2px 6px rgba(110, 119, 141, 0.07);

			.btn {
				// width: 100%;
				width: 260rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
		}

		.select-rs-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 20rpx;

			.cancel {
				color: #969799;
			}

			.ensure {
				color: #576b95;
			}
		}

	}
</style>
<style lang="scss">
	.addactiyity-container {
		.van-tree-select {
			.van-tree-select__item--active {
				color: #1989fa !important;
			}

			.van-sidebar-item--selected {
				border-color: #1989fa !important;
			}
		}
		.van-tree-select__item { font-weight: normal; }
		
		.company-info {
			background: #D5E6FF;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			view {
				margin: 12rpx 0;
				color: #666;
				text-indent: -140rpx;
				margin-left: 140rpx;
			}
		}
	}
</style>