odd_job_applet/pages/broker/setfollow.vue

<template>
	<view>
		
		<scroll-view scroll-x class="bg-white radius nav echo-fixed-top">
			<view class="flex text-center solid-bottom">
				<view class="cu-item flex-sub" :class="1==TabCur?'text-blue cur':''" @tap="tabSelect" :data-id="1">
					上报跟进信息
				</view>
				<view class="cu-item flex-sub" :class="2==TabCur?'text-blue cur':''" @tap="tabSelect" :data-id="2">
					往期跟进记录
				</view>
			</view>
		</scroll-view>
		<view class="echo-fixed-top-empty"></view>
		
		<view class="cu-list menu margin-bottom-sm">
			<view class="cu-item">
				<view class="content">
					<text>昵称/姓名</text>
				</view>
				<view class="action">
					<text>{{user.nickname}} / {{user.realname}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text>当前状态</text>
				</view>
				<view class="action">
					<text>{{forminfo.followstatusarr[parseInt(user.followstatus)-1]}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="makePhone()">
				<view class="content">
					<text>手机号</text>
				</view>
				<view class="action">
					<text>{{user.mobile}}</text>
				</view>
			</view>
		</view>
		
		<form v-if="1==TabCur">
			<view class="cu-form-group">
				<view class="title">跟进状态</view>
				<picker @change="followstatusChange" :value="forminfo.followstatus" :range="forminfo.followstatusarr">
					<view class="picker">
						{{forminfo.followstatusarr[forminfo.followstatus]}}
					</view>
				</picker> 
			</view>
			<view class="cu-form-group">
				<view class="title">跟进方式</view>
				<picker @change="ftypeChange" :value="forminfo.ftype" :range="forminfo.ftypearr">
					<view class="picker">
						{{forminfo.ftypearr[forminfo.ftype]}}
					</view>
				</picker> 
			</view>
			<view class="cu-form-group align-start">
				<view class="title">备注信息</view>
				<textarea maxlength="-1" 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="sendFollow">确认提交</button>
			</view>
		</form>
		
		<block v-if="2==TabCur">
			<view class="padding text-center text-grey" v-if="user.userFollow.length==0">
				还没有有跟进记录...
			</view>
			<view v-else>
				<view class="cu-timeline" v-for="(item,index) in user.userFollow" :key="index">
					<view class="cu-time">{{item.createtime}}</view>
					<view class="cu-item text-blue">
						<view class="content">
							<text>【{{item.ftype}}】</text> {{item.remark}}
						</view>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				TabCur: 1,
				isRotate: false,
				brokerinfo: {},
				user: {},
				
				forminfo: {
					followstatusarr: ['未跟进', '未面试', '面试通过', '面试未通过', '用户放弃', '已入职', '已离职'],
					followstatus: 0,
					ftypearr: ['电话', '微信/QQ', '其他'],
					ftype: 0,
					remark: ""
				}
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.brokerinfo = uni.getStorageSync('brokerinfo') || false;
			var userid = option.userid || 0;
			_this.$req.ajax({
				path: "broker/getmyuser",
				data: {
					userid: userid,
					brokerid: _this.brokerinfo.id
				}
			}).then((data) => {
				_this.user = data.user;
				_this.forminfo.followstatus = parseInt(data.user.followstatus) - 1;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		methods: {
			sendFollow: function() {
				if(_this.isRotate){
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "broker/sendfollow",
					data: {
						userid: _this.user.id,
						followstatus: parseInt(_this.forminfo.followstatus) + 1,
						ftype: _this.forminfo.ftypearr[_this.forminfo.ftype],
						remark: _this.forminfo.remark
					}
				}).then((data) => {
					_this.user = data.user;
					_this.forminfo.followstatus = parseInt(data.user.followstatus) - 1;
					uni.showModal({
						title: '信息提示',
						content: "跟进信息提交成功。",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								_this.TabCur = 2;
							}
						}
					});
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			
			
			followstatusChange: function(e) {
				_this.forminfo.followstatus = e.detail.value
			},
			ftypeChange: function(e) {
				_this.forminfo.ftype = e.detail.value
			},
			bindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.forminfo[dataval] = e.detail.value;
			},
			
			makePhone: function() {
				uni.makePhoneCall({
					phoneNumber: _this.user.mobile
				});
			},
			goLPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo===false){
					return false;
				}
				uni.navigateTo({
					url: pageurl,
					fail: function(){
						uni.switchTab({
						    url: pageurl
						});
					}
				});
			},
			tabSelect: function(e) {
				_this.TabCur = e.currentTarget.dataset.id;
			}
		}
	}
</script>

<style>
	.cu-time{ width: 300rpx !important; padding-left: 30rpx !important; text-align: left !important; }
</style>