feat: 订单列表

api/system/dict.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType) {
+    return request({
+      url: '/system/dict/data/type/' + dictType,
+      method: 'get'
+    })
+  }

api/volunteer.js

@@ -27,4 +27,13 @@ export function getDataTime() {
         url: `/core/volunteer/work-date/getWorkDateAndTime`,
         method: 'get',
     })
+}
+
+//志愿者订单列表
+export function getVolunteerOrderList(data) {
+    return request({
+        url: `/core/users/orders/volunteerOrderList`,
+        method: 'get',
+        params: data
+    })
 }

components/DictTag/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="values.includes(item.value)">
+        <span
+          v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
+          :key="item.value"
+          :index="index"
+          :class="item.elTagClass"
+        >{{ item.label + " " }}</span>
+        <up-tag
+          v-else
+          :disable-transitions="true"
+          :key="item.value + ''"
+          :index="index"
+          :type="item.elTagType"
+          :class="item.elTagClass"
+          :text="item.label + ''"
+        ></up-tag>
+      </template>
+    </template>
+    <template v-if="unmatch && showValue">
+      {{ unmatchArray | handleArray }}
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+// 记录未匹配的项
+const unmatchArray = ref([]);
+
+const props = defineProps({
+  // 数据
+  options: {
+    type: Array,
+    default: null,
+  },
+  // 当前的值
+  value: [Number, String, Array],
+  // 当未找到匹配的数据时，显示value
+  showValue: {
+    type: Boolean,
+    default: true,
+  },
+  separator: {
+    type: String,
+    default: ",",
+  }
+});
+
+const values = computed(() => {
+  if (props.value === null || typeof props.value === 'undefined' || props.value === '') return [];
+  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
+});
+
+const unmatch = computed(() => {
+  unmatchArray.value = [];
+  // 没有value不显示
+  if (props.value === null || typeof props.value === 'undefined' || props.value === '' || !Array.isArray(props.options) || props.options.length === 0) return false
+  // 传入值为数组
+  let unmatch = false // 添加一个标志来判断是否有未匹配项
+  values.value.forEach(item => {
+    if (!props.options.some(v => v.value === item)) {
+      unmatchArray.value.push(item)
+      unmatch = true // 如果有未匹配项，将标志设置为true
+    }
+  })
+  return unmatch // 返回标志的值
+});
+
+function handleArray(array) {
+  if (array.length === 0) return "";
+  return array.reduce((pre, cur) => {
+    return pre + " " + cur;
+  });
+}
+</script>
+
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>

pages.json

@@ -79,6 +79,13 @@
 			{
 				"navigationBarTitleText" : "注册"
 			}
+		},
+		{
+			"path" : "pages/order/order",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	    
         // ,{
@@ -313,17 +320,17 @@
 				"selectedIconPath": "static/images/tabbar/home_.png",
 				"text": "首页"
 			},
-			{
-				"pagePath": "pages/work",
-				"iconPath": "static/images/tabbar/work.png",
-				"selectedIconPath": "static/images/tabbar/work_.png",
-				"text": "工作台"
-			},
+			// {
+			// 	"pagePath": "pages/work",
+			// 	"iconPath": "static/images/tabbar/work.png",
+			// 	"selectedIconPath": "static/images/tabbar/work_.png",
+			// 	"text": "工作台"
+			// },
 			{
 				"pagePath": "pages/classify",
 				"iconPath": "static/images/tabbar/work.png",
 				"selectedIconPath": "static/images/tabbar/work_.png",
-				"text": "分类"
+				"text": "订单"
 			},
 			{
 				"pagePath": "pages/mine",

pages/classify.vue

@@ -1,293 +1,123 @@
 <template>
-	<view class="u-wrap">
-		<view class="u-search-box">
-			<view class="u-search-inner">
-				<u-icon name="search" color="#909399" :size="28"></u-icon>
-				<text class="u-search-text">搜索</text>
+	<view class="classify-main">
+		<up-tabs :list="column" :scrollable="false" @change="onChange" :activeStyle="{
+			color: 'rgba(255, 87, 4, 1)',
+			fontWeight: 'bold',
+			transform: 'scale(1.05)'
+		}" lineColor="rgba(255, 87, 4, 1)">
+		</up-tabs>
+		<view class="list">
+			<List :data="data" @refresh="getList" v-if="data.length > 0" />
+
+			<view v-else class="empty-null">
+				<img src="/static/empty/订单为空.png" alt="">
 			</view>
 		</view>
