huasan-app/pages/index/index.vue

<template>
	<view class="content">
		<view class="header"></view>
		<view class="form">
			<view class="form_title">
				登记信息
			</view>
			<view class="form_item">
				姓名<span class="icon">*</span>
				<uni-easyinput placeholder="请输入姓名" v-model="name"></uni-easyinput>
			</view>
			<view class="form_item">
				手机号<span class="icon">*</span>
				<uni-easyinput type="number" placeholder="请输入手机号" v-model="phone"></uni-easyinput>
			</view>
			<view class="form_item">
				单位名称<span class="icon">*</span>
				<uni-easyinput placeholder="请输入单位名称" v-model="company"></uni-easyinput>
			</view>
			<view class="form_item">
				事件登记<span class="icon">*</span>
				<uni-easyinput type="textarea" :maxlength="-1" placeholder="请输入需要登记的事件" v-model="content">
				</uni-easyinput>
			</view>

			<button class="form_button" @click="handleSubmit">提交</button>
		</view>
		<view class="footer">
			该系统由创海科技提供技术支持
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		myRequest
	} from "../../util/api.js"

	onMounted(() => {
		const accredit = uni.getStorageSync('accredit')

		if (accredit) {
			submit()
		}
	})

	const name = ref(uni.getStorageSync('form_name') || '')
	const phone = ref(uni.getStorageSync('form_phone') || '')
	const company = ref(uni.getStorageSync('form_company') || '')
	const content = ref(uni.getStorageSync('form_content') || '')
	const wxPhone = ref(uni.getStorageSync('wxPhone') || '')

	const handleSubmit = () => {
		const reName = /^[\u4e00-\u9fa5]{2,4}$/
		const rePhone = /^[1][3,4,5,7,8,9][0-9]{9}$/

		if (name.value == '') {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}
		if (!reName.test(name.value)) {
			uni.showToast({
				title: '姓名格式有误',
				icon: 'none'
			})
			return
		}
		if (phone.value == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		if (!rePhone.test(phone.value)) {
			uni.showToast({
				title: '手机格式有误',
				icon: 'none'
			})
			return
		}
		if (company.value == '') {
			uni.showToast({
				title: '请输入单位名称',
				icon: 'none'
			})
			return
		}
		if (!content.value) {
			uni.showToast({
				title: '请输入需要登记的事件',
				icon: 'none'
			})
			return
		}

		uni.setStorageSync('form_name', name.value);
		uni.setStorageSync('form_phone', phone.value);
		uni.setStorageSync('form_company', company.value);
		uni.setStorageSync('form_content', content.value);
		if (!wxPhone.value) {
			uni.showModal({
				title: '提示',
				content: '本次操作需要获取您的手机号码',
				success: (res) => {
					if (res.confirm) {

						uni.navigateTo({
							url: "/pages/authorization/authorization"
						})
					} else if (res.cancel) {

					}
				}
			});
		} else {
			uni.showModal({
				title: '提示',
				content: '确认提交吗',
				success: (res) => {
					if (res.confirm) {
						submit()
					} else if (res.cancel) {

					}
				}
			});

		}
	}

	const submit = async () => {
		const res = await myRequest({
			url: "/informationReporting/add",
			method: "post",
			data: {
				name: name.value,
				phone: phone.value,
				company: company.value,
				content: content.value,
				wxPhone: wxPhone.value,
			}
		})
		// console.log(res)
		if (res.success && res.code == 1) {
			uni.showToast({
				title: '提交成功',
				duration: 3000
			})
			content.value = ''
			uni.setStorageSync('form_content', '')
			uni.setStorageSync('accredit', false)
		} else {
			uni.showToast({
				title: res.message,
				icon: 'error'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F2F2F2;

		.header {
			width: 750rpx;
			height: 300rpx;
			border-radius: 0 0 10% 10%;
			background-color: #1E7DFB;
		}

		.form {
			position: absolute;
			top: 42rpx;
			left: 30rpx;
			right: 30rpx;
			padding: 0 32rpx;
			height: 1055rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.form_title {
				line-height: 105rpx;
				font-weight: bold;
				font-size: 34rpx;
			}

			.form_item {
				margin-bottom: 20rpx;
				font-size: 28rpx;

				.icon {
					color: #D43030;
				}

				:deep .uni-easyinput {
					margin-top: 10rpx;
					background-color: #F2F2F2;
				}
			}

			.form_button {
				margin-top: 65rpx;
				background-color: #1E7DFB;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.footer {
			position: absolute;
			bottom: 44rpx;
			width: 100vw;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>