ZhiHuiJiaoWu_UniApp/pages/market/clue/new_task.vue

<template>
	<view class="assemble">
		<view class="title">跟进任务</view>
		<view class="form-style">
			<fui-form class="input-style" ref="form" top="0" :model="formData" :show="false">
				<fui-form-item label="跟进客户" labelSize='26' prop="name" background='#434544' labelColor='#fff'
					:bottomBorder='false'>
					<view class="input-title" style="margin-right:14rpx;" v-if="result_name == ''"
						@click="selectCon(2)">点击选择</view>
					<view class="input-title" style="margin-right:14rpx;" v-else @click="selectCon(2)">{{ result_name }}
					</view>
				</fui-form-item>
				<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
					background='#434544' labelColor='#fff' :bottomBorder='false'>
					<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)"
						v-if="result_date == ''">点击选择</view>
					<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_date }}
					</view>
				</fui-form-item>
				<fui-form-item label="跟进内容" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
					:bottomBorder='false'>
					<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
						backgroundColor="#434544" size="26" color="#fff"></fui-input>
				</fui-form-item>
				<fui-form-item label="跟进人员" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
					background='#434544' labelColor='#fff' :bottomBorder='false'>
					<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
						backgroundColor="#434544" size="26" color="#fff"></fui-input>
				</fui-form-item>
				<fui-form-item label="任务提醒" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
					:bottomBorder='false'>
					<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)"
						v-if="result_renwu == ''">点击选择</view>
					<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" v-else>{{ result_renwu }}
					</view>
				</fui-form-item>
				<fui-form-item label="提醒方式" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
					:bottomBorder='false'>
					<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)"
						v-if="result_fangshi == ''">点击选择</view>
					<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_fangshi }}
					</view>
				</fui-form-item>
			</fui-form>
		</view>
		<view class="fui-btn__box">
			<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button>
		</view>

		<!-- 年月日-选择时间 -->
		<fui-date-picker :show="show_date" type="3" @change="change_date" @cancel="cancel_date"></fui-date-picker>

		<!-- 选择器 -->
		<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="change" @cancel="cancel"></fui-picker>

	</view>
</template>

<script>
	const rules = [{
		name: "mobile",
		rule: ["required", "isMobile"],
		msg: ["请输入手机号", "请输入正确的手机号"]
	}];
	export default {
		data() {
			return {
				rules,
				formData: {},
				show_date: false,
				result_date: '',
				result_name: '',
				result_renwu: '',
				result_fangshi: '',
				show: false,
				options: [],
				linkage: true,
				options_type : undefined,
				options_kehu: [{
					'value': 1,
					'text': '张三'
				}, {
					'value': 2,
					'text': '李四'
				}, {
					'value': 3,
					'text': '王五'
				}],
				options_renwu: [{
					'value': 1,
					'text': '是'
				}, {
					'value': 2,
					'text': '否'
				}],
				options_fangshi: [{
					'value': 1,
					'text': '短信'
				}, {
					'value': 2,
					'text': '微信'
				}]
			}
		},
		methods: {
			submit() {
				console.log(this.formData)
				this.$refs.form.validator(null, null, true).then(res => {
					console.log(res)
					if (res.isPassed) {
						console.log('校验通过！')
					} else {
						console.log('向上滑动页面查看错误提示！')
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//选择弹窗
			selectCon(type) {
				if (type == 1) {
					//选择跟进时间
					this.show_date = true
				} else if (type == 2) {
					//选择跟进客户
					this.options_type = 2
					this.options = this.options_kehu
					this.show = true
					this.linkage = true
				} else if (type == 3) {
					//选择任务提醒
					this.options_type = 3
					this.options = this.options_renwu
					this.show = true
					this.linkage = true
				} else if (type == 4) {
					//选择提醒方式
					this.options_type = 4
					this.options = this.options_fangshi
					this.show = true
					this.linkage = true
				}
			},
			//选择跟进时间
			change_date(e) {
				this.show_date = false
				this.result_date = e.result ?? ''
				console.log(this.result_date, '选择')
			},
			//关闭选择跟进时间
			cancel_date() {
				this.show_date = false
			},
			//选择框
			change(e) {
				this.show = false
				console.log(e)
				if(this.options_type == 2){
					this.result_name = e.result
				}else if(this.options_type == 3){
					this.result_renwu = e.result
				}else if(this.options_type == 4){
					this.result_fangshi = e.result
				}
			},
			//关闭选择框
			cancel() {
				this.show = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.assemble {
		width: 100%;
		height: 100vh;
		background: #292929;
	}

	.title {
		font-size: 26rpx;
		color: #fff;
		padding: 26rpx 0 26rpx 32rpx;
	}

	.input-title {
		font-size: 26rpx;
		color: #fff;
	}

	.form-style {
		width: 100%;
		background: #434544;
	}

	.form-style-vid {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx 0;
	}

	.input-style {
		text-align: right !important;
	}

	.fui-btn__box {
		margin: 20rpx auto;
		width: 92%;

	}
</style>