xiaokuaisong-paotui/distribution/pages/authentication/authentication.vue

<template>
  <view class="page">
    <view class="form-item">
      <view class="label">银行卡号</view>
      <view class="value">
        <input type="text" v-model="bankCard" placeholder="请输入银行卡号" />
      </view>
    </view>

    <view class="upload-section">
      <view class="upload-item" @click="takePhoto('front')">
        <view v-if="!photoSrcFront" class="upload-icon-text">
          <uni-icons type="plusempty" size="30" color="#6a7cbf"></uni-icons>
          <view class="upload-text">点击上传身份证国徽面</view>
        </view>
        <image v-if="photoSrcFront" :src="photoSrcFront"></image>
      </view>
      <view class="upload-item" @click="takePhoto('back')">
        <view v-if="!photoSrcBack" class="upload-icon-text">
          <uni-icons type="plusempty" size="30" color="#6a7cbf"></uni-icons>
          <view class="upload-text">点击上传身份证人像面</view>
        </view>
        <image v-if="photoSrcBack" :src="photoSrcBack"></image>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-button" @click="submit">提交</button>
	
	<!-- 提交记录 -->
	<view class="submit" v-if="submitRecord">
		<view class="submit-title">
			提交记录
		</view>
		<view class="submit-bankCard">
			{{ submitRecord.bankCard }}
		</view>
	  <view class="submit-frontIdCard">
	        <!-- 确保这里使用的是完整的URL -->
			<view class="submit-title">
				身份证正面
			</view>
	        <image  :src="submitRecord.frontIdCard" mode="widthFix"></image>
	    </view>
	    <view class="submit-backIdCard">
	        <!-- 修复这里的src，添加协议前缀 -->
			<view class="submit-title">
				身份证背面
			</view>
	        <image :src="submitRecord.backIdCard" mode="widthFix"></image>
	    </view>
	</view>
  </view>
</template>


<script>
import {
	apiImageUrl
} from '../../API/api';

export default {
	data() {
		return {
		 photoSrcFront: '', // 徽面照片路径
		        photoSrcBack: '', // 人像面照片路径
		        bankCard: '', // 银行卡号
		        submitRecord: {}, // 修改为对象
		        currentUser: uni.getStorageSync("currentUser")
		}
	},
	onLoad() {
		this.getAuditRecords()
	},
	methods: {
		takePhoto(side) {
			const that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['camera'],
				success(res) {
					if (side === 'front') {
						that.photoSrcFront = res.tempFilePaths[0];
						that.uploadPhoto(res.tempFilePaths[0], 'front');
					} else if (side === 'back') {
						that.photoSrcBack = res.tempFilePaths[0];
						that.uploadPhoto(res.tempFilePaths[0], 'back');
					}
				}
			});
		},
		uploadPhoto(filePath, side) {
			uni.uploadFile({
				url: apiImageUrl + '/api/file/upload/server',
				filePath,
				name: 'file',
				formData: {
					biz: 'card'
				},
				success: (res) => {
					console.log('上传成功:', res);
					// 根据接口返回的结果进行相应的处理
				},
				fail: (err) => {
					console.error('上传失败:', err);
				}
			});
		},
		submit() {
			const data = {
				backIdCard: this.photoSrcBack,
				bankCard: this.bankCard,
				errandId: this.currentUser.id,
				frontIdCard: this.photoSrcFront
			};
			
			uni.request({
				url: apiImageUrl + '/api/errandAuth/add',
				method: 'POST',
				data,
				header: {
				  'Content-Type': 'application/json', // 确保设置正确的 Content-Type
				  'cookie': uni.getStorageSync("cookie") || ''
				},
				success: (res) => {
					console.log('提交成功:', res);
					// 根据接口返回的结果进行相应的处理
					if(res.data.code===40000){
						uni.showToast({
							title: res.data.description,
							icon: 'fail',
							duration: 2000
						})  
					} else if(res.data.code===0){
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						})  
						
					}
				},
				fail: (err) => {
					console.error('提交失败:', err);
				}
			});
		},
		getAuditRecords() {
			uni.request({
				url: apiImageUrl + '/api/errandAuth/get/my',
				method: 'POST',
				header: {
				  'Content-Type': 'application/json', // 确保设置正确的 Content-Type
				  'cookie': uni.getStorageSync("cookie") || ''
				},
				success: (res) => {
					console.log(res);
					if (res.data.code === 0 && res.data.data) {
						this.submitRecord= res.data.data; // 更新审核记录
					}
				},
				fail: (err) => {
					console.error('获取审核记录失败:', err);
				}
			});
		}
		
	}
}
</script>

<style scoped>
/* 页面样式 */
.example-body {
	background-color: #fff;
	padding: 10px;
}

.page {
	background-color: #fff;
	padding: 20px;
}

/* 返回按钮样式 */
.back-button {
	position: absolute;
	top: 20px;
	left: 20px;
}

/* 表单项样式 */
.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}

.label {
	font-size: 16px;
	color: #000;
}

.value {
	font-size: 16px;
	color: #666;
}

/* 上传区域样式 */
.upload-section {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	/* 改为垂直排列 */
	gap: 20px;
	/* 增加间距 */
}

.upload-item {
	background-color: #ecf5ff;
	border: 2px dashed #a6b2da;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	width: 100%;
	/* 设置宽度为100% */
	box-sizing: border-box;
	position: relative;
	height: 200px;
	/* 固定高度 */
}

.upload-item .upload-icon-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.upload-item image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 确保图片覆盖容器并保持比例 */
	border-radius: 8px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.upload-text {
	font-size: 14px;
	color: #8cb7fd;
}

/* 提交按钮样式 */
.submit-button {
	width: 100%;
	height: 50px;
	background-color: #5e7dec;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 16px;
	margin-top: 20px;
}

/* 提交记录样式 */
.submit {
	margin-top: 20px;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #f9f9f9;
}

.submit-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.submit-bankCard {
	font-size: 16px;
	color: #333;
	margin-bottom: 10px;
}

.submit-frontIdCard image,
.submit-backIdCard image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    max-height: 300px; /* 设置最大高度以防图片过大 */
    object-fit: contain; /* 确保图片内容完整显示 */
}
</style>