上传代码
This commit is contained in:
301
distribution/pages/authentication/authentication.vue
Normal file
301
distribution/pages/authentication/authentication.vue
Normal file
@ -0,0 +1,301 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user