|
|
@@ -1,23 +1,193 @@
|
|
|
<!-- 订单详情 -->
|
|
|
<template>
|
|
|
- <view>
|
|
|
- 订单详情
|
|
|
+ <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>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
+<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();
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+</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);
|
|
|
}
|
|
|
-</script>
|
|
|
|
|
|
-<style>
|
|
|
+ .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>
|
chenjj