leromro-mini/pages/order/order.vue

<!-- 订单详情 -->
<template>
	<view class="order-detail">
		<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>
			</view>
		</view>
		<view class="service-info order-card">
			<view class="font-title ">服务信息</view>
			<view class="info-list">
				<view>服务地址：</view>
				<view>服务类别：</view>
				<view>服务科目：</view>
				<view>备注：</view>
			</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>

		<view class=" footer-g">
			<up-button type="primary" text="前往沟通"></up-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getToken } from '@/utils/auth'
import config from '@/config'
const baseUrl = config.baseUrl

const fileList = ref([]);

// 删除图片
const deletePic = (event) => {
	fileList.value.splice(event.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,
		});
		fileListLen++;
	}
};

const uploadFilePromise = (data) => {
	console.log('data',data);
	
	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();
			}
		});
	});
};
</script>
<style lang="scss" scoped>
.order-detail {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 12px 24px;
	background: rgba(245, 245, 245, 1);


	.order-card {
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		padding: 12px;
		margin-bottom: 12px;
	}

	.font-title {
		margin-bottom: 12px;
	}

	.user-box {
		display: flex;

		.user-img {
			width: 65.8px;
			height: 65.8px;
			margin-right: 12px;
		}

	}

	.register-box {
		display: flex;
		margin-bottom: 12px;

		.register-img {
			width: 90px;
			height: 90px;
			margin-right: 12px;
		}

	}

	.info-list {
		flex: 1;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 23.27px;
		color: rgba(51, 51, 51, 1);
	}

	.price {
		font-size: 18px;
		font-weight: 500;
		color: rgba(246, 74, 31, 1);

		.price-yuan {
			font-size: 13px;
			font-weight: 700;
			color: rgba(246, 74, 31, 1);
		}
	}

	.footer-g {
		padding: 12px;
		position: absolute;
		bottom: 18px;
		left: 0px;
		right: 0px;
	}
}
</style>