OrderCard.vue 8.93 KB
<template>
  <view>
    <view
      class="card"
      v-if="current == status"
      @click="toOrderInfo(status,order.pay_id)"
    >
      <view class="cardHeader">
        <text
          class="orderId"
          v-if="status == '0'||status == '1'"
        >订单号:{{order.pay_id}}</text>
        <text
          class="orderId"
          v-if="status == '2'||status == '3'"
        >下单时间:{{order.pay_time}}</text>
        <text
          class="orderType"
          v-if="status=='0'"
        >待付款</text>
        <text
          class="orderType"
          v-if="status=='1'"
        >待收货</text>
        <text
          class="orderType"
          v-if="status == '2'||status == '3'"
        >已完成</text>
        <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
      </view>
      <view
        class="orderCardInfo"
        v-for="(orderInfo, index) in orderInfoList"
        :key="index"
      >
        <image
          :src="orderInfo.imgUrl"
          mode="aspectFill"
        ></image>
        <view class="infoText">
          <view class="orderName">{{orderInfo.p_name}}</view>
          <view class="orderDescrib">{{orderInfo.p_name}}</view>
          <view class="infoText-bottom">
            <view class="markPrice">{{orderInfo.nowPrice}}</view>
            <view class="buy-num">X {{orderInfo.num}}</view>
          </view>
        </view>
      </view>
      <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view>
      <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
      <view
        class="btns"
        v-if="status == '0'"
      >
        <view class="btn-type1">取消订单</view>
        <view class="btn-type2">去支付</view>
      </view>
      <view
        class="btns"
        v-if="status == '1'"
      >
        <view class="btn-type2">确认收货</view>
      </view>
      <view
        class="btns"
        v-if="status == '2'"
      >
        <view
          class="btn-type2"
          @click="toDetail"
        >再次购买</view>
      </view>
      <!--   <view class="btns" v-if="status == '3'">
        <view class="btn-type2">再次购买</view>
      </view> -->
    </view>
    <view
      class="card"
      v-if="current == '10'"
      @click="toOrderInfo(status,order.pay_id)"
    >
      <view class="cardHeader">
        <text
          class="orderId"
          v-if="status == '0'||status == '1'"
        >订单号:{{order.pay_id}}</text>
        <text
          class="orderId"
          v-if="status == '2'||status == '3'"
        >下单时间:{{order.pay_time}}</text>
        <text
          class="orderType"
          v-if="status=='0'"
        >待付款</text>
        <text
          class="orderType"
          v-if="status=='1'"
        >待收货</text>
        <text
          class="orderType"
          v-if="status == '2'||status == '3'"
        >已完成</text>
        <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
      </view>
      <view
        class="orderCardInfo"
        v-for="(orderInfo) in orderInfoList"
        :key="orderInfo"
      >
        <image
          :src="orderInfo.imgUrl"
          mode="aspectFill"
        ></image>
        <view class="infoText">
          <view class="orderName">{{orderInfo.p_name}}</view>
          <view class="orderDescrib">{{orderInfo.p_name}}</view>
          <view class="infoText-bottom">
            <view class="markPrice">{{orderInfo.nowPrice}}</view>
            <view class="buy-num">X {{orderInfo.num}}</view>
          </view>
        </view>
      </view>
      <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view>
      <view
        class="btns"
        v-if="status == '0'"
      >
        <view class="btn-type1">取消订单</view>
        <view class="btn-type2">去支付</view>
      </view>
      <view
        class="btns"
        v-if="status == '1'"
      >
        <view class="btn-type2">确认收货</view>
      </view>
      <view
        class="btns"
        v-if="status == '2'||status == '3'"
      >
        <view
          class="btn-type2"
          @click="toDetail(order.order_info[0].pid)"
        >再次购买</view>
      </view>
      <!-- <view class="btns" v-if="status == '3'">

        <view class="btn-type2">再次购买</view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /**
       * 订单数据
       */
    order: {},
    /**
       * 当前选择
       */
    current: Number,

  },
  created() {
    console.log('order', this.order)
    // console.log(this.order.status );
    // console.log(this.current);
  },
  computed: {
    status() {
      return this.order.status
    },
    orderInfoList() {
      const orderInfoList = this.order.order_info
      return Array.isArray(orderInfoList) ? orderInfoList : orderInfoList.data
    },
  },
  data() {
    return {
    }
  },
  methods: {
    toDetail(pid) {
      console.log('pid', pid)
      uni.navigateTo({
        url: '../details/details?pid=' + pid,
        fail: (res) => { console.log(res) },
      })
    },
    toRefundment() {
      uni.navigateTo({
        url: '../refundment/refundment',
        success: res => {},
        fail: () => {},
        complete: () => {},
      })
    },
    toOrderInfo(status, payId) {
      console.log(status, payId)
      switch (status) {
        // 0待付款  1待收货  2已收货 3 已评价
        case '0':
          uni.navigateTo({
            url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
            fail(errMsg) {
              console.log(errMsg)
            },
          })
          break
        case '1':
          uni.navigateTo({
            url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
            fail(errMsg) {
              console.log(errMsg)
            },
          })

          break
        case '2 || 3':
          uni.navigateTo({
            url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
            fail(errMsg) {
              console.log(errMsg)
            },
          })
          break
        default:
          break
      }
    },
  },
}

</script>

<style lang="scss">
.card {
  width: 670rpx;
  height: 478rpx;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
  border-radius: 8px;
  border-radius: 8px;
  margin-top: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  .cardHeader {
    width: 100%;
    height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .orderId {
      font-size: 12px;
      color: #999999;
    }
    .orderType {
      font-size: 14px;
      color: #ff6b4a;
    }
  }
  .orderCardInfo {
    width: 100%;
    height: 188rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
    image {
      height: 188rpx;
      width: 188rpx;
      margin-right: 24rpx;
    }
    .infoText {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      height: 188rpx;
      width: 368rpx;
    }
    .orderName {
      font-size: 14px;
      color: #333333;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .orderDescrib {
      font-size: 12px;
      color: #999999;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .infoText-bottom {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      .markPrice {
        font-size: 14px;
        color: #ff6b4a;
        margin-right: 20rpx;
      }
      .buy-num {
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .payPrice {
    text-align: right;
    margin: 20rpx 0;
    font-size: 14px;
    color: #333333;
    .priceNum {
      font-size: 14px;
      color: #ff6b4a;
    }
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn-type1 {
      height: 48rpx;
      width: 156rpx;
      border: 1px solid #ff6b4a;
      border-radius: 12px;
      border-radius: 12px;
      text-align: center;
      line-height: 48rpx;
      font-size: 12px;
      color: #ff6b4a;
    }
    .btn-type2 {
      height: 48rpx;
      width: 140rpx;
      background: #ff6b4a;
      border-radius: 12px;
      border-radius: 12px;
      text-align: center;
      line-height: 48rpx;
      font-size: 12px;
      color: #ffffff;
      margin-left: 20rpx;
    }
  }
}
</style>