uni-zhihuikuangshan/pages/workbench/meeting_arrangements/detail/detail.vue

<template>
	<view>
		<view class="top">
			<view class="item">
				<view class="icon">
					<image src="./icon/icon_1.png" mode=""></image>
				</view>
				<view class="title">表决议题</view>
				<view class="text">{{detail.introduce}}</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="./icon/icon_2.png" mode=""></image>
				</view>
				<view class="title">会议时间</view>
				<view class="text">{{detail.time}}</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="./icon/icon_3.png" mode=""></image>
				</view>
				<view class="title">会议地点</view>
				<view class="text">{{detail.place}}</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="./icon/icon_4.png" mode=""></image>
				</view>
				<view class="title">签到时间</view>
				<view class="text">{{detail.sign_time}}</view>
			</view>
		</view>

		<view class="content">
			<view class="section">
				<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
					统计
					<view class="ringht" @click="should_list_detail()"
						style="font-size: 28rpx; color: #b0b0b0;font-weight: 500;">签到详情 <uni-icons type="arrowright"
							size="12" color="#b0b0b0"></uni-icons>
					</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="num">{{detail.arrive_num}}</view>
						<view class="text">应到人数</view>
					</view>
					<view class="item">
						<view class="num">{{detail.actual_num}}</view>
						<view class="text">实到人数</view>
					</view>
					<view class="item">
						<view class="num">{{detail.leave_num}}</view>
						<view class="text">请假人数</view>
					</view>
				</view>
			</view>
			<view class="section section_2">
				<view class="title">应到人</view>
				<view class="user_box">
					<view class="user" v-for="(item,index) in should_list" :key="index">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>

				</view>
			</view>
			<view class="section section_2">
				<view class="title">实到人</view>
				<view class="user_box">
					<view class="user" v-for="(item,index) in real_list" :key="index">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>

				</view>
			</view>
			<view class="section section_3">
				<view class="title">投票详情</view>
				<view class="tip">投票项目：{{vote_list.title}}</view>
				<view class="tip">表决决议：{{vote_list.remark}}</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="pie_1" :chartData="chartData" background="none" />
				</view>
			</view>
		</view>

		<!-- 进入会议 -->
		<view class="btn">
			<view class="left">线上参与</view>
			<view class="right" @click="click()">
				<view class="icon">
					<image src="./icon/join.png" mode=""></image>
				</view>
				<view class="text">进入会议室</view>
			</view>
		</view>

		<view class="bottom">
			<view class="box btn_1" v-if="status == 0" @click="sign_in()">签到</view>
			<view class="box btn_2" v-if="status == 0" @click="open_popup()">请假</view>

			<view class="box btn_1" v-if="status != 0" style="background-color: #DCDCDC;">签到</view>
			<view class="box btn_2" v-if="status != 0" style="background-color: #C0C4CC;">请假</view>
			<view class="box btn_3" @click="vote()">投票</view>
		</view>


		<uni-popup ref="popup" type="center">
			<view
				style="background-color: #FFFFFF;width: 600rpx;border-radius: 10rpx;margin: 0 auto;box-sizing: border-box;padding: 25rpx;">
				<view style="border: 1rpx solid #ccc;margin-bottom: 20rpx;border-radius: 10rpx;">
					<textarea style="height: 200rpx;box-sizing: border-box;padding: 25rpx;width: 550rpx;"
						v-model="remark" placeholder="请输入请假原因" />
				</view>
				<view @click="leave()"
					style="background-color: #009FE8; height: 90rpx;color: #FFFFFF;text-align: center;line-height: 90rpx;">
					提交</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前用户工号
				staff_num: "",
				// 会议id
				id: "",
				// roomID
				roomID: "",

				detail: {},

				should_list: [],
				real_list: [],


				// 投票详情
				vote_list: {},

				// 当前状态
				status: " ",
				// 请假原因
				remark: "",
				// 投票选项
				vote_take_list: [],

				// 图表数据
				chartData: {
					categories: [],
					"series": [{
						"data": []
					}]
				},
				pie_1: {
					"dataLabel": false,
					"legend": {
						"position": "bottom",
						"float": "center"
					},
					"title": {
						"name": " "
					},
					"subtitle": {
						"name": " "
					},
					"extra": {
						"ring": {
							"centerColor": "#FFFFFF",
							"border": true,
						},

					}
				}
			};
		},
		onLoad(option) {
			// 设置会议标题
			uni.setNavigationBarTitle({
				title: option.title
			})

			this.id = option.id
			this.staff_num = uni.getStorageSync('user').staff_num


			// 获取会议详情
			this.get_detail()
			// 获取应到人列表
			this.get_should_list()
			// 获取实到人数
			this.get_real_list()
			// 获取投票详情
			this.get_vote_detail()
			// 获取当前签到状态
			this.get_staff_status()
		},
		methods: {
			// 获取会议信息
			get_detail() {
				this.$api.conference_one({
					id: this.id
				}).then((res) => {
					console.log(res.data.data)

					this.detail = res.data.data
					this.roomID = res.data.data.room_num
				})
			},
			// 获取应到人列表
			get_should_list() {
				this.$api.conference_staff_list({
					id: this.id,
					status: "all"
				}).then((res) => {
					console.log(res.data.data)

					this.should_list = res.data.data
				})
			},
			// 获取实到人数
			get_real_list() {
				this.$api.conference_staff_list({
					id: this.id,
					status: "arrive"
				}).then((res) => {
					console.log(res.data.data)

					this.real_list = res.data.data
				})
			},
			// 进入会议
			click() {
				console.log(this.detail)

				if (plus.os.name == 'Android') {

					plus.runtime.launchApplication({
						pname: 'com.hst.sdkTest',
						extra: { //要传递过去的参数  
							// title: '该参数由桥梁APP启动时传递',

							serverip: '42.63.25.245',
							port: '1089',
							user: this.staff_num,
							password: 'jwkj123456',
							roomid: this.roomID
						}
					}, (e) => {
						console.log('Open system default browser failed: ' + e.message)

						if (e.message == 'null') {
							uni.showModal({
								title: '提示',
								content: '需要下载视频会议插件，是否继续下载？',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										//打开外部url
										plus.runtime.openURL(
											"https://jiewei-icon.oss-cn-beijing.aliyuncs.com/apk/app-hst.apk",
											res => {
												uni.showToast({
													title: '打开当前地址出错啦，请稍后再试',
													icon: 'none'
												});
											})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}


					})

				}
			},


			// 签到详情
			should_list_detail() {
				uni.navigateTo({
					url: "./should_list/should_list?id=" + this.id
				})
			},

			// 获取当前签到状态
			get_staff_status() {
				this.$api.get_staff_status({
					id: this.id,
					status: ""
				}).then((res) => {
					console.log(res.data.data)

					this.status = res.data.data.status
				})
			},

			// 签到
			sign_in() {
				this.$api.conference_staff_status({
					id: this.id,
					status: 1
				}).then((res) => {
					console.log(res.data)
					
					this.get_staff_status()
					// 获取实到人数
					this.get_real_list()
					// 获取会议详情
					this.get_detail()

					if (res.data.code == 1) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "签到成功"
						})
					}
				})

			},

			// 请假
			open_popup() {

				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()

			},
			// 提交请假
			leave() {
				uni.showModal({
					title: '提示',
					content: '是否提交请假申请？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');

							this.$refs.popup.close()

							this.$api.conference_staff_status({
								id: this.id,
								status: 2,
								remark: this.remark
							}).then((res) => {
								console.log(res.data)

								if (res.data.code == 1) {
									uni.showToast({
										icon: "none",
										title: res.data.message
									})
								} else{
									uni.showToast({
										icon: "none",
										title: "请假成功"
									})
								}
								
								this.get_staff_status()
								// 获取实到人数
								this.get_real_list()
								// 获取会议详情
								this.get_detail()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 获取投票详情
			get_vote_detail() {
				this.$api.conference_vote_list({
					id: this.id
				}).then((res) => {
					console.log(res.data.data[0])

					this.vote_list = res.data.data[0]

					let data = []
					res.data.data[0].formate.forEach((item, index) => {
						var sevm = {}

						sevm.name = item.name
						sevm.value = parseInt(item.num)

						data[index] = sevm
					})
					this.chartData.series[0].data = data

					console.log(data)

				})
			},

			// 投票
			vote() {
				uni.showLoading({
					mask: true
				});
				this.$api.conference_staff_vote({
					id: this.id
				}).then((res) => {
					uni.hideLoading()
					console.log(res)


					if (res.data.code == 1) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						const id = res.data.data.id
						this.vote_take_list = res.data.data.content

						uni.showActionSheet({
							itemList: this.vote_take_list,
							success: (res) => {
								console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								console.log(this.vote_take_list)

								const take = this.vote_take_list[res.tapIndex]

								uni.showModal({
									title: '提示',
									content: '是否确认投' + this.vote_take_list[res.tapIndex] +
										'票？',
									success: (res) => {
										if (res.confirm) {
											console.log('用户点击确定');

											this.$refs.popup.close()

											this.$api.conference_staff_vote_take({
												id: id,
												choice: take
											}).then((res) => {

												console.log(res.data)
												if (res.data.code == 1) {
													uni.showToast({
														icon: "none",
														title: res.data
															.message
													})
												} else {
													uni.showToast({
														icon: "none",
														title: "投票成功"
													})
													
													// 获取投票详情
													this.get_vote_detail()
												}

											})


										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							},
							fail: function(res) {
								console.log(res.errMsg);
							}
						});

					}
				})



			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F7F7;

		padding-bottom: 200rpx;

	}

	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.top {
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 25rpx 50rpx;

		.item {
			display: flex;
			align-items: center;

			height: 90rpx;
			border-bottom: 1rpx solid #F5F6F6;

			.icon {
				image {
					display: block;
					width: 35rpx;
					height: 35rpx;
				}
			}

			.title {
				margin-left: 22rpx;

				font-size: 28rpx;
				color: #7e7e7e;
			}

			.text {
				margin-left: 66rpx;
			}
		}

	}

	.content {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		box-sizing: border-box;
		padding: 50rpx;

		padding-bottom: 20rpx;

		.section {
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #F6F6F6;
			margin-bottom: 50rpx;

			.title {
				font-size: 34rpx;
				font-weight: 700;

				margin-bottom: 30rpx;
			}

			.box {
				display: flex;
				justify-content: space-between;

				.item {
					width: 166rpx;
					height: 166rpx;
					text-align: center;

					border-radius: 50%;
					box-sizing: border-box;
					border: 20rpx solid #FBBE42;

					.num {
						margin-top: 15rpx;
						font-size: 40rpx;
					}

					.text {
						font-size: 22rpx;
						color: #333;
					}
				}

				.item:nth-child(1) {
					border-color: #FBBE42;

					.num {
						color: #FBBE42;
					}
				}

				.item:nth-child(2) {
					border-color: #FF7472;

					.num {
						color: #FF7472;
					}
				}

				.item:nth-child(3) {
					border-color: #A472E6;

					.num {
						color: #A472E6;
					}
				}
			}
		}

		.section_2 {
			.user_box {
				overflow: hidden;

				.user {
					float: left;
					margin-right: 25rpx;
					width: 110rpx;
					text-align: center;

					.avatar {
						margin: 0 auto;
						width: 100rpx;
						height: 100rpx;

						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100rpx;
							height: 100rpx;

							display: block;
						}
					}

					.name {
						margin-top: 10rpx;
						font-size: 22rpx;
						color: #666666;
					}
				}

				.user:nth-child(5n) {
					margin-right: 0;
				}
			}
		}
	}

	.btn {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		height: 120rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;

		box-sizing: border-box;
		padding: 0 50rpx;

		.left {
			font-size: 34rpx;
			font-weight: 700;
		}

		.right {
			width: 260rpx;
			height: 70rpx;
			background-color: #009FE8;

			display: flex;
			align-items: center;
			justify-content: center;

			border-radius: 15rpx;

			.icon {
				margin-right: 20rpx;

				image {
					width: 28rpx;
					height: 32rpx;

					display: block;
				}
			}

			.text {
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}

	.bottom {
		height: 100rpx;

		position: fixed;
		left: 0;
		bottom: 0rpx;

		display: flex;

		.box {
			width: 190rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 700;
			color: #FFFFFF;
		}

		.btn_1 {
			width: 370rpx;
			background-color: #1EDE6A;
		}

		.btn_2 {
			background-color: #FF2753;
		}

		.btn_3 {
			background-color: #FFA124;
		}
	}
</style>