zhywpt-sp/subpackage/personal-center/add-company.vue

<!-- 新增单位 -->
<template>
	<view class="photo as-layout-horizontal">
		<view class="photo-item" @click="chooseImage(1)">
			<view class="photo-node"></view>
			<view class="photo-img as-gravity-center">
				<image v-if="state.creditCodeImgUrl" :src="state.creditCodeImgUrl" :data-url="state.creditCodeImgUrl" ></image>
				<image v-else :src="`${$imgUrl}issueActivation/icon-camera.png`" class="icon"></image>
			</view>
			
			<view class="photo-txt">社会统一信用代码照</view>
		</view>
		<view class="photo-item" @click="chooseImage(2)">
			<view class="photo-node"></view>
			<view class="photo-img as-gravity-center">
				<image v-if="state.missiveImgUrl" :src="state.missiveImgUrl" :data-url="state.missiveImgUrl" ></image>
				<image v-else :src="`${$imgUrl}issueActivation/icon-camera.png`" class="icon"></image>
			</view>
			<view class="photo-txt">办理公函照</view>
		</view>
	</view>
	
	<view class="form-box">
		<form-builder :config="config" :formData="state.formData" 
		@inputChange="inputChange" @submit="submit" 
		/>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { confirm, msg } from '@/utils/utils';
	import { TypeData } from '@/components/form-builder/tools';

	const config = ({
		submitName: '提交申请',
		titleWidth: 160,
		divider: true,
	})
	
	const state = reactive({
		//信用代码照片
		creditCodeImgUrl:null,
		//办理公函照片
		missiveImgUrl:null,
		//表单列表
		formData: [{
				'title': '单办单位圈存:',
				'type': 2,
				'value': 'companyQC',
				'maxlength': 30,
				'hint': '请输入',
				'emptyHint':'请输入单办单位圈存',
				'divider': true,
				'star': true,
				'required':true,
			},
			{
				'title': '申办单位简称:',
				'type': 2,
				'value': 'companyName',
				'maxlength': 30,
				'hint': '请输入',
				'emptyHint':'请输入申办单位简称',
				'divider': true,
				'star': true,
				'required':true,
			},
			{
				'title': '统一社会信用代码:',
				'type': 2,
				'value': 'companyCode',
				'maxlength': 18,
				'hint': '请输入',
				'emptyHint':'请输入统一社会信用代码',
				'divider': true,
				'star': true,
				'required':true,
			},
			{
				'title': '联系人名称:',
				'type': 2,
				'value': 'name',
				'hint': '请输入',
				'emptyHint':'请输入联系人名称',
				'maxlength': 20,
				'divider': true,
				'star': true,
				'required':true,
			},
			{
				'title': '手机号:',
				'type': 2,
				'value': 'phone',
				'inputType': 'number',
				'maxlength': 11,
				'hint': '请输入手机号',
				'emptyHint':'请输入手机号',
				'divider': true,
				'star': true,
				'required':true,
			},
			{
				'title': '验证码:',
				'type': 2,
				'value': 'code',
				'inputType': 'number',
				'maxlength': 6,
				'hint': '请输入验证码',
				'emptyHint':'请输入验证码',
				'divider': true,
				'star': true,
				'required':true,
				'btn':true,
				'btnTitle':'获取验证码',
				'btnType':'code',
				'codeValue':''
			},
		],
	})
	
	//选择图片
	const chooseImage = (type:number) => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//sourceType: ['album','camera'], 
			success: function (res) {
				console.log(res.tempFilePaths);
				if (type === 1) {//信用代码照片
					state.creditCodeImgUrl = res.tempFilePaths[0];
				} else{//办理公函照片
					state.missiveImgUrl = res.tempFilePaths[0];
				}
			}
		});
	}
	
	/* 文本输入框变化 */
	const inputChange = (e:any,item: TypeData) => {
		if(item.value === 'phone'){
			state.formData[5].codeValue = item[item.value];
		}
	}
	
	/* 提交 */
	const submit = (e: any) => {
		if(!state.creditCodeImgUrl || !state.missiveImgUrl){
			msg('请按照要求上传图片！');
			return;
		}
		
		confirm('是否确认提交？',()=>{
			msg('提交成功！')
			const params = {...e,creditCodeImgUrl:state.creditCodeImgUrl,missiveImgUrl:state.missiveImgUrl};
			console.log('提交内容', params);
			// const code = "IF01001202209060883" //请求编码
			// const options = {
			//     type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			//     data: e, //请求参数
			//     method: 'POST|GET', //提交方式(默认POST)
			//     showLoading: true, //是否显示加载中(默认显示)
			// }		
			// request(code, options).then((res) => {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: hint
			// 	})
			// })
		},'提交确认');
	}
</script>

<style>
	page{
		background-color: #EEF7F7;
		padding-bottom: 80rpx
	}
</style>
<style lang="scss" scoped>
	.photo{
		padding: 33rpx 33rpx 40rpx;
		justify-content: space-between;
		overflow: visible;
		.photo-img{
			width: 295rpx;
			height: 188rpx;
			background-color: #D9F8F1;
			text-align: center;
			border-radius: 14rpx;
			.icon{
				width: 88rpx;
				height: 88rpx;
			}
		}
		.photo-txt{
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			margin-top: 30rpx;
			text-align: center;
		}
		.photo-item{
			width: 295rpx;
			height: 188rpx;
			position: relative;
			image{
				position: relative;
				z-index: 10;
				width: 100%;
				height: 188rpx;
			}
			&::before{
				content:'';
				position: absolute;
				width: 22rpx;
				height: 22rpx;
				border: 4rpx solid #21BEB1;
				border-bottom: none;
				border-right: none;
				z-index: 0;
				left:-4rpx;
				top: -4rpx;
			}
			&::after{
				content:'';
				position: absolute;
				width: 22rpx;
				height: 22rpx;
				border: 4rpx solid #21BEB1;
				border-top: none;
				border-right: none;
				z-index: 0;
				left: -4rpx;
				bottom: -4rpx;
			}
		}
	
		.photo-node{
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			&::before{
				content:'';
				position: absolute;
				width: 22rpx;
				height: 22rpx;
				border: 4rpx solid #21BEB1;
				border-left: none;
				border-bottom: none;
				z-index: 0;
				right:-4rpx;
				top: -4rpx;
			}
			&::after{
				content:'';
				position: absolute;
				width: 22rpx;
				height: 22rpx;
				border: 4rpx solid #21BEB1;
				border-top: none;
				border-left: none;
				z-index: 0;
				right: -4rpx;
				bottom: -4rpx;
			}
		}
	}
	
	.form-box{
		margin-top: 70rpx;
		background-color: white;
		padding:0 20rpx 20rpx;
	}
</style>