309 lines
6.8 KiB
Vue
309 lines
6.8 KiB
Vue
<template>
|
|
<view>
|
|
<u-popup class="notice" width="70%" mode="center" :show="noticeFlag">
|
|
|
|
<view class="gameBox">
|
|
<view class="top_kuai kuai1">
|
|
<view :class="popupList[0].isLoginMember == 1 ? 'mname' : 'mname2'">
|
|
{{ popupList[0].memberName }}
|
|
</view>
|
|
<view class="tx">
|
|
<img :src="
|
|
popupList[0].headPath
|
|
? popupList[0].headPath
|
|
: userInfo.countryCircularIcon
|
|
" alt="" />
|
|
</view>
|
|
<view class="yeji">{{ popupList[0].orderAchieveStr }}</view>
|
|
<view class="topb topb1">TOP.1</view>
|
|
</view>
|
|
<view class="top_kuai kuai2">
|
|
<view :class="popupList[1].isLoginMember == 1 ? 'mname' : 'mname2'">{{ popupList[1].memberName }}
|
|
</view>
|
|
<view class="tx">
|
|
<img :src="
|
|
popupList[1].headPath
|
|
? popupList[1].headPath
|
|
: userInfo.countryCircularIcon
|
|
" alt="" />
|
|
</view>
|
|
<view class="yeji">{{ popupList[1].orderAchieveStr }}</view>
|
|
<view class="topb topb2">TOP.2</view>
|
|
</view>
|
|
<view class="top_kuai kuai3">
|
|
<view :class="popupList[2].isLoginMember == 1 ? 'mname' : 'mname2'">{{ popupList[2].memberName }}
|
|
</view>
|
|
<view class="tx">
|
|
<img :src="
|
|
popupList[2].headPath
|
|
? popupList[2].headPath
|
|
: userInfo.countryCircularIcon
|
|
" alt="" />
|
|
</view>
|
|
<view class="yeji">{{ popupList[2].orderAchieveStr }}</view>
|
|
<view class="topb topb3">TOP.3</view>
|
|
</view>
|
|
<view class="poupmain">
|
|
<view class="main_title">{{ themonth }}月直推排行榜</view>
|
|
<view class="table">
|
|
<view class="linerow flexrow">
|
|
<view class="line1">排名</view>
|
|
<view class="line2"></view>
|
|
<view class="line3">会员姓名</view>
|
|
<view class="line4">直推业绩(万)</view>
|
|
</view>
|
|
<view v-for="(item, index) in popupList2" :key="index"
|
|
:class="item.isLoginMember == 1 ? 'flexrow' : 'tcrow'">
|
|
<view class="theline line1">
|
|
<view class="indexrow">{{ index + 4 }}</view>
|
|
</view>
|
|
<view class="theline line2">
|
|
<img :src="
|
|
item.headPath
|
|
? item.headPath
|
|
: userInfo.countryCircularIcon
|
|
" alt="" />
|
|
</view>
|
|
<view class="theline line3">{{ item.memberName }}</view>
|
|
<view class="theline line4">{{ item.orderAchieveStr }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="wrap_close_center">
|
|
<img :src="closeImg" @click="closeTap" />
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/login.js'
|
|
export default {
|
|
name: "znNewsPopup",
|
|
props: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
popupList: [],
|
|
noticeFlag: false,
|
|
popupList2: [],
|
|
themonth: "1",
|
|
closeImg: require("@/static/images/close.png"),
|
|
userInfo: uni.getStorageSync('User'),
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getDirectrank();
|
|
},
|
|
methods: {
|
|
closeTap() {
|
|
//关闭
|
|
this.noticeFlag = false;
|
|
this.$forceUpdate(); // 强制更新视图
|
|
this.$emit("callznMethodTrigger");
|
|
},
|
|
getDirectrank() {
|
|
const currentDate = new Date();
|
|
this.themonth = currentDate.getMonth() + 1;
|
|
api.getMemberDirectpush().then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data &&res.data.length > 0) {
|
|
this.popupList = res.data;
|
|
let arr = res.data;
|
|
let newArr = arr.filter((item, index) => index >= 3); // 过滤掉索引小于3的元素
|
|
this.popupList2 = newArr;
|
|
this.noticeFlag = true;
|
|
} else {
|
|
this.$emit("callznMethodTrigger");
|
|
}
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .u-popup__content {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.wrap_close_center {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
cursor: pointer
|
|
}
|
|
}
|
|
|
|
.gameBox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 650rpx;
|
|
height: 1000rpx;
|
|
margin: auto;
|
|
border-radius: 8rpx;
|
|
background: url("~@/static/images/ztph.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.top_kuai {
|
|
width: 200rpx;
|
|
|
|
.mname {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.mname2 {
|
|
color: #d2322b;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
|
|
.tx {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 0 auto;
|
|
background: yellow;
|
|
border-radius: 50%;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.yeji {
|
|
background: rgba(255, 192, 188, 0.4);
|
|
border-radius: 8rpx;
|
|
color: #d2322b;
|
|
font-size: 20rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 5rpx 0;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.topb {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.kuai1 {
|
|
position: absolute;
|
|
left: 225rpx;
|
|
top: -80rpx;
|
|
}
|
|
|
|
.kuai2 {
|
|
position: absolute;
|
|
left: 6rpx;
|
|
top: -30rpx;
|
|
}
|
|
|
|
.kuai3 {
|
|
position: absolute;
|
|
left: 440rpx;
|
|
top: -10rpx;
|
|
}
|
|
|
|
.topb1 {
|
|
font-size: 40rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.topb2 {
|
|
font-size: 30rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.topb3 {
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.poupmain {
|
|
// background: yellow;
|
|
|
|
margin-top: 220rpx;
|
|
|
|
padding: 0 20rpx;
|
|
font-size: 26rpx;
|
|
.main_title {
|
|
text-align: center;
|
|
color: #d23932;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
margin: 10rpx 0;
|
|
}
|
|
.table {
|
|
height: 680rpx;
|
|
overflow: auto;
|
|
}
|
|
.linerow {
|
|
background: rgba(217, 217, 217, 0.4);
|
|
padding: 10rpx 10rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.tcrow {
|
|
display: flex;
|
|
color: #d23932;
|
|
background: rgba(217, 217, 217, 0.4);
|
|
border-radius: 8rpx;
|
|
}
|
|
.flexrow {
|
|
display: flex;
|
|
}
|
|
.theline {
|
|
font-weight: 600;
|
|
line-height: 50rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
.line1 {
|
|
width: 50px;
|
|
}
|
|
.line2 {
|
|
width: 100rpx;
|
|
text-align: right;
|
|
img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.line3 {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
}
|
|
.line4 {
|
|
width: 180rpx;
|
|
text-align: right;
|
|
}
|
|
.indexrow {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
background-color: #ffe7e8;
|
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |