danling/pages/lawForm/prosecution_service.vue

<template>
	<view class="main">
		<view class="u-padding-left-40 u-padding-right-40" style="background: #fff;">
			<u-form :model="form" ref="uForm" label-width="130">
				<u-form-item label="姓名" prop="name" required>
					<u-input placeholder="请输入您的姓名" v-model="form.name" />
				</u-form-item>
				<u-form-item label="联系方式" prop="phone" required>
					<u-input type="number" maxlength="11" placeholder="请输入您的联系方式" v-model="form.phone" />
					<u-button open-type="getPhoneNumber" :custom-style="customBtn" @getphonenumber="getPhone"
						slot="right" type="success" hover-class="none" size="mini">获取手机号</u-button>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-padding-left-40 u-padding-right-40 u-margin-top-20" style="background: #fff;">
			<u-form label-width="130">
				<u-form-item label="申请事项" required label-position="top">
					<u-radio-group wrap v-model="value" active-color="#1721F4">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled">
							<text class="u-font-28 u-margin-left-12"
								style="color: #333;font-weight: 400;">{{item.name}}</text>
							<text class="u-font-28" style="color:#B1B2B1;font-weight: 400;">{{item.name_right}}</text>
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-padding-left-40 u-padding-right-40 u-margin-top-20" style="background: #fff;">
			<u-form label-width="130">
				<u-form-item label="预约时间" required>
					<u-input @click="selectCalendar = true" :disabled="true" placeholder="请选择预约时间" v-model="seleDate" />
				</u-form-item>
			</u-form>
		</view>
		<u-button hover-class="none" @click="submitForm" :custom-style="customStyle">提交</u-button>
		<calendar :is-show="selectCalendar" :transition="'slide'" :theme-color="'#1721F4'" @callback="getDate" />
		<lyg-popup @popupState="popupState" :nodeContent="nodeContent" title="使用须知"></lyg-popup>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import Calendar from '@/components/mobile-calendar-simple/Calendar.vue'
	import lyg_popup from '@/components/lyg-popup/lyg-popup.vue';
	export default {
		components: {
			Calendar,
			lyg_popup
		},
		data() {
			return {
				seleDate: '',
				selectCalendar: false,
				customBtn: {
					backgroundColor: '#1721F4',
					color: '#fff'
				},
				customStyle: {
					width: '694rpx',
					height: '88rpx',
					backgroundColor: '#1721F4',
					color: '#fff',
					marginTop: '130rpx',
					marginBottom: '30rpx'
				},
				form: {
					name: '',
					phone: ''
				},
				value: '申请阅卷',
				list: [{
						name: '申请阅卷',
						disabled: false,
						name_right: '（限辩护人或诉讼代理人）'
					}, {
						name: '申请收集（调取）证据材料',
						disabled: false,
						name_right: '（限辩护律师）'
					},
					{
						name: '申请自行收集证据材料',
						disabled: false,
						name_right: '（限辩护律师）'
					},
					{
						name: '申请羁押必要性审查',
						disabled: false,
						name_right: ''
					},
					{
						name: '提供证据材料',
						disabled: false,
						name_right: ''
					},
					{
						name: '要求听取意见',
						disabled: false,
						name_right: ''
					},
					{
						name: '预约视频接访',
						disabled: false,
						name_right: ''
					},
					{
						name: '预约检察长接访',
						disabled: false,
						name_right: ''
					},
					{
						name: '预约律师接访',
						disabled: false,
						name_right: ''
					},
					{
						name: '申请会见',
						disabled: false,
						name_right: '（限辩护人）'
					}
				],
				rules: {
					name: [{
						required: true,
						message: '请输入您的姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入汉字',
						trigger: ['change', 'blur'],
					}],
					phone: [{
							required: true,
							min: 11,
							message: '请输入联系方式',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
				},
				nodeContent:''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getServiceContent()
		},
		methods: {
			popupState(value) {
				if (!value) {
					uni.navigateBack()
					return false
				}
			},
			async getServiceContent() {
				let res = await this.$u.get('/home/xieyi', {
					id: 8
				})
				this.nodeContent = res.content
			},
			getPhone(e) {
				uni.login({
					success: (res) => {
						util.getPhoneData(res.code, e.detail).then(data => {
							this.form.phone = data
						})
					}
				})
			},
			radioChange(e) {
				this.value = e
			},
			getDate(data) {
				if (data.startStr.week == '周六' || data.startStr.week == '周日') {
					uni.showToast({
						title: "请选择工作日预约",
						icon: "none"
					})
					return false
				}
				this.seleDate = data.startStr.dateStr
				this.selectCalendar = false
			},
			submitForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.value == '') {
							uni.showToast({
								title: "请选择申请事项",
								icon: "none"
							})
							return false
						}
						if (this.seleDate == '') {
							uni.showToast({
								title: "请选择预约时间",
								icon: "none"
							})
							return false
						}
						this.submitServiceForm()
					}
				});
			},
			async submitServiceForm() {
				let res = await this.$u.post("/form-input/services", {
					name: this.form.name,
					contact: this.form.phone,
					content: this.value,
					y_time: this.seleDate
				})
				uni.showModal({
					title: "温馨提示",
					content: "您的预约我们已经收悉，将尽快安排工作人员办理",
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			}
		}
	}
</script>

<style>
	.main {
		min-height: 100vh;
		/* padding-bottom: 36rpx; */
	}

	.u-radio-group {
		margin-left: 26rpx;
	}

	.u-dropdown__menu__item {
		justify-content: flex-end !important;
	}

	.u-dropdown__content {
		width: 100% !important;
		height: 530rpx !important;
	}
</style>