VAVABUY/pages/user/components/blind_list.vue

<template>
  <view class="blind_box">
    <view class="blind_box_top">
      <image
        src="@/static/user/lost_gift.png"
        mode="widthFix"
        class="img"
        v-if="item.status == 3"
      ></image>
      <image
        src="@/static/user/gift.png"
        mode="widthFix"
        class="img"
        v-if="item.status == 1"
      ></image>
      <view
        class="see"
        :class="{ disable: item.status == 3 }"
        @click="seeBlind"
      >
        <trans _t="查看" />
      </view>
    </view>
    <view class="blind_box_bottom">
      <trans _t="请注意盲盒有效期"></trans>
      <view class="expiration">
        <trans _t="有效期限：" />
        <view class="time"
          >{{ getRemainingDays(item.update) }}
          <trans _t="天" />
        </view>
      </view>
    </view>
    <view class="lost" v-if="item.status == 3">
      <image src="/static/user/expired.png" mode="widthFix" class="img"></image>
    </view>
    <view class="lost" v-if="item.status == 2">
      <image
        src="/static/user/converted.png"
        mode="widthFix"
        class="img"
      ></image>
    </view>
    <codeModel ref="codeModelRef" :deatil="item" />
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { t } from "@/locale";
import { useGlobal, getRemainingDays } from "@/utils";
import codeModel from "./codeModel";

const codeModelRef = ref(null);
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const seeBlind = () => {
  codeModelRef.value && codeModelRef.value.open();
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.blind_box {
  position: relative;
  width: 100%;
  padding: 0 20rpx 20rpx;
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 8rpx 20rpx 0rpx #d8d8d8;

  .lost {
    position: absolute;
    top: -10rpx;
    left: 50%;
    width: 190rpx;
    height: 186rpx;
    transform: translateX(-95rpx);
    .img {
      width: 100%;
    }
  }
  &_top {
    .flex_position(space-between);
    .img {
      width: 140rpx;
      height: 140rpx;
    }

    .see {
      height: 66rpx;
      line-height: 66rpx;
      text-align: center;
      .size(28rpx);
      color: var(--light);
      border-radius: 10rpx;
      padding: 0 50rpx;
      background: var(--black);
    }
    .disable {
      background: var(--bor-color1);
    }
  }

  &_bottom {
    .flex_position(space-between);
    margin-top: 8rpx;
    color: var(--text-02);
    .size(28rpx);
    .expiration {
      display: flex;
      .time {
        font-weight: 700;
        color: var(--black);
      }
    }
  }
}
</style>