wx-qhb/pageD/orderFormManage/component/detailCard.vue

<template>
  <view class="card" @click="$emit('toInformation', itemInfo)">
    <view class="user-name">
      <view class="name">
        <image class="header-img" :src="itemInfo.member.avatar" mode=""></image>
        <text>{{ itemInfo.nickname }}</text>
      </view>
      <text class="order-status">{{ deliveryStatus }}</text>
    </view>
    <view
      class="order-detail"
      :style="model"
      v-for="item in itemInfo.order_goods"
    >
      <view class="detail">
        <image class="order-img" :src="item.goods_image" mode=""></image>
        <view class="detail-right">
          <view class="title-price">
            <view class="title"> {{ item.goods_name }}</view>
            <view class="price">
              <text style="font-size: 20rpx">￥</text>
              <text>{{ item.price.split(".")[0] }}</text
              >.
              <text style="font-size: 20rpx">{{
                item.price.split(".")[1]
              }}</text>
            </view>
          </view>
          <view class="specifications">
            <view class="title"> {{ item.sku_item.item }} </view>
            <text>x{{ item.goods_num }}</text>
          </view>
        </view>
      </view>
      <view class="price-detail">
        <view style="color: #222; font-size: 24rpx">
          <text>共{{ itemInfo.order_goods.length }}</text>
          <text>
            {{ "件商品" + "&nbsp;" }}
          </text>
        </view>
        <text style="font-size: 28rpx">买家实付</text>
        <view class="price">
          <text style="font-size: 20rpx">￥</text>
          <text>{{ itemInfo.amount.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            itemInfo.amount.split(".")[1]
          }}</text>
        </view>
      </view>
      <view class="model" v-if="itemInfo.delivery_status == 'unreview'"> </view>
    </view>
    <view class="remarks" v-if="itemInfo.delivery_status == 'undelivered'">
      <view style="margin-right: 30rpx; color: #222"> 商家备注 </view>
      <view style="color: rgba(34, 34, 34, 0.6)"> {{ itemInfo.remark }} </view>
    </view>
    <view
      class="btn-list"
      v-if="
        itemInfo.delivery_status !== 'unreview' &&
        itemInfo.status != 'merdelivered'
      "
    >
      <button class="btn-1" v-if="itemInfo.delivery_status == 'unfill'">
        缴纳保证金
      </button>
      <button class="btn-2" v-if="itemInfo.delivery_status == 'undelivered'">
        备注
      </button>
      <button
        class="btn-1"
        v-if="itemInfo.delivery_status == 'undelivered'"
        @click.stop="toGoods"
      >
        发货
      </button>
      <button class="btn-2" v-if="itemInfo.delivery_status == ' delivered'">
        查看物流
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemInfo: {
      typeof: Object,
      default: {},
    },
  },
  computed: {
    model() {
      if (this.itemInfo.delivery_status == "unreview") {
        return "filter: blur(5px);";
      }
    },
    //根据状态 返回不同的字段
    deliveryStatus() {
      if (this.itemInfo.delivery_status == "unreview") {
        return "待审核";
      } else if (this.itemInfo.delivery_status == "unfill") {
        return "待缴纳保证金";
      } else if (this.itemInfo.delivery_status == "undelivered") {
        return "待团长发货";
      } else if (this.itemInfo.delivery_status == "merdelivered") {
        return "待总部发货";
      } else if (this.itemInfo.delivery_status == "delivered") {
        return "已发货";
      } else if (this.itemInfo.delivery_status == "domestic_delivered") {
        return "团长已发货";
      }
    },
  },
  data() {
    return {};
  },
  methods: {
    toGoods() {
      uni.navigateTo({
        url: `/pageD/deliverGoods/deliverGoods?id=${this.itemInfo.id}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 20rpx;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;

  .user-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84rpx;
    border-bottom: 2rpx solid rgba(151, 151, 151, 0.2);

    .name {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #333;

      .header-img {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }
    }

    .order-status {
      font-size: 24rpx;
      color: #f83224;
    }
  }

  .order-detail {
    margin-top: 22rpx;
    position: relative;

    .detail {
      display: flex;

      .order-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .detail-right {
        width: 70%;

        .title-price {
          display: flex;
          font-size: 28rpx;
          justify-content: space-between;
          align-items: center;

          .title {
            width: 330rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .specifications {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          color: #777;
          margin-top: 10rpx;

          .title {
            width: 330rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .price-detail {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 20rpx;

    .price {
      font-weight: 600;
    }
  }

  .remarks {
    display: flex;
    font-size: 28rpx;
    background-color: #f4f4f4;
    border-radius: 10rpx;
    padding: 14rpx 20rpx;
    margin-top: 20rpx;
  }

  .btn-list {
    display: flex;
    justify-content: flex-end;
    margin-top: 30rpx;

    .btn-1 {
      font-size: 28rpx;
      color: #f83224;
      border: 2rpx solid #f83224;
      background-color: #fff;
      margin: 0;
      border-radius: 34rpx;
      min-width: 162rpx;
      margin-left: 20rpx;
    }

    .btn-2 {
      font-size: 28rpx;
      color: #222;
      border: 2rpx solid #979797;
      background-color: #fff;
      margin: 0;
      border-radius: 34rpx;
      min-width: 162rpx;
    }
  }
}
</style>