feat: 志愿者订单详情

api/address.js

@@ -0,0 +1,9 @@
+import request from '../utils/request'
+
+//查询受服务地址列表
+export function getAddress(addressId) {
+    return request({
+        url: `/core/users/address/${addressId}`,
+
+    })
+}

api/file.js

@@ -1,5 +1,7 @@
 import request from '../utils/request'
-
+import { getToken } from '@/utils/auth'
+import config from '@/config'
+const baseUrl = config.baseUrl
 
 //文件上传
 export function uploadFile(data) {

api/volunteer.js

@@ -32,7 +32,16 @@ export function getDataTime() {
 //志愿者订单列表
 export function getVolunteerOrderList(data) {
     return request({
-        url: `/core/users/orders/volunteerOrderList`,
+        url: `/core/volunteer/orders/volunteerOrderList`,
+        method: 'get',
+        params: data
+    })
+}
+
+//志愿者订单详情,（收货地址和状态）
+export function getVolunteerOrderInfo(data) {
+    return request({
+        url: `/core/volunteer/orders/volunteerOrderInfo`,
         method: 'get',
         params: data
     })

pages.json

@@ -87,7 +87,7 @@
 			"path" : "pages/order/order",
 			"style" : 
 			{
-				"navigationBarTitleText" : ""
+				"navigationBarTitleText" : "订单详情"
 			}
 		}
 	    

pages/Client/new_file.vue

@@ -161,10 +161,13 @@ const handleGridClick = async (index) => {
 	}
 	if (uToastRef.value) {
 		const data = serviceList2.value[index]
-		if (data.key !== 7) {
-			uni.navigateTo({
+		if (data.key !== 7 ) {
+			data.key === 1 || data.key === 2 ? uni.navigateTo({
 				url: `/pages/register/register?data=${encodeURIComponent(JSON.stringify(data))}`
-			});
+			}): uni.showToast({
+					title: '敬请期待',
+					icon: 'none'
+				})
 			return;
 		}
 		calendar.value.open();

pages/classify.vue

@@ -7,7 +7,7 @@
 		}" lineColor="rgba(255, 87, 4, 1)">
 		</up-tabs>
 		<view class="list">
-			<List :data="data" @refresh="getList" v-if="data.length > 0" />
+			<List :data="data" v-if="data.length > 0" />
 
 			<view v-else class="empty-null">
 				<img src="/static/empty/订单为空.png" alt="">
@@ -25,10 +25,8 @@ import { getVolunteerOrderList } from '@/api/volunteer.js'
 import { onMounted } from 'vue';
 import {useDict} from '@/utils/dict.js';
 
-const { lrr_service_category, lrr_chitchat,lrr_study,order_status } = useDict('lrr_service_category','lrr_chitchat','lrr_study','order_status');
-provide('lrr_service_category', lrr_service_category); //服务类别
-provide('lrr_chitchat', lrr_chitchat);//陪伴陪聊
-provide('lrr_study', lrr_study);//家庭辅导
+const { order_status } = useDict('order_status');
+
 provide('order_status', order_status);//订单/服务状态
 
 
@@ -90,7 +88,7 @@ function btnClick(row,type) {
 	console.log('btnClick', type, row);
 	if (type === 1) {
 		uni.navigateTo({
-			url: `/pages/order/order?orderId=${row.orderId}`
+			url: `/pages/order/order?orderId=${row.secondOrderId}`
 		});
 	}
 

pages/index.vue

@@ -22,6 +22,11 @@
 			<!-- 瀑布流 -->
 			<volunteerSide></volunteerSide>
 
+			<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>
 	</view>
 
@@ -37,6 +42,7 @@
 		Client
 	} from "@/pages/Client/new_file.vue"
 	import volunteerSide from "@/pages/Volunteerside/Side_index.vue"
+	import List from './order/list/index.vue';
 	
 	const value = ref(''); //搜索
 
@@ -55,6 +61,12 @@
 		paddingLeft: '30rpx',
 		width: '540rpx'
 	}
+
+	const data = ref([
+		{
+
+		}
+	]);
 </script>
 
 <style scoped>
@@ -84,4 +96,17 @@
 		margin-top: 20rpx;
 		margin-left: 20rpx;
 	}
+	.index-title {
+		padding: 0 12px 12px;
+	}
+	.index-title::before {
+		content: ' ';
+    width: 5px;
+    height: 15px;
+    background: rgba(255, 87, 4, 1);
+    display: inline-block;
+    margin-right: 4px;
+	position: relative;
+    top: 1px;
+	}
 </style>

pages/order/list/index.vue

@@ -1,8 +1,18 @@
 <template>
     <view class="list-page">
-        <up-list @scrolltolower="scrolltolower" style="height: 100%;">
+        <up-list @scrolltolower="scrolltolower" style="height: 100%;" v-if="type === 'ordinary'">
             <up-list-item v-for="(item, index) in data" :key="index" >
-                <ListItem :data="item"/>
+                <ListItem :data="item" />
+            </up-list-item>
+            <up-loadmore
+					:line="true"
+					status="nomore"
+				></up-loadmore>
+        </up-list>
+
+        <up-list @scrolltolower="scrolltolower" style="height: 100%;" v-else>
+            <up-list-item v-for="(item, index) in data" :key="index" >
+                <RankingItem :data="item" />
             </up-list-item>
             <up-loadmore
 					:line="true"
@@ -17,12 +27,18 @@
 import { ref, reactive } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import ListItem from './listItem.vue';
+import RankingItem from './rankingItem.vue';
+
 
 const props = defineProps({
     data: {
         type: Array,
         default: [],
     },
+    type: {
+        type: String,
+        default: 'ordinary' , // ordinary: 普通 ranking: 排行
+    }
 });
 
 const emit = defineEmits(['refresh']);

pages/order/list/listItem.vue

@@ -1,20 +1,13 @@
 <template>
     <view class="item">
         <view class="item-img">
-            <img src="/static/img/dd.png" alt="" />
+             <img :src=" baseUrl + data.avatar" alt="">
         </view>
         <view class="item-info">
             <view class="item-title-box">
                 <view class="item-title">
                     <view class="item-name">
-                        <!-- <dict-tag :options="lrr_service_category" :value="data.serviceCategory" /> -->
-                         姓名: {{  }}
-                        <view v-if="data.serviceType">
-                            -
-                            <dict-tag :options="lrr_study" :value="data.serviceType" v-if="data.serviceCategory === 2" />
-                            <dict-tag :options="lrr_chitchat" :value="data.serviceType" v-if="data.serviceCategory === 1" />
-                        </view>
-                        
+                         姓名: {{ data.name }}
                     </view>
                     <dict-tag :options="order_status" :value="data.orderStatus" />
                 </view>
@@ -38,7 +31,9 @@
 <script setup>
 import { inject } from 'vue';
 import DictTag from '@/components/DictTag/index.vue'
-import { computed } from 'vue';
+
+import config from '@/config'
+const baseUrl = config.baseUrl
 
 const props = defineProps({
     data: {
@@ -46,46 +41,13 @@ const props = defineProps({
         default: () => {
             return {}
         }
-    }
+    },
 });
 
 const inject_click = inject('onClick');
 
-const lrr_service_category = inject('lrr_service_category');
-const lrr_chitchat = inject('lrr_chitchat');
-const lrr_study = inject('lrr_study');
 const order_status = inject('order_status');
 
-
-const status_map = {
-    1: '待服务',
-    2: '已取消',
-    3: '进行中',
-    4: '已完成',
-    5: '申请退款中',
-    6: '已退款',
-    7: '部分退款',
-    8: '待确认'
-}
-const status_color_map = {
-    1: '#3c9cff',
-    2: '#f56c6c',
-    3: '#3c9cff',
-    4: 'rgba(56, 148, 254, 1)',
-    5: 'orange',
-    6: '#3c9cff',
-    7: 'orange',
-    8: '#3c9cff'
-}
-
-const statysColor = computed(() => {
-    return {
-        color: status_color_map[props.data.orderStatus]
-    }
-});
-
-
-
 const btn_style = ` width: 120rpx; height: 50rpx; font-size: 24rpx;border-radius: 25rpx;margin-left: 12rpx;`;
 
 /**

pages/order/list/rankingItem.vue

@@ -0,0 +1,194 @@
+<template>
+    <view class="item">
+        <view class="item-img">
+            <img src="/static/img/dd.png" alt="" />
+        </view>
+        <view class="item-info">
+            <view class="item-title-box">
+                <view class="item-title">
+                    <view class="item-name">
+                        <!-- <dict-tag :options="lrr_service_category" :value="data.serviceCategory" /> -->
+                        姓名: {{ }}
+                    </view>
+                    <dict-tag :options="order_status" :value="data.orderStatus" />
+                </view>
+                <view class="item-de">类别：</view>
+                <view class="item-de">综合评分：</view>
+                <view class="item-de">技能简介：</view>
+
+                <!-- <view class="item-de">
+                    服务地址：{{ data.address }}
+                </view> -->
+            </view>
+            <view class="item-box">
+                <view>
+                    <dict-tag :options="lrr_study" :value="data.serviceType" v-if="data.serviceCategory === 2" />
+                    <dict-tag :options="lrr_chitchat" :value="data.serviceType" v-if="data.serviceCategory === 1" />
+                </view>
+                <view class="rank-num">
+                   <!-- <label class="rank-label">No.</label>11 -->
+                    <img src="/static/img/no1.png" alt="" class="no-img" />
+                </view>
+
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import DictTag from '@/components/DictTag/index.vue'
+import { computed } from 'vue';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+});
+
+const inject_click = inject('onClick');
+
+const lrr_chitchat = inject('lrr_chitchat');
+const lrr_study = inject('lrr_study');
+const order_status = inject('order_status');
+
+const btn_style = ` width: 120rpx; height: 50rpx; font-size: 24rpx;border-radius: 25rpx;margin-left: 12rpx;`;
+
+/**
+ * 1: 查看
+ * 2：沟通
+ * 3：上传照片
+ */
+function onClick() {
+    inject_click(props.data, 1);
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+    height: 120px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 1);
+    padding: 12px;
+    margin-bottom: 12px;
+    display: flex;
+
+    .item-img {
+        width: 96px;
+        height: 96px;
+        margin-right: 12px;
+
+        image {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .item-info {
+        flex: 1;
+        display: flex;
+        // flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+
+        .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;
+
+                display: flex;
+                align-content: 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;
+                }
+
+            }
+
+            .item-de {
+                font-size: 12px;
+                font-weight: 500;
+                letter-spacing: 0px;
+                line-height: 21.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-box {
+            display: flex;
+            align-content: flex-end;
+            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);
+                }
+            }
+
+            .item-btns {
+                display: flex;
+            }
+        }
+    }
+
+
+    .no-img {
+        width: 47px;
+        height: 36px;
+    }
+    .rank-num {
+        font-size: 20px;
+        font-weight: 700;
+        line-height: 23.44px;
+        color: rgba(51, 51, 51, 1);
+    }
+    .rank-label{
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 16.41px;
+        color: rgba(153, 153, 153, 1);
+    }
+}
+</style>

