xmt/pages/meeting/meeting.vue

<template>
	<view class="content">
		<view class="table">
			<view class="table-title">
				<view class="title">
					会议主题:
				</view>
				<view class="val">
					{{meeting.name}}
				</view>
				<view class="title">
					会议主持人:
				</view>
				<view class="val">
					{{meeting.host}}
				</view>
				<view class="title">
					开始时间:
				</view>
				<view class="val">
					{{meeting.start}}
				</view>
				<view class="title">
					结束时间:
				</view>
				<view class="val">
					{{meeting.endtime}}
				</view>
				<view class="title">
					会议内容:
				</view>
				<view class="val" v-html="meeting.content"></view>
				<template v-if="meeting.url">
					<view class="title">
						会议地址:
					</view>
					<view class="val" @click="hhhh(meeting.url)">
						{{meeting.url}}
					</view>
				</template>
				
				<view class="button button1" @click="openJoin(0)">
					本人参加
				</view>
				<view class="button"  @click="openJoin(1)">
					他人参加
				</view>
			</view>
		</view>
		<uni-popup ref="join" type="center">
			<view class="join-wrap">
				<view class="join-tit">
					{{is_true == 1?'他人参加':'本人参加'}}
				</view>
				<view class="content">
					<view class="left">
						姓名
					</view>
					<input type="text" value=""  placeholder="请输入姓名" v-model="name" />
				</view>
				<view class="content">
					<view class="left">
						联系方式
					</view>
					<input type="text" value=""  placeholder="请输入联系方式" v-model="phone" />
				</view>
				<view class="content">
					<view class="left">
						职务
					</view>
					<picker class="input" :range="zhiwuList" @change="bindZhiwu">
						<view class="box-right" :class="{ 'hui' : zhiwu == '' }">{{ zhiwu || '请选择职务' }}</view>
					</picker>
				</view>
				<view class="join-btn" @click.stop="subJoin" :class="{'bghui':subing}">
					确认提交
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getMeeting,
		joinMeeting
	} from '@/api/art.js'
	import {postlist} from '@/api/user.js'
	export default {
		data() {
			return {
				subing:false,
				id: '', //会议id
				meeting: {
					name:'',
					host: '',
					start: '',
					endtime: '',
					content: ''
				},
				name: '',
				phone: '',
				is_true: 0,
				zhiwuList: [],
				zhiwuList1:[],
				zhiwu: '',
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getMeeting()
			this.getPostList()
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			hhhh(url) {
				window.location.href = url
			},
			// 获取职务列表
			getPostList() {
				postlist().then(({
					data
				}) => {
					
					data.forEach(e => {
						this.zhiwuList.push(e.title)
					})
					this.zhiwuList1 = data
					console.log(data, "zhiwuList");
				})
			},
			// 获取会议详情
			getMeeting() {
				let obj = this
				getMeeting({
					id: obj.id
				}).then(res => {
					console.log(res)
					obj.meeting = res.data
				})
			},
			// 打开参会弹窗
			openJoin(val) {
				let obj = this
				obj.is_true = val
				obj.$refs.join.open()
			},
			//选择职务
			bindZhiwu(e) {
				this.zhiwu = this.zhiwuList[e.target.value];
				this.zhiwuId = this.zhiwuList1[e.target.value].id
				console.log(this.zhiwuId)
			},
			//参加会议
			subJoin() {
				let obj = this
				if(obj.subing) {
					return
				}
				if(obj.name == '') {
					return obj.$api.msg('请输入参会人员姓名')
				}
				if(obj.phone == '') {
					return obj.$api.msg('请输入参会人员联系方式')
				}
				if(obj.zhiwu == '') {
					return obj.$api.msg('请输入参会人员职务')
				}
				obj.subing = true
				joinMeeting({
					mid: obj.id,
					name: obj.name,
					post: obj.zhiwuId,
					contact: obj.phone,
					is_true: obj.is_true
				}).then(res => {
					obj.$refs.join.close()
					obj.subing = false
					uni.showToast({
						title:'提交成功',
						duration:2000
					});
				}).catch(err => {
					obj.subing = false
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: auto;
		min-height: 100%;
	}
	.table {
		width: 750rpx;
		background: #FFFFFF;
		// margin: 30rpx auto;
	}
	.table-title {
		.title {
			margin-left: 15rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			line-height: 80rpx;
		}
		.val {
			padding-left: 30rpx;
			text-indent:28rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: black;
		}
	}
	.button {
		margin: 60rpx auto;
		width: 300rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 38rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FE5341;
		border: #FE5341 1px solid;
		line-height: 80rpx;
		text-align: center;
	}
	.button1 {
		color:#fff ;
		background-color: #FE5341;
	}
	.join-wrap {
		height: 400rpx;
		width: 650rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.join-tit {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			padding: 20rpx 0;
		}
		.join-btn {
			line-height: 85rpx;
			// width: 200rpx;
			background-color:#FE5341;
			color: #fff;
			font-size: 28rpx;
			// border-radius: 20rpx;
			text-align: center;
			border-radius: 0 0 20rpx 20rpx;
			margin: auto;
			
		}
		.content {
			display: flex;
			align-items: center;
			line-height: 80rpx;
		
			.left {
				width: 120rpx;
				margin: 0 30rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
		
			}
		
			input {
				margin: 0;
			}
			.box-right {
				flex-grow: 1;
			}
			
			.input {
				margin: 0;
				flex-grow: 1;
			}
		}
	}
	.hui {
		color: #999999 !important;
	}
	.bghui {
		background-color: #eee !important;
	}
</style>