leromro-mini/pages/common/orderList/userItem.vue

<template>
  <view class="item">
    <view class="item-img">
      <up-image :show-loading="true" :src="data.volunteerPicture"></up-image>
    </view>
    <view class="item-info">
      <view class="item-title-box">
        <view class="item-title">
          <view class="item-name">
            志愿者姓名：{{ data.name }}
          </view>
          <dict-tag :options="order_status" :value="String(data.orderStatus)" />
        </view>
        <view class="item-de">
          服务类别：{{ data.businessTierName }}
        </view>
        <view class="item-de">
          下单日期：{{ data.createTime }}
        </view>
        <view class="item-time skill-description">
          服务描述：{{ data.businessDescribe }}
        </view>
      </view>
      <view class="item-box">
        <view class="item-btns">
          <view v-for="item in btns" :key="item.name">
            <view class="btn-m" v-if="item.show ? item.show(data) : true" :type="item.type" text="取消"
              @click="item.onClick(data)">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { inject } from 'vue';
import DictTag from '@/components/DictTag/index.vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
});

const order_status = inject('order_status');

const btns = [
  {
    name: '沟通',
    onClick: (e) => {
      console.log("TCL: e", e)
      uni.navigateTo({
        url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${e.mainOrderId}`
      });
    },
    type: 'primary'
  },
  {
    name: '退款',
    onClick: (e) => handleRefund(e),
    show: (item) => ['3'].includes(item.orderStatus),
    type: 'error'
  },
  {
    name: '取消',
    onClick: (e) => handleCancel(e),
    show: (item) => ['1'].includes(item.orderStatus),
    type: 'warning'
  },
  {
    name: '查看',
    onClick: (e) => handlClick(e),
    // show: (item) => item.orderStatus !== '1',
    type: 'info'
  },
]

//申请退款 
const handleRefund = (item) => {
  const mainOrderId = item.mainOrderId; // 获取详情id
  uni.navigateTo({
    url: `/pages_classify/pages/requestaRefund/requestaRefund?mainOrderId=${mainOrderId}`
  });
};
// 取消订单
const handleCancel = (item) => {
  const mainOrderId = item.mainOrderId;
  uni.navigateTo({
    url: `/pages_classify/pages/cancelationOforder/cancelationOforder?mainOrderId=${mainOrderId}`
  });
};
//查看
const handlClick = (item) => {
  const mainOrderId = item.mainOrderId; // 获取详情id
  uni.navigateTo({
    url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`
  });
}
</script>

<style lang="scss" scoped>
.item {
  border-radius: 18rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);

  margin-bottom: 24rpx;
  padding: 32rpx;
  display: flex;
  align-items: flex-start;

  .item-img {
    width: 122rpx;
    height: 122rpx;
    border-radius: 200rpx;
    overflow: hidden;
    
    :deep(image) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    height: 100%;

    .item-title-box {
      .item-title {
        font-size: 30rpx;
        font-weight: 400;
        line-height: 45rpx;
        color: rgba(26, 26, 26, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15rpx;
      }
    }

    .item-de {
      display: flex;
      font-size: 26rpx;
      font-weight: 400;
      line-height: 39rpx;
      color: rgba(153, 153, 153, 1);
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .item-time {
      font-size: 26rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 39rpx;
      color: rgba(153, 153, 153, 1);
      margin-bottom: 20rpx;
    }

    .item-price {
      font-size: 30rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 45rpx;
      color: rgba(203, 26, 28, 1);
      margin-bottom: 16rpx;
    }

    .item-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;


      .item-btns {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn-s {
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(221, 94, 69, 1);
          text-align: center;
          padding: 16rpx 0;
          width: 156.03rpx;
          border-radius: 8rpx;
          background: rgba(0, 0, 0, 0);
          display: flex;
          justify-content: center;
          border: 0rpx solid rgba(221, 94, 69, 1);
        }

        .btn-m {
          border-radius: 59rpx;
          font-size: 26rpx;
          text-align: left;
          margin-left: 24rpx;
          display: flex;
          justify-content: center;
          color: #dd5e45;
          padding: 12rpx 32rpx;
          border: 1px solid;
          border-radius: 59rpx;
        }


      }
    }
  }
}

.item-time-text {
  color: #dd5e45;
}

.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;
  /* 两行高度 */
}
</style>