pages/order/order.vue

@@ -4,117 +4,101 @@
 		<view class="user-info order-card">
 			<view class="font-title">基本信息</view>
 			<view class="user-box">
-				<img src="/static/img/dd.png" alt="" class="user-img" />
 				<view class="info-list">
-					<view>姓名：</view>
-					<view>被服务对象：</view>
-					<view>电话号码：</view>
+					<view>被服务人员：{{ detaile.name }}</view>
+					<view @click="onPhone" class="phone">电话号码：{{ detaile.telephone }}</view>
+					<view>地址：{{ detaile.address }}</view>
 				</view>
 			</view>
 		</view>
 		<view class="service-info order-card">
-			<view class="font-title ">服务信息</view>
+			<view class="font-title ">备注信息</view>
 			<view class="info-list">
-				<view>服务地址：</view>
-				<view>服务类别：</view>
-				<view>服务科目：</view>
-				<view>备注：</view>
+				{{ detaile.remark }}
 			</view>
 		</view>
-		<view class="register-info order-card">
-			<view class="font-title ">志愿者信息</view>
-			<view class="register-box">
-				<img src="/static/img/dd.png" alt="" class="register-img" />
-				<view class="info-list">
-					<view>时间：2025.4.1 15:00-18:0</view>
-					<view>姓名：</view>
-					<view>服务地址：</view>
-					<view>金额：<span class="price"><span class="price-yuan">¥</span> 200</span>
-					</view>
-				</view>
-			</view>
-
-		</view>
 
 		<view class="service-info order-card">
 			<view class="font-title">图片上传</view>
