odd_job_applet/pages/broker/setreport.vue

<template>
	<view>
		<scroll-view scroll-x class="bg-white nav margin-bottom-xs">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="tabcur==1?'text-blue cur':''" @tap="tabSelect" :data-tabcur="1">
					报备信息
				</view>
				<view class="cu-item flex-sub" :class="tabcur==2?'text-blue cur':''" @tap="tabSelect" :data-tabcur="2">
					我的用户库
				</view>
			</view>
		</scroll-view>
		
		<view v-if="tabcur==1">
			<!-- <view class="setidcard" @tap="setIdcard">
				<image :src="$getImageUrl('static/images/applet/setidcard.png')"></image>
			</view> -->
			<form>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input placeholder="请输入姓名..." @input="bindInput" data-val="realname" :value="forminfo.realname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input placeholder="请输入手机号..." @input="bindInput" data-val="mobile" :value="forminfo.mobile"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input placeholder="请输入身份证号..." @input="bindInput" data-val="idcard" :value="forminfo.idcard"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">预计出发日期</view>
					<picker mode="date" :value="forminfo.arrivetime" @change="arrivetimeChange">
						<view class="picker">
							{{forminfo.arrivetime?forminfo.arrivetime:'请选择时间'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">报备备注</view>
					<textarea maxlength="140" placeholder="请输入报备备注..." @input="bindInput" data-val="remark" :value="forminfo.remark"></textarea>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue margin-tb-sm lg" @tap="addReport">确认提交</button>
				</view>
			</form>
		</view>
		<view v-else>
			<view class="cu-bar search bg-white solid-bottom">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @input="searchInput" :value="searchval" :adjust-position="false" type="text" placeholder="搜索用户昵称、姓名、手机号" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-blue shadow-blur round" @click="pageRefresh()">搜索</button>
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<block v-for="(item,index) in plist" :key="index">
					<view class="cu-item" :data-index="index" @tap="checkUser">
						<view class="cu-avatar radius lg" :style="'background-image:url('+item.avatar+');'"></view>
						<view class="content">
							<view>
								<view class="text-cut">{{item.nickname}}</view>
								<view class="cu-tag round bg-orange sm" v-if="item.authstatus==3">{{item.authstatus_text}}</view>
							</view>
							<view class="text-gray text-sm flex"> <view class="text-cut">{{item.mobile}} - {{item.realname}}</view></view>
						</view>
						<view class="action">
							<text class="lg text-gray cuIcon-right"></text>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="pstatus"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	var _this;
	export default {
		components: {
			avatar,
			uniLoadMore
		},
		data() {
			return {
				isRotate: false,
				userinfo: {},
				broker: {},
				snatchid: 0,
				tabcur: 1,
				
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				searchval: "",
				
				forminfo: {
					realname: "",
					mobile: "",
					idcard: "",
					arrivetime: "",
					remark: ""
				}
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.snatchid = option.id || 0;
			_this.userinfo = _this.checkLogin("/pages/my/myinfo");
			_this.broker = uni.getStorageSync('brokerinfo');
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			
			// 身份证识别
			setIdcard: function(rsp) {
				if(_this.isRotate){
					return false;
				}
				_this.isRotate = true;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						_this.$req.ajaxFile({
							path: "attachment/tplfieldimage",
							title:'正在上传',
							filePath: res.tempFilePaths[0],
							fileName:'file',
						}).then((filedata) => {
							var fdata = JSON.parse(filedata.data);
							_this.$req.ajax({
								path: "comjobs/disidcard",
								title:'正在识别',
								data: {
									picpath: fdata.data.path
								}
							}).then((data) => {
								_this.forminfo.realname = data.idcard.name;
								_this.forminfo.idcard = data.idcard.num;
								_this.isRotate = false;
							}).catch((err) => {
								uni.showModal({
									title: '信息提示',
									content: err,
									showCancel: false
								});
								_this.isRotate = false;
							});
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
							_this.isRotate = false;
						});
					}
				});
			},
			
			
			addReport: function() {
				if(_this.isRotate){
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "broker/addreport",
					data: {
						snatchid: _this.snatchid,
						brokerid: _this.broker.id,
						realname: _this.forminfo.realname,
						mobile: _this.forminfo.mobile,
						idcard: _this.forminfo.idcard,
						arrivetime: _this.forminfo.arrivetime,
						remark: _this.forminfo.remark
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: "报备信息提交成功。",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								_this.forminfo.realname = "";
								_this.forminfo.mobile = "";
								_this.forminfo.idcard = "";
								_this.forminfo.remark = "";
							}
						}
					});
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			
			
			checkBroker: function(e) {
				var index = e.currentTarget.dataset.index;
				_this.broker = _this.brokerall[index];
			},
			
			arrivetimeChange: function(e) {
				_this.forminfo.arrivetime = e.detail.value
			},
			bindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.forminfo[dataval] = e.detail.value;
			},
			
			
			
			checkUser: function(e) {
				var index = e.currentTarget.dataset.index;
				var user = _this.plist[index];
				_this.forminfo.realname = user.realname;
				_this.forminfo.mobile = user.mobile;
				_this.forminfo.idcard = user.idcard;
				_this.tabcur = 1;
			},
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			searchInput: function(e) {
				_this.searchval = e.detail.value;
			},
			getMore: function() {
				_this.$req.ajax({
					path: "comjobs/getuserlist",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						userid: _this.userinfo.id,
						searchval: _this.searchval
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			tabSelect: function(e) {
				_this.tabcur = e.currentTarget.dataset.tabcur;
				_this.pageRefresh();
			}
		}
	}
</script>

<style>
	
	.cu-form-group .title { min-width: calc(4em + 15px); }
	.cu-form-group input{ text-align: right; }
	
	.setidcard{ width: 120rpx; height: 120rpx; position: fixed; right: 60rpx; bottom: 60rpx; z-index: 999; }
	.setidcard image{ width: 120rpx; height: 120rpx; }
	
</style>