uniapp-shunfengche/my/invite/reward.vue

<template>
	<view>
		<view class="margin-lr-sm margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
			<view class="flex align-center" style="position: relative;">
				<view>
					<view class="text-sm" style="font-size: 28rpx;">累计获取奖励</view>
					<view style="color: #fe6b01; font-size: 50rpx; font-weight: bold; margin-top: 15rpx;">¥ 123.12
					</view>
				</view>
				<view style="position:absolute;right:0rpx;top:0rpx;">
					<image v-if="globalImages" :src="globalImages + 'images/my/jiangli.png'" style="width: 46rpx;height: 46rpx;" mode=""></image>
				</view>
			</view>
			<view class="flex align-center" style="position: relative;margin-top: 30rpx;">
				<view>
					<view class="text-sm" style="font-size: 28rpx;">可提现余额</view>
					<view style="color: #fe6b01; font-size: 38rpx; font-weight: bold; margin-top: 15rpx;">¥ 12.12</view>
				</view>
				<view style="position:absolute;right:0rpx;top:0rpx;">
					<button type="default"
						style="background-color: #fe6b01;font-size: 30rpx;color: #FFFFFF;">立即提现</button>
				</view>
			</view>
		</view>
		<view class="margin-lr-sm margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
			<view class="title">
				邀请数据
			</view>
			<view class="flex" style="margin-top: 20rpx;">
				<view style="width: 33.33%;text-align: center;padding: 20rpx 0;">
					<view style="font-size: 48rpx;font-weight: bold; color: #fe6b01;">5</view>
					<view style="color: #999;margin-top: 7rpx;">已邀请人数</view>
				</view>
				<view style="width: 33.33%;text-align: center;padding: 20rpx 0;">
					<view style="font-size: 48rpx;font-weight: bold; color: #fe6b01;">5</view>
					<view style="color: #999;margin-top: 7rpx;">成功邀请</view>
				</view>
				<view style="width: 33.33%;text-align: center;padding: 20rpx 0;">
					<view style="font-size: 48rpx;font-weight: bold; color: #fe6b01;">5</view>
					<view style="color: #999;margin-top: 7rpx;">本月新增</view>
				</view>
			</view>
		</view>
		<view class="margin-lr-sm margin-top padding" style="border-radius: 20upx;">
			<view class="flex align-center" style="position: relative;">
				<view>
					<view class="title">邀请活动</view>
				</view>
				<view style="position:absolute;right:0rpx;top:0rpx; color: #999;">
					查看全部
				</view>
			</view>
			<view class="navbar">
			  <view class="box" style="background: #409eff; color: #fff; padding: 20rpx;">
			    <view class="flex align-center" style="position: relative;">
			    	<view>
			    		<view class="text-sm" style="font-size: 30rpx;">新用户首单奖励</view>
			    		<view style="font-size: 24rpx;margin-top: 10rpx;">2025-5-15 19:00
			    		</view>
			    	</view>
			    	<view style="position:absolute;right:0rpx;top:0rpx;">
			    		<image v-if="globalImages" :src="globalImages + 'images/my/jiangli2.png'" style="width: 66rpx;height: 66rpx;" mode=""></image>
			    	</view>
			    </view>
				<view style="margin-top: 30rpx;font-size: 40rpx;font-weight: bold;">
					¥ 12
				</view>
				<view style="font-size: 24rpx;margin-top: 20rpx;">
					每成功邀请1人
				</view>
			  </view>
			  <view class="box" style="background: #fe6b01; color: #fff; padding: 20rpx;">
			    <view class="flex align-center" style="position: relative;">
			    	<view>
			    		<view class="text-sm" style="font-size: 30rpx;">新用户首单奖励</view>
			    		<view style="font-size: 24rpx;margin-top: 10rpx;">2025-5-15 19:00
			    		</view>
			    	</view>
			    	<view style="position:absolute;right:0rpx;top:0rpx;">
			    		<image v-if="globalImages" :src="globalImages + 'images/my/jiangli2.png'" style="width: 66rpx;height: 66rpx;" mode=""></image>
			    	</view>
			    </view>
			    <view style="margin-top: 30rpx;font-size: 40rpx;font-weight: bold;">
			    	¥ 12
			    </view>
			    <view style="font-size: 24rpx;margin-top: 20rpx;">
			    	每成功邀请1人
			    </view>
			  </view>
			</view>
		</view>
		<view class="margin-lr-sm margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
			<view class="flex align-center" style="position: relative;">
				<view>
					<view class="text-sm" style="font-size: 28rpx;">邀请记录</view>
				</view>
				<view style="position:absolute;right:0rpx;top:0rpx; color: #999;">
					全部
				</view>
			</view>
			<view class="boxs" style="margin-top: 15rpx;">
				<!-- 外层容器 -->
				<view class="flex align-center padding-tb-sm" v-for="(item, index) in personList" :key="index" style="padding: 30rpx 0;">
					<!-- 显示头像 -->
					<view>
						<image :src="item.avatar" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view>{{ item.nick_name }}</view>
						<view style="color: #999;">{{ item.create_time }}</view>
					</view>
					<view style="position: absolute; right: 60rpx;">
						<button type="default" v-if="item.first_order === 1"
							style="background-color: #00c18a;font-size: 24rpx;color: #FFFFFF;">已完成</button>
						<view style="color: #00c18a; font-size: 28rpx;" v-if="item.first_order === 1">
							+ ¥{{ item.relationship }}
						</view>
						<button type="default" v-if="item.first_order === 0"
							style="background-color: #fe6b01;font-size: 24rpx;color: #FFFFFF;">待完成</button>
						<view style="color: #fe6b01; font-size: 28rpx;" v-if="item.first_order === 0">
							{{ item.relationship }}
						</view>
					</view>
				</view>
				<view class="login_btn" >加载更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				personList: [],
				list: [{
					id: 1,
					name: '全部'
				},{
					id: 1,
					name: '可使用'
				}, {
					id: 2,
					name: '已使用'
				}, {
					id: 3,
					name: '已失效'
				}],
				page: 1,
				limit: 10,
				globalImages: ''
			};
		},
		onLoad() {
			this.inviter()
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
		},
		methods: {
			inviter () {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.postT('/app/emergency/inviter', data).then(res => {
					if (res.code === 0) {
						if (this.page == 1) {
							this.personList = res.data.list;
						} else {
							this.personList = [...this.list, ...res.data.list]
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.title {
		font-size: 32rpx;
		font-weight: bold;
		font-family: PingFang SC;
		color: #333333;
	}
	
	.login_btn {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		background: #f5f5f5;
		height: 80rpx;
		border-radius: 16rpx;
		border: 1px solid #e4e7ed;
		color: #999;
		line-height: 80rpx;
		margin-top: 60rpx;
	}
	
	.navbar {
	  /* 开启 flex 布局 */
	  display: flex; 
	  padding-top: 30rpx;
	  /* 允许子元素溢出时横向滚动 */
	  white-space: nowrap; 
	  /* 当内容溢出时，显示横向滚动条 */
	  overflow-x: auto; 
	}
	
	.box {
	  /* 盒子宽度设置为 400rpx */
	  width: 400rpx; 
	  height: 240rpx;
	  /* 不允许子元素换行 */
	  white-space: nowrap; 
	  /* 固定宽度，不收缩 */
	  flex-shrink: 0; 
	  border-radius: 18rpx;
	}
	
	/* 除了第一个 box 元素，其他 box 元素设置负的左外边距 */
	.box:nth-child(n + 2) {
	  margin-left: 30rpx;
	}
</style>