-			<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
-				:maxCount="10"></up-upload>
+			<view class="upload-box">
+				<view class="upload-img-item" v-for="(item, index) in fileList" :key="item.url">
+					<view class="delete-icon" @click="deletePic(index)"><up-icon name="close-circle-fill"
+							color="#f64a1f" size="18"></up-icon></view>
+					<img class="upload-img" :src="item.url" :alt="item.fileName" srcset="">
+				</view>
+				<img src="/static/img/upload.png" alt="" class="upload-img" @click="uploadClick('img')"
+					v-if="fileList.length < 10">
+			</view>
 		</view>
 
 		<view class=" footer-g">
-			<up-button type="primary" text="前往沟通"></up-button>
+			<up-button type="primary" text="确定结束" @click="onSubmit"></up-button>
 		</view>
 	</view>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { getToken } from '@/utils/auth'
-import config from '@/config'
-const baseUrl = config.baseUrl
+import { onLoad } from '@dcloudio/uni-app';
+import { getVolunteerOrderInfo } from '@/api/volunteer.js'
+import { getAddress } from '@/api/address.js'
+
+import { wxUploadFile, wxMakePhoneCall } from '@/utils/wxRequest.js'
 
 const fileList = ref([]);
+const orderId  =ref('');
+const detaile = ref({});
 
 // 删除图片