-		<view class="u-menu-wrap">
-			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
-				:scroll-into-view="itemId">
-				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
-					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
-					<text class="u-line-1">{{ item.name }}</text>
-				</view>
-			</scroll-view>
-			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
-				@scroll="rightScroll">
-				<view class="page-view">
-					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
-						<view class="item-title">
-							<text>{{ item.name }}</text>
-						</view>
-						<view class="item-container">
-							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
-								@click="clickMenu(item1)">
-								<image class="item-menu-image" :src="item1.icon" mode=""></image>
-								<view class="item-menu-name">{{ item1.name }}</view>
-							</view>
-						</view>
-					</view>
-				</view>
-			</scroll-view>
-		</view>
+
 	</view>
 </template>
-<script>
-import classifyData from '@/pages_template/common/classify.data.js';
-export default {
-	data() {
-		return {
-			scrollTop: 0, //tab标题的滚动条位置
-			oldScrollTop: 0,
-			current: 0, // 预设当前项的值
-			menuHeight: 0, // 左边菜单的高度
-			menuItemHeight: 0, // 左边菜单item的高度
-			itemId: '', // 栏目右边scroll-view用于滚动的id
-			tabbar: classifyData,
-
-			arr: [],
-			scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-			timer: null, // 定时器
 
-		}
+<script setup>
+import { ref } from 'vue';
+import List from './common/list/index.vue';
+import { provide } from 'vue';
+import { getVolunteerOrderList } from '@/api/volunteer.js'
+import { onMounted } from 'vue';
+import {useDict} from '@/utils/dict.js';
+
+const { lrr_service_category, lrr_chitchat,lrr_study } = useDict('lrr_service_category','lrr_chitchat','lrr_study');
+provide('lrr_service_category', lrr_service_category); //服务类别
+provide('lrr_chitchat', lrr_chitchat);//陪伴陪聊
+provide('lrr_study', lrr_study);//家庭辅导
+
+const tab = ref({});
+const data = ref([]);
+
+/**
+ * 	0待支付 1已支付 2支付超时或取消 3进行中 4已完成 5申请退款中 6已退款 7部分退款 8 待确认
+ */
+const column = [
+	{
+		name: "全部",
+		value: "",
+	},
+	{
+		name: "待服务",
+		value: "1",
+	},
+	{
+		name: "进行中",
+		value: "3",
 	},
-	onReady() {
-		this.getMenuItemTop()
+	{
+		name: "已完成",
+		value: "4",
 	},
-	methods: {
-		// 点击左边的栏目切换
-		async swichMenu(index) {
-			if (this.arr.length == 0) {
-				await this.getMenuItemTop();
-			}
-			if (index == this.current) return;
-			this.scrollRightTop = this.oldScrollTop;
-			this.$nextTick(() => {
-				this.scrollRightTop = this.arr[index];
-				this.current = index;
-				this.leftMenuStatus(index);
-			})
-		},
-		// 获取一个目标元素的高度
-		getElRect(elClass, dataVal) {
-			new Promise((resolve, reject) => {
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.' + elClass).fields({
-					size: true
-				}, res => {
-					// 如果节点尚未生成，res值为null，循环调用执行
-					if (!res) {
-						setTimeout(() => {
-							this.getElRect(elClass);
-						}, 10);
-						return;
-					}
-					this[dataVal] = res.height;
-					resolve();
-				}).exec();
-			})
-		},
-		// 观测元素相交状态
-		async observer() {
-			this.tabbar.map((val, index) => {
-				let observer = uni.createIntersectionObserver(this);
-				// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-				// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
-				observer.relativeTo('.right-box', {
-					top: 0
-				}).observe('#item' + index, res => {
-					if (res.intersectionRatio > 0) {
-						let id = res.id.substring(4);
-						this.leftMenuStatus(id);
-					}
-				})
-			})
-		},
-		// 设置左边菜单的滚动状态
-		async leftMenuStatus(index) {
-			this.current = index;
-			// 如果为0，意味着尚未初始化
-			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-				await this.getElRect('menu-scroll-view', 'menuHeight');
-				await this.getElRect('u-tab-item', 'menuItemHeight');
-			}
-			// 将菜单活动item垂直居中
-			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-		},
-		// 获取右边菜单每个item到顶部的距离
-		getMenuItemTop() {
-			new Promise(resolve => {
-				let selectorQuery = uni.createSelectorQuery();
-				selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
-					// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-					if (!rects.length) {
-						setTimeout(() => {
-							this.getMenuItemTop();
-						}, 10);
-						return;
-					}
-					rects.forEach((rect) => {
-						// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-						this.arr.push(rect.top - rects[0].top);
-						resolve();
-					})
-				}).exec()
-			})
-		},
-		// 右边菜单滚动
-		async rightScroll(e) {
-			this.oldScrollTop = e.detail.scrollTop;
-			if (this.arr.length == 0) {
-				await this.getMenuItemTop();
-			}
-			if (this.timer) return;
-			if (!this.menuHeight) {
-				await this.getElRect('menu-scroll-view', 'menuHeight');
-			}
-			setTimeout(() => { // 节流
-				this.timer = null;
-				// scrollHeight为右边菜单垂直中点位置
-				let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
-				for (let i = 0; i < this.arr.length; i++) {
-					let height1 = this.arr[i];
-					let height2 = this.arr[i + 1];
-					// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-					if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
-						this.leftMenuStatus(i);
-						return;
-					}
-				}
-			}, 10)
-		},
-		clickMenu(menu) {
-			console.log(menu);
-		}
+	{
+		name: "已取消",
+		value: "2",
+	}
+]
+
+async function getList(parmas) {
+	console.log('getList', parmas);
+	try {
+		uni.hideLoading();
+		uni.showLoading({
+			title: '数据加载中...'
+		});
+		const res = await getVolunteerOrderList({ orderStatus: tab.value.value });
+		data.value = res.data;
+	} catch (error) {
+		console.log('error', error);
+		uni.showToast({
+			title: error.msg,
+			icon: 'error',
+		})
+	} finally {
+		uni.hideLoading();
 	}
-}
-</script>
-
-<style lang="scss" scoped>
-.u-wrap {
-	height: calc(100vh);
-	/* #ifdef H5 */
-	height: calc(100vh - var(--window-top));
-	/* #endif */
-	display: flex;
-	flex-direction: column;
-}
-
-.u-search-box {
-	padding: 18rpx 30rpx;
-}
-
-.u-menu-wrap {
-	flex: 1;
-	display: flex;
-	overflow: hidden;
-}
-
-.u-search-inner {
-	background-color: rgb(234, 234, 234);
-	border-radius: 100rpx;
-	display: flex;
-	align-items: center;
-	padding: 10rpx 16rpx;
-}
-
-.u-search-text {
-	font-size: 26rpx;
-	color: $u-tips-color;
-	margin-left: 10rpx;
-}
-
-.u-tab-view {
-	width: 200rpx;
-	height: 100%;
-}
-
-.u-tab-item {
-	height: 110rpx;
-	background: #f6f6f6;
-	box-sizing: border-box;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 26rpx;
-	color: #444;
-	font-weight: 400;
-	line-height: 1;
-}
-
-.u-tab-item-active {
-	position: relative;
-	color: #000;
-	font-size: 30rpx;
-	font-weight: 600;
-	background: #fff;
-}
-
-.u-tab-item-active::before {
-	content: "";
-	position: absolute;
-	border-left: 4px solid $u-primary;
-	height: 32rpx;
-	left: 0;
-	top: 39rpx;
-}
-
-.u-tab-view {
-	height: 100%;
 }
 
