init
This commit is contained in:
yixu
186
src/components/PrizeList.vue
Normal file
186
src/components/PrizeList.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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 } 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 scoped>
|
||||
.prizelist {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 140.740741vw;
|
||||
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: 90vw;
|
||||
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.092593vw;
|
||||
height: 19.814815vw;
|
||||
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: #09431d;
|
||||
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.055556vw;
|
||||
right: 5vw;
|
||||
top: 0;
|
||||
background-image: url("../assets/images/icon-close.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-gotomember.webp");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
wx-open-launch-weapp,
|
||||
.btn-goto.noaddress wx-open-launch-weapp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-goto wx-open-launch-weapp {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-goto.noaddress {
|
||||
background-image: url("../assets/images/btn-address.webp");
|
||||
}
|
||||
|
||||
.prizelist-cover.USER_TJGJ {
|
||||
background-image: url("../assets/images/USER_TJGJ.webp");
|
||||
}
|
||||
|
||||
.prizelist-cover.USER_XINCHUN_WEIZUN {
|
||||
background-image: url("../assets/images/USER_XINCHUN_WEIZUN.webp");
|
||||
}
|
||||
|
||||
.prizelist-cover.USER_TEQU_JL_52_60Y_100ML_2 {
|
||||
background-image: url("../assets/images/USER_TEQU_JL_52_60Y_100ML_2.webp");
|
||||
}
|
||||
|
||||
.prizelist-cover.USER_LZLJ_TEQU_LZH_52_100ML_2 {
|
||||
background-image: url("../assets/images/USER_LZLJ_TEQU_LZH_52_100ML_2.webp");
|
||||
}
|
||||
|
||||
.prizelist-cover.USER_HEIGAI_42_GPJ_500ML {
|
||||
background-image: url("../assets/images/USER_HEIGAI_42_GPJ_500ML.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>
|
||||
Reference in New Issue
Block a user