style: 调整home样式

api/sm.js

@@ -0,0 +1,12 @@
+import request from '../utils/request'
+
+
+
+
+
+export function sendCode(phone) {
+    return request({
+        url: `/sms/sendCode/${phone}`,
+        method: 'get',
+    })
+}

components/cust-form/index.vue

@@ -101,6 +101,7 @@
 import { onMounted, reactive, ref } from "vue";
 import CcSelectDity from '@/components/cc-selectDity/cc-selectDity.vue';
 import Picker from '@/components/picker/index.vue'
+import { sendCode } from '@/api/sm.js';
 const props = defineProps({
     column: {
         type: Array,
@@ -131,7 +132,7 @@ const form_ref = ref(null);
 const showSex = ref(false);
 const actions = ref({
     option: [],
-    optionKey:'businessManagementOption'
+    optionKey: 'businessManagementOption'
 });
 const pickerRef = ref(null)
 
@@ -200,19 +201,25 @@ function ActionSheetSelect(e) {
 }
 
 
-function getCode() {
+async function getCode() {
     if (uCode.value.canGetCode) {
         // 模拟向后端请求验证码
-        uni.showLoading({
-            title: '正在获取验证码'
-        })
-        setTimeout(() => {
-            uni.hideLoading();
-            // 这里此提示会被this.start()方法中的提示覆盖
-            uni.$u.toast('验证码已发送');
-            // 通知验证码组件内部开始倒计时
-            uCode.value.start();
-        }, 2000);
+
+        if (formData.phonenumber) {
+            uni.showLoading({
+                title: '正在获取验证码'
+            })
+            const res = await sendCode(formData.phonenumber);
+            console.log(res);
+            
+            if (res.code == 200) {
+                uni.hideLoading();
+                uCode.value.start();
+                uni.$u.toast('验证码已发送');
+            }
+        }else{
+            uni.$u.toast('请输入手机号');
+        }
     } else {
         uni.$u.toast('倒计时结束后再发送');
     }

pages.json

@@ -16,8 +16,8 @@
 		{
 			"path": "pages/index",
 			"style": {
-				"navigationBarTitleText": "乐融融",
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "乐融融"
+				// "navigationStyle": "custom"
 			}
 		},
 		{
@@ -68,7 +68,7 @@
 				"navigationBarTitleText": "详情"
 			}
 		}
-    ],
+	],
 	"subPackages": [
 		{
 			"root": "pages_home/pages",
@@ -84,6 +84,12 @@
 					"style": {
 						"navigationBarTitleText": "注册"
 					}
+				},
+				{
+					"path": "details/index",
+					"style": {
+						"navigationBarTitleText": "注册详情"
+					}
 				}
 			]
 		},
@@ -153,7 +159,8 @@
 		},
 		{
 			"root": "pages_template/pages",
-			"pages": [{
+			"pages": [
+				{
 					"path": "wxCenter/index",
 					"style": {
 						"navigationBarTitleText": "wxCenter 仿微信个人中心",
@@ -271,7 +278,8 @@
 		},
 		{
 			"root": "pages_qiun/pages",
-			"pages": [{
+			"pages": [
+				{
 					"path": "sport/index",
 					"style": {
 						"pageOrientation": "auto"
@@ -299,7 +307,8 @@
 		},
 		{
 			"root": "pages_geek/pages",
-			"pages": [{
+			"pages": [
+				{
 					"path": "index/index"
 				},
 				{

pages/Client/new_file.vue

@@ -21,13 +21,16 @@
 		<template v-else-if="userType == 2">
 			<view class="Wrapper-grid">
 				<up-grid :border="false" col="4" @click="handleGridClick">
-					<up-grid-item v-for="(item, index) in serviceList2" :key="index"
-						:custom-style="{ padding: '20rpx' }">
-						<!-- 图标 -->
-						<image :src="item.icon" class="service-img" mode="aspectFit" />
-
-						<!-- 文本 -->
-						<text class="grid-text">{{ item.name }}</text>
+					<up-grid-item v-for="(item, index) in serviceList2" :key="index" :custom-style="custmoStyle">
+						<view class="grid-box">
+							<!-- 图标 -->
+						<view class="grid-icon">
+							<image :src="item.icon" class="service-img" mode="aspectFit" />
+						</view>
+
+							<!-- 文本 -->
+							<text class="grid-text">{{ item.name }}</text>
+						</view>
 					</up-grid-item>
 				</up-grid>
 
@@ -56,11 +59,11 @@ import {
 // } from "@/api/volunteerDetailsApi/details.js"
 import {
 	workDate,
-	getDataTime
+	getDataTime,
+	getVolunteerInfo
 } from '@/api/volunteer.js'
 import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
 
-
 // Toast 控制宫格
 const uToastRef = ref(null);
 const userType = uni.getStorageSync('userType') //读取本地存储
@@ -75,7 +78,13 @@ const info = ref({
 })
 const selected = ref([])
 
-
+const custmoStyle = {
+	// borderRadius: '8px',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	// background:'rgba(0, 122, 255, 0.1);'
+}
 
 
 // 普通用户
@@ -117,37 +126,42 @@ const serviceList1 = ref([{
 ]);
 //志愿者
 const serviceList2 = ref([{
-	icon: '/static/img/统一知识平台-营运@1x.png',
-	name: '家庭辅导注册',
+	icon: '/static/serverImg/home/icon/icon4.png',
+	name: '家庭辅导',
 	key: 2,
 },
 {
-	icon: '/static/img/编组.png',
-	name: '陪伴陪聊注册',
+	icon: '/static/serverImg/home/icon/icon2.png',
+	name: '陪伴陪聊',
 	key: 1,
 },
 {
-	icon: '/static/img/清空.png',
-	name: '家庭助理注册',
+	icon: '/static/serverImg/home/icon/icon1.png',
+	name: '家庭助理',
 	key: 3,
 },
 {
-	icon: '/static/img/构建.png',
-	name: '健康管理注册',
+	icon: '/static/serverImg/home/icon/icon6.png',
+	name: '健康管理',
 	key: 4
 },
 {
-	icon: '/static/img/报事报修@6x.png',
-	name: '家庭清洁注册',
+	icon: '/static/serverImg/home/icon/icon2.png',
+	name: '家庭清洁',
 	key: 5
 },
 {
-	icon: '/static/img/报事报修@6x.png',
-	name: '家务帮手注册',
+	icon: '/static/serverImg/home/icon/icon5.png',
+	name: '家务帮手',
 	key: 6
 },
 {
-	icon: '/static/img/清空.png',
+	icon: '/static/serverImg/home/icon/icon7.png',
+	name: '咨询服务',
+	key: 8
+},
+{
+	icon: '/static/serverImg/home/icon/icon8.png',
 	name: '排班管理',
 	key: 7
 },
@@ -176,8 +190,18 @@ const handleGridClick = async (index) => {
 	}
 	// 志愿者
 	if (userType == 2 && uToastRef.value) {
+		// pages_home/pages
+	
 		const data = serviceList2.value[index]
 		if (data.key !== 7) {
+			const res = await getVolunteerInfo({ serviceCategory: data.key });
+			if(res.code === 200 && res.data){
+				//已有注册，跳转详情页面
+				uni.navigateTo({
+					url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify(data))}`
+				})
+				return
+			}
 			data.key === 1 || data.key === 2 ? uni.navigateTo({
 				url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify(data))}`
 			}) : uni.showToast({
@@ -230,15 +254,15 @@ const handleDates = computed(() => {
 			workEndTime: item.time.endTime
 		}
 	})
-    return parmas.reduce((acc, current) => {
-        const existing = acc.find(item => item.workDate === current.workDate);
-        if (existing) {
-            Object.assign(existing, current);
-        } else {
-            acc.push(current);
-        }
-        return acc;
-    }, []);
+	return parmas.reduce((acc, current) => {
+		const existing = acc.find(item => item.workDate === current.workDate);
+		if (existing) {
+			Object.assign(existing, current);
+		} else {
+			acc.push(current);
+		}
+		return acc;
+	}, []);
 });
 const confirm = (e) => {
 	const parmas = handleDates.value;
@@ -293,14 +317,15 @@ onMounted(() => {
 
 <style scoped>
 .Wrapper-grid {
-	margin-top: 170rpx;
+	/* margin-top: 170rpx; */
+	margin-top: 36rpx;
 }
 
 /* 图标样式 */
 .service-img {
-	width: 80rpx;
-	height: 80rpx;
-	margin-bottom: 15rpx;
+	/* width: 80rpx;
+	height: 80rpx; */
+	/* margin-bottom: 15rpx; */
 }
 
 /* 文本样式 */
@@ -308,6 +333,30 @@ onMounted(() => {
 	font-size: 24rpx;
 	color: #333;
 	text-align: center;
-	margin-top: 10rpx;
+	margin-top: 18rpx;
+}
+
+.grid-box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	margin-bottom: 48rpx;
+}
+.grid-icon {
+	width: 96rpx;
+	height: 96rpx;
+	opacity: 1;
+	border-radius: 8rpx;
+	background: rgba(0, 122, 255, 0.1);
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
+.service-img {
+	width: 48rpx;
+	height: 48rpx;
+}
+
+
 </style>

pages/classify.vue

@@ -3,17 +3,17 @@
 		<!-- 志愿者 -->
 		<view class="classify-main" v-if="userType == '2'">
 			<up-tabs :list="column" :scrollable="false" @change="onChange" :activeStyle="{
-				color: 'rgba(255, 87, 4, 1)',
+				color: 'rgba(51, 102, 255, 1)',
 				fontWeight: 'bold',
 				transform: 'scale(1.05)'
-			}" lineColor="rgba(255, 87, 4, 1)" v-model:current="tabKey">
+			}" lineColor="rgba(51, 102, 255, 1)" v-model:current="tabKey">
 			</up-tabs>
 			<view class="list">
 				<List :data="data" v-if="data.length > 0" />
 				<view v-else class="empty-null">
 					<img src="/static/empty/订单为空.png" alt="">
 				</view>
-			</view>
+			</view> 
 		</view>
 		<!-- 用户 -->
 		<OrderList :dataList="dataList" @fetchData="getListData" v-else />

pages/common/rankingList/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <view clang="ranking-main">
+        <view class="serve-title ranking-title">本月热门服务</view>
+        <view class="ranking-list">
+            <view v-for="item in datas" :key="item.id" class="ranking-item">
+                <img :src="item.img" alt="" srcset="" style="width: 160rpx;height: 160rpx;margin-right: 32rpx;">
+                <view class="ranking-item-info">
+                    <view class="ranking-item-name">{{ item.name }}</view>
+                    <view class="ranking-item-tag flex-center">{{ item.tag }}</view>
+                    <view class="ranking-item-text">{{ item.text }}</view>
+                    <view class="ranking-item-dese">{{ item.dese }}</view>
+                </view>
+
+                <view class="ranking-item-start-box flex-center">
+                    <img src="/static/serverImg/home/start.png" alt="" style="width: 32rpx;height: 32rpx;">
+                    <view class="ranking-item-count">{{ item.count }}</view>
+                </view>
+
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const datas = [
+    {
+        id: 1,
+        img: '/static/serverImg/home/ranking.png',
+        name: '专业深度保洁',
+        tag: '家庭清洁',
+        text: '专业设备，深度除螨，全面消毒',
+        dese: '本月已服务2890',
+        count: '4.9'
+    },
+    {
+        id: 2,
+        img: '/static/serverImg/home/ranking.png',
+        name: '专业深度保洁',
+        tag: '家庭清洁',
+        text: '专业设备，深度除螨，全面消毒',
+        dese: '本月已服务2890',
+        count: '4.9'
+    },
+    {
+        id: 3,
+        img: '/static/serverImg/home/ranking.png',
+        name: '专业深度保洁',
+        tag: '家庭清洁',
+        text: '专业设备，深度除螨，全面消毒',
+        dese: '本月已服务2890',
+        count: '4.9'
+    }
+]
+
+</script>
+
+<style scoped lang="scss">
+.ranking-title {
+    margin-bottom: 16px;
+}
+
+.ranking-list {
+
+    .ranking-item {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 12px;
+
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 1);
+
+        border: 0px solid rgba(243, 244, 246, 1);
+
+        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px rgba(0, 0, 0, 0.05);
+
+        .ranking-item-info {
+            flex: 1;
+
+            .ranking-item-name {
+                font-size: 32rpx;
+                font-weight: 400;
+                line-height: 48rpx;
+                color: rgba(51, 51, 51, 1);
+                margin-bottom: 16rpx;
+            }
+
+            .ranking-item-tag {
+                width: 128.03rpx;
+                height: 46rpx;
+                opacity: 1;
+                border-radius: 19998rpx;
+                background: rgba(0, 122, 255, 0.1);
+                margin-bottom: 16rpx;
+                font-size: 24rpx;
+                font-weight: 400;
+                line-height: 32rpx;
+                color: rgba(0, 122, 255, 1);
+
+
+            }
+
+            .ranking-item-text {
+                font-size: 28rpx;
+                font-weight: 400;
+                line-height: 40rpx;
+                color: rgba(102, 102, 102, 1);
+                margin-bottom: 16rpx;
+
+            }
+
+            .ranking-item-dese {
+                font-size: 24rpx;
+                font-weight: 400;
+                line-height: 32rpx;
+                color: rgba(153, 153, 153, 1);
+            }
+        }
+
+        .ranking-item-start-box {
+            display: flex;
+
+            .ranking-item-count {
+                font-size: 28rpx;
+                font-weight: 400;
+                line-height: 40rpx;
+                color: rgba(51, 51, 51, 1);
+                margin-left: 9rpx;
+            }
+        }
+    }
+}
+</style>

pages/index.vue

@@ -1,126 +1,90 @@
 <template>
-	<view style="padding-top: 200rpx; width: 100vw; height: 100vh; overflow: hidden">
-		<view style="width: 100%; height: 100%; overflow:scroll">
-			<view class="Wrapper">
-				<image src="/static/img/Location.png" class="Wrapper-img" />
-				<span class="Wrapper-content">重庆</span>
-				<vie class="input-container">
-					<up-input v-model="value" @click.native="goToDetail" placeholder="请输入内容" prefixIcon="search"
-						:customStyle="inputStyle"></up-input>
-				</vie>
-				<image src="/static/Icon - 消息通知.png" class="Wrapper-img" />
+	<view class="main-content ">
+		<view class="home-banner">
+			<view class="home-banner-left">
+				<img src="/static/serverImg/home/address.png" alt=""
+					style="width: 41.67rpx;height:  41.67rpx;margin-right: 8rpx;">
+				<text>{{ data.address }}</text>
 			</view>
-
-			<!-- 轮播图片 -->
+			<view>
+				<img src="/static/serverImg/home/message.png" alt="" style="width: 50rpx;height: 50rpx;">
+			</view>
+		</view>
+		<view class="home-main">
 			<view class="custom-swiper">
 				<up-swiper :list="list3" indicator indicatorMode="line" circular></up-swiper>
 			</view>
+		</view>
 
-			<!-- 服务选择 -->
-			<Client></Client>
-
-			<!-- 瀑布流 -->
-			<volunteerSide></volunteerSide>
-
-			<view v-if="userType == '2'" class="serve-monthly-ranking">
-				<view class="font-title index-title">月度排名</view>
-				<List :data="data" @refresh="getList" v-if="data.length > 0" :type="'ranking'" />
-				<view v-else class="empty-null">
-					<img src="/static/empty/订单为空.png" alt="">
-				</view>
-				<!-- <view class="serve-title index-title">本月热门服务排名</view> -->
-
-			</view>
+		<view class="home-grid">
+			<Client />
+		</view>
 
+		<view class="home-ranking">
+			<volunteerSide v-if="userType == 1"></volunteerSide>
+			<RankingList v-if="userType === 2"/>
 		</view>
-	</view>
 
 
+	</view>
 </template>
 
 <script setup>
+import { ref, reactive, onMounted } from 'vue';
 import {
-	ref,
-		onMounted
-	} from 'vue';
-	import {
-		Client
-	} from "@/pages/Client/new_file.vue"
-	import volunteerSide from "@/pages/Volunteerside/Side_index.vue"
-	import List from '@/pages_classify/components/orderList/index.vue';
-
-	const value = ref(''); //搜索
-	const userType = uni.getStorageSync('userType') //读取本地存储
-
-	// 用户/志愿者 识别标识
-	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
-
-	const list3 = ref([
-		'/static/img/68c51cda626f732e5a6a782e245ac255.jpeg',
-		'/static/img/78f89f319f760ba84a5b86916612a99d.jpeg',
-		'/static/img/e88c34398a054556e59659f4b7b83e8e.jpeg',
-	]);
-
-
-	const inputStyle = { //input輸入框樣式設置
-		borderRadius: '140rpx',
-		border: '1rpx solid #ccc',
-		height: '70rpx',
-		paddingLeft: '30rpx',
-		width: '540rpx'
-	}
+	onLoad,
+	onShow
+} from "@dcloudio/uni-app";
+import RankingList from '@/pages/common/rankingList/index.vue';
+import volunteerSide from "@/pages/Volunteerside/Side_index.vue"
 
-	const data = ref([{
+import {
+	Client
+} from "@/pages/Client/new_file.vue"
+const data = reactive({
+	address: '北京市朝阳区',
+	queryValue: ''
+})
+const userType = uni.getStorageSync('userType') //读取本地存储
+
+const list3 = ref([
+	'/static/img/68c51cda626f732e5a6a782e245ac255.jpeg',
+	'/static/img/78f89f319f760ba84a5b86916612a99d.jpeg',
+	'/static/img/e88c34398a054556e59659f4b7b83e8e.jpeg',
+]);
 
-	}]);
 </script>
 
-<style scoped>
-	.Wrapper {
+<style scoped lang="scss">
+.main-content {
+	.home-banner {
 		display: flex;
 		align-items: center;
-		gap: 10rpx;
-	}
-
-	.Wrapper-img {
-		width: 50rpx;
-		height: 50rpx;
-		margin-left: 10rpx;
+		justify-content: space-between;
+		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 2.08rpx 4.17rpx rgba(0, 0, 0, 0.05);
+		padding: 20rpx 16rpx;
 	}
 
+	.home-banner-left {
+		display: flex;
+		align-items: center;
 
-	.Wrapper-content {
-		color: rgba(16, 16, 16, 1);
-		font-size: 25rpx;
-		font-family: PingFangSC-regular;
-		line-height: 20rpx;
 	}
 
-	.custom-swiper {
-		width: 710rpx;
-		height: 100rpx;
-		margin-top: 20rpx;
-		margin-left: 20rpx;
-	}
+	.home-main {
+		padding: 12px 16px;
 
-	.index-title {
-		padding: 0 12px 12px;
-		margin-bottom: 16px;
-	}
+		.custom-swiper {}
 
-	.index-title::before {
-		content: ' ';
-		width: 5px;
-		height: 15px;
-		background: rgba(255, 87, 4, 1);
-		display: inline-block;
-		margin-right: 4px;
-		position: relative;
-		top: 1px;
-	}
+		.home-grid {
+			margin-bottom: 32px;
+		}
 
-	.serve-monthly-ranking {
-		margin-bottom: 16px;
+	}
 
+	.home-ranking {
+		padding: 12px 16px;
 	}
+}
 </style>

pages_classify/components/orderList/listItem.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="item">
         <view class="item-img">
-            <img :src=" baseUrl + data.avatar" alt="">
+            <img :src="baseUrl + data.avatar" alt="" style="width: 112rpx; height: 112rpx;">
         </view>
         <view class="item-info">
             <view class="item-title-box">
@@ -13,20 +13,21 @@
                     <text v-else>
                         待评价
                     </text>
-
                 </view>
                 <view class="item-de">
-                    服务地址：{{ data.address }}
+                    <img src="/static/serverImg/list/ad2.png" alt="" style="width: 28rpx;height: 28rpx;">
+                    {{ data.address }}
+                </view>
+                <view class="item-time">
+                    {{ data.createTime }}
                 </view>
             </view>
             <view class="item-box">
                 <view class="item-price"><span class="item-price-yuan">¥</span> {{ data.serviceOnePrice || 0 }}</view>
                 <view class="item-btns">
-                    <up-button type="error" text="查看" size="mini" :custom-style="btn_style"
-                        @click="onClick(1)"></up-button>
-                    <up-button type="error" text="沟通" size="mini" :custom-style="btn_style"
-                        @click="onClick(2)"></up-button>
-                    <!-- <up-button type="error" text="上传照片" size="mini" :custom-style="btn_style" @click="onClick(3)"></up-button> -->
+                    <view class="btn-s" @click="onClick(1)">查看</view>
+                    <view class="btn-m" @click="onClick(2)"><img src="/static/serverImg/list/mess.png" alt=""
+                            style="width: 23rpx;height: 23rpx;margin-right: 8rpx;">沟通</view>
                 </view>
             </view>
         </view>
@@ -66,105 +67,109 @@ function onClick(type) {
 
 <style lang="scss" scoped>
 .item {
-    height: 120px;
-    border-radius: 10px;
+    height: 294rpx;
+    opacity: 1;
+    border-radius: 24rpx;
     background: rgba(255, 255, 255, 1);
-    padding: 12px;
-    margin-bottom: 12px;
+    margin-bottom: 24rpx;
+    padding: 32rpx;
     display: flex;
+    align-items: flex-start;
 
     .item-img {
-        width: 96px;
-        height: 96px;
-        margin-right: 12px;
-
-        image {
-            height: 100%;
-            width: 100%;
-        }
+        margin-right: 32rpx;
     }
 
     .item-info {
-        flex: 1;
         display: flex;
         flex-direction: column;
+        flex: 1;
         justify-content: space-between;
+        height: 100%;
 
         .item-title-box {
             .item-title {
-                font-size: 14px;
-                font-weight: 700;
-                letter-spacing: 0px;
-                line-height: 20.27px;
-                color: rgba(51, 51, 51, 1);
-                text-align: left;
-                vertical-align: top;
-                margin-bottom: 10px;
-
+                font-size: 30rpx;
+                font-weight: 400;
+                line-height: 45rpx;
+                color: rgba(26, 26, 26, 1);
                 display: flex;
-                align-content: center;
+                align-items: center;
                 justify-content: space-between;
-
-                .item-name {
-                    flex: 1;
-                    display: flex;
-                    // display: -webkit-box;
-                    // -webkit-box-orient: vertical;
-                    // -webkit-line-clamp: 1;
-                    // overflow: hidden;
-                    // text-overflow: ellipsis;
-                    // word-break: break-all;
-                }
-
-                .item-tag {
-                //    color: #3c9cff;
-                }
-
+                margin-bottom: 15rpx;
             }
+        }
 
-            .item-de {
-                font-size: 12px;
-                font-weight: 500;
-                letter-spacing: 0px;
-                line-height: 17.38px;
-                color: rgba(153, 153, 153, 1);
-                text-align: left;
-                vertical-align: top;
-
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                word-break: break-all;
-            }
+        .item-de {
+            display: flex;
+            font-size: 26rpx;
+            font-weight: 400;
+            line-height: 39rpx;
+            color: rgba(153, 153, 153, 1);
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        .item-time {
+            font-size: 26rpx;
+            font-weight: 400;
+            letter-spacing: 0rpx;
+            line-height: 39rpx;
+            color: rgba(153, 153, 153, 1);
+            margin-bottom: 40rpx;
         }
 
         .item-box {
             display: flex;
-            align-content: flex-end;
+            align-items: center;
             justify-content: space-between;
 
             .item-price {
-                font-size: 18px;
-                font-weight: 500;
-                letter-spacing: 0px;
-                line-height: 21.09px;
-                color: rgba(246, 74, 31, 1);
-                text-align: center;
-                vertical-align: top;
-
-                .item-price-yuan {
-                    font-size: 13px;
-                    font-weight: 700;
-                    letter-spacing: 0px;
-                    line-height: 21.09px;
-                    color: rgba(246, 74, 31, 1);
-                }
+                font-size: 30rpx;
+                font-weight: 400;
+                letter-spacing: 0rpx;
+                line-height: 45rpx;
+                color: rgba(255, 59, 48, 1);
             }
 
             .item-btns {
                 display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .btn-s {
+                    font-size: 26rpx;
+                    font-weight: 400;
+                    letter-spacing: 0rpx;
+                    line-height: 39rpx;
+                    color: rgba(51, 102, 255, 1);
+                    text-align: center;
+
+                    width: 156.03rpx;
+                    height: 67rpx;
+                    border-radius: 8rpx;
+                    background: rgba(0, 0, 0, 0);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 0rpx solid rgba(51, 102, 255, 1);
+                }
+
+                .btn-m {
+                    width: 188.03rpx;
+                    height: 67rpx;
+                    opacity: 1;
+                    border-radius: 8rpx;
+                    background: rgba(51, 102, 255, 1);
+
+                    text-align: left;
+                    margin-left: 24rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: rgba(255, 255, 255, 1);
+                }
             }
         }
     }

pages_home/pages/details/index.vue

@@ -0,0 +1,291 @@
+<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>
+
+
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, nextTick, computed } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { add, getVolunteerInfo } from "@/api/volunteer";
+
+
+const details = ref({});
+const data =ref({});
+
+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: '注册成功'
+    }
+
+})
+
+async function getRegister() {
+
+    try {
+        uni.showLoading({
+            title: '数据加载中...'
+        });
+        const res = await getVolunteerInfo({ serviceCategory: data.value.key });
+        console.log('res',res);
+        
+        if (res.data) {
+            details.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>