-.right-box {
-	background-color: rgb(250, 250, 250);
-}
+/**
+ * 1: 查看
+ * 2：沟通
+ * 3：上传照片
+ */
+function btnClick(row,type) {
+	console.log('btnClick', type, row);
+	if(type === 1){
 
-.page-view {
-	padding: 16rpx;
-}
+	}
 
-.class-item {
-	margin-bottom: 30rpx;
-	background-color: #fff;
-	padding: 16rpx;
-	border-radius: 8rpx;
 }
+provide('onClick', btnClick);
 
-.class-item:last-child {
-	min-height: 100vh;
-}
 
-.item-title {
-	font-size: 26rpx;
-	color: $u-main-color;
-	font-weight: bold;
+function onChange(tabItem) {
+	tab.value = tabItem;
+	getList();
+	console.log('change', tabItem, tab.value);
 }
 
-.item-menu-name {
-	font-weight: normal;
-	font-size: 24rpx;
-	color: $u-main-color;
-}
 
-.item-container {
-	display: flex;
-	flex-wrap: wrap;
+async function init(){
+	getList();
 }
 
-.thumb-box {
-	width: 33.333333%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	margin-top: 20rpx;
-}
+onMounted(init)
+</script>
 
-.item-menu-image {
-	width: 120rpx;
-	height: 120rpx;
+<style lang="scss" scoped>
+.classify-main {
+	height: 100vh;
+
+	.list {
+		position: fixed;
+		top: 50px;
+		bottom: 0px;
+		left: 0px;
+		right: 0px;
+	}
 }
-</style>
+</style>

pages/common/list/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <view class="list-page">
+        <up-list @scrolltolower="scrolltolower" style="height: 100%;">
+            <up-list-item v-for="(item, index) in data" :key="index" >
+                <ListItem :data="item"/>
+            </up-list-item>
+            <up-loadmore
+					:line="true"
+					status="nomore"
+				></up-loadmore>
+        </up-list>
+      
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import ListItem from './listItem.vue';
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: [],
+    },
+});
+
+const emit = defineEmits(['refresh']);
+
+
+const scrolltolower = () => {
+    console.log('底部');
+    // emit('refresh');
+};
+
+</script>
+
+<style lang="scss" scoped>
+.list-page {
+
+    background: rgba(245, 245, 245, 1);
+    padding: 12px;
+    height: 100%;
+    overflow-y: auto;
+    .item {
+        height: 120px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 1);
+        padding: 12px;
+    }
+}
+</style>

