leromro-mini/pages_home/pages/details/index.vue

<template>
    <view class="details-main">
        <view class="status-box">
            <img src="/static/serverImg/home/no.png" alt="" style="width: 160rpx;height: 160rpx;margin-bottom: 36rpx;" v-if="details.appStatus === '3'">
            <img src="/static/serverImg/home/ok.png" alt="" style="width: 160rpx;height: 160rpx;margin-bottom: 36rpx;" v-if="['1','2'].includes(details.appStatus)">

            <text class="status-text">{{ statusData.text }}</text>
            <text v-if="statusData.rejectReason" class="text2">失败原因：{{ statusData.rejectReason }}</text>
        </view>
        <view class="status-main">

            <view class="status-card">
                <view class="card-title">基本信息</view>
                <view class="card-item" v-for="item in list" :key="item.key">
                    <view class="card-lable">{{ item.label }}</view>
                    <view class="card-text" v-if=" item.key === 'sex'"> {{ sex_status[details[item.key]] || '-'}} </view>
                    <view class="card-text" v-else-if=" item.key === 'city'"> {{details['provinceName']+ details['cityName']+details['districtName']}} </view>
                    <view class="card-text" v-else> {{  details[item.key] || '-'}} </view>
                </view>
            </view>

            <view class="status-card">
                <view class="card-title">服务信息</view>
                <view class="card-item" v-for="item in serveslist" :key="item.key">
                    <view class="card-lable">{{ item.label }}</view>
                    <view class="card-text"> {{ details[item.key] || '-'}}{{item.dese}} </view>
                </view>
            </view>

            <view class="status-card">
                <view class="card-title">个人简介</view>
                <view class="card-text"> {{ details.skillDescribe }} </view>
            </view>

            <view class="status-card">
                <view class="card-title">服务图片</view>
                <view class="card-imgs">
                    <!-- <img class="upload-img" v-for="(item, index) in volunteerPicture_img" :key="index + 'userimg'"
                        :src="item" :alt="item.fileName" srcset=""> -->
                        <up-image v-for="(item, index) in volunteerPicture_img" :key="index + 'userimg'"
                         :src="item" class="upload-img" mode="widthFix"   :alt="item.fileName"></up-image>
                </view>

            </view>

            <view class="status-card">
                <view class="card-title">身份证</view>
                
                <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="身份证正面"> -->
                        <up-image :src="idCardImages.front" class="upload-img" mode="widthFix"  alt="身份证正面"></up-image>
                    </view>
                    <view class="id-card-item" v-if="idCardImages.back">
                        <!-- <img class="id-card-img" :src="idCardImages.back" alt="身份证背面"> -->
                        <up-image :src="idCardImages.back" class="upload-img" mode="widthFix"  alt="身份证背面"></up-image>
                    </view>
                </view>
            </view>

            <view class="status-card">
                <view class="card-title">资格证书</view>
                <view class="card-imgs">
                    <view v-for="(item, index) in certificationPicture_img" :key="index + 'cer'">
                        <!-- <img class="upload-img" :src="item" :alt="item.fileName" srcset=""> -->
                        <up-image :src="item" class="upload-img" mode="widthFix"  :alt="item.fileName"></up-image>
                    </view>
                </view>
            </view>

            <view class="status-btn"  v-if="details.appStatus === '3'" @click="startSubmit">重新提交</view>
            <view class="status-btn" v-else @click="startSubmit">前往修改</view>

        </view>

        <Picker :columnData="options" ref="pickerRef" />
    </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
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');

const list = [
    {
        label: "姓名",
        key: "name",
    },
    {
        label: "性别",
        key: "sex",
    },
    {
        label: "年龄",
        key: "age",
    },
    {
        label: "手机号",
        key: "phonenumber",
    },
    // {
    //     label: "服务项目",
    //     key: "businessManagementId",
    // },
    {
        label: "地区",
        key: "city",
    },
    {
        label: "详细地址",
        key: "address",
    },
]

