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;" @click="backPage">稍后再填</view>
		</view>
		<u-collapse v-if="remarkStatus" :item-style="itemStyle" event-type="close">
			<u-collapse-item title="审核结果反馈">
				<view style="padding-bottom: 30rpx;">
					<text class="collapse-item">{{ remark }}</text>
				</view>
			</u-collapse-item>
		</u-collapse>
		<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="getChast" 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>
		<u-action-sheet :list="list" v-model="showTableDown" @click="clickIndex"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showTableDown: false,
			list: [
				{
					text: '上传图片'
				},
				// {
				// 	text: '上传文件'
				// }
			],
			itemStyle: {
				marginTop: '20px',
				backgroundColor: '#fff',
				borderRadius: '24rpx',
				padding: '0rpx 20rpx'
			},
			form: {
				commitment_seal: ''
			},
			goodsId: null,
			fileList1: [],
			id: null, //id有值的话就是修改页面
			listData: {}, //页面数据
			openVerify: false, // 控制是否手动验证
			nextStatus: false, //是否有下一步
			titleName: '文件名称居中对齐过长换行', //word名称
			remark: '', //反馈文本
			remarkStatus: false, //是否存在审核结果反馈
			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: {
		backPage() {
			uni.navigateBack();
		},
		seePhotos(url) {
			uni.previewImage({
				urls: [url]
			});
		},
		downDocx(url) {
			this.$api.addWordbaseprofileStamp({ goodsId: this.goodsId }).then(res => {
				uni.downloadFile({
					url: this.$method.splitImgHost(res.data.msg),
					success: result => {
						if (result.statusCode === 200) {
							const filePath = result.tempFilePath
							console.log(this.$method.splitImgHost(res.data.msg));
							this.$method.showToast('下载成功');
							uni.saveVideoToPhotosAlbum({
								filePath: filePath,
								success: function (errMsg) {
								uni.showToast({
								  mask: true,
								  title: '保存成功'
								  });
								},
								fail:(errMsg)=>{
									uni.showToast({
										mask: true,
										title: '保存失败'
										});
									},
									complete:(errMsg)=>{
													
									}
								});     
							/* uni.openDocument({
							    filePath: filePath,
							    fileType:'doc',
							    showMenu:true,
							    success: function (res) {
							    }
							  }) */
						}
					}
				});
			});
		},
		clearWord() {
			this.$set(this.form, 'commitment_seal', '');
			this.titleName = '';
		},
		clickIndex(inds){
			if(inds === 0){
				this.uploadImgs()
			}
			if(inds === 1){
				this.uploadFieds()
			}
		},
		getChast(){
			this.showTableDown = true;
		},
		uploadImgs(){
			var self = this
			uni.chooseImage({
			    count: 1, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    success: function (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') {
			        		self.$method.showToast('请上传图片格式');
			        		return;
			        	}
			        	self.$set(self.form, 'commitment_seal', res.tempFiles[0].path);
			        	self.$nextTick(function() {
			        		this.resultForm();
			        	});
			        }
			    }
			});
		},
		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']) {
				data.commitment_seal = await this.$method.uploadFile(data.commitment_seal, 0);
			}
			this.optionChanges(data);
		},
		optionChanges(data) {
			var self = this;
			var objs = {};
			for (let k in data) {
				objs[k] = {
					fieldKey: k,
					value: data[k],
					fieldName: (function() {
						for (let i = 0; i < self.listData.length; i++) {
							if (self.listData[i].fieldKey == k) {
								return self.listData[i].fieldName;
							}
						}
					})(),
					status: self.remarkStatus ? 1 : 0
				};
			}
			var datas = {
				goodsId: self.goodsId,
				keyValue: JSON.stringify(objs)
			};
			if (self.remarkStatus) {
				datas.id = self.id;
				self.$api.editbaseprofileStamp(datas).then(res => {
					if (res.data.code === 200) {
						self.$method.showToast('提交成功');
						uni.navigateBack();
					}
				});
			} else {
				self.$api.addbaseprofileStamp(datas).then(res => {
					if (res.data.code === 200) {
						self.$method.showToast('提交成功');
						uni.navigateBack();
					}
				});
			}
		},
		//验证表单
		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() {
			var self = this;
			this.$api.getbaseprofiletpId(this.goodsId).then(res => {
				var ast = JSON.parse(res.data.data.keyValue2);
				self.listData = ast;
				self.$api.getbaseprofileStampgetInfo({ goodsId: self.goodsId }).then(result => {
					if (result.data.code === 200) {
						if (result.data.data && result.data.data.status === 3) {
							self.remark = result.data.data.text;
							self.remarkStatus = true;
							self.id = result.data.data.id;
						} else if (result.data.data && (result.data.data.status === 1 || result.data.data.status === 2)) {
							uni.showModal({
								showCancel: false,
								content:
									result.data.data.status === 1
										? '该商品审核资料已通过，不可重复提交资料'
										: result.data.data.status === 2
										? '该商品审核资料处于待审核状态，不可重复提交资料'
										: '请联系管理员',
								success: function(k) {
									if (k.confirm) {
										uni.navigateBack();
									}
								}
							});
						}
					}
				});
			});
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope>
/deep/ .u-collapse-title {
	color: red;
	font-size: 24rpx;
}
.collapse-item {
	color: #666;
	font-size: 24rpx;
	padding-bottom: 30rpx;
}
.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>