pages/common/list/listItem.vue

@@ -0,0 +1,203 @@
+<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 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>
+                        
+                    </view>
+                    <view class="item-tag" :style="statysColor"> {{ status_map[data.orderStatus] }}</view>
+                </view>
+                <view class="item-de">
+                    服务地址：{{ data.addressId }}
+                </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>
+            </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_service_category = inject('lrr_service_category');
+const lrr_chitchat = inject('lrr_chitchat');
+const lrr_study = inject('lrr_study');
+
+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;`;
+
+/**
+ * 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;
+        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: 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-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;
+            }
+        }
+    }
+}
+</style>

pages/order/order.vue

@@ -0,0 +1,23 @@
+<!-- 订单详情 -->
+<template>
+	<view>
+		订单详情
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/register/register.vue

@@ -30,7 +30,6 @@ import { add } from "../../api/volunteer";
 import { computed } from 'vue';
 
 
-
 const userImg = ref(null);
 const zsImg = ref(null);
 
@@ -121,7 +120,7 @@ function onSubmit() {
 			}
 
 			console.log('提交',parmas);
-			
+
 			// return;
 			// 提交接口，注册人员
 			const submit_res = await add(parmas);

static/scss/global.scss

@@ -103,7 +103,17 @@
   line-height: 17.38px;
   color: rgba(153, 153, 153, 1);
 }
-
+.empty-null {
+  display: flex;
+  margin-top: 25%;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.empty-null  image  {
+  width: 200px;
+  height: 200px;
+}
 .u-form-item__body__left {
   padding-left: 8px;
 }

utils/dict.js

@@ -0,0 +1,25 @@
+import { getDicts } from '@/api/system/dict.js';
+import {ref,toRefs} from 'vue'
+function setDict(_key, value) {
+    const dict = [];
+    if (_key !== null && _key !== "") {
+      dict.push({
+        key: _key,
+        value: value
+      });
+    }
+    return dict;
+  }
+export function useDict(...args) {
+    const res = ref({});
+    return (() => {
+      args.forEach((dictType, index) => {
+        res.value[dictType] = [];
+        getDicts(dictType).then(resp => {
+            res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
+            setDict(dictType, res.value[dictType]);
+         })
+      })
+      return toRefs(res.value);
+    })()
+  }