wx-qhb/pageD/components/goodsInformation.vue

<template>
  <view class="detail" @click="$emit('toDetail', itemInfo)" :style="isPadding">
    <view class="content">
      <image :src="itemInfo.image" mode="" class="content-img"></image>
      <view
        class="mask"
        v-if="
          productAndCommodity == 'product' &&
          (itemInfo.review_status != 1 || itemInfo.status != 'normal')
        "
      >
        <view class="text-1" v-if="itemInfo.review_status == 0">
          {{ i18n.inReview }}
        </view>
        <view class="text-1" v-else-if="itemInfo.review_status == 2">
          {{ i18n.auditFailed }}
        </view>
        <view class="text-1" v-else-if="itemInfo.status == 'down'">
          {{ i18n.removed }}
        </view>
      </view>
      <view class="content-right">
        <view class="goods-title">
          <view
            class="_label"
            v-if="!productAndCommodity && itemInfo.source == 2"
          >
            {{ i18n.supplier }}
          </view>
          <view
            class="_label"
            style="background-color: #f83224"
            v-if="!productAndCommodity && itemInfo.source == 1"
          >
            {{ i18n.selfSupport }}
          </view>
          <view
            class="_label"
            v-if="!productAndCommodity && itemInfo.source == 0"
          >
            {{ i18n.team }}
          </view>
          <view class="title" v-if="productAndCommodity == 'product'">
            <text v-if="language == 'zh-CN'"> {{ itemInfo.name_cn }}</text>
            <text v-if="language == 'en-US'"> {{ itemInfo.name_en }}</text>
            <text v-if="language == 'es-ES'"> {{ itemInfo.name_es }}</text>
            <text v-if="language == 'it-IT'"> {{ itemInfo.name_ita }}</text>
          </view>
          <view class="title" v-else>
            <text v-if="language == 'zh-CN'"> {{ itemInfo.name_cn }}</text>
            <text v-if="language == 'en-US'"> {{ itemInfo.name_en }}</text>
            <text v-if="language == 'es-ES'"> {{ itemInfo.name_es }}</text>
            <text v-if="language == 'it-IT'">
              {{ itemInfo.name_ita }}</text
            ></view
          >
        </view>
        <view class="inventory" v-if="productAndCommodity">
          <text>{{ i18n.inventory }}：</text>
          <text>{{ itemInfo.stock }}</text>
        </view>
        <view class="inventory" v-else>
          <text>{{ itemInfo.labels.join(" | ") }} </text>
        </view>

        <view class="commodity-price" v-if="productAndCommodity == 'product'">
          <text style="font-size: 20rpx">￥</text>
          <text>{{ itemInfo.discount_price.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            itemInfo.discount_price.split(".")[1]
          }}</text>
          <text
            style="
              font-size: 24rpx;
              color: #ccc;
              text-decoration-line: line-through;
            "
            >￥{{ itemInfo.price }}</text
          >
        </view>
        <view v-else class="commodity-price">
          <text style="font-size: 20rpx">￥</text>
          <text>{{ itemInfo.price.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            itemInfo.price.split(".")[1]
          }}</text>
        </view>
      </view>
    </view>
    <view class="btn-list" v-if="!batch && productAndCommodity == 'product'">
      <button
        class="btn-1"
        @click.stop="$emit('goodsUpDown', 'down', itemInfo)"
        v-if="itemInfo.review_status == 1 && itemInfo.status == 'normal'"
      >
        {{ i18n.removeProducts }}
      </button>
      <button class="btn-1" v-if="itemInfo.review_status == 0">
        {{ i18n.details }}
      </button>
      <!-- <button class="btn-2" v-if="itemInfo.review_status == 2">重新提交</button> -->
      <!-- <button class="btn-1" v-if="itemInfo.status == 'down'">编辑</button> -->
      <button
        class="btn-1"
        @click.stop="$emit('goodsUpDown', 'normal', itemInfo)"
        v-if="
          itemInfo.review_status != '0' &&
          itemInfo.review_status != '2' &&
          itemInfo.status == 'down'
        "
      >
        {{ i18n.listingProducts }}
      </button>
    </view>
    <view class="btn-list" v-if="!batch && productAndCommodity == 'commodity'">
      <button
        class="btn-1"
        v-if="status == 1"
        @click.stop="$emit('openDiscountsPopup', obj)"
      >
        {{ i18n.wantDiscount }}
      </button>
      <button class="btn-1" v-if="status == 1">{{ i18n.offShelf }}</button>
      <button class="btn-1" v-if="status == 4">{{ i18n.delete }}</button>
      <button class="btn-1" v-if="status == 4">{{ i18n.business }}</button>
      <button class="btn-2" v-if="status == 3">{{ i18n.edit }}</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    status: {
      typeof: String,
      default: "",
    },
    itemInfo: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    productAndCommodity: {
      typeof: String,
      default: "",
    },
    batch: {
      typeof: Boolean,
      default: false,
    },
    //语言
    language: {
      typeof: String,
      default: "",
    },
  },
  watch: {},
  data() {
    return {
      obj: {
        url: "https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/136953/20/42322/162799/665e6a6cF32604c1e/b9586c7ae52dc284.jpg.avif",
        title: "La Chapelle Sport拉夏贝尔高…",
        price: "75.00",
      },
      lebelList: [],
    };
  },
  computed: {
    isPadding() {
      if (this.productAndCommodity == "product") {
        return "padding: 28rpx 20rpx 20rpx;";
      }
    },
    i18n() {
      return this.$t("index");
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 10rpx 0;
  width: 96%;

  .content {
    display: flex;
    position: relative;
    flex-shrink: 0;
    justify-content: flex-start;
    width: 100%;

    .content-img {
      width: 164rpx;
      height: 164rpx;
      border-radius: 12rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .mask {
      width: 164rpx;
      height: 164rpx;
      border-radius: 12rpx;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.3);
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;

      .text-1 {
        width: 108rpx;
        height: 44rpx;
        text-align: center;
        line-height: 44rpx;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 22rpx;
        font-size: 20rpx;
      }
    }

    .content-right {
      width: 80%;
      .goods-title {
        color: #333;
        margin-bottom: 20rpx;
        width: 88%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-word;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .title {
          width: 75%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-word;
        }

        ._label {
          color: #fff;
          background-color: #ffb111;
          width: 72rpx;
          height: 32rpx;
          text-align: center;
          line-height: 32rpx;
          height: 32rpx;
          border-radius: 4rpx;
          font-size: 20rpx;
          margin-right: 10rpx;
        }
      }

      .inventory {
        color: rgba(54, 54, 54, 0.5);
        font-size: 24rpx;
        margin-bottom: 30rpx;
      }

      .commodity-price {
        color: #f83224;
        font-size: 32rpx;
        font-weight: 600;
      }
    }
  }

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

    .btn-1 {
      width: 152rpx;
      height: 60rpx;
      margin: 0;
      padding: 0;
      font-size: 26rpx;
      color: #333;
      border: 2rpx solid rgba(151, 151, 151, 0.3);
      border-radius: 30rpx;
      background-color: #fff;
      line-height: 60rpx;
      margin-left: 20rpx;
    }

    .btn-2 {
      width: 152rpx;
      height: 60rpx;
      margin: 0;
      padding: 0;
      font-size: 26rpx;
      color: #f83224;
      border: 2rpx solid #f83224;
      border-radius: 30rpx;
      background-color: #fff;
      line-height: 60rpx;
    }
  }
}
</style>