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-select placeholder="请选择是否授权" v-model="isAzt" :localdata="range_azt"></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-easyinput type="textarea" :maxlength="-1" placeholder="建议填写加入的控标参数情况" v-model="projectParams"></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>

	<!-- 提交成功弹窗区域 -->
	<uni-popup ref="popup" type="center" :is-mask-click="false">
		<view class="popup_body">
			<img class="img" mode="aspectFill" src="../../static/success.png" />
			<view class="popup_text">提交成功</view>
			<view class="popup_btn" @click="handleSubscribe">我知道了</view>
		</view>
	</uni-popup>

	<!-- 用于图片压缩的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 isAzt = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content')).isAzt : '')
// 产品类型
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 projectParams = ref(uni.getStorageSync('form_content') ? JSON.parse(uni.getStorageSync('form_content')).projectParams : '')

// 显示的图片数据
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 range_azt = ref([
	{
		value: 0,
		text: '是'
	},
	{
		value: 1,
		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 popup = ref(null)

// 模版id
const templateOrder = ref('I3o8CRAiaaNbug3Ukkmv1t-pCIbzxU8OicqMWvdR9lc')

// 点击弹窗 我知道了 按钮回调
const handleSubscribe = () => {
	popup.value.close()
	// 订阅消息
	uni.getSetting({
		withSubscriptions: true,
		success: (res) => {
			// console.log(res)
			if (res.subscriptionsSetting[templateOrder.value] !== 'reject') {
				uni.requestSubscribeMessage({
					tmplIds: [templateOrder.value],
					success: (res) => {
						// console.log(res)
						if (res[templateOrder.value] !== 'reject') {
							console.log('成功')
							// uni.showToast({
							// 	title:"订阅成功",
							// 	icon:'success'
							// })
						} else {
							console.log('拒绝2')
							// uni.showToast({
							// 	title:"订阅失败",
							// 	icon:'fail'
							// })
						}
					},
					fail(err) {
						console.log(err)
						console.log('调用失败')
					}
				})
			} else {
				uni.showModal({
					content: '当前没有订阅，是否去设置打开？',
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (res) => {}
							})
						} else {
						}
					}
				})
			}
		}
	})
}

// 日期选择框绑定回调
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,
			isAzt: isAzt.value,
			productType: productType.value,
			projectInformation: projectInformation.value,
			projectParams: projectParams.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 = /^[+]?([0-9]+(?:[.][0-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 (isAzt.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
		// })
		popup.value.open()

		clientName.value = ''
		projectName.value = ''
		projectAmount.value = ''
		biddingTime.value = ''
		industry.value = ''
		isAzt.value = ''
		productType.value = []
		projectInformation.value = ''
		projectParams.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;
		}
	}
}

.popup_body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 480rpx;
	height: 400rpx;
	border-radius: 22rpx;
	background-color: #fff;

	.img {
		margin-top: 50rpx;
		width: 98rpx;
		height: 98rpx;
	}

	.popup_text {
		margin-top: 20rpx;
		color: #0f194d;
		font-size: 28rpx;
	}

	.popup_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		width: 220rpx;
		height: 76rpx;
		color: #fff;
		font-size: 25rpx;
		border-radius: 43rpx;
		background: linear-gradient(90deg, #1e7dfb 0%, #1b75eb 100%);
	}
}
</style>