288 lines
5.4 KiB
Vue
288 lines
5.4 KiB
Vue
<template>
|
|
<view class="top">
|
|
<view class="blessing">
|
|
{{ blessing }}
|
|
</view>
|
|
<view class="money" v-if="randomAmount">
|
|
{{ randomAmount }}
|
|
</view>
|
|
<view class="money" v-else>
|
|
暂无记录
|
|
</view>
|
|
<view class="face" :style="{ 'border-radius': `${radius}` }">
|
|
<image src="/static/img/im/face/face_11.jpg"></image>
|
|
</view>
|
|
<view class="username">
|
|
{{ username }}的红包
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
{{ `已领取${receivedNumber}/${SumNumber} 个,共${receivedMoney}/${SumMoney}${sendType == 1 ? '积分' : '元'}` }}
|
|
</view>
|
|
<view class="list" v-if="receivedList.length > 0">
|
|
<view class="row" v-for="(row, index) in receivedList" :key="index">
|
|
<view class="left">
|
|
<image :src="row.face"></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="r1">
|
|
<view class="username">
|
|
{{ row.userNickname }}
|
|
</view>
|
|
<view class="money">
|
|
{{ `${row.amount}${sendType == 1 ? '积分' : '元'}` }}
|
|
</view>
|
|
</view>
|
|
<view class="r2">
|
|
<view class="time">
|
|
{{ row.createTime }}
|
|
</view>
|
|
<view class="lucky" v-if="row.islucky">
|
|
手气王
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/api/index.js';
|
|
|
|
export default {
|
|
inject: ['util'],
|
|
data() {
|
|
return {
|
|
randomAmount: undefined,
|
|
sendType: null,
|
|
blessing: "恭喜发财",
|
|
money: 0.01,
|
|
username: null,
|
|
receivedNumber: 8,
|
|
SumNumber: 10,
|
|
receivedMoney: 5.43,
|
|
SumMoney: 10,
|
|
receivedList: [],
|
|
//动画效果
|
|
radius: '100% 100% 0 0'
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
grabredLog() {
|
|
let {
|
|
bagId
|
|
} = this.$route.query;
|
|
api.news.grabredLog({
|
|
bagId
|
|
}).then(res => {
|
|
let index = 0;
|
|
let max = 0;
|
|
res.rows.length > 0 && res.rows.forEach((element, index) => {
|
|
const {
|
|
userNickname,
|
|
userPortrait,
|
|
amount,
|
|
createTime
|
|
} = element
|
|
if (amount > max) {
|
|
max = element.amount
|
|
index = index
|
|
}
|
|
this.receivedList.push({
|
|
userNickname,
|
|
face: this.util.format_url(userPortrait),
|
|
createTime,
|
|
amount,
|
|
islucky: false
|
|
})
|
|
});
|
|
this.receivedList[index].islucky = true
|
|
})
|
|
},
|
|
// 获取他人信息
|
|
getUserinfo(userId) {
|
|
api.video.getUserInfo({
|
|
query: {
|
|
userId
|
|
}
|
|
}).then(res => {
|
|
this.username = res.data.userNickname;
|
|
|
|
})
|
|
},
|
|
getRedbag() {
|
|
let {
|
|
bagId
|
|
} = this.$route.query;
|
|
redEnvelope.getRedbag({
|
|
bagId
|
|
}).then(res => {
|
|
// all是总个数 num剩余个数 residue 是剩余金额 scroe是积分 balance余额
|
|
const {
|
|
all,
|
|
num,
|
|
residue,
|
|
score,
|
|
balance,
|
|
sendType,
|
|
userId
|
|
} = res.data
|
|
// 已领取{{ receivedNumber }}/{{ SumNumber }}个,共{{ receivedMoney }}/{{ SumMoney }}元
|
|
this.receivedNumber = all - num
|
|
this.SumNumber = all
|
|
this.randomAmount = res.data?.randomAmount
|
|
this.sendType = sendType
|
|
switch (sendType) {
|
|
case 1:
|
|
this.SumMoney = score
|
|
break;
|
|
case 2:
|
|
this.SumMoney = balance
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.receivedMoney = this.SumMoney - residue
|
|
this.getUserinfo(userId)
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getRedbag()
|
|
this.grabredLog();
|
|
},
|
|
onPageScroll(e) {
|
|
//e.scrollTop;
|
|
if (e.scrollTop > 100) {
|
|
return;
|
|
}
|
|
let radiusTmp = 100 - e.scrollTop;
|
|
this.radius = radiusTmp + '% ' + radiusTmp + '% 0 0';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
view {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.top {
|
|
width: 100%;
|
|
background-color: #cf3c35;
|
|
flex-wrap: wrap;
|
|
|
|
.blessing,
|
|
.money {
|
|
width: 100%;
|
|
color: #f8d757;
|
|
padding: 20upx 0;
|
|
justify-content: center;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.money {
|
|
font-size: 100rpx;
|
|
}
|
|
|
|
.face {
|
|
background-color: #fff;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 130rpx;
|
|
margin-top: 65rpx;
|
|
border-radius: 100% 100% 0 0;
|
|
transition: border-radius .15s;
|
|
|
|
image {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 100%;
|
|
margin-top: -65rpx;
|
|
}
|
|
}
|
|
|
|
.username {
|
|
width: 100%;
|
|
height: 130rpx;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
margin-top: -50rpx;
|
|
font-size: 38rpx;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
margin-top: 30rpx;
|
|
width: 96%;
|
|
height: 50rpx;
|
|
padding-left: 4%;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
border-bottom: solid 1upx #dfdfdf;
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
padding-bottom: 200rpx;
|
|
|
|
.row {
|
|
width: 92%;
|
|
padding: 0 4%;
|
|
height: 120rpx;
|
|
border-bottom: solid 1upx #dfdfdf;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
|
|
.left {
|
|
flex-shrink: 0;
|
|
width: 100rpx;
|
|
height: 120rpx;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 100%;
|
|
height: 150rpx;
|
|
|
|
.r1 {
|
|
width: 100%;
|
|
height: 75rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.r2 {
|
|
width: 100%;
|
|
height: 75rpx;
|
|
justify-content: space-between;
|
|
font-size: 26rpx;
|
|
|
|
.time {
|
|
color: #8F8F94;
|
|
}
|
|
|
|
.lucky {
|
|
padding: 3upx 8rpx;
|
|
border-radius: 5rpx;
|
|
background-color: #F8D757;
|
|
align-items: center;
|
|
height: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #CF3C35;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |