xinhuaqujiaoyuju/pages/notify/content.vue

<template>
	<view class="oa-notice-detail">

		<view class="covers-body covers-uploader oa-uploader">
			<view>
				<view style="text-align: center;">{{content.title}}</view>
				<view class="input-title">
					<mp-html :content="content.content" />
					<!-- <view class="input-content" v-html="content.content"></view> -->
				</view>
			</view>
			<view class="input-title" v-if="file.length>0">
				<view>附件：</view>
				<view class="uni-uploader">
					<view class="uni-uploader-body" v-for="(item,i) in file" :key="i">
						<view class="uni-uploader_files" @click="showFile(item.path)">
							<block>
								<view class="uni-uploader__file" style="position: relative;">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="covers-body covers-uploader oa-uploader">
			<view class="input-body">
				<view class="input-content">拟办意见：<text>{{content.proposed}}</text></view>
				<view class="input-content">领导批示：<text>{{content.roval}}</text></view>
				<view class="input-content">联系人：<text>{{content.contactperson}}</text></view>
				<view class="input-content">电&nbsp;&nbsp;&nbsp;话：<text>{{content.contacttel}}</text></view>
				<view class="input-content" v-if="!ismine">发送人：<text>{{content.sendperson}}</text></view>
				<view class="input-content" v-if="!ismine">发送时间：<text>{{content.sendtime}}</text></view>
			</view>
		</view>

		<view class="covers-body covers-uploader oa-uploader" v-if="ismine">
			<view class="input-title">签收详情：</view>
			<view class="uni-timeline">
				<view class="uni-timeline-item" :class="[
							item.recvstatus === '0' ? `text-${themeColor.name} uni-timeline-first-item` : 'uni-timeline-last-item']"
					v-for="(item, index) in approveDetail" :key="index">

					<view class="uni-timeline-item-content">
						<view>
							{{ item.recvperson }} ----- {{ item.recvstatus|qsstatus }}
						</view>
						<view class="datetime" v-if="item.recvtime!=null">
							{{ item.recvtime|time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="footer" v-else-if="!qianshou">
			<view v-for="(item, index) in radioList" :key="index">
				<button class="action-btn" :class="'text-' + themeColor.name" @tap="openDialog()">
					{{item.value}}
				</button>
			</view>
		</view> -->
		<view class="covers-body covers-uploader oa-uploader" v-else-if="!qianshou">
			<view v-for="(item, index) in radioList" :key="index">
				<button class="action-btn" :class="'text-' + themeColor.name" @tap="handleWorksOperation()">
					{{item.value}}
				</button>
			</view>
		</view>
		<!-- <view class="covers-body covers-uploader oa-uploader qianshou" v-else-if="qianshou">
			<view class="input-title">参会人员信息：</view>
			<view class="uni-uploader">
				<view class="uni-uploader-body" v-for="(person,id) in canhuiperson" :key="id">
					<view class="input-content"><text>姓&nbsp;&nbsp;&nbsp;名：{{person.name}}</text><text class="text2">手机号：{{person.phone}}</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 签收弹出框 -->
		<popup-layer ref="popupRef" :direction="'top'">
			<view class="zidingyiBox">
				<view class="input-title">
					<view class="input-content">请填写参会人员姓名以及电话：</view>
					<view class="input-content">
						<a class="btn btn_plus" role="button" title="增加" @click="addperson()"></a>
					</view>
				</view>
				<view class="pop-item" v-for="(person,id) in canhuiperson" :key="id">
					<a class="btn btn_minus" role="button" title="减少" @click="minusperson(person.id)"
						v-if="canhuiperson.length>1"></a>
					<view><text>姓&nbsp;&nbsp;&nbsp;名：</text>
						<input v-model="person.name" placeholder="请输入参会人员姓名"></input>
					</view>
					<view>
						<text>手机号：</text>
						<input v-model="person.phone" placeholder="请输入手机号"></input>
					</view>
				</view>
				<view>
					<button class="action-btn" :class="'text-' + themeColor.name" @tap="handleWorksOperation()">
						签收
					</button>
				</view>
			</view>
		</popup-layer>
	</view>
</template>


<script>
	import moment from '@/common/moment';
	import popupLayer from '@/components/popup-layer/popup-layer.vue'
	import mpHtml from '@/components/mp-html/mp-html'
	import {
		toastMsg
	} from '@/pages/toast/toast.js'
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				id: '',
				content: {},
				contentFile: {},
				file: {},
				qianshou: false,
				ismine: false,
				approveDetail: [],
				radioList: [{
					"value": "签收"
				}],
				canhuiperson: [{
					id: 1,
					name: '',
					phone: '',
				}],
				maxid: 1,
				meetingNamePhome: ''
			}
		},
		components: {
			popupLayer
		},
		filters: {
			time(val) {
				var date = new Date(val);
				return moment(date).format('YYYY-MM-DD HH:mm');
			},
			qsstatus(val) {
				if (val == "0") {
					return "未签收";
				} else {
					return "已签收";
				}
			}
		},
		onLoad: function(opt) {
			this.id = opt.id;
			if (opt.qianshou == "1") this.qianshou = true;
			else this.qianshou = false;
			if (opt.ismine == "true") this.ismine = true;
			this.initData();
		},
		methods: {
			// 数据初始化
			initData() {
				this.getContent();
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			getContent() {
				var url = this.$mConfig.baseUrl + '/notify/' + this.id;
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				var that = this;
				this.$http.request({
					url: url,
					header: {
						'content-type': 'application/json',
						'Authorization': token
					}
				}).then(r => {
					if (r.code == "200") {
						that.content = r.data;
						//附件文件
						var filearr = [];
						if (r.data.filename) var filelist = r.data.filename.substr(0, r.data.filename
							.length - 1).split(',');
						else var filelist = [];
						for (var i = 0; i < filelist.length; i++) {
							filearr.push({
								"name": filelist[i],
								"path": r.data.filepath.substr(0, r.data.filepath.length - 1).split(',')[i]
							});
						}
						that.file = filearr;
					} else {

					}
				}).then(res => {
					if (that.ismine) {
						var detailUrl = this.$mConfig.baseUrl + '/notify/recvDetail/' + that.id;
						this.$http.request({
							url: detailUrl,
							header: {
								'content-type': 'application/json',
								'Authorization': token
							}
						}).then(r => {
							if (r.code == "200") {
								that.approveDetail = r.data;
							}
						})
					} else if (that.qianshou) {
						/* var personList = that.content.namePhone.split(';');
						that.canhuiperson.splice(0, 1);
						personList.forEach(function(item, i) {
							if (item == "") return;
							var person = {
								id: i,
								name: item.split(',')[0],
								phone: item.split(',')[1]
							}
							that.canhuiperson.push(person);
						}) */
					}
				})
			},
			addperson() {
				var newid = parseInt(this.maxid) + 1;
				let person = {
					id: parseInt(newid),
					name: '',
					phone: ''
				}
				this.canhuiperson.push(person);
				this.maxid = parseInt(this.maxid) + 1;
			},
			minusperson(id) {
				console.log(id);
				var that = this;
				this.canhuiperson.forEach(function(index, i) {
					if (index.id == id) {
						that.canhuiperson.splice(i, 1);
					}
				})
			},
			showFile(path) {
				var type = path.split('.')[1].toLocaleLowerCase();
				var url = this.$mConfig.baseUrl + path;
				if (type == 'jpg' || type == 'jpeg' || type == 'bmp' || type == 'gif' || type == 'png') {
					var arr = [];
					arr.push(url);
					uni.previewImage({
						urls: arr
					});
				} else if (type == 'doc' || type == 'xls' || type == 'ppt' || type == 'pdf' || type == 'docx' || type ==
					'xlsx' || type == 'pptx') {
					uni.downloadFile({
						url: url,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log(res);
								}
							});
						}
					});
				} else {
					uni.downloadFile({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								var tempFilePaths = res.tempFilePath;
								uni.saveFile({
									tempFilePath: tempFilePaths[0],
									success: function(res) {
										var savedFilePath = res.savedFilePath;
										toastMsg('success', "已保存文件至：" + savedFilePath);
									}
								});
							}
						}
					})
				}
			},
			openDialog() {
				this.$refs.popupRef.show();
			},
			preHandleWorks() {
				var that = this;
				if (that.canhuiperson.length == 1) {
					if (that.canhuiperson[0].name == "" || that.canhuiperson[0].phone == "") {
						toastMsg('warning', '请填写参会人员姓名和手机号')
						return false;
					} else {
						that.meetingNamePhome = that.canhuiperson[0].name + ',' + that.canhuiperson[0].phone + ',' + that
							.$mStore.state.user.dept.deptName;
						return true;
					}
				} else {
					for (var i = 0; i < that.canhuiperson.length; i++) {
						if (that.canhuiperson[i].name == "" || that.canhuiperson[i].phone == "") {
							toastMsg('warning', '请填写第' + (parseInt(i) + 1) + '参会人员的姓名和手机号')
							return false;
						} else {
							that.meetingNamePhome += that.canhuiperson[i].name + ',' + that.canhuiperson[i].phone + ';';
						}
					}
					return true;
				}
			},
			handleWorksOperation() {
				//if (this.preHandleWorks()) {
					var url = this.$mConfig.baseUrl + '/notify/receive';
					var token = this.$preToken + ' ' + this.$store.state.accessToken;
					var that = this;
					this.$http.request({
						url: url,
						method: "GET",
						header: {
							'content-type': 'application/json',
							'Authorization': token
						},
						params: {
							id: that.id,
							instructions: "同意"
						}
					}).then(r => {
						if (r.code == "200") {
							toastMsg('success', '签收成功');
							that.qianshou = true;
							that.$refs.popupRef.close();
							that.getTabBarBadge();
						} else {
							toastMsg('warning', '签收失败');
						}
					})
				//}
			}

		}
	}
