301 lines
6.4 KiB
Vue
301 lines
6.4 KiB
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> |