You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

150 lines
3.3 KiB

<template>
<view class="winningRecord bx">
<navbar :leftClick="leftClick" :title="$t('page.winningRecord.title')"></navbar>
<view v-if="turntableRecord.length > 0" class="winningRecord-list">
<view v-for="item in turntableRecord" :key="item.id" class="winningRecord-item">
<view class="winningRecord-item-left">
<image src="@/static/winningRecord/gift.png" mode="aspectFit"></image>
<view class="detail">
<view class="title">{{ $t(`page.winningRecord.${getTurntableDetail(item.bigId,'name')}`) }}</view>
<view class="money">{{ $t('page.winningRecord.money') }}:{{ getTurntableDetail(item.bigId,'money') }}</view>
</view>
</view>
<view class="winningRecord-item-right">
{{ item.createTime}}
</view>
</view>
</view>
<!-- 无粉丝 -->
<view v-else class="noFans">{{ $t('page.winningRecord.noPrizesHaveBeenWon') }}</view>
</view>
</template>
<script>
import navbar from '@/components/base/m-navbar.vue'
export default {
components : { navbar },
data(){
return {
winningRecordList : [],
turntableRecord : []
}
},
onShow(){
this.getTurntable()
},
methods: {
leftClick() {
uni.navigateTo({
url: '/pages/center/center'
})
},
//大转盘记录
getTurntableRecord(){
this.request('getTurntableRecord').then(res => {
if (res.code == 200) {
this.turntableRecord = res.result
}
})
},
//获取大转盘列表
getTurntable(){
this.request('getTurntableList').then(res => {
if(res.code == 200){
this.winningRecordList = res.result
this.getTurntableRecord()
}
})
},
//获取中奖详情
getTurntableDetail(id, key) {
const item = this.winningRecordList.find(item => item.id === id);
return item ? item[key] : {}; // 如果没有找到,可以返回一个默认值
}
}
}
</script>
<style lang="scss" scoped>
.winningRecord{
width: 750rpx;
min-height: 100vh;
// background-color: black;
margin: 0 auto;
background-size: 100%;
background-repeat: no-repeat;
color: $uni-text-color;
.winningRecord-list{
width: 96%;
margin: 0rpx auto;
margin-top: 20rpx;
.winningRecord-item{
background: $uni-bg-color-app;
color: $uni-text-color-inverse;
padding: 10rpx 20rpx;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.winningRecord-item-left{
display: flex;
width: 70%;
overflow: hidden;
image{
width: 130rpx;
height: 130rpx;
}
.detail{
width: calc(100% - 130rpx);
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20rpx 0rpx;
padding-right: 15rpx;
box-sizing: border-box;
.title{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 30rpx;
}
.money{
color: #ccc;
font-size: 26rpx;
}
}
}
.winningRecord-item-right{
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 20rpx;
color: #ccc;
width: 30%;
}
}
}
.noFans{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff80;
}
}
</style>