</script>

<style lang="scss">
	.oa-notice-detail {
		.uni-timeline {
			padding: $spacing-lg;
			background-color: $color-white;
		}

		.feedback-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
		}

		.feedback-star-view.feedback-title {
			justify-content: flex-start;
			margin: 0;
		}

		.feedback-quick {
			position: relative;
			padding-right: 40upx;

			.iconfont {
				font-size: $font-sm;
			}
		}

		.feedback-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.feedback-textare {
			height: 200upx;
			font-size: 34upx;
			line-height: 50upx;
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 30upx 0;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 98;
			width: 100%;
			background-color: $color-white;
			color: $font-color-base;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 15upx $spacing-base;

			.action-btn {
				font-size: $font-sm;
				margin: 0 0 0 15upx;
				padding: 0 $spacing-lg;
				text-align: center;
				height: 80upx;
				line-height: 80upx;
			}
		}

		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 40upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 26upx;
				line-height: 50upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}

		.input-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.input-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;
		}

		.covers-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.covers-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.covers-uploader {
			padding: 22upx 20upx;
			margin: 22upx 20upx;
		}
		
		.qianshou{
			view{
				line-height: 2;
			}
			.input-content{
				padding-left: 18rpx;
			}
			.text2{
				margin-left: 40upx;
			}
		}

		.pop-item {
			margin: 40upx;
		}

		.pop-item view {
			line-height: 2;
			margin: 10upx;
			font-size: 36upx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between
		}

		.pop-item input {
			width: 70%;
			border-bottom: 1px solid #eaeaea;
		}
	}

	.btn {
		display: inline-block;
		vertical-align: middle;
		background: #f0f0f0 no-repeat center;
		border: 1px solid #d0d0d0;
		width: 24px;
		height: 24px;
		border-radius: 20px;
		box-shadow: 0 1px rgba(100, 100, 100, .1);
		color: #666;
		transition: color .2s, background-color .2s;
	}

	.btn:active {
		box-shadow: inset 0 1px rgba(100, 100, 100, .1);
	}

	.btn:hover {
		background-color: #e9e9e9;
		color: #333;
	}

	.btn_plus {
		background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
		background-size: 10px 2px, 2px 10px;
	}

	.btn_minus {
		background-image: linear-gradient(to top, currentColor, currentColor);
		background-size: 10px 2px;
		float: right;
		right: -9px;
		position: relative;
	}
</style>