377 lines
11 KiB
Vue
377 lines
11 KiB
Vue
<template>
|
||
<view class="list-bonus-com">
|
||
<image src="@/static/rank/close.png" mode="" class="close-icon" @click="close"></image>
|
||
<view class="title">
|
||
<image src="@/static/rank/title.png" mode="aspectFit" class="title-icon"></image>
|
||
<!-- <view class="title-top">榜单奖励</view> -->
|
||
<!-- <view class="title-last">榜单奖励</view> -->
|
||
</view>
|
||
<scroll-view scroll-y="true" class="scroll-view-content">
|
||
<view class="content" :class="{'content-two':Number(key) <= 3}" v-for="(item,key) in detail" :key="key">
|
||
|
||
<!-- <view class="content-title" v-if="key > 3">第{{Number(key) + 1}}-{{key}}名</view> -->
|
||
<view class="content-title">第{{key}}名</view>
|
||
<scroll-view scroll-x="true" class="award">
|
||
<template v-for="(childItem,childIndex) in item">
|
||
<view class="award-item" v-if="childItem.type !== 'PRODUCT' && childItem.type !== 'COUPON'">
|
||
<image :src="`/static/rank/${childItem.type}.png`" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
{{typeObj[childItem.type]}}X{{childItem.num}}
|
||
<!-- <image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image> -->
|
||
</view>
|
||
</view>
|
||
<view class="award-item" v-if="childItem.type === 'PRODUCT'">
|
||
<template v-if="childItem.info">
|
||
<image v-if="childItem.info.coverResource" :src="childItem.info.coverResource.url" mode="aspectFit" class="award-icon"></image>
|
||
</template>
|
||
|
||
<view class="award-name">
|
||
{{childItem.info.name}}X{{childItem.num}}
|
||
<!-- <image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image> -->
|
||
</view>
|
||
</view>
|
||
<view class="award-item" v-if="childItem.type === 'COUPON'">
|
||
<view class="award-icon" :style="{'background-image': `url(/static/rank/${childItem.type}.png)`}">
|
||
<template v-if="childItem.info.type === 'REDUCTION'">
|
||
<text class="coupon-sym">¥</text>
|
||
<text class="coupon-price">{{Number(childItem.info.amount)}}</text>
|
||
</template>
|
||
<template v-if="childItem.info.type === 'DISCOUNT'">
|
||
|
||
<text class="coupon-price">{{Number(childItem.info.amount)}}</text>
|
||
<text class="coupon-sym">折</text>
|
||
</template>
|
||
</view>
|
||
<!-- couponObj:{
|
||
'REDUCTION':"立减",
|
||
'DISCOUNT':"折扣"
|
||
} -->
|
||
<view class="award-name">
|
||
{{childItem.info.name}}X{{childItem.num}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- <view class="award-item">
|
||
<view class="award-icon" style="background-image: url('/static/rank/yhq.png');">
|
||
<text class="coupon-sym">¥</text>
|
||
<text class="coupon-price">10</text>
|
||
</view>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="award-item">
|
||
<image src="@/static/rank/cck.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/hz.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/hz.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/hz.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view> -->
|
||
</scroll-view>
|
||
</view>
|
||
<!-- <view class="content content-two">
|
||
<view class="content-title">第2名</view>
|
||
<scroll-view scroll-x="true" class="award">
|
||
<view class="award-item">
|
||
<image src="@/static/rank/jfk.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view> -->
|
||
<!-- <view class="content content-two">
|
||
<view class="content-title">第2名</view>
|
||
<scroll-view scroll-x="true" class="award">
|
||
<view class="award-item">
|
||
<image src="@/static/rank/jfk.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view> -->
|
||
<!-- <view class="content content-two">
|
||
<view class="content-title">第2名</view>
|
||
<scroll-view scroll-x="true" class="award">
|
||
<view class="award-item">
|
||
<image src="@/static/rank/jfk.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
<view class="award-item">
|
||
<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
|
||
<view class="award-name">
|
||
Apple AirPods
|
||
<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view> -->
|
||
</scroll-view>
|
||
<!-- 道具奖励在冲榜结束后0点下发，到账存在10分钟的延迟实物奖励请联系企微福利官领取 -->
|
||
<view class="footer-title">{{description}}</view>
|
||
<view class="footer-go" @click="goCustomer">
|
||
点我跳转至微信福利官
|
||
<image src="@/static/rank/go.png" mode="" class="go-icon"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { customerApi } from '@/API/user.js'
|
||
export default{
|
||
props:{
|
||
detail:{
|
||
type:Object,
|
||
default:() => {}
|
||
},
|
||
description:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
},
|
||
data(){
|
||
return{
|
||
typeObj:{
|
||
POINTS:'积分',
|
||
COUPON:'优惠券',
|
||
PROMPT:'提示卡',
|
||
COIN:'代币',
|
||
PRODUCT:'商品'
|
||
},
|
||
couponObj:{
|
||
'REDUCTION':"立减",
|
||
'DISCOUNT':"折扣"
|
||
},
|
||
customer:''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getCustomer()
|
||
},
|
||
methods:{
|
||
close(){
|
||
this.$emit('close')
|
||
},
|
||
goCustomer(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/customer`
|
||
})
|
||
// window.location.href = this.customer
|
||
},
|
||
|
||
getCustomer(){
|
||
customerApi().then(res => {
|
||
if(res.code === 200){
|
||
this.customer = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.list-bonus-com{
|
||
width: 656rpx;
|
||
height: 829rpx;
|
||
background-image: url('@/static/rank/jl.jpg');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: relative;
|
||
.close-icon{
|
||
position: absolute;
|
||
width: 73rpx;
|
||
height: 73rpx;
|
||
top:12rpx;
|
||
right:13rpx;
|
||
z-index: 10;
|
||
}
|
||
.title{
|
||
position: relative;
|
||
padding:64rpx 0 28rpx 194rpx;
|
||
.title-icon{
|
||
width: 308rpx;
|
||
height: 60rpx;
|
||
}
|
||
.title-top{
|
||
z-index: 2;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 70rpx;
|
||
color: #1B6784;
|
||
}
|
||
// .title-last{
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// z-index: 1;
|
||
// font-family: YouSheBiaoTiHei;
|
||
// font-size: 80rpx;
|
||
// color: #FFFFFF;
|
||
// text-stroke: 10px #FFFFFF;
|
||
// webkit-text-stroke: 10px #FFFFFF;
|
||
// }
|
||
}
|
||
.scroll-view-content{
|
||
height: 530rpx;
|
||
.content{
|
||
background-image: url('@/static/rank/de.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
width: 559rpx;
|
||
height: 226rpx;
|
||
margin-left: 51rpx;
|
||
margin-bottom: 43rpx;
|
||
.content-title{
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 27rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
.award{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// padding: 0 34rpx;
|
||
width: 559rpx;
|
||
padding-top: 16rpx;
|
||
white-space: nowrap;
|
||
.award-item{
|
||
display: inline-block;
|
||
width: 131rpx;
|
||
margin-left: 34rpx;
|
||
.award-icon{
|
||
width: 137rpx;
|
||
height: 137rpx;
|
||
display: block;
|
||
margin: 0 auto;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
text-align: center;
|
||
line-height: 147rpx;
|
||
.coupon-sym{
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 23rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.coupon-price{
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.award-name{
|
||
width: 137rpx;
|
||
font-size: 19rpx;
|
||
height: 28rpx;
|
||
// margin-top: 10rpx;
|
||
color: #000000;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
position: relative;
|
||
.name-bottom{
|
||
position: absolute;
|
||
width: 131rpx;
|
||
height: 1rpx;
|
||
left: 0;
|
||
bottom: 0rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content-two{
|
||
background-image: url('@/static/rank/dy.png');
|
||
}
|
||
}
|
||
|
||
.footer-title{
|
||
margin: 20rpx auto 0 auto;
|
||
width: 469rpx;
|
||
text-align: center;
|
||
// color: #71DDFD;
|
||
color: red;
|
||
// font-size: 19rpx;
|
||
font-size: 28rpx;
|
||
line-height: 27rpx;
|
||
}
|
||
.footer-go{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// font-size: 19rpx;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
margin-top: 10rpx;
|
||
.go-icon{
|
||
width: 29rpx;
|
||
height: 29rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |