ZhiYeJianKang_QiYe_APP/pages/risk/risk.vue

<template>
	<view class="app">
		<view @tap="info()" class="infometion">
			填表信息
		</view>
		<u-button type="info" @tap="handleDownloadFile()">下载报告</u-button>
		<u-popup v-model="show" mode="center" width="85%" height="290px" :closeable='true' border-radius='30'>
			<view class="infolist">
				<u-form :model="formlist" ref="uForm">
					<u-form-item label="填表人" labelWidth="120">
						<u-input v-model="formlist.people" maxlength="11" />
					</u-form-item>
					<u-form-item label="手机号" labelWidth="140" prop="telephone">
						<u-input v-model="formlist.telephone" maxlength="11" />
					</u-form-item>
					<view class="" @tap="showdays()">
						<u-form-item label="填表日期" labelWidth="140">
							<u-calendar v-model="showday" :mode="mode" @change="change">
							</u-calendar>
							{{formlist.time | formatDate('-')}}
						</u-form-item>
					</view>
				</u-form>
				<view class="but">
					<view class="sub" @tap="submitdata()">
						提交
					</view>
					<view class="res" @tap="res()">
						重置
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getTbxx,
		insertZybTableInfo,
		downBaoGao,
		delPgFile,
	} from '@/api/risk/risk.js'

	import baseUrl from '@/api/baseurl.js'

	export default {
		data() {
			return {
				formlist: {
					people: '',
					telephone: '',
					time: null
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showday: false,
				mode: 'date',
				show: false,
				form: {},
				qrcode: '',
				filePath: '',
			}
		},
		onShow() {
			// this.info();
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				if (value) {
					value = value
					let data = new Date(value);
					let year = data.getFullYear();
					let month = data.getMonth() + 1;
					let day = data.getDate();
					// let h = data.getHours();
					// let mm = data.getMinutes();
					// let s = data.getSeconds();
					month = month >= 10 ? month : "0" + month;
					day = day >= 10 ? day : "0" + day;
					// h = h >= 10 ? h : "0" + h;
					// mm = mm >= 10 ? mm : "0" + mm;
					// s = s >= 10 ? s : "0" + s;
					return `${year}${spe}${month}${spe}${day}`;
				}
			}
		},
		methods: {
			// 填表信息
			info() {
				getTbxx().then(res => {
					if(res){
						this.formlist = res
					}
				});
				this.show = true;
			},
			// 下载报告
			handleDownloadFile() {
				// var= a=false
				downBaoGao().then(res => {
					this.filePath = res
					uni.downloadFile({
						url: baseUrl + `/dzzyb` + res,
						success: (data) => {
							console.log(data)
							if (data.statusCode == 200) {
								//文件保存到本地
								uni.saveFile({
									tempFilePath: data.tempFilePath, //临时路径
									success: function(res) {
										console.log(res)
										// uni.showToast({
										// 	icon: 'none',
										// 	mask: true,
										// 	title: '文件已保存：' + res
										// 		.savedFilePath, //保存路径
										// 	duration: 3000,
										// });
										// console.log(res)
										// setTimeout(() => {
										// 	//打开文档查看
										// }, 3000)
									}
								});
								uni.openDocument({
									filePath: data.tempFilePath,
									success: function(res) {
										// console.log('打开文档成功');
									},
									fail: function() {
										uni.showToast({
											title: '暂不支持此类型',
											duration: 2000,
											icon: "none",
										});
									}
								});
								if (this.filePath) {
									delPgFile(this.filePath).then(res => {
									})
								};
							}
						},
					})

				})
			},
			// 重置
			res() {
				this.formlist = {
					time: null
				};
			},
			// 填表日期
			showdays() {
				this.showday = true;
			},
			// 提交
			submitdata() {
				insertZybTableInfo(this.formlist).then(res => {
					if (!this.formlist.telephone) {
						uni.showToast({
							title: "请填写您的手机号",
							duration: 2000,
							icon: "none",
						});
						return false;
					} else {
						var telReg =
							/^(((13[0-9]{1})|(15[0-9]{1})|(19[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
						if (!telReg.test(this.formlist.telephone)) {
							uni.showToast({
								title: "你的手机号不正确！请重新填写",
								duration: 2000,
								icon: "none",
							});
							return false;
						}
					}
					if (!this.formlist.people) {
						uni.showToast({
							title: "请填写填表人姓名",
							duration: 2000,
							icon: "none",
						});
						return false;
					}
					if (!this.formlist.time) {
						uni.showToast({
							title: "请选择填表日期",
							duration: 2000,
							icon: "none",
						});
						return false;
					}
					if (this.formlist.time && this.formlist.people && this.formlist.time) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 2000
						})
					}
					this.show = false;
				})
			},
			// 时间
			change(e) {
				console.log(e);
				console.log(this.formlist)
				this.formlist.time = e.result
			}
		}
	}
</script>

<style lang="scss">
	//css函数 声明函数
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}
	::v-deep .u-form-item{
		padding-left: tovmin(50) !important;
	}
	::v-deep .uni-scroll-view{
		width: 100%;
		height: auto;
		
	}

	.app {
		color: #C3C1C1;
		font-weight: 400;
		height: 100vh;

		.infometion {
			background-color: #3C9CFF;
			width: 100%;
			height: tovmin(90);
			line-height: tovmin(90);
			text-align: center;
			color: #fff;
			font-size: tovmin(32);
		}

		.infolist {
			width: 95%;
			margin: tovmin(65) auto;
		}

		.but {
			display: flex;
			justify-content: space-around;
			margin-top: tovmin(50);

			.res {
				width: tovmin(170);
				height: tovmin(70);
				line-height: tovmin(70);
				text-align: center;
				color: #fff;
				background-color: #3C9CFF;
				border-radius: tovmin(10);
			}

			.sub {
				width: tovmin(170);
				height: tovmin(70);
				line-height: tovmin(70);
				text-align: center;
				color: #fff;
				background-color: #3C9CFF;
				border-radius: tovmin(10);
			}
		}
	}
</style>