odd_job_applet/pages/form/form.vue

<template>
	<view>
		<view class="padding-sm bg-red text-center" v-if="form.usernumber>0 && form.form_log_count>=form.usernumber">因提交次数过多，您已不能再提交该表单</view>
		<view class="bg-white padding solids-bottom">
			<view class="cu-steps">
				<view class="cu-item" :class="0>stepsnum?'':'text-blue'">
					<text class="num" data-index="1"></text> 说明
				</view>
				<view class="cu-item" :class="1>stepsnum?'':'text-blue'">
					<text class="num" data-index="2"></text> 填写
				</view>
				<view class="cu-item" :class="2>stepsnum?'':'text-blue'">
					<text class="num" data-index="3"></text> 完成
				</view>
			</view>
		</view>

		<view class="echo-formmain padding bg-white" v-if="stepsnum==0">
			<u-parse :content="form.explain" noData="详情内容..." @navigate="navigate"></u-parse>
			<view class="padding-xl"></view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot" v-if="stepsnum==0">
			<view class="bg-blue submit" @tap="stepsNum(1)">下一步</view>
		</view>
		
		<form @submit="formSubmit" v-if="stepsnum==1">
			<view class="echo-formmain padding bg-white">
				<block v-for="(item,index) in form.formItem" :key="index">
					<view>
						<view class="cu-bar bg-white">
							<view class="action" style="margin-left: 0rpx;">
								<text class="cuIcon-title text-red" v-if="item.imust==1"></text>
								<text class="text-sm">{{item.title}}</text>
							</view>
							<view class="action" v-if="item.itype==8">
								{{setform['item'+item.id].length}}/{{item.picnumber}}
							</view>
						</view>

						<view class="padding-sm radius bg-white solid-bottom" v-if="item.itype==1">
							<input :name="'item'+item.id" :data-itemid="item.id" @input="setInput" placeholder="请输入..."></input>
						</view>

						<view class="padding-sm radius bg-white solid-bottom" v-if="item.itype==2">
							<textarea class="echo-formmain-textarea" :name="'item'+item.id" :data-itemid="item.id" @input="setInput"
							 maxlength="-1" placeholder="请输入..."></textarea>
						</view>

						<view class="padding-sm radius bg-white solid-bottom" v-if="item.itype==3">
							<picker mode="selector" :name="'item'+item.id" :data-itemid="item.id" @change="pickerChange" :value="setform['item'+item.id]"
							 :range="item.options">
								<view class="picker">{{setform['item'+item.id]>-1 ? item.options[setform['item'+item.id]] : "请选择..."}}</view>
							</picker>
						</view>

						<view class="radius bg-white solid-bottom" v-if="item.itype==4">
							<radio-group class="block" :name="'item'+item.id" :data-itemid="item.id" @change="radioChange">
								<label class="cu-form-group" v-for="(oitem,oindex) in item.options" :key="oindex">
									<view class="title">{{oitem}}</view>
									<radio :class="setform['item'+item.id]==oindex?'checked':''" :checked="setform['item'+item.id]==oindex?true:false"
									 :value="oindex"></radio>
								</label>
							</radio-group>
						</view>

						<view class="radius bg-white solid-bottom" v-if="item.itype==5">
							<checkbox-group class="block" :name="'item'+item.id" :data-itemid="item.id" @change="checkboxChange">
								<label class="cu-form-group" v-for="(oitem,oindex) in item.options" :key="oindex">
									<view class="title">{{oitem}}</view>
									<checkbox :class="setform['item'+item.id][oindex].checked?'checked':''" :checked="setform['item'+item.id][oindex].checked?true:false"
									 :value="oindex"></checkbox>
								</label>
							</checkbox-group>
						</view>

						<view class="padding-sm radius bg-white solid-bottom" v-if="item.itype==6">
							<picker mode="date" :name="'item'+item.id" :data-itemid="item.id" :value="setform['item'+item.id]" @change="dateChange">
								<view class="picker">
									{{setform['item'+item.id]}}
								</view>
							</picker>
						</view>

						<view class="padding-sm radius bg-white solid-bottom" v-if="item.itype==7">
							<picker mode="time" :name="'item'+item.id" :data-itemid="item.id" :value="setform['item'+item.id]" @change="timeChange">
								<view class="picker">
									{{setform['item'+item.id]}}
								</view>
							</picker>
						</view>

						<view class="grid col-4 grid-square flex-sub" v-if="item.itype==8">
							<block v-for="(picitem,picindex) in setform['item'+item.id]" :key="picindex">
								<view class="bg-img" :data-itemid="item.id" @tap="viewImage" :data-url="picitem">
									<image :src="picitem" mode="aspectFill"></image>
									<view class="cu-tag bg-red" :data-itemid="item.id" @tap.stop="delImg" :data-index="index">
										<text class='cuIcon-close'></text>
									</view>
								</view>
							</block>
							<view class="solids" :data-itemid="item.id" :data-picnumber="item.picnumber" @tap="chooseImage" v-if="setform['item'+item.id].length < item.picnumber">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>

						<view class="padding-top-xs text-gray text-sm">{{item.placeholder}}</view>
					</view>
				</block>
				<view class="padding-xl"></view>
				<!-- <view class="padding-tb flex flex-direction">
					<button class="cu-btn lg bg-blue margin-bottom" form-type="submit" v-if="form.usernumber==0 || form.form_log_count<form.usernumber">立即提交</button>
					<button class="cu-btn lg" @tap="stepsNum(0)">返回上一步</button>
				</view> -->
			</view>
			<view class="cu-bar bg-white tabbar border shop foot" v-if="stepsnum==1">
				<view class="submit" @tap="stepsNum(0)">上一步</view>
				<button class="bg-blue submit" style="border-radius: 0rpx !important;" form-type="submit" v-if="form.usernumber==0 || form.form_log_count<form.usernumber">立即提交</button>
			</view>
		</form>

		<view class="echo-formmain padding bg-white" v-if="stepsnum==2">
			<view class="padding">
				<view class="flex-sub text-center padding-tb">
					<image :src="$getImageUrl('static/images/applet/formend.jpg')" mode="widthFix" style="width: 370rpx; height: 350rpx;"></image>
					<view class="text-lg padding-tb">
						<text class="text-black">《{{form.title}}》信息提交成功</text>
					</view>
					<view class="flex flex-direction padding-xl">
						<button class="cu-btn lg bg-blue" @tap="toIndex">返回首页</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue';
	var _this;
	export default {
		components: {
			uParse
		},
		data() {
			return {
				isRotate: false,
				userinfo: {},
				form: {},
				stepsnum: 0,
				setform: {}
			}
		},
		onLoad: function(option) {
			_this = this;
			var formid = option.formid || 0;
			_this.userinfo = _this.checkLogin("/pages/form/form?formid=" + formid);
			if (_this.userinfo === false) {
				return false;
			}
			_this.$req.ajax({
				path: "form/getform",
				data: {
					formid: formid
				}
			}).then((data) => {
				_this.form = data.form;
				for (let key in data.form.formItem) {
					var item = data.form.formItem[key];
					var date = new Date();
					switch (item.itype) {
						case 1:
						case 2:
							_this.$set(_this.setform, 'item' + item.id, "");
							break;
						case 3:
						case 4:
							_this.$set(_this.setform, 'item' + item.id, -1);
							break;
						case 5:
							var optionsarr = [];
							for (var i = 0, lenI = item.options.length; i < lenI; ++i) {
								optionsarr.push({
									name: item.options[i],
									value: i,
									checked: false
								});
							}
							_this.$set(_this.setform, 'item' + item.id, optionsarr);
							break;
						case 6:
							_this.$set(_this.setform, 'item' + item.id, _this.formatDate(date));
							break;
						case 7:
							_this.$set(_this.setform, 'item' + item.id, _this.formatTime(date));
							break;
						case 8:
							_this.$set(_this.setform, 'item' + item.id, []);
							break;
						default:
							_this.$set(_this.setform, 'item' + item.id, "");
							break;
					}
				}
				uni.setNavigationBarTitle({
					title: _this.form.title
				});
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: _this.form.sharetil,
				path: "/pages/form/form?formid=" + _this.form.id,
				imageUrl: _this.form.sharepic
			}
		},
		methods: {
			// 提交表单
			formSubmit: function(e) {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				var formdata = {
					userid: _this.userinfo.id,
					formid: _this.form.id
				};
				for (let key in _this.form.formItem) {
					var item = _this.form.formItem[key];
					switch (item.itype) {
						case 1:
							formdata['item' + item.id] = _this.setform['item' + item.id];
							break;
						case 2:
							formdata['item' + item.id] = _this.setform['item' + item.id];
							break;
						case 3:
							formdata['item' + item.id] = _this.setform['item' + item.id] == -1 ? "" : item.options[_this.setform['item' +
								item.id]];
							break;
						case 4:
							formdata['item' + item.id] = _this.setform['item' + item.id] == -1 ? "" : item.options[_this.setform['item' +
								item.id]];
							break;
						case 5:
							formdata['item' + item.id] = "";
							var optionsarr = _this.setform['item' + item.id];
							for (var i = 0, lenI = optionsarr.length; i < lenI; ++i) {
								if (optionsarr[i].checked) {
									formdata['item' + item.id] += "###" + item.options[optionsarr[i].value];
								}
							}
							if (formdata['item' + item.id].substr(0, 3) == '###') {
								formdata['item' + item.id] = formdata['item' + item.id].substr(3);
							}
							break;
						case 6:
							formdata['item' + item.id] = _this.setform['item' + item.id];
							break;
						case 7:
							formdata['item' + item.id] = _this.setform['item' + item.id];
							break;
						case 8:
							formdata['item' + item.id] = _this.setform['item' + item.id].join("###");
							break;
						default:
							formdata['item' + item.id] = _this.setform['item' + item.id];
							break;
					}
					if (item.imust == 1 && formdata['item' + item.id] == "") {
						uni.showModal({
							title: '信息提示',
							content: item.title + " 为必填项，不能为空。",
							showCancel: false
						});
						_this.isRotate = false;
						return false;
					}
				}
				_this.$req.ajax({
					path: "form/setform",
					data: formdata,
				}).then((data) => {
					_this.isRotate = false;
					_this.stepsNum(2);
				}).catch((err) => {
					_this.isRotate = false;
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			// 单行输入框 & 多行输入框
			setInput: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				_this.setform['item' + itemid] = e.detail.value;
			},
			// 普通选择
			pickerChange: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				_this.setform['item' + itemid] = e.detail.value;
			},
			// 单选选择
			radioChange: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				_this.setform['item' + itemid] = e.detail.value;
			},
			// 多选选择
			checkboxChange: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				var items = _this.setform['item' + itemid];
				var values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			// 日期选择
			dateChange: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				_this.setform['item' + itemid] = e.detail.value
			},
			// 时间选择
			timeChange: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				_this.setform['item' + itemid] = e.detail.value
			},
			// 图片上传
			chooseImage: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				var picnumber = e.currentTarget.dataset.picnumber;
				uni.chooseImage({
					count: picnumber,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						_this.$req.ajaxFile({
							path: "attachment/tplfieldimage",
							title: '正在上传',
							filePath: res.tempFilePaths[0],
							fileName: 'file',
						}).then((filedata) => {
							var data = JSON.parse(filedata.data);
							_this.setform['item' + itemid].push(data.data.src);
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
						});
					}
				});
			},
			viewImage: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				uni.previewImage({
					urls: _this.setform['item' + itemid],
					current: e.currentTarget.dataset.url
				});
			},
			delImg: function(e) {
				var itemid = e.currentTarget.dataset.itemid;
				_this.setform['item' + itemid].splice(e.currentTarget.dataset.index, 1);
			},
			// 日期时间格式
			formatDate: function(date) {
				var myyear = date.getFullYear();
				var mymonth = date.getMonth() + 1;
				var myweekday = date.getDate();
				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}
				return (myyear + "-" + mymonth + "-" + myweekday);
			},
			formatTime: function(date) {
				var myhours = date.getHours();
				var myminutes = date.getMinutes();
				if (myhours < 10) {
					myhours = "0" + myhours;
				}
				if (myminutes < 10) {
					myminutes = "0" + myminutes;
				}
				return (myhours + ":" + myminutes);
			},

			stepsNum: function(num) {
				_this.stepsnum = num;
			},

			toIndex: function() {
				uni.reLaunch({
					url: '/pages/index/home'
				});
			},

			navigate: function(href, e) {
				// #ifdef H5
				location.href = href;
				// #endif
				// #ifndef H5
				uni.navigateTo({
					url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(href)
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.echo-formmain {
		min-height: calc(100vh - 182rpx);
	}

	.echo-formmain-textarea {
		width: 100%;
		height: 4.6em;
	}

	.echo-top-height {
		height: 180rpx;
	}
</style>