订单样式修改

pages/common/classify/orderlist.vue

@@ -1,222 +1,247 @@
 <template>
-	<!-- 用户 -->
-	<view>
-		<view class="classify-main" v-if="userType == '1'">
-			<up-tabs v-if="column2 && column2.length > 0" :list="column2" :scrollable="false" @change="onChange"
-				:activeStyle="{
-					color: 'rgba(255, 87, 4, 1)',
-					fontWeight: 'bold',
-					transform: 'scale(1.05)'
-				}" lineColor="rgba(255, 87, 4, 1)" :current="tabKey">
-			</up-tabs>
-			<view class="list">
-				<OrderItem v-if="dataList && dataList.length > 0" :dataList="dataList" />
-				<view v-else class="empty-null">
-					<img src="/static/empty/订单为空.png" alt="">
-				</view>
-			</view>
-		</view>
-		<view>
-			<up-list @scrolltolower="scrolltolower">
-				<up-list-item v-for="(item, index) in dataList" :key="index">
-					<view class="list-item">
-						<!-- 左侧图片 -->
-						<image :src="item.volunteerPicture" mode="aspectFill" class="item-image" @click="handlClick(item)"></image>
-
-						<!-- 中间信息 -->
-						<view class="item-info" @click="handlClick(item)">
-							<view class="info-line">姓名：{{item.name}}</view>
-							<view class="info-line">类别：{{item.businessTierName}}</view>
-							<view class="info-line skill-description">技能介绍：{{ item.skillDescribe }}</view>
-						</view>
-
-						<!-- 右侧信息 -->
-						<view class="item-right">
-							<!-- <view class="rating">评分：9.5</view> -->
-							<view class="status-tags">
-								{{dictSortMap[item.orderStatus]}}
-							</view>
-							<view class="Wrap-Btn">
-								<!-- 沟通按钮 -->
-								<up-button type="primary" text="沟通" shape="circle" :customStyle="wrapqx">
-								</up-button>
-
-								<!-- 当 orderStatus 为 3 显示退款按钮 -->
-								<up-button v-if="item.orderStatus === '3'" type="error" text="退款" 
-									shape="circle" :customStyle="wrapqx" @click="handleRefund(item)">
-								</up-button>
-
-								<!-- 当 orderStatus 为 1 显示取消订单按钮 -->
-								<up-button v-if="item.orderStatus === '1'" type="warning" text="取消" 
-									shape="circle" :customStyle="wrapqx" @click="handleCancel(item)">
-								</up-button>
-							</view>
-						</view>
-					</view>
-				</up-list-item>
-			</up-list>
-		</view>
-	</view>
+  <!-- 用户 -->
+  <view>
+    <view class="classify-main" v-if="userType == '1'">
+      <up-tabs
+        v-if="column2 && column2.length > 0"
+        :list="column2"
+        :scrollable="false"
+        @change="onChange"
+        :activeStyle="{
+          color: 'rgba(255, 87, 4, 1)',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }"
+        lineColor="rgba(255, 87, 4, 1)"
+        :current="tabKey"
+      >
+      </up-tabs>
+      <view class="list">
+        <OrderItem
+          v-if="dataList && dataList.length > 0"
+          :dataList="dataList"
+        />
+        <view v-else class="empty-null">
+          <img src="/static/empty/订单为空.png" alt="" />
+        </view>
+      </view>
+    </view>
+    <view>
+      <up-list @scrolltolower="scrolltolower">
+        <up-list-item v-for="(item, index) in dataList" :key="index">
+          <view class="list-item">
+            <!-- 左侧图片 -->
+            <image
+              :src="item.volunteerPicture"
+              mode="aspectFill"
+              class="item-image"
+              @click="handlClick(item)"
+            ></image>
+
+            <!-- 中间信息 -->
+            <view class="item-info" @click="handlClick(item)">
+              <view class="info-line">姓名：{{ item.name }}</view>
+              <view class="info-line">类别：{{ item.businessTierName }}</view>
+              <view class="info-line skill-description"
+                >技能介绍：{{ item.skillDescribe }}</view
+              >
+            </view>
+
+            <!-- 右侧信息 -->
+            <view class="item-right">
+              <!-- <view class="rating">评分：9.5</view> -->
+              <view class="status-tags">
+                {{ dictSortMap[item.orderStatus] }}
+              </view>
+              <view class="Wrap-Btn">
+                <!-- 沟通按钮 -->
+                <up-button
+                  type="primary"
+                  text="沟通"
+                  shape="circle"
+                  :customStyle="wrapqx"
+                >
+                </up-button>
+                  <!-- 当 orderStatus 为 3 显示退款按钮 -->
+                  <up-button
+                    v-if="item.orderStatus === '3'"
+                    type="error"
+                    text="退款"
+                    shape="circle"
+                    :customStyle="wrapqx"
+                    @click="handleRefund(item)"
+                  >
+                  </up-button>
+                  <!-- 当 orderStatus 为 1 显示取消订单按钮 -->
+                  <up-button
+                    v-if="item.orderStatus === '1'"
+                    type="warning"
+                    text="取消"
+                    shape="circle"
+                    :customStyle="wrapqx"
+                    @click="handleCancel(item)"
+                  >
+                  </up-button>
+              </view>
+            </view>
+          </view>
+        </up-list-item>
+      </up-list>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		onMounted,
-		computed
-	} from "vue"
-
-
-	const userType = uni.getStorageSync('userType') //读取本地存储
-  const afterSaleStatusArr = ref([])
-	// 用户/志愿者 识别标识
-	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
-	const orderStatus = ref(0)
-	const column2 = [{
-			name: "全部",
-			value: "",
-		},
-		{
-			name: "待支付",
-			value: "0",
-		},
-		{
-			name: "待服务",
-			value: "1",
-		},
-		{
-			name: "进行中",
-			value: "3",
-		},
-		{
-			name: "已完成",
-			value: "4",
-		},
-		{
-			name: "售后",
-			value: afterSaleStatusArr.value,
-		}
-	]
-
-	const props = defineProps({
-		dataList: {
-			typeof: Array,
-			default: () => [],
-		},
-		dictSort: {
-			type: Array,
-			default: () => [], // 默认值
-		},
-		fetchData: Function, // 刷新数据的方法
-	})
-
-
-	const emits = defineEmits([
-		'fetchData'
-	])
-
-	const dictSortMap = computed(() => {
-		let mapObj = {}
-		props.dictSort.forEach((item => {
-			mapObj[item.dictValue] = item.dictLabel
-		}))
-		return mapObj
-	})
-
-	const handlClick = (item) => {
-		const mainOrderId = item.mainOrderId; // 获取详情id
-		uni.navigateTo({
-			url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`
-		});
-	}
-
-	function onChange(tabItem) {
-		emits('fetchData', tabItem.value)
-	}
-	
-	//申请退款 
-	const handleRefund = (item) => {
-		const mainOrderId = item.mainOrderId; // 获取详情id
-		uni.navigateTo({
-			url: `/pages_classify/pages/requestaRefund/requestaRefund?mainOrderId=${mainOrderId}`
-		});
-	};
-	
-	const wrapqx = {
-		height: '50rpx',
-		width: '100rpx',
-		marginLeft: '8rpx'
-	}
-
-	// 取消订单
-	const handleCancel = (item) => {
-    const mainOrderId = item.mainOrderId;
-    uni.navigateTo({
-      url: `/pages_classify/pages/cancelationOforder/cancelationOforder?mainOrderId=${mainOrderId}`
-    });
-	};
+import { ref, onMounted, computed } from 'vue'
+
+const userType = uni.getStorageSync('userType') //读取本地存储
+
+// 用户/志愿者 识别标识
+const column2 = [
+  {
+    name: '全部',
+    value: '',
+  },
+  {
+    name: '待支付',
+    value: '0',
+  },
+  {
+    name: '待服务',
+    value: '1',
+  },
+  {
+    name: '进行中',
+    value: '3',
+  },
+  {
+    name: '已完成',
+    value: '4',
+  },
+  {
+    name: '售后',
+    value: '2',
+  },
+]
+
+const props = defineProps({
+  dataList: {
+    typeof: Array,
+    default: () => [],
+  },
+  dictSort: {
+    type: Array,
+    default: () => [], // 默认值
+  },
+  fetchData: Function, // 刷新数据的方法
+})
+
+const emits = defineEmits(['fetchData'])
+
+const dictSortMap = computed(() => {
+  let mapObj = {}
+  props.dictSort.forEach((item) => {
+    mapObj[item.dictValue] = item.dictLabel
+  })
+  return mapObj
+})
+
+const handlClick = (item) => {
+  const mainOrderId = item.mainOrderId // 获取详情id
+  uni.navigateTo({
+    url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`,
+  })
+}
+
+function onChange(tabItem) {
+  emits('fetchData', tabItem.value)
+}
+
+//申请退款
+const handleRefund = (item) => {
+  const mainOrderId = item.mainOrderId // 获取详情id
+  uni.navigateTo({
+    url: `/pages_classify/pages/requestaRefund/requestaRefund?mainOrderId=${mainOrderId}`,
+  })
+}
+
+const wrapqx = {
+  height: '50rpx',
+  width: '100rpx',
+  marginLeft: '8rpx',
+}
+
+// 取消订单
+const handleCancel = (item) => {
+  const mainOrderId = item.mainOrderId
+  uni.navigateTo({
+    url: `/pages_classify/pages/cancelationOforder/cancelationOforder?mainOrderId=${mainOrderId}`,
+  })
+}
 </script>
 
 <style scoped>
