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{
    height: 347rpx;
    border-radius: 18rpx;
      // background: #FFFFFF;
      background: red;
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
}
</style>