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

<template>
    <view class="details-main">
        <view class="status-box">
            <img :src="statusData.img" alt="" style="width: 160rpx;height: 160rpx;margin-bottom: 36rpx;">
            <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"> {{item.key ==='sex'? sex_status[details[item.key]] ||'-' : details[item.key] || '-'}} </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="">
                </view>

            </view>

            <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>

            </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="" >

                    </view>
                </view>
            </view>

            <view class="status-btn" v-if="details.appStatus === 3" @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 '@/components/picker/index.vue'
import { getTreeList } from '@/api/volunteer'
const details = ref({});
const data =ref({});
const options = ref([])
const pickerRef = ref(null);

const list = [
    {
        label: "姓名",
        key: "name",
    },
    {
        label: "性别",
        key: "sex",
    },
    {
        label: "年龄",
        key: "age",
    },
    {
        label: "手机号",
        key: "phonenumber",
    },
    {
        label: "服务项目",
        key: "businessManagementId",
    },
    {
        label: "地区",
        key: "city",
    },
    {
        label: "详细地址",
        key: "address",
    },
]
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 statusData = computed(() => {
    if (details.value.appStatus === 3) {
        return {
            img: '/static/serverImg/home/no.png',
            text: '注册失败',
            rejectReason: details.value.rejectReason || '暂无原因'
        }
    }

    return {
        img: '/static/serverImg/home/ok.png',
        text: '注册成功'
    }

})

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.navigateTo({
				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.name + '详情'  // 根据业务逻辑调整 
    });

    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(51, 102, 255, 1);

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

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

        .card-imgs {
            display: flex;
            flex-wrap: wrap;
            margin-right: 32rpx;
        }

        .upload-img{
            height: 136rpx;
             width: 136rpx;
             margin-right: 24rpx;
        }
}

</style>