-	.list-item {
-		display: flex;
-		padding: 12px;
-		border-bottom: 1px solid #f5f5f5;
-	}
-
-	.item-image {
-		width: 60px;
-		height: 60px;
-		border-radius: 8px;
-		margin-right: 12px;
-	}
-
-	.item-info {
-		flex: 1;
-		margin-right: 12px;
-		overflow: hidden;
-	}
-
-	.info-line {
-		margin-bottom: 6px;
-		font-size: 12px;
-		color: #333;
-	}
-
-	.skill-description {
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		/* 限制两行 */
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		line-height: 1.4;
-		min-height: 2.8em;
-		/* 两行高度 */
-	}
-
-	.item-right {
-		width: 120px;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-	}
-
-	.rating {
-		font-size: 13px;
-		color: #f39c12;
-		margin-bottom: 6px;
-	}
-
-	.status-tags {
-		margin-bottom: 6px;
-	}
-
-	.Wrap-Btn {
-		display: flex;
-		gap: 8px;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-	}
-
-</style>
+.list-item {
+  display: flex;
+  padding: 24rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.item-image {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 16rpx;
+  margin-right: 24rpx;
+}
+
+.item-info {
+  flex: 1;
+  margin-right: 24rpx;
+  overflow: hidden;
+}
+
+.info-line {
+  margin-bottom: 12rpx;
+  font-size: 24rpx;
+  color: #333;
+}
+
+.skill-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* 限制两行 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+  min-height: 2.8em;
+  /* 两行高度 */
+}
+
+.item-right {
+  width: 240rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.rating {
+  font-size: 26rpx;
+  color: #f39c12;
+  margin-bottom: 12rpx;
+}
+
+.status-tags {
+  margin-bottom: 60rpx;
+  font-size: 25rpx;
+}
+
+.Wrap-Btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16rpx;
+}
+
+</style>

pages_classify/pages/cancelationOforder/cancelationOforder.vue

@@ -19,14 +19,7 @@
     <!-- 申请类型 -->
     <view class="application-type"> 申请类型：取消订单 </view>
 
-    <!-- 展开全部按钮 -->
-    <view class="expand-all">
-      <text @click="toggleExpand">展开全部</text>
-      <image
-        :src="expanded ? '/path/to/up-icon.png' : '/path/to/down-icon.png'"
-        class="expand-icon"
-      ></image>
-    </view>
+  
 
     <!-- 申请说明 -->
     <view class="application-note">
@@ -92,8 +85,8 @@ const handlClick = async () => {
 }
 
 .volunteer-image {
-  width: 80rpx;
-  height: 120rpx;
+  width: 120rpx;
+  height: 140rpx;
   margin-right: 20rpx;
   border-radius: 8rpx;
 }