Huiqitong/src/pages/mine/completeInformation.vue

<template>
	<view class="container">
		<view class="cardbox">
			<view v-for="(group, index) in inputGroups" :key="index" class="input-group">
				<view class="inputs" @click="beforeRead(index)">
					公司性质
					<input class="inputclass" placeholder-class="inputplacla" :value="group.type==1 ? '其他(自由职业者等)' : (group.type===2 ? '个体工商户' : (group.type===3 ? '民营企业' : '') )"
						placeholder="民营企业、个体工商户、其它（自由职业者等）" disabled disabledColor="#ffffff" @tap="qyshow = true" />
					<u-action-sheet :actions="qylist" title="请选择关联企业类型" :show="qyshow" @select="qyClick"
						@close="qyshow = false"></u-action-sheet>
					公司名称
					<input class="inputclass" placeholder-class="inputplacla" v-model="group.title"
						placeholder="请输入真实公司名称" />
					营业执照
					<u-upload class="uploadbox" @afterRead="afterRead" :maxCount="1"
						:imageMode="'heightFix'" :width="auto" :height="144">
						<view class="yyzz" v-if="group.license === ''">
							<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image>
							上传营业执照
						</view>
						<image v-else @click="beforeRead(index)" style="width: 100%;height: 288rpx;margin-top: 12rpx;" :src="baseurl+ '/' + group.license" mode="scaleToFill"></image>
					</u-upload>
				</view>
				<view v-if="index > 0" class="remove-btn" @click="removeGroup(index)">-</view>
			</view>
			<button @click="addGroup" class="add-btn">+ 添加一组</button>
		</view>
	</view>
	<view class="buts">
		<view class="but" @click="submit">
			确认提交
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		modifyField1,
	} from '@/api/mine'
	
	const baseurl = ref(import.meta.env.VITE_APP_BASE_URL)

	const inputGroups = ref([{
		type: '',
		title: '',
		license: ''
	}])

	const addGroup = () => {
		inputGroups.value.push({
			type: '',
			title: '',
			license: ''
		})
	}
	
	const qyshow = ref(false)
	const qylist = ref([{
			id: 1,
			name: '其他(自由职业者等)',
		},
		{
			id: 2,
			name: '个体工商户',
		},
		{
			id: 3,
			name: '民营企业',
		}
	]);
	const qyClick = async (val) => {
		inputGroups.value[upclickindex.value].type = val.id
	}

	const removeGroup = (index) => {
		inputGroups.value.splice(index, 1)
	}
	
	const upclickindex = ref(0) 
	const beforeRead = (index) =>{
		upclickindex.value = index
	}

	const afterRead = async (e) => {
		uni.uploadFile({
			url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image',
			filePath: e.file.url,
			name: 'file',
			header: {
				'token': uni.getStorageSync('access_token')
			},
			success: async (val) => {
				inputGroups.value[upclickindex.value].license = ''
				if (JSON.parse(val.data).data.url) {
					inputGroups.value[upclickindex.value].license = JSON.parse(val.data).data.url
				}
			},
			fail: (res) => {
				console.log('失败', res);
			}
		})
	}
	const submit = async () => {
		let data = []
		await inputGroups.value.forEach(async(obj) => {
			if(obj.type == ''||obj.title == ''||obj.license == '') {
				uni.showToast({
					title: '请填写完整',
					icon: 'fail'
				})
			}else {
				data.push(obj)
			}
		})
		console.log(data);
		if(data.length !== 0) {
			await modifyField1('enterprise',{"value":`${JSON.stringify(data)}`}).then((res) => {
				if (res.code === 1) {
					setTimeout(() => {
						uni.showToast({
							title: '提交成功！',
							icon: 'success'
						})
						uni.switchTab({
							url: '/pages/mine/index'
						})
					}, 500)
				} else {
					uni.showToast({
						title: '提交失败！',
						icon: 'fail'
					})
				}
			
			})
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: calc(100vh - 168rpx);
		width: 100%;
		background: #F1F3F9;
		overflow-y: auto;

		.cardbox {
			box-sizing: border-box;
		}

		.input-group {
			padding: 40rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			background-color: #e2e2e2;
		}

		.inputs {
			flex: 9;
		}

		input {
			flex: 1;
			height: 80rpx;
			border: 2rpx solid #ddd;
			padding: 0 20rpx;
			margin-right: 10rpx;
		}

		.remove-btn,
		.add-btn {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f0f0f0;
			border-radius: 8rpx;
		}

		.remove-btn {
			margin-left: 20rpx;
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			color: #ff0000;
			border: 2rpx solid #ff0000;
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}

		.add-btn {
			width: auto;
			padding: 0 30rpx;
			background: #4CAF50;
			color: white;
			margin-bottom: 60rpx;
		}
	}

	.buts {
		height: 168rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		/* 标签栏投影 */
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.but {
			width: 574rpx;
			height: 96rpx;
			border-radius: 248rpx;
			background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans;
			font-size: 36rpx;
			font-weight: 350;
			line-height: 32rpx;
			text-align: justify;
			/* 浏览器可能不支持 */
			display: flex;
			align-items: center;
			letter-spacing: normal;
			color: #FFFFFF;
		}
	}

	.inputclass {
		margin-top: 12rpx;
		margin-bottom: 36rpx;
		margin-right: 0 !important;
		height: 100rpx !important;
		border-radius: 10rpx;
		background: #FFFFFF;
	}

	:deep(.inputplacla) {
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: 350;
		line-height: 32.76rpx;
		letter-spacing: normal;
		color: #D3D3D3;
	}

	.yyzz {
		margin-top: 12rpx;
		width: 100%;
		height: 288rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		display: grid;
		align-content: center;
		justify-items: center;
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: 350;
		line-height: 70rpx;
		letter-spacing: normal;
		color: #CCCCCC;
	}

	:deep(.u-upload) {
		.u-upload__wrap {
			view {
				width: 100%;
			}
		}
	}
</style>