-const deletePic = (event) => {
-	fileList.value.splice(event.index, 1);
+const deletePic = (index) => {
+	fileList.value.splice(index, 1);
 };
 
-// 新增图片
-const afterRead = async (event) => {
-	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
-	let lists = [].concat(event.file);
-	let fileListLen = fileList.value.length;
-	lists.map((item) => {
-		fileList.value.push({
-			...item,
-			status: 'uploading',
-			message: '上传中',
-		});
-	});
-	for (let i = 0; i < lists.length; i++) {
-		const result = await uploadFilePromise(lists[i]);
-		let item = fileList.value[fileListLen];
-		fileList.value.splice(fileListLen, 1, {
-			...item,
-			status: 'success',
-			message: '',
-			url: result.url,
+
+const uploadClick = async (type) => {
+	const res = await wxUploadFile(type);
+	fileList.value = [...fileList.value, res];
+	console.log('文件上传', res);
+}
+const onPhone=(phone)=>{
+	wxMakePhoneCall(phone)
+}
+
+const getOrderDetail = async() => {
+	try {
+		uni.showLoading({
+			title: '数据加载中...'
 		});
-		fileListLen++;
+		const res = await getVolunteerOrderInfo({orderId: orderId.value});
+		const ad_res = await getAddress(res.data.addressId);
+		detaile.value = {
+			...res.data,
+			address:ad_res.data.address,
+			name:ad_res.data.name,
+			telephone:ad_res.data.telephone
+		};
+	} catch (error) {
+		console.log('error', error);
+		uni.showToast({
+			title: error.msg,
+			icon: 'error',
+		})
+	} finally {
+		uni.hideLoading();
 	}
-};
+}
 
-const uploadFilePromise = (data) => {
-	console.log('data',data);
+const onSubmit = () => {
+	console.log('submit',fileList.value);
 	
-	return new Promise((resolve, reject) => {
-		wx.uploadFile({
-			url: baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
-			filePath: data.url,
-			name: 'file',
-			formData: {
-				file: data,
-			},
-			header: {
-				'Authorization': 'Bearer ' + getToken(),   // 自定义请求头
-			},
-			success: (res) => {
-				const data = JSON.parse(res.data);
-				resolve(data);
-			},
-			fail: (err) => {
-				uni.showToast({
-					title: '上传失败',
-					icon: 'none'
-				})
-				console.error(' 转换失败:', err);
-				reject();
-			}
-		});
-	});
-};
+}
+
+onLoad((options) => {
+	console.log('options',options);
+	orderId.value = options.orderId;
+	getOrderDetail();
+
+})
 </script>
 <style lang="scss" scoped>
 .order-detail {
@@ -189,5 +173,31 @@ const uploadFilePromise = (data) => {
 		left: 0px;
 		right: 0px;
 	}
+
+	.upload-img {
+		height: 68px;
+		width: 68px;
+		margin-right: 12px;
+		margin-bottom: 12px;
+	}
+
+	.upload-box {
+		display: flex;
+		flex-wrap: wrap;
+
+		.upload-img-item {
+			position: relative;
+
+			.delete-icon {
+				position: absolute;
+				top: -7px;
+				right: 7px;
+				z-index: 1;
+			}
+		}
+	}
+	.phone {
+		color: #3c9cff;
+	}
 }
 </style>

utils/wxRequest.js

@@ -0,0 +1,124 @@
+import { getToken } from '@/utils/auth'
+import config from '@/config'
+const baseUrl = config.baseUrl
+
+//上传文件还是选择相册图片
+const getWxFile = (type,fileNum) => {
+    return new Promise((resolve, reject) => {
+        //文件上传
+        if (type === 'file') {
+            wx.chooseMessageFile({
+                count: fileNum || 1,
+                type: 'file',
+                success: (res) => {
+                    resolve(res)
+                },
+                fail(error) {
+                    console.log(' 上传失败', error);
+                    uni.showToast({
+                        title: '上传失败',
+                        icon: 'none'
+                    })
+                    reject(error)
+                }
+            });
+        }
+        //相册或者摄像头
+        if (type === 'img') {
+            wx.chooseImage({
+                count: 1, // 选择图片数量 
+                sizeType: ['original', 'compressed'], // 图片类型 
+                sourceType: ['album', 'camera'], // 来源（相册或摄像头）
+                success: function (res) {
+                    resolve(res)
+                },
+                fail(error) {
+                    console.log(' 上传失败', error);
+                    uni.showToast({
+                        title: '上传失败',
+                        icon: 'none'
+                    })
+                    reject(error)
+                }
+            });
+        }
+
+
+    })
+}
+const getUploadPromise = (file) => {
+    return new Promise((resolve, reject) => {
+        const path = file.path
+        wx.uploadFile({
+            url: baseUrl + '/common/upload',  // 服务器接口地址 
+            filePath: path,        // 本地文件路径（通过 wx.chooseImage  获取）
+            name: 'file',                      // 文件对应的 key（服务器接收字段名）
+            formData: {                        // 额外表单数据 
+                file: file,
+            },
+            header: {
+                'Authorization': 'Bearer ' + getToken(),   // 自定义请求头
+            },
+            success(res) {
+                const data = JSON.parse(res.data);
+                resolve(data);
+            },
+            fail(error) {
+                console.log(' 上传失败', error);
+                uni.showToast({
+                    title: '上传失败',
+                    icon: 'none'
+                })
+                reject(error)
+            }
+        });
+    })
+}
+const uploadFile = async (files) => {
+    const filesPromise = files.map((item) => {
+        return getUploadPromise(item)
+    })
+    try {
+        const results = await Promise.all(filesPromise)
+        console.log('results',results);
+        
+        return results;
+    } catch (error) {
+        console.log('上传失败-uploadFile', error);
+        throw error;
+    }
+}
+
+/**
+ * 
+ * type: 文件上传方式
+ * file:选择文件
+ * img: 相册或者摄像头
+ */
+export const wxUploadFile = async (type,fileNum) => {
+    try {
+        console.log('11');
+        
+        //选择文件
+        const files = await getWxFile(type,fileNum);
+        console.log('选择文件', files,files.tempFiles);
+        //上传服务器
+        const u_files = await uploadFile(files.tempFiles);
+        console.log('上传服务器', u_files);
+        return u_files;
+    } catch (error) {
+        console.log('上传失败-wxUploadFile', error);
+        throw error;
+
+    }
+
+}
+
+/**
+ * 拨打电话
+ */
+export const wxMakePhoneCall = (phoneNumber) => {
+    uni.makePhoneCall({
+        phoneNumber: phoneNumber
+    });
+}