355 lines
6.7 KiB
Plaintext
355 lines
6.7 KiB
Plaintext
<template>
|
|
<view class="promotion-page">
|
|
<!-- 沉浸式状态栏 -->
|
|
<view class="status-bar"></view>
|
|
|
|
<!-- 顶部导航 -->
|
|
<view class="nav-bar">
|
|
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
|
<text class="nav-title">我的推广</text>
|
|
<view class="nav-placeholder"></view>
|
|
</view>
|
|
|
|
<!-- 统计卡片 -->
|
|
<view class="stats-section">
|
|
<view class="stats-card">
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ list.length }}</text>
|
|
<text class="stat-label">推广会员</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ allAward }}</text>
|
|
<text class="stat-label">获得积分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 会员列表 -->
|
|
<view class="content">
|
|
<view class="list-header">
|
|
<text class="header-title">推广会员列表</text>
|
|
<text class="header-count">共{{ list.length }}人</text>
|
|
</view>
|
|
|
|
<view v-if="list.length > 0" class="members-list">
|
|
<view v-for="member in list" :key="member.id" class="member-card">
|
|
<!-- 会员信息 -->
|
|
<view class="member-info">
|
|
<image class="member-avatar" :src="Service.GetMateUrlByImg(member.avatar)" mode="aspectFill" />
|
|
<view class="member-details">
|
|
<view class="name-tag-row">
|
|
<text class="member-name">{{ member.nick }}</text>
|
|
<view class="user-member-tag">
|
|
<text class="ri-vip-crown-fill member-icon"></text>
|
|
<!-- <text class="member-text">{{ member.levelText }}</text> -->
|
|
</view>
|
|
</view>
|
|
<view class="user-id-tag">
|
|
<text class="ri-vip-crown-2-fill id-icon"></text>
|
|
<text class="id-text">ID: {{ member.userNo }}</text>
|
|
</view>
|
|
<text class="register-time">注册时间：{{ member.addTime }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分奖励 -->
|
|
<view class="points-info">
|
|
<text class="points-label">奖励</text>
|
|
<text class="points-value">+{{ member.award }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-else class="empty-state">
|
|
<text class="ri-team-line empty-icon"></text>
|
|
<text class="empty-text">暂无推广会员</text>
|
|
<text class="empty-desc">邀请好友加入，获得积分奖励</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
|
import { vpUserService, Service } from "@/Service/vp/vpUserService"
|
|
|
|
let list = ref<Array<any>>([])
|
|
let status = ref<string>('loadmore')
|
|
let pageNo = ref<number>(1)
|
|
|
|
let allAward = ref<Number>(0)
|
|
|
|
|
|
onLoad(() => {
|
|
getData()
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
getList()
|
|
});
|
|
|
|
|
|
const getData = () => {
|
|
list.value = []
|
|
status.value = 'loadmore'
|
|
pageNo.value = 1
|
|
getList()
|
|
}
|
|
|
|
|
|
const getList = () => {
|
|
if (status.value == 'nomore' || status.value == 'loading') {
|
|
return
|
|
}
|
|
|
|
status.value = 'loading'
|
|
|
|
vpUserService.GetUseRemList(pageNo.value).then(res => {
|
|
if (res.code == 0) {
|
|
list.value = [...list.value, ...res.data.list]
|
|
status.value = 10 == res.data.list.length ? 'loadmore' : 'nomore'
|
|
allAward.value = res.data.allAward
|
|
pageNo.value++
|
|
} else {
|
|
Service.Msg(res.msg)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 返回
|
|
const goBack = () => {
|
|
Service.GoPageBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 引入全局标签样式 */
|
|
@import '@/styles/member-tags.scss';
|
|
|
|
.promotion-page {
|
|
min-height: 100vh;
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 60rpx 24rpx 20rpx 24rpx;
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
}
|
|
|
|
.back-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
padding: 8rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.nav-placeholder {
|
|
width: 48rpx;
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.stats-section {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.stats-card {
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
border-radius: 16rpx;
|
|
padding: 32rpx 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 107, 0, 0.3);
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #FFFFFF;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 1rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content {
|
|
padding: 0 20rpx 20rpx;
|
|
}
|
|
|
|
/* 列表头部 */
|
|
.list-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
}
|
|
|
|
.header-count {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
/* 会员列表 */
|
|
.members-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.member-card {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.member-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.member-avatar {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.member-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.member-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.name-tag-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.member-name {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
}
|
|
|
|
.user-member-tag {
|
|
transform: scale(0.92);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.user-id-tag {
|
|
margin-bottom: 8rpx;
|
|
width: fit-content;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.register-time {
|
|
font-size: 22rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
/* 积分信息 */
|
|
.points-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
padding: 16rpx;
|
|
background: #FFF4E6;
|
|
border-radius: 12rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.points-label {
|
|
font-size: 20rpx;
|
|
color: #FF9800;
|
|
}
|
|
|
|
.points-value {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 120rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 24rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
</style> |