saas_miniprogram/pages2/verify/input2.vue

<template>
	<view style="padding: 30rpx;">
		<view class="topBox">
			<view>
				<u-icon name="error-circle-fill" color="#FF3B30" size="28"></u-icon>
				<text style="color: #FF3B30;margin-left: 10rpx;">学习前请提交完整审核资料</text>
			</view>

			<view style="color: #007AFF;">稍后再填</view>
		</view>
		<view class="bodyBox" style="margin-top: 30rpx;padding:0 20rpx;">
			<u-form :model="form" ref="uForm">
				<template v-for="(item, index) in listData">
					<u-form-item
						v-if="item.inputType == 4"
						:key="index"
						:label="item.fieldName"
						:required="item.required"
						:label-width="auto"
						:prop="item.required ? item.fieldKey : ''"
						label-position="top"
					>
						<text style="color: blue;position: absolute;top: 20rpx;left: 180rpx;text-decoration: underline;" @click="downDocx(item.url)">点击下载</text>
						<view class="dis_stys"><text style="color: #999999;">下载承诺书进行填写并签名盖章后上传（≤2M）</text></view>
						<image v-if="!form[item.fieldKey]" style="width: 169rpx; height: 169rpx;" @click="uploadFieds" src="@/static/info_4.png"></image>
						<view class="quzw" v-if="form[item.fieldKey]">
							<view v-if="form[item.fieldKey].split('.').splice(-1)[0] == 'docx' || form[item.fieldKey].split('.').splice(-1)[0] == 'doc'" class="borsrs">
								<image src="@/static/icon/jy_icon.png" style="width: 168rpx; height: 168rpx;"></image>
								<text>{{ titleName }}</text>
							</view>
							<image v-else :src="form[item.fieldKey]" style="width: 100%; height: 100%;" mode="aspectFit" @click="seePhotos(form[item.fieldKey])"></image>
							<u-icon name="close-circle-fill" color="red" size="44" class="optionsAbs" @click="clearWord"></u-icon>
						</view>
					</u-form-item>
				</template>
			</u-form>
		</view>
		<view @click="submits" class="submit_btn">提交资料</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				commitment_seal: ''
			},
			goodsId: null,
			fileList1: [],
			listData: {}, //页面数据
			openVerify: false, // 控制是否手动验证
			nextStatus: false, //是否有下一步
			copyData: null,
			titleName: '文件名称居中对齐过长换行', //word名称
			rules: {
				commitment_seal: [
					{
						required: true,
						message: '请上传承诺书盖章',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	created() {},
	onLoad(option) {
		this.goodsId = Number(option.id);
		this.getInfo();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		seePhotos(url) {
			uni.previewImage({
				urls: [url]
			});
		},
		downDocx(url) {
			uni.downloadFile({
				url: this.$method.splitImgHost(url),
				success: res => {
					if (res.statusCode === 200) {
						console.log(this.$method.splitImgHost(url));
						this.$method.showToast('下载成功');
					}
				}
			});
		},
		clearWord() {
			this.$set(this.form, 'commitment_seal', '');
			this.titleName = '';
		},
		uploadFieds() {
			var self = this;
			wx.chooseMessageFile({
				count: 1,
				size: 2097152,
				type: 'file',
				success(res) {
					if (res.tempFiles[0].size > 2097152) {
						self.$method.showToast('上传文件不得大于2M');
						return;
					} else {
						var type = res.tempFiles[0].path.split('.').splice(-1);
						if (type[0] != 'jpg' && type[0] != 'png' && type[0] != 'jpeg' && type[0] != 'docx' && type[0] != 'doc') {
							self.$method.showToast('请上传word文档或图片');
							return;
						}
						self.titleName = res.tempFiles[0].name;
						self.$set(self.form, 'commitment_seal', res.tempFiles[0].path);
						self.$nextTick(function() {
							this.resultForm();
						});
					}
				}
			});
		},
		//提交表单
		async submitApi() {
			var data = JSON.parse(JSON.stringify(this.form));
			if (data['commitment_seal']) {
				console.log(123);
				data.commitment_seal = await this.$method.uploadFile(data.commitment_seal, 0);
			} else {
				console.log(456);
			}
			var concatData = {};
			Object.assign(concatData, this.copyData, data);
			console.log(concatData);
		},
		//验证表单
		resultForm(int) {
			if (this.openVerify) {
				for (let i = 0; i < this.listData.length; i++) {
					if (this.listData[i].fieldKey === 'commitment_seal' && !this.listData[i].required) {
						this.submitApi();
						return;
					}
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (int === 1) {
							this.submitApi();
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		submits() {
			this.openVerify = true;
			this.resultForm(1);
		},
		async changePhotoListHeader1(lists, name) {
			if (lists.length) {
				this.fileList1 = lists;
				this.form.commitment_seal = await this.$method.imageInfos(lists[0].url);
			} else {
				this.fileList1 = [];
				this.$set(this.form, 'commitment_seal', '');
			}
			this.$nextTick(function() {
				this.resultForm();
			});
		},

		getInfo() {
			// this.copyData = this.$store.getters.getCopyData
			this.copyData = {
				name: '唐立安',
				sex: '男'
			};
			this.$api.getbaseprofiletpId(this.goodsId).then(res => {
				var ast = JSON.parse(res.data.data.keyValue2);
				this.listData = ast;
			});
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope>
.quzw {
	width: 638rpx;
	height: 638rpx;
	position: relative;
	border: 2rpx solid #eee;
	border-radius: 8rpx;
}
.borsrs {
	width: 640rpx;
	height: 640rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.optionsAbs {
	position: absolute;
	z-index: 99;
	top: 10rpx;
	right: 10rpx;
}
.dis_stys {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.handCenter {
	background: #f7f7f7;
	border: 2rpx solid #eeeeee;
	border-radius: 24rpx;
}
.headerSDels {
	height: 58rpx;
	padding: 0rpx 24rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}
.listBox {
	margin: 24rpx 32rpx 0rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	background-color: #fff;
	overflow: hidden;
}
.imgBoxs {
	width: 156rpx;
	height: 203rpx;
}
.imgBoxs2 {
	width: 171rpx;
	height: 108rpx;
}
.submit_btn {
	width: 526rpx;
	height: 80rpx;
	background: #007aff;
	border-radius: 40rpx;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
	margin: 30rpx auto;
}
.picker {
	text-align: right;
}
input {
	text-align: right;
}
.bodyBox {
	background: #ffffff;
	border-radius: 24rpx;
	width: 100%;
}
.topBox {
	height: 80rpx;
	background: #ffffff;
	border-radius: 24rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	line-height: 80rpx;
	padding: 0 20rpx;
	font-size: 24rpx;
}
</style>