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_title">
				项目信息登记
			</view>

			<view class="form_item">
				<span class="icon">*</span>客户名称
				<uni-easyinput placeholder="请输入客户名称" v-model="clientName"></uni-easyinput>
			</view>

			<view class="form_item">
				<span class="icon">*</span>项目名称
				<uni-easyinput placeholder="请输入项目名称" v-model="projectName"></uni-easyinput>
			</view>

			<view class="form_item">
				<span class="icon">*</span>项目金额
				<uni-easyinput type="number" placeholder="请输入项目金额" v-model="projectAmount"></uni-easyinput>
			</view>

			<view class="form_item">
				<span class="icon">*</span>预计投标时间
				<picker mode="date" fields="month" :start="getCurrentDate()" :value="biddingTime"
					@change="bindDateChange">
					<uni-easyinput disabled placeholder="请选择预计投标时间" suffixIcon="calendar-filled" v-model="biddingTime">
					</uni-easyinput>
				</picker>
			</view>

			<view class="form_item">
				<span class="icon">*</span>所属行业
				<uni-data-select placeholder="请选择所属行业" v-model="industry" :localdata="range"></uni-data-select>
			</view>

			<view class="form_item">
				<span class="icon">*</span>产品类型（多选）
				<uni-data-checkbox multiple v-model="productType" :localdata="hobby"></uni-data-checkbox>
			</view>

			<view class="form_item">
				项目基本情况
				<uni-easyinput type="textarea" :maxlength="-1" placeholder="建议填写竞争情况 , 客户情况"
					v-model="projectInformation">
				</uni-easyinput>
			</view>

			<view class="form_item">
				附件材料（建议上传项目相关信息或清单图片）
				<uni-file-picker ref="filePicker" limit="3" title="最多上传3张图片" :value="projectImgList"
					fileMediatype="image" :image-styles="imageStyles" mode="grid" @select="select"
					@delete="handleDelete">
				</uni-file-picker>
			</view>

			<button class="form_button" @click="handleSubmit">提交</button>

			<view class="footer">
				本系统由新华三江西代表处提供技术支持
			</view>
		</view>

	</view>

	<!-- 用于图片压缩的canvas画布 -->
	<canvas :style="{
	            width:cw+'px',
	            height:cw+'px',
	            position:'absolute', zIndex: -1, left: '-10000rpx' , top: '-10000rpx'}" canvas-id="zipCanvas">
	</canvas>
	<!--画布结束-->
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		myRequest
	} from "@/util/api.js"
	// 图片压缩方法
	import
	getLessLimitSizeImage
	from "@/util/imageCompress.js"

	onMounted(() => {
		const accredit = uni.getStorageSync('accredit')
		if (accredit) {
			submit()
		}
	})
	//画板边长默认是屏幕宽度，正方形画布
	const cw = uni.getSystemInfoSync().windowWidth
	// 用户姓名绑定数据
	const name = ref(uni.getStorageSync('form_name') || '')
	// 用户手机号绑定数据
	const phone = ref(uni.getStorageSync('form_phone') || '')
	// 用户单位绑定数据
	const company = ref(uni.getStorageSync('form_company') || '')
	// 客户名称
	const clientName = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content')).clientName :
		'')
	// 项目名称
	const projectName = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))
		.projectName : '')
	// 项目金额
	const projectAmount = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))
		.projectAmount : '')
	// 预计投标时间
	const biddingTime = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))
		.biddingTime : '')
	// 所属行业
	const industry = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content')).industry : '')
	// 产品类型
	const productType = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))
		.productType : [])
	// 项目基本情况
	const projectInformation = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))
		.projectInformation : '')

	// 显示的图片数据
	const projectImgList = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))
		.projectImgList : [])

	// 上传的图片数据
	const subImgList = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content'))

		.subImgList : [])

	// 微信手机号码绑定数据
	const wxPhone = ref(uni.getStorageSync('wxPhone') || '')

	// 所属行业数组数据
	const range = ref(
		[{
				value: 0,
				text: "政府"
			},
			{
				value: 1,
				text: "教育"
			},
			{
				value: 2,
				text: "医疗"
			},
			{
				value: 3,
				text: "企业"
			},
			{
				value: 4,
				text: "公检法"
			},
			{
				value: 5,
				text: "交通"
			},
			{
				value: 6,
				text: "分销&SMB"
			},
			{
				value: 7,
				text: "其他"
			}
		]
	)
	// 产品类型数组
	const hobby = ref(
		[{
			text: '网络',
			value: 0
		}, {
			text: '安全',
			value: 1
		}, {
			text: 'IT',
			value: 2
		}, {
			text: '云智',
			value: 3
		}, {
			text: 'PC',
			value: 4
		}, {
			text: 'AI视觉',
			value: 5
		}]
	)

	// 图片上传框的样式
	const imageStyles = {
		width: 75,
		height: 75,
		border: {
			color: "#ccc",
			width: 1,
			style: 'dashed',
			radius: '5px'
		}
	}
	// 上传组件元素
	const filePicker = ref(null)

	// 日期选择框绑定回调
	const bindDateChange = (e) => {
		const val = e.detail.value
		biddingTime.value = val
	}

	// 提交按钮回调
	const handleSubmit = () => {
		const flag = handleValidate()
		if (flag) {
			uni.setStorageSync('form_name', name.value);
			uni.setStorageSync('form_phone', phone.value);
			uni.setStorageSync('form_company', company.value);
			const formContent = {
				clientName: clientName.value,
				projectName: projectName.value,
				projectAmount: projectAmount.value,
				biddingTime: biddingTime.value,
				industry: industry.value,
				productType: productType.value,
				projectInformation: projectInformation.value,
				projectImgList: projectImgList.value,
				subImgList: subImgList.value
			}
			uni.setStorageSync('form_content', JSON.stringify(formContent));
			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 handleValidate = () => {
		const reName = /^[\u4e00-\u9fa5]{2,4}$/
		const rePhone = /^[1][3,4,5,7,8,9][0-9]{9}$/
		const reProjectAmount = /^\+?[1-9][0-9]*$/

		if (name.value == '') {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return false
		}
		if (!reName.test(name.value)) {
			uni.showToast({
				title: '姓名格式有误',
				icon: 'none'
			})
			return false
		}
		if (phone.value == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return false
		}
		if (!rePhone.test(phone.value)) {
			uni.showToast({
				title: '手机格式有误',
				icon: 'none'
			})
			return false
		}
		if (company.value == '') {
			uni.showToast({
				title: '请输入单位名称',
				icon: 'none'
			})
			return false
		}
		if (clientName.value == '') {
			uni.showToast({
				title: '请输入客户名称',
				icon: 'none'
			})
			return false
		}
		if (projectName.value == '') {
			uni.showToast({
				title: '请输入项目名称',
				icon: 'none'
			})
			return false
		}
		if (projectAmount.value == '') {
			uni.showToast({
				title: '请输入项目金额',
				icon: 'none'
			})
			return false
		}
		if (!reProjectAmount.test(projectAmount.value)) {
			uni.showToast({
				title: '项目金额请输入正整数',
				icon: 'none'
			})
			return false
		}
		if (biddingTime.value == '') {
			uni.showToast({
				title: '请选择预计投标时间',
				icon: 'none'
			})
			return false
		}
		if (industry.value === '') {
			uni.showToast({
				title: '请选择所属行业',
				icon: 'none'
			})
			return false
		}
		if (productType.value.length == 0) {
			uni.showToast({
				title: '请选择产品类型',
				icon: 'none'
			})
			return false
		}
		return true
	}

	// 请求提交接口回调
	const submit = async () => {
		const bProduct = []
		productType.value.forEach(item => {
			bProduct.push(hobby.value[item].text)
		})

		const res = await myRequest({
			url: "/informationReporting/add",
			method: "post",
			data: {
				name: name.value,
				phone: phone.value,
				company: company.value,
				customerName: clientName.value,
				entryName: projectName.value,
				projectAmount: projectAmount.value,
				tenderTime: biddingTime.value,
				content: projectInformation.value,
				trade: range.value[industry.value].text,
				bProduct,
				wxPhone: wxPhone.value,
				bFile: subImgList.value
			}
		})
		// console.log(res)
		if (res.success && res.code == 1) {
			uni.showToast({
				title: '提交成功',
				duration: 3000
			})
			clientName.value = ''
			projectName.value = ''
			projectAmount.value = ''
			biddingTime.value = ''
			industry.value = ''
			productType.value = []
			projectInformation.value = ''
			subImgList.value = []
			projectImgList.value = []
			filePicker.value.clearFiles()

			uni.removeStorageSync('form_content')
			uni.setStorageSync('accredit', false)
		} else {
			uni.showToast({
				title: res.message,
				icon: 'error'
			})
		}
	}

	// 获取当前时间 YY-MM-DD
	const getCurrentDate = () => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	// 选择图片回调
	const select = (e) => {
		// console.log(e);
		e.tempFiles.forEach((item) => {
			//这里的id和页面中写的html代码的canvas的id要一致
			let canvasId = 'zipCanvas'
			//原图的路径
			let imagePath = item.path;
			//大小限制1024kb
			let limitSize = 1024;
			//初始绘画区域是画布自身的宽度也就是屏幕宽度
			let drawWidth = uni.getSystemInfoSync().windowWidth;

			getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: `https://chtech.ncjti.edu.cn/gradiate-school/reporting/file/fileUpDown`,
					filePath: resPath,
					name: 'file',
					success: (uploadFileRes) => {
						subImgList.value.push((JSON.parse(uploadFileRes.data).data).join())
						projectImgList.value.push({
							url: item.path,
							name: ""
						})
						uni.hideLoading();
					},
					fail: () => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				});
			})
		})
	}

	// 删除图片回调
	const handleDelete = (e) => {
		// console.log(e);
		const num = projectImgList.value.findIndex(v => v.url === e.tempFilePath);
		subImgList.value.splice(num, 1);
		projectImgList.value.splice(num, 1);
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;

		.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;
			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;
				}

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

				:deep .uni-data-checklist {
					margin-top: 10rpx !important;
					background-color: #F2F2F2;
				}
			}

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

			.footer {
				margin: 70rpx 0;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>