wxapp_shuibei/components/OrderListCard/index.vue

<template>
  <view class="item">
    <view @click="goOrderDetails(order.orderId)">
      <view class="title acea-row row-between-wrapper">
        <view
          class="acea-row row-middle"
          @click.stop="toMerchant(order.sbMerchant?.id)"
        >
          <image
            class="merchantImg"
            v-if="order.sbMerchant?.merchantLogo"
            :src="order.sbMerchant.merchantLogo"
          ></image>
          <image class="merchantImg" v-else src="@/static/avator.png"></image>
          <view style="margin-left: 10rpx">{{
            order.sbMerchant?.merchantName || "自营"
          }}</view>
          <uni-icons
            v-if="order.sbMerchant?.id"
            style="margin-left: 10rpx"
            type="right"
            size="16"
            color="#999999"
          ></uni-icons>
          <!--          <view>{{ order.createTime }}</view>-->
        </view>
        <view class="font-color">
          <text
            class="sign cart-color acea-row row-center-wrapper"
            v-if="
              order.activityType !== '普通' && order.activityType !== '核销'
            "
            >{{ order.activityType }}</text
          >
          {{ order.status == 6 ? "已取消" : order.orderStatus }}
        </view>
      </view>
      <view
        class="item-info acea-row row-between row-top"
        v-for="(items, idx) in order.orderInfoList"
        :key="idx"
      >
        <view class="pictrue">
          <image :src="items.image"></image>
        </view>
        <view class="text">
          <view class="name line2">{{ items.storeName }}</view>
          <view class="money">
            <view v-if="mallType === 0">￥{{ items.storePrice || 0 }}</view>
            <view>x{{ items.cartNum }}</view>
          </view>
        </view>
      </view>
      <view class="totalPrice"
        >共{{ order.totalNum }}件商品，总金额
        <text class="money font-color" v-if="mallType === 0"
          >￥{{ order.payPrice }}</text
        >
        <text class="money font-color" v-else>{{ order.useIntegral }}贝币</text>
      </view>
    </view>
    <view class="bottom acea-row row-right row-middle" v-if="mallType === '0'">
      <view class="bnt cancelBnt" v-if="!order.paid" @click.stop="cancelOrder"
        >取消订单</view
      >
      <view
        class="bnt cancelBnt refresh-bnt"
        v-if="!order.paid"
        @click.stop="refreshStatus"
        >更新状态</view
      >
      <view class="bnt bg-color" v-if="!order.paid" @click.stop="goPay"
        >立即付款</view
      >
      <view
        class="bnt bg-color"
        v-else-if="order.status == 0 || order.status == 1 || order.status == 3"
        @click.stop="goOrderDetails(order.orderId)"
        >查看详情</view
      >
      <view
        class="bnt bg-color"
        v-else-if="order.status == 2"
        @click.stop="goOrderDetails(order.orderId)"
        >去评价</view
      >
      <view
        class="bnt cancelBnt"
        v-if="order.status == 3"
        @click.stop="delOrder"
        >删除订单</view
      >
    </view>
  </view>
</template>

<script setup>
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

const props = defineProps({
  order: Object,
  index: Number,
  mallType: {
    type: Number,
    default: 0,
  }, // 0: 水贝商城 1: 贝币商城
});
const emit = defineEmits([
  "cancelOrder",
  "goPay",
  "goOrderDetails",
  "delOrder",
  "refreshStatus",
]);

function cancelOrder() {
  emit("cancelOrder", props.index, props.order.id);
}
function goPay() {
  emit("goPay", props.order.payPrice, props.order.orderId);
}
function goOrderDetails(orderId) {
  emit("goOrderDetails", orderId);
}
function delOrder() {
  emit("delOrder", props.order.id, props.index);
}
function refreshStatus() {
  emit("refreshStatus", props.order.orderId, props.index);
}
const toMerchant = (merchantId) => {
  if (merchantId) {
    uni.navigateTo({
      url: "/pages/merchantCenters/merchant?merchantId=" + merchantId,
    });
  } else {
    return;
  }
};
</script>

<style scoped lang="scss">
.item {
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 14rpx;

  .title {
    height: 84rpx;
    padding: 0 24rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 28rpx;
    color: #282828;

    .sign {
      font-size: 24rpx;
      padding: 0 13rpx;
      height: 36rpx;
      margin-right: 15rpx;
      border-radius: 18rpx;
    }
  }

  .item-info {
    padding: 0 24rpx;
    margin-top: 22rpx;

    .pictrue {
      width: 120rpx;
      height: 120rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 14rpx;
      }
    }

    .text {
      flex: 1;
      // width: 500rpx;
      font-size: 28rpx;
      color: #999;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      padding: 0 0 0 20rpx;

      .name {
        width: 350rpx;
        color: #282828;
      }

      .money {
        text-align: right;
        white-space: nowrap;
        text {
          white-space: nowrap;
        }
      }
    }
  }

  .totalPrice {
    font-size: 26rpx;
    color: #282828;
    text-align: right;
    margin: 27rpx 0 0 30rpx;
    padding: 0 30rpx 30rpx 0;
    border-bottom: 1rpx solid #eee;

    .money {
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .bottom {
    height: 107rpx;
    padding: 0 30rpx;

    .bnt {
      width: 176rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      border-radius: 50rpx;
      font-size: 27rpx;

      &.cancelBnt {
        border: 1rpx solid #ddd;
        color: #aaa;
      }

      & ~ .bnt {
        margin-left: 17rpx;
      }
    }
  }
}
.merchantImg {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
</style>