web-store-retail-h5/components/directrankPopup.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>