faceFamilySource/src/components/PrizeList.vue

<template>
  <div>
    <ModalTransition :show="show">
      <div class="prizelist">
        <div class="prizelist-wrapper" v-show="prizelist.length > 0">
          <div class="prizelist-wrapper-scroll">
            <div class="prizelist-item" v-for="item in prizelist" :key="item.id">
              <div class="prizelist-cover" :class="'USER_' + item.prize_code"></div>
              <div class="prizelist-title">{{ item.prize_name }}</div>
              <div class="prizelist-btngroup">
                <template v-if="item.coupon_type === 'scene'">
                  <div class="btn-goto" :class="{ noaddress: item.pushed !== 1 }" v-html="sceneBtnHtml"
                    @click="handleItemBtn(item.id, $event)">
                  </div>
                </template>
                <template v-else="item.coupon_type === 'coupon'">
                  <div class="btn-goto" v-html="couponBtnHtml"></div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="prizelist-close" @click="$emit('close')"></div>
      </div>
    </ModalTransition>
  </div>
</template>

<script setup>
import { ref, watch } from "vue"
import { isWeixinPlatform, miniJumpToScene, getMiniPageBtnHack } from "../libs/utils"
import ModalTransition from "./ModalTransition.vue";
const props = defineProps({
  show: false,
  prizelist: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['address', 'close'])
const sceneBtnHtml = ref('')
const couponBtnHtml = ref('')
sceneBtnHtml.value = getMiniPageBtnHack("/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fretail%2Forder%2Forder-list%3Ftab%3DAll%26topTab%3D1")
couponBtnHtml.value = getMiniPageBtnHack("/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fcoupon%2Fcoupons-list")

const handleItemBtn = (id, event) => {
  const target = event.currentTarget

  if (target.classList.contains("noaddress")) {
    emit("address", id)
  } else {
    if (isWeixinPlatform()) {
      miniJumpToScene()
    } else {
      weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
    }
  }
}
</script>

<style>
.prizelist {
  position: relative;
  width: 100vw;
  height: 131.759259vw;
  background-image: url("../assets/images/prizelist-bg.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  align-items: flex-end;
}

.prizelist-wrapper {
  width: 100%;
  height: 84vw;
  overflow: auto;

}

.prizelist-wrapper-scroll {
  display: flex;
  flex-direction: column;
}

.prizelist-item {
  display: flex;
  margin-bottom: 4vw;
  margin-left: 2.5vw;
  padding-left: 3vw;
  width: 95.833333vw;
  height: 20.648148vw;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-image: url("../assets/images/prizelist-item-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.prizelist-cover {
  width: 15vw;
  margin-right: 3vw;
  height: 15vw;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.prizelist-title {
  font-size: 4.444444vw;
  flex: 1;
  display: flex;
  font-weight: 700;
  color: #48260a;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.prizelist-close {
  position: absolute;
  width: 8.148148vw;
  height: 8.148148vw;
  right: 5vw;
  top: 15vw;
  background-image: url("../assets/images/close-btn.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-goto {
  margin-right: 4vw;
  width: 23.981481vw;
  height: 9.074074vw;
  background-size: 100% 100%;
  background-image: url("../assets/images/btn-goto.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
wx-open-launch-weapp{
  width: 100%;
  height: 100%;
}
.btn-goto wx-open-launch-weapp {
  display: block;
}
wx-open-launch-weapp,
.btn-goto.noaddress wx-open-launch-weapp {
  display: none;
}



.btn-goto.noaddress {
  background-image: url("../assets/images/btn-address.webp");
}

.prizelist-cover.USER_LZ_ZQ_DZJ {
  background-image: url("../assets/images/generate/USER_LZ_ZQ_DZJ.webp");
}

.prizelist-cover.USER_HG_42_GPJ_500ML {
  background-image: url("../assets/images/USER_HG_42_GPJ_500ML.webp");
}

.prizelist-cover.USER_QLL_MH {
  background-image: url("../assets/images/USER_QLL_MH.webp");
}

.prizelist-cover.USER_DZSKSJ {
  background-image: url("../assets/images/generate/USER_DZSKSJ.webp");
}

.prizelist-cover.USER_LZ_ZQ_DZJ_LJW {
  background-image: url("../assets/images/USER_LZ_ZQ_DZJ_LJW.webp");
}

.prizelist-cover.USER_LZ_XS_SPZ_30ML {
  background-image: url("../assets/images/generate/USER_LZ_XS_SPZ_30ML.webp");
}

.prizelist-cover.USER_LZ_DZ_JBGJ {
  background-image: url("../assets/images/USER_LZ_DZ_JBGJ.webp");
}

.prizelist-cover.USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ {
  background-image: url("../assets/images/generate/USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ.webp");
}

.prizelist-cover.USER_DZCZ {
  background-image: url("../assets/images/USER_DZCZ.webp");
}

.prizelist-cover.USER_DZSCZ {
  background-image: url("../assets/images/USER_DZSCZ.webp");
}

.prizelist-cover.USER_66_POINTS {
  background-image: url("../assets/images/USER_66_POINTS.webp");
}
</style>