LocalLivingServicesUniapp/pages/finance/components/order-list.vue

<template>
  <view class="list">
    <view class="list_item" v-for="(item, index) in list" :key="index" @click="goDetails(item)">
      <view class="left">
        <view class="name">订单号:{{ item.orderId }}</view>
        <view class="value">{{ item.buyTime }}</view>
      </view>
      <view class="right">
        <view>+{{ jumpType == 'SETTLE_TSMAIN' ?  item.payableToMerchant : item.orderPrice}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    jumpType: {
      type: String,
      default: '',
    },
		orderType: {
		  type: String,
		  default: '',
		},
  },
  onLoad(options) {
    if (options.orderType) {
      this.orderType = options.orderType;
    }
  },
  data() {
    return {
      orderType: '',
    }
  },
  methods: {
    goDetails(item) {
      const pathName = this.orderType == 2 ? 'groupMealDetails' : 'orderDetails';
      // uni.navigateTo({
      //   url: `/pages/finance/${pathName}?id=${item.orderId}&jumpType=${this.jumpType}`,
      // });
			if( this.orderType==2){
				uni.navigateTo({
				  url: `/pages/finance/groupMealDetails?id=${item.orderId}&settleStatus=${item.settleStatus}`
				});
			}else{
				uni.navigateTo({
				  url: `/pages/finance/orderDetails?id=${item.orderId}&jumpType=${this.jumpType}`
				});
			}
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  border: 1rpx solid #f7f8fc;
  .list_item {
    width: 100%;
    padding: 21rpx;
    overflow: auto;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #EEEEEE;
    font-weight: 400;

    &:last-child {
      border-bottom: none;
    }

    .left {
      flex: 1;
      margin-right: 16rpx;

      .name {
        width: 463rpx;
        font-size: 29rpx;
        color: #333333;
        margin-bottom: 5rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .value {
        font-size: 21rpx;
        color: #999999;
      }
    }

    .right {
      width: auto;
      text-align: right;
      display: flex;
      flex-direction: column;
      font-weight: 500;
      font-size: 31rpx;
      color: #333333;
    }
  }
}
</style>