const serveslist =[
{
        label: "服务项目",
        key: "businessTierName",
    },
    {
        label: "服务时长",
        key: "businessDuration",
        dese:'分钟'
    },
    {
        label: "服务价格",
        key: "businessPrice",
        dese:'元'

    },
]
const sex_status = {
    0: '男',
    1: '女'
}
//头像
const volunteerPicture_img = computed(() => {
    return details.value.volunteerPicture ? details.value.volunteerPicture.split(',') : []
})


// const idCardPicture_img = computed(() => {
//     return details.value.idCardPicture ? details.value.idCardPicture.split(',') : []
// })

//职业、资质证书
const certificationPicture_img = computed(() => {
    return details.value.certificationPicture ? details.value.certificationPicture.split(',') : []
})

const status_e = {
    1: '审核中',
    2: '注册成功',
    3: '申请失败'
}

const statusData = computed(() => {
    // console.log('volunteer_app_status',volunteer_app_status.value);
    // const parmas = volunteer_app_status.value.find(item => item.value === details.value.appStatus)
    
    if (details.value.appStatus === '3') {
        return {
            img: '/static/serverImg/home/no.png',
            text: status_e[details.value.appStatus],
            rejectReason: details.value.rejectReason
        }
    }

    return {
        img: '/static/serverImg/home/yes.png',
        text: status_e[details.value.appStatus],
    }

})

function idToIndexs(array, targetId, path = []) {
    for (let i = 0; i < array.length; i++) {
        const item = array[i];
        const currentPath = path.concat(i);

        if (item.id === targetId) {
            return item.businessTierName
        }

        if (item.children) {
            const result = idToIndexs(item.children, targetId, currentPath);
            if (result) {
                return result;
            }
        }
    }

    return null; // 如果没有找到对应的项，返回 null
}
async function getRegister() {

    try {
        // uni.showLoading({
        //     title: '数据加载中...'
        // });
        const op_res = await getTreeList({ parentId: data.value.key });
        const res = await getVolunteerInfo({ serviceCategory: data.value.key });
        if (res.data) {
            const names = idToIndexs(op_res.data, res.data.businessManagementId + '')
            console.log('res', res, names);
            details.value = {
                ...res.data,
                businessManagementId: names
            };

        }

        getTreeList({ parentId: data.value.key }).then(res => {
            options.value = res.data;
        })
    } catch (error) {
        console.log('error', error);
        uni.showToast({
            title: error.msg,
            icon: 'error',
        });
    } finally {
        // uni.hideLoading();
    }
}

const startSubmit = () => {
    uni.redirectTo({
        url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify(data.value))}`
    })
}

onLoad((options) => {
    const option = JSON.parse(decodeURIComponent(options.data));
    data.value = option;
    console.log("option", option);

    uni.setNavigationBarTitle({
        title: option.businessName + '详情'  // 根据业务逻辑调整 
    });

    setTimeout(() => {
        getRegister();
    }, 500);

})


</script>

<style lang="scss" scoped>
.details-main {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.status-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 64rpx 0;

    .status-text {
        font-size: 40rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 56rpx;
        color: rgba(17, 24, 39, 1);

    }

    .text2 {
        font-size: 28rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 40rpx;
        color: rgba(107, 114, 128, 1);
    }
}

.status-main {
    flex: 1;
    background: whitesmoke;
    padding: 32rpx;

    .status-card {
        padding: 32rpx;
        border-radius: 24rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.05);
        margin-bottom: 32rpx;

        .card-title {
            font-size: 32rpx;
            font-weight: 400;
            line-height: 48rpx;
            color: rgba(17, 24, 39, 1);
            margin-bottom: 32rpx;
        }

        .card-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24rpx;

        }

        .card-lable {
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 40rpx;
            color: rgba(107, 114, 128, 1);
        }

        .card-text {
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 40rpx;
            color: rgba(17, 24, 39, 1);


        }


    }

    .status-btn {
        // width: 716rpx;
        height: 96rpx;
        border-radius: 16rpx;
        background: rgba(221, 94, 69, 1);

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 32rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-bottom: 88rpx;
    }

    .card-imgs {
        display: flex;
        // flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .upload-img {
        // height: 136rpx;
        // width: 136rpx;
        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>