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://jiangxih3cpartner.com/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>