leromro-mini/pages/common/classify/orderlist.vue

<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>
</template>

<script setup>
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: 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>