crm-xcx/pages-approve/activity/detail.vue

<template>
	<view class="activity-detail" v-if="info">
		<image :src="statusImg" mode="aspectFill" class="status-img" v-if="statusImg"></image>
		<!-- 路演 -->
		<block v-if="['路演','沙龙'].includes(info.RsCalendarItem.ActivityType)">
			<view class="section white-wrap">
				<view class="info-item flex">
					<view class="label">活动时间:</view>
					<view v-if="info.RsCalendarResearcherItem.StartDate === info.RsCalendarResearcherItem.EndDate">
						{{info.RsCalendarResearcherItem.StartDate}}({{info.RsCalendarResearcherItem.StartWeek}})
							{{info.RsCalendarResearcherItem.StartTime.substr(0,5)}}~{{info.RsCalendarResearcherItem.EndTime.substr(0,5)}}
					</view>
					<view v-else>
						{{info.RsCalendarResearcherItem.StartDate}}({{info.RsCalendarResearcherItem.StartWeek}})
							{{info.RsCalendarResearcherItem.StartTime.substr(0,5)}}~{{info.RsCalendarResearcherItem.EndDate}}({{info.RsCalendarResearcherItem.EndWeek}}){{info.RsCalendarResearcherItem.EndTime.substr(0,5)}}
					</view>
				</view>
				<view class="info-item flex" v-if="Role === 'seller'">
					<view class="label">研究员:</view>
					<view>{{info.RsCalendarResearcherItem.ResearcherName}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">活动类型:</view>
					<view>{{info.RsCalendarItem.ActivityType}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">路演形式:</view>
					<view>{{info.RsCalendarItem.RoadshowType}}</view>
				</view>
				<view class="info-item flex" v-if="info.RsCalendarItem.RoadshowPlatform">
					<view class="label">路演平台:</view>
					<view>{{info.RsCalendarItem.RoadshowPlatform}}</view>
				</view>
				<view class="info-item flex" v-if="info.RsCalendarItem.City">
					<view class="label">路演城市:</view>
					<view>{{info.RsCalendarItem.Province}}{{info.RsCalendarItem.City}}{{ info.RsCalendarItem.District||''}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">客户名称:</view>
					<view>{{info.CompanyDetail.CompanyName}}</view>
				</view>
			</view>
			<view class="section white-wrap">
				<!-- 权益客户显示 -->
				<template v-if="Role.includes('rai')">
					<view class="info-item flex">
						<view class="label">客户状态:</view>
						<view>{{info.CompanyDetail.Status}}</view>
					</view>
					<view class="info-item flex">
						<view class="label">所属行业:</view>
						<view>{{info.CompanyDetail.IndustryName}}</view>
					</view>
					<view class="info-item flex">
						<view class="label">行业权限:</view>
						<view>{{info.CompanyDetail.PermissionName}}</view>
					</view>
					<view class="info-item flex">
						<view class="label">累计互动次数:</view>
						<view>{{info.CompanyDetail.ReportReadTotal}}</view>
					</view>
				</template>
				<template v-else>
					<template v-if="info.CompanyDetail.EnglishCompany===1">
						<view class="info-item flex">
							<view class="label">所属国家:</view>
							<view>{{info.CompanyDetail.EnglishCountry}}</view>
								</view>
						<view class="info-item flex">
							<view class="label">累计点击量:</view>
							<view>{{info.CompanyDetail.EnglishViewTotal}}</view>
								</view>
					</template>
					<template v-else>
						<view class="info-item flex">
							<view class="label">客户状态:</view>
							<view>{{info.CompanyDetail.Status}}</view>
						</view>
						<view class="info-item flex">
							<view class="label">所属行业:</view>
							<view>{{info.CompanyDetail.IndustryName}}</view>
						</view>
						<view class="info-item flex">
							<view class="label">开通品种:</view>
							<view>{{info.CompanyDetail.PermissionName}}</view>
						</view>
						<view class="info-item flex">
							<view class="label">累计阅读报告次数:</view>
							<view>{{info.CompanyDetail.ReportReadTotal}}</view>
						</view>
					</template>
				</template>
          <view class="line"></view>
          <view class="info-item flex" v-if="Role === 'researcher'">
            <view class="label">提交销售:</view>
            <view>{{info.RsCalendarItem.SysUserRealName}}</view>
          </view>
          <view class="info-item flex">
            <view class="label">提交时间:</view>
            <view>{{info.RsCalendarItem.CreateTime|formatTime}}</view>
          </view>
		 <view class="info-item flex" v-if="['rai_seller','rai_group'].includes(Role)">
			<view class="label">提交人:</view>
			<view>
				{{info.RsCalendarItem.SysUserRealName}}
			</view>
		 </view>
			</view>
			<view class="section white-wrap"
				v-if="info.RsCalendarResearcherItem.Status==2||info.RsCalendarResearcherItem.Status==3">
				<view class="info-item flex">
					<view class="label">审批时间:</view>
					<view>
						{{info.RsCalendarResearcherItem.Status==2?info.RsCalendarResearcherItem.ApproveTime:info.RsCalendarResearcherItem.RefuseTime | formatTime}}
					</view>
				</view>
				<view class="info-item flex" v-if="info.RsCalendarResearcherItem.Status==3">
					<view class="label">拒绝理由:</view>
					<view>{{info.RsCalendarResearcherItem.RefuseReason}}</view>
				</view>
			</view>
			<view class="section white-wrap" v-if="info.RsCalendarResearcherItem.Status==4">
				<view class="info-item flex">
					<view class="label">删除时间:</view>
					<view>{{info.RsCalendarResearcherItem.DeleteTime|formatTime}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">删除原因:</view>
					<view>{{info.RsCalendarResearcherItem.DeleteReason}}</view>
				</view>
			</view>

			<!-- 客户问答详情 -->
			<view class="section white-wrap" v-if="info.RsCalendarResearcherItem.QuestionStatus===1">
				<view class="info-item flex">
					<view class="label">客户行业:</view>
					<view>{{info.RsCalendarResearcherItem.CompanyIndustry}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">客户分类:</view>
					<view>{{info.RsCalendarResearcherItem.CompanyClassify}}</view>
				</view>
				<view class="line"></view>
				<view v-for="item,index in roadShowQuestionList" :key="item.RsCalendarResearcherQuestionId">
					<view class="info-item flex">
						<view class="label">Q{{ index+1 }}:</view>
						<view>{{item.QuestionContent}}</view>
					</view>
					<view class="info-item flex">
						<view class="label">A{{ index+1 }}:</view>
						<view>{{item.ReplyContent}}</view>
					</view>
				</view>
					
			</view>
				
		</block>
		<block v-else>
			<view class="section white-wrap">
				<view class="info-item flex">
					<view class="label">活动时间:</view>
					<view v-if="info.RsCalendarResearcherItem.StartDate === info.RsCalendarResearcherItem.EndDate">
						{{info.RsCalendarResearcherItem.StartDate}}({{info.RsCalendarResearcherItem.StartWeek}})
							{{info.RsCalendarResearcherItem.StartTime}}~{{info.RsCalendarResearcherItem.EndTime}}
					</view>
					<view v-else>
						{{info.RsCalendarResearcherItem.StartDate}}({{info.RsCalendarResearcherItem.StartWeek}})
							{{info.RsCalendarResearcherItem.StartTime}}~{{info.RsCalendarResearcherItem.EndDate}}({{info.RsCalendarResearcherItem.EndWeek}}){{info.RsCalendarResearcherItem.EndTime}}
					</view>
				</view>
				<view class="info-item flex" v-if="Role === 'seller'">
					<view class="label">研究员:</view>
					<view>{{info.RsCalendarResearcherItem.ResearcherName}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">活动类型:</view>
					<view>{{info.RsCalendarItem.ActivityType}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">会议形式:</view>
					<view>{{info.RsCalendarItem.RoadshowType}}</view>
				</view>
				<view class="info-item flex" v-if="info.RsCalendarItem.RoadshowPlatform">
					<view class="label">会议平台:</view>
					<view>{{info.RsCalendarItem.RoadshowPlatform}}</view>
				</view>
				<view class="info-item flex" v-if="info.RsCalendarItem.City">
					<view class="label">会议城市:</view>
					<view>{{info.RsCalendarItem.Province}}{{info.RsCalendarItem.City}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">会议主题:</view>
					<view>{{info.RsCalendarItem.Theme}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">合作方名称:</view>
					<view>{{info.RsCalendarItem.CooperationName}}</view>
				</view>
				<view class="info-item flex" v-if="Role === 'researcher'">
					<view class="label">提交销售:</view>
					<view>{{info.RsCalendarItem.SysUserRealName}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">提交时间:</view>
					<view>{{info.RsCalendarItem.CreateTime|formatTime}}</view>
				</view>
			</view>
			<view class="section white-wrap"
				v-if="info.RsCalendarResearcherItem.Status==2||info.RsCalendarResearcherItem.Status==3">
				<view class="info-item flex">
					<view class="label">审批时间:</view>
					<view>
						{{info.RsCalendarResearcherItem.Status==2?info.RsCalendarResearcherItem.ApproveTime:info.RsCalendarResearcherItem.RefuseTime | formatTime}}
					</view>
				</view>
				<view class="info-item flex" v-if="info.RsCalendarResearcherItem.Status==3">
					<view class="label">拒绝理由:</view>
					<view>{{info.RsCalendarResearcherItem.RefuseReason}}</view>
				</view>
			</view>
			<view class="section white-wrap" v-if="info.RsCalendarResearcherItem.Status==4">
				<view class="info-item flex">
					<view class="label">删除时间:</view>
					<view>{{info.RsCalendarResearcherItem.DeleteTime | formatTime}}</view>
				</view>
				<view class="info-item flex">
					<view class="label">删除原因:</view>
					<view>{{info.RsCalendarResearcherItem.DeleteReason}}</view>
				</view>
			</view>
		</block>

		<!-- 审批按钮 -->
		<view class="fix-bottom-wrap btns-wrap flex" v-if="haveActiyityStart">
			<block v-if="info.RsCalendarResearcherItem.Status===1 && Role === 'researcher'">
				<button class="pass-btn" @click="handleActions('accept')">接受</button>
				<button class="refuse-btn" @click="handleActions('refuse')">拒绝</button>
			</block>
			<block v-else-if="info.RsCalendarResearcherItem.Status===1 && Role === 'seller'">
				<button class="pass-btn" @click="handleActions('back')">撤回</button>
			</block>
			<block v-else-if="info.RsCalendarResearcherItem.Status===2 && Role === 'seller'">
				<button class="pass-btn" @click="handleActions('edit')">修改</button>
				<button class="pass-btn" @click="handleActions('del')">删除</button>
			</block>

			<block v-else-if="[3,5].includes(info.RsCalendarResearcherItem.Status) && Role === 'seller'">
				<button class="pass-btn" @click="handleActions('reEdit')">修改重提</button>
			</block>
		</view>

		<!-- 填写客户问答按钮 -->
		<view 
			class="fix-bottom-wrap btns-wrap flex" 
			v-if="info.RsCalendarItem.ActivityType==='路演'&&info.RsCalendarResearcherItem.Status===2&&info.RsCalendarResearcherItem.QuestionStatus===0"
		>
			<button class="pass-btn" style="width: 100%;" @click="handleGoAddRoadShowQuestion">填写客户问答</button>
		</view>
	</view>
</template>

<script>
	import {
		apiRoadShowInfo,
		apiRoadShowApproved
	} from '@/api/approve/activity.js';
	import { backActivity,delActivity,roadShowQuestionInfo  } from '@/api/roadshow/index.js'
	import {
		getRole,
		editInfoBack
	} from './checkRole.js';
	import moment from '@/pages-roadshow/utils/_moment.js';
	export default {
		computed: {
			statusImg() {
				if(!this.info) return ''
				switch (this.info.RsCalendarResearcherItem.Status) {
					case 2:
						return require('../static/roadshow/accept-ico.png') //同意
					case 3:
						return require('../static/roadshow/refuse-ico.png') //拒绝
					case 4:
						return require('../static/roadshow/del-ico.png') //删除
					case 5:
						return require('../static/roadshow/back-ico.png') //撤回
					case 6:
						return require('../static/roadshow/end-ico.png') //结束
					default: return ''
				}
			},
			
			Role() {
				let userinfo = this.$store.state.userInfo;
				return getRole(userinfo.RoleTypeCode);
			},
			
			/* 活动是否开始 */
			haveActiyityStart() {
				if(!this.info) return false
				const { StartDate,StartTime } = this.info.RsCalendarResearcherItem;
				return moment(`${StartDate} ${StartTime}`).valueOf() > new Date().getTime()
			}
		},
		data() {
			return {
				RsCalendarResearcherId: null, //活动研究员id
				RsCalendarId: null, //路演活动id
				info: null,
				roadShowQuestionList:[],
			}
		},
		onLoad(options) {
			this.RsCalendarResearcherId = options.RsCalendarResearcherId
			this.RsCalendarId = options.RsCalendarId
		},
		onShow() {
			this.getDetail();
		},
		methods: {
			// 获取路演问答详情
			async getRoadShowQuestionInfo(id){
				const res=await roadShowQuestionInfo({
					RsCalendarResearcherId:id
				})
				if(res.code===200){
					this.roadShowQuestionList=res.data||[]
				}
			},
			handleGoAddRoadShowQuestion(){
				const that=this
				uni.navigateTo({
					url:'/pages-approve/activity/addRoadShowQuestion',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('data', {
							companyName:that.info.CompanyDetail.CompanyName,
							RsCalendarResearcherId:that.info.RsCalendarResearcherItem.RsCalendarResearcherId,
							RsCalendarId:that.info.RsCalendarResearcherItem.RsCalendarId
						})
					}
				})
			},

			// 获取详情
			async getDetail() {
				const res = await apiRoadShowInfo({
					RsCalendarId: this.RsCalendarId,
					RsCalendarResearcherId: this.RsCalendarResearcherId
				})
				if (res.code === 200) {
					this.info = res.data
					// 如果有问答
					if(res.data.RsCalendarResearcherItem.QuestionStatus===1){
						this.getRoadShowQuestionInfo(res.data.RsCalendarResearcherItem.RsCalendarResearcherId)
					}
				}
			},
			
			/* 所有操作 */
			handleActions(type) {
				const handleFns = {
					refuse: this.handleRefuse,
					accept: this.handlePass,
					back: this.revocationHandle,
					del: this.delHandle,
					reEdit: this.reEditHandle,
					edit:this.handleEdit
				}
				handleFns[type]();
			},
			
			/* 撤回操作 */
			revocationHandle() {
				uni.showModal({
					content: '确定要撤回该活动申请吗？',
					showCancel: true,
					cancelColor: '#A9AFB8',
					confirmColor: '#3385FF',
					success: async ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							console.log('用户点击确定');
							const { code } = await backActivity({
								RsCalendarId: Number(this.RsCalendarId),
								RsCalendarResearcherId: Number(this.RsCalendarResearcherId)
							})
							
							if(code !==200) return
							this.getDetail()
							uni.$emit('activityApproveListUpdate', {
								RsCalendarId: this.RsCalendarId,
								RsCalendarResearcherId: this.RsCalendarResearcherId
							})
						} else if (cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			
			/* 修改重提 */
			reEditHandle() {
				const { CompanyId,CompanyName,EnglishCompany } = this.info.CompanyDetail;
				const { ActivityType,RoadshowType,RoadshowPlatform,City,Province,Theme,CooperationName,ActivityCategory } = this.info.RsCalendarItem;
				const { ResearcherId,StartDate,EndDate,StartTime,EndTime,RsCalendarId,RsCalendarResearcherId } = this.info.RsCalendarResearcherItem;
				
				let form = editInfoBack({ActivityType,RoadshowType,RoadshowPlatform,City,Province,Theme,CooperationName,ActivityCategory,CompanyId,CompanyName,ResearcherId,StartDate,EndDate,StartTime,EndTime});
				let edit_id = RsCalendarId,edit_rs_id = RsCalendarResearcherId;

				if(CompanyId){
					uni.setStorageSync('roadshow_compantyId',CompanyId);
					uni.setStorageSync('roadshow_isEnglishCompany',EnglishCompany);
				}  
				// uni.navigateTo({
				// 	url:`/pages-roadshow/addActivity/index?form=${JSON.stringify(form)}&edit_id=${edit_id}&edit_rs_id=${edit_rs_id}`
				// })
				
				uni.navigateTo({
					url:`/pages-roadshow/addActivity/index`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('emitBackData', {
							form: JSON.stringify(form),
							edit_id,
							edit_rs_id
						})
					}
				});	
			},
			
			/* 删除 需删除理由 */
			delHandle() {
				uni.navigateTo({
					url: `./reason?RsCalendarId=${this.RsCalendarId}&RsCalendarResearcherId=${this.RsCalendarResearcherId}&type=del`
				})
			},

			handlePass() {
				uni.showModal({
					content: '接受申请后会加入您的日历，请确认！',
					showCancel: true,
					cancelColor: '#A9AFB8',
					confirmColor: '#3385FF',
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							console.log('用户点击确定');
							this.passApprove()
						} else if (cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 通过申请
			async passApprove() {
				const res = await apiRoadShowApproved({
					RsCalendarId: Number(this.RsCalendarId),
					RsCalendarResearcherId: Number(this.RsCalendarResearcherId)
				})
				if (res.code === 200) {
					this.getDetail()
					uni.$emit('activityApproveListUpdate', {
						RsCalendarId: this.RsCalendarId,
						RsCalendarResearcherId: this.RsCalendarResearcherId
					})
				}
			},

			handleRefuse() {
				uni.navigateTo({
					url: `./reason?RsCalendarId=${this.RsCalendarId}&RsCalendarResearcherId=${this.RsCalendarResearcherId}&type=refuse`
				})
			},
			handleEdit() {
					const { CompanyId,CompanyName,EnglishCompany } = this.info.CompanyDetail;
				const { ActivityType,RoadshowType,RoadshowPlatform,City,Province,Theme,CooperationName,ActivityCategory } = this.info.RsCalendarItem;
				const { ResearcherId,StartDate,EndDate,StartTime,EndTime,RsCalendarId,RsCalendarResearcherId } = this.info.RsCalendarResearcherItem;
				
				let form = editInfoBack({ActivityType,RoadshowType,RoadshowPlatform,City,Province,Theme,CooperationName,ActivityCategory,CompanyId,CompanyName,ResearcherId,StartDate,EndDate,StartTime,EndTime});
				let edit_id = RsCalendarId,edit_rs_id = RsCalendarResearcherId;

				if(CompanyId){
					uni.setStorageSync('roadshow_compantyId',CompanyId);
					uni.setStorageSync('roadshow_isEnglishCompany',EnglishCompany);
				}  
				uni.navigateTo({
					url:`/pages-roadshow/addActivity/activityEdit`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('emitBackData', {
							form: JSON.stringify(form),
							edit_id,
							edit_rs_id
						})
					}
				});	
			},
		}
	}
</script>

<style lang="scss" scoped>
	.activity-detail {
		padding-bottom: 200rpx;
		.status-img {
			position: absolute;
			right: 0;
			top: 50rpx;
			width: 220rpx;
			height: 220rpx;
			z-index: 10;
		}

		.section {
			margin-bottom: 14rpx;
			padding: 33rpx 34rpx;

			.line {
				width: 100%;
				height: 0;
				border-top: 1px dashed rgba(112, 112, 112, .21);
				margin: 30rpx 0;
			}
		}

		.info-item {
			margin-bottom: 20rpx;

			.label {
				flex-shrink: 0;
				color: #666;
				margin-right: 20rpx;
			}
		}

		.btns-wrap {
			justify-content: center;

			button {
				width: 260rpx;
				height: 70rpx;
				border-radius: 28px;
				border: none;
				margin: 0 15px;
				font-size: 15px;
				color: #fff;
				line-height: 70rpx;
			}

			.pass-btn {
				background-color: #5890fb;
			}

			.refuse-btn {
				background-color: #f55768;
			}
		}
	}
</style>