dyqc_hdapp/packageB/card/index.vue

<template>
	<view style="page">
		<view style="padding: 30rpx;">
			<view>
				<text style="color: #FF4810;font-size: 28rpx;">*</text>
				<text>上传身份证</text>
			</view>
			<view
				style="display: flex;justify-content: space-between;align-items: center;gap: 30rpx;margin-top: 30rpx;">
				<view style="width: 50%;text-align: center;">
					<u-upload  @afterRead="afterRead($event,0)" :previewFullImage="true"
						@delete="deletePic" @oversize="oversize"  :maxSize="1 * 1024 * 1024"
						:maxCount="1"> 
						<view style="width: 330rpx;height: 100px;">
							<image v-if="form.positive_img==''" src="/static/index/zheng.png" style="width: 100%;" mode="widthFix"></image>
							<image v-else :src="imgUrl+form.positive_img" style="width: 330rpx;height: 100px;" mode="aspectFit"></image>
						</view>
					</u-upload>
					<view style="font-size: 24rpx;margin-top: 30rpx;">点击上传身份证正面</view>
				</view>
				<view style="width: 50%;text-align: center;">
					<u-upload  @afterRead="afterRead($event,1)" :previewFullImage="true"
						@delete="deletePic" @oversize="oversize"  :maxSize="1 * 1024 * 1024"
						:maxCount="1">
						<view style="width: 330rpx;height: 100px;">
							<image v-if="form.back_img==''" src="/static/index/bei.png" style="width: 100%;" mode="widthFix"></image>
							<image v-else :src="imgUrl+form.back_img" style="width: 330rpx;height: 100px;" mode="aspectFit"></image>
						</view>
					</u-upload>
					<view style="font-size: 24rpx;margin-top: 30rpx;">点击上传身份证反面</view>
				</view>
			</view>
		</view>
		<view style="height: 10rpx;width: 100%;background: #F8F8F8;margin-top: 20rpx;"></view>
		<view style="padding: 30rpx;">
			<view>
				<text style="color: #FF4810;font-size: 28rpx;">*</text>
				<text>身份证信息</text>
			</view>
			<view>
				<view style="display: flex;justify-content: space-between;align-items: center;padding: 40rpx 0px;">
					<view>
						姓名
					</view>
					<view>
						<input type="number" placeholder="请填写真实姓名" class="input" v-model="form.name" />
					</view>
				</view>
				<view style="height: 1px;width: 100%;background-color: #F0F0F0;"></view>
				<view style="display: flex;justify-content: space-between;align-items: center;padding: 40rpx 0px 0px 0px;">
					<view>
						身份证号
					</view>
					<view>
						<input type="number" placeholder="请填写身份证号" class="input" v-model="form.idnum" />
					</view>
				</view>
			</view>
		</view>
		<view style="height: 10rpx;width: 100%;background: #F8F8F8;"></view>
		<view class="btn_1" @click="save()">提交信息</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:uni.$u.http.config.baseURL,
				form:{
					name:'',
					idnum:'',
					positive_img:'',
					back_img:'',
				}
			}
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			getInfo(){
				uni.$u.http.get('/api/school.real_name/info').then(res=>{
					console.log(res);
					if(res.data.card_info!='' && res.data.card_info!=null){
						this.form.name = res.data.card_info.name;
						this.form.idnum = res.data.card_info.idnum;
						this.form.positive_img = res.data.card_info.positive_img;
						this.form.back_img = res.data.card_info.back_img;
					}
				})
			},
			save(){
				if(this.form.positive_img=='' || this.form.back_img==''){
					uni.$u.toast('请上传身份证照片');
					return;
				}
				if(this.form.name=='' || this.form.idnum==''){
					uni.$u.toast('请填写身份证信息');
					return;
				}
				uni.$u.http.post('/api/school.real_name/save',this.form).then(res=>{
					console.log(res);
					if(res.code==1){
						uni.$u.toast('提交成功');
					}else{
						uni.$u.toast(res.data.msg);
					}
				})
			},
			async afterRead(item,index){
				console.log(item);
				const result = await this.uploadFilePromise(item.file.url, 'user');
				if(index == 0){
					this.form.positive_img = result;
				}else{   
					this.form.back_img = result;
				}
			},
			uploadFilePromise(url, category,index) {
				console.log('category', category)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://naweigetetest2.hschool.com.cn/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							category: category
						},
						header: {
							"token": uni.getStorageSync("token")
						},
						success: (res) => {
							resolve(JSON.parse(res.data).data.url);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		font-family: PingFang SC, PingFang SC;
	}

	.input {
		text-align: right;
		font-size: 26rpx;
		color: #343434;
		line-height: 32rpx;
		width: 450rpx;
	}
	.btn_1 {
		width: 95%;
		height: 90rpx;
		background: #323232;
		border-radius: 198rpx 198rpx 198rpx 198rpx;
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 32rpx;
		color: #BBFC5B;
		line-height: 90rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
	}
</style>