applet/components/ld-goods/ld-goods.vue

<template>
  <view class="goodsItem u-border-one-one u-flex-center">
    <image
      :src="`${value.productCover}?x-oss-process=style/w_150`"
      v-if="value.productCover"
      class="u-goods200 u-ml15 z-image"
      mode=""
    ></image>
    <view class="rightText u-ml30">
      <view class="u-text2 u-1A1A1A u-font28 textWidth">{{
        value.productTitle
      }}</view>
      <view class="sku-name-box">
        <view class="u-font24 u-999 sku-name u-text2" v-if="value.skuSetName"
          >规格： {{ value.skuSetName }}</view
        >
        <view class="u-font24 u-999 u-ml15 sku-num" v-if="value.productNum"
          >x {{ value.productNum }}</view
        >
      </view>
      <view class="u-flex-center botPrice">
        <template v-if="props.exchange">
          <view class="u-FF0000 u-font32" style="margin-left: 10rpx">
            {{ value.singlePoint || value.skuPrice || 0 }}
            积分
          </view>
          <text class="discount u-333" v-if="value.singlePoint"
            >￥{{ value.realPrice }}</text
          >
        </template>
        <view class="u-FF0000 u-font32 u-flex-center" v-else>
          <rich-text
            :nodes="
              $mUtil.priceBigSmall(value.paymentAmount || value.realPrice || value.skuPrice || 0 )
            "
          ></rich-text>
          <text class="discount u-333" v-if="value.paymentAmount"
            >￥{{ value.totalOriginalRealPrice }}</text
          >
        </view>
      </view>
      <view v-if="props.item && props.item.orderNo" class="tagsView">
        <template v-if="value.rightsStatus == 0">
          <uv-tags
            type="primary"
            v-if="value.transactionStatus == 0 && value.rightsMethod == 0"
            text="待支付"
          ></uv-tags>
          <uv-tags
            type="warning"
            v-if="value.transactionStatus == 10"
            :text="shippingStatusHandle(props.item, value)"
          ></uv-tags>
          <uv-tags
            type="info"
            v-if="value.transactionStatus == 20"
            :text="rightsStatusHandle(props.item, value)"
          ></uv-tags>
          <uv-tags
            type="success"
            v-if="value.transactionStatus == 30"
            text="交易完成"
          ></uv-tags>
          <uv-tags
            type="info"
            v-if="value.transactionStatus == 100 && value.rightsMethod == 0"
            text="订单取消"
          ></uv-tags>
        </template>
        <uv-tags
          type="info"
          v-if="value.rightsMethod > 0"
          :text="receivingStatusHandle(value)"
        ></uv-tags>
      </view>
    </view>
    <view
      class="btnComment_status"
      v-if="value.transactionStatus == 30 && value.commentStatus == 0 && props.keys != null"
      @click="evaluation(value.orderDetailId)"
      >去评价</view
    >
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
const emit = defineEmits(["parentevaluation"]);
const props = defineProps({
  value: {
    type: Object,
    default: {},
  },
  position: {
    type: Number,
    default: 0,
  },
  exchange: {
    type: Boolean,
    default: false,
  },
  // 订单信息
  item: {
    type: Object,
    default: {},
  },
  keys: {
    type: Number,
    default: null,
  }
});
const value = ref(props.value);
watch(
  () => props.value,
  (newValue) => {
    value.value = newValue;
  }
);

const shippingStatusHandle = (mainOrder, child) => {
  let text = "发";
  if (mainOrder.shippingMethod == 10) {
    text = "备";
  }
  if (child.shippingStatus == 0) {
    return "待" + text + "货";
  } else if (child.shippingStatus == 10) {
    return "部分" + text + "货";
  } else {
    return "已" + text + "货";
  }
};

const receivingStatusHandle = (mainOrder) => {
  if (mainOrder.rightsMethod == 0) {
    return "";
  } else if (mainOrder.rightsMethod == 5) {
    return mainOrder.rightsStatus == 5 ? "退款中" : "退款完成";
  } else {
    return mainOrder.rightsStatus == 5 ? "退货中" : "退货完成";
  }
};

const rightsStatusHandle = (mainOrder, child) => {
  let text = "收货";
  if (mainOrder.shippingMethod == 10) {
    text = "自提";
  }
  if (child.rightsStatus == 0) {
    return "待" + text;
  } else if (child.rightsStatus == 10) {
    return "部分" + text;
  } else {
    return "已" + text;
  }
};

const evaluation = (id) => {
  let data = {
    id: id,
    keys: props.keys,
  };
  emit("parentevaluation", data);
};
</script>

<style scoped lang="scss">
.bottext {
  /* margin-top: 44rpx; */
}
.rightText {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200rpx;
  flex: 1;
  .tagsView {
    display: inherit;
  }
}
.goodsItem {
  /* align-items: flex-start; */
  padding: 40rpx 0;
  padding-right: 20rpx;
  position: relative;
  border-bottom: 1rpx solid #f7f7f7;
  .u-goods200 {
    flex-shrink: 0;
  }
}

.goodsItem .z-image {
  flex-shrink: 0;
}

.thirdTag {
  display: inline-block;
  background: #30b885;
  border-radius: 10rpx;
  line-height: 40rpx;
  text-align: center;
  margin-right: 10rpx;
  padding: 0 10rpx;
  color: #fff;
  font-size: 26rpx;
}

.textWidth {
  /* width: 420rpx; */
  /* height: 80rpx;
  line-height: 40rpx; */
}

.btnComment_status {
  position: absolute;
  right: 0;
  bottom: 30rpx;
  background-color: #fa6138;
  width: 180rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
}

.back_status {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  text-align: center;
  line-height: 60rpx;
}

.sku-name-box {
  display: flex;
}

.sku-name {
  margin-right: 20rpx;
  /* height: 80rpx; */
  line-height: 1.5;
}

.sku-num {
  margin-left: auto;
  flex-shrink: 0;
}

.discount-box {
  margin-top: 10rpx;
}
.discount {
  margin-left: 20rpx;
  font-size: 24rpx;
  text-decoration: line-through;
}
</style>