purchase-let/pagesOrder/order/component/good.vue

<template>
  <view class="shop-item">
    <view class="item-title" @click="navTo">
      <view>{{datas.number}}</view>
      <view v-if="datas.paid==0">
        <text>待付款</text>
      </view>
      <view v-else>
        <text v-if="datas.status==0">待收货</text>
        <text v-if="datas.status==1">待收货</text>
        <text v-if="datas.status==2||datas.status==3">已完成</text>
      </view>
    </view>
    <view class="item-body" @click="navTo">
      <view class="body-content">
        <view style="display: flex;flex: 1;flex-shrink: 0;">
          <view v-for="(item,index) in datas.goods_list" :key="index">
            <image class="image" :src="item.imgs"></image>
          </view>
        </view>
        <view
          style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100rpx;">
          <up-icon name="arrow-right-double" color="#20B128"></up-icon>
        </view>
      </view>
      <view class="all">共 {{datas.goods_count}} 件商品, 总金额 <text>¥{{datas.total}}</text> </view>
    </view>
    <view v-if="datas.paid==0" class="item-btn">
      <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle" @click="cancleOrder">取消订单</up-button></view>
      <view style="width: 80px;"><up-button size="small" color="#20B128" shape="circle" @click="rePay">立即支付</up-button></view>
    </view>
    <view v-else class="item-btn">
      <!-- <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">申请售后</up-button></view> -->
      <view @click="takeOrder" v-if="datas.status==1" style="width: 80px;"><up-button size="small" color="#20B128"
          shape="circle">确认收货</up-button></view>
      <view @click="purchaseAgain" v-if="datas.status==2||datas.status==3" style="width: 80px;"><up-button size="small" plain color="#20B128"
          shape="circle">再次购买</up-button></view>
      <view @click="navTo" style="width: 80px;"><up-button size="small" plain color="#20B128"
          shape="circle">查看详情</up-button></view>
    </view>
    <!-- <view v-if="type==3" class="item-close">
      <view class="title">
        <view class="type">退款申请中</view>
        <view>等待商家处理</view>
      </view>
      <up-icon name="arrow-right"></up-icon>
    </view> -->
  </view>
</template>

<script setup>
  // 订单状态（0：待发货；1：待收货；2：已完成；3：已完成)
  const props = defineProps({
    type: {
      type: Number,
      default: 0
    },
    datas: {
      type: Object,
      default: () => {}
    }
  })

  const navTo = () => {
    uni.navigateTo({
      url: `/pagesOrder/detail/detail?type=${props.datas.paid}&id=${props.datas.id}`
    })
  }
  
  const emit = defineEmits(['cancleOrder', 'rePay', 'takeOrder', 'purchaseAgain']);
  const cancleOrder = ()=>{
    emit('cancleOrder', props.datas)
  }
  
  const takeOrder = ()=>{
    emit('takeOrder', props.datas)
  }
  
  const purchaseAgain = ()=>{
    emit('purchaseAgain', props.datas)
  }
  
  const rePay = ()=>{
    emit('rePay', props.datas)
  }
</script>

<style lang="scss">
  .shop-item {
    width: 710rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 14rpx;
    padding: 20rpx;
    box-sizing: border-box;

    .item-title {
      display: flex;
      justify-content: space-between;
    }

    .item-body {
      margin: 20rpx 0;

      .body-content {
        display: flex;
        justify-content: space-between;
        color: #989898;

        .image {
          width: 160rpx;
          height: 160rpx;
          margin-right: 20rpx;
          border-radius: 14rpx;
        }

        .title {
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;
          color: #444;
        }

        .tips {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          margin-top: 10rpx;
        }

      }

      .all {
        text-align: right;
        font-size: 26rpx;

        text {
          color: #F55726;
        }
      }
    }

    .item-btn {
      display: flex;
      justify-content: flex-end;

      view {
        width: 80rpx;
        margin-left: 20rpx;
      }
    }

    .item-close {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #F6F6F6;
      padding: 15rpx;
      border-radius: 14rpx;

      .title {
        display: flex;

        .type {
          font-weight: 600;
          margin-right: 20rpx;
        }
      }
    }
  }
</style>