|
|
@@ -43,14 +43,17 @@
|
|
|
|
|
|
<view class="status-card">
|
|
|
<view class="card-title">身份证</view>
|
|
|
- <view class="card-imgs">
|
|
|
- <img class="upload-img" v-for="(item, index) in idCardPicture_img" :key="index + 'card'" :src="item"
|
|
|
- :alt="item.fileName" srcset="">
|
|
|
+
|
|
|
+ <view class="id-card-container" v-if="idCardImages.hasSeparateImages">
|
|
|
+ <view class="id-card-item" v-if="idCardImages.front">
|
|
|
+ <img class="id-card-img" :src="idCardImages.front" alt="身份证正面">
|
|
|
+ </view>
|
|
|
+ <view class="id-card-item" v-if="idCardImages.back">
|
|
|
+ <img class="id-card-img" :src="idCardImages.back" alt="身份证背面">
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
|
|
|
-
|
|
|
<view class="status-card">
|
|
|
<view class="card-title">资格证书</view>
|
|
|
<view class="card-imgs">
|
|
|
@@ -76,11 +79,29 @@ import { add, getVolunteerInfo } from "@/api/volunteer";
|
|
|
import Picker from '@/pages_home/components/picker/index.vue'
|
|
|
import { getTreeList } from '@/api/volunteer'
|
|
|
import { useDict } from '@/utils/dict.js';
|
|
|
+
|
|
|
+// 身份证图片处理组合式函数
|
|
|
+const useIdCardImages = (detailsData) => {
|
|
|
+ const idCardImages = computed(() => ({
|
|
|
+ combined: detailsData.value.idCardPicture ? detailsData.value.idCardPicture.split(',') : [],
|
|
|
+ front: detailsData.value.idCardPictureFront || '',
|
|
|
+ back: detailsData.value.idCardPictureBack || '',
|
|
|
+ hasSeparateImages: !!(detailsData.value.idCardPictureFront || detailsData.value.idCardPictureBack)
|
|
|
+ }))
|
|
|
+
|
|
|
+ return {
|
|
|
+ idCardImages
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const details = ref({});
|
|
|
const data = ref({});
|
|
|
const options = ref([])
|
|
|
const pickerRef = ref(null);
|
|
|
|
|
|
+// 使用组合式函数
|
|
|
+const { idCardImages } = useIdCardImages(details);
|
|
|
+
|
|
|
// const {
|
|
|
// volunteer_app_status
|
|
|
// } = useDict('volunteer_app_status');
|
|
|
@@ -142,10 +163,11 @@ const volunteerPicture_img = computed(() => {
|
|
|
return details.value.volunteerPicture ? details.value.volunteerPicture.split(',') : []
|
|
|
})
|
|
|
|
|
|
-//个人身份证
|
|
|
-const idCardPicture_img = computed(() => {
|
|
|
- return [details.value.idCardPictureFront,details.value.idCardPictureBack]
|
|
|
-})
|
|
|
+
|
|
|
+// const idCardPicture_img = computed(() => {
|
|
|
+// return details.value.idCardPicture ? details.value.idCardPicture.split(',') : []
|
|
|
+// })
|
|
|
+
|
|
|
//职业、资质证书
|
|
|
const certificationPicture_img = computed(() => {
|
|
|
return details.value.certificationPicture ? details.value.certificationPicture.split(',') : []
|
|
|
@@ -368,4 +390,45 @@ onLoad((options) => {
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.card-subtitle {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: rgba(107, 114, 128, 1);
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.id-card-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ @media screen and (min-width: 768px) {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.id-card-item {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ @media screen and (min-width: 768px) {
|
|
|
+ width: 48%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.id-card-img {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 600rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
</style>
|
chenjj