第一次上传
This commit is contained in:
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<view class="promotion-page" :style="showCode?'height: 100vh; overflow: hidden;':''">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<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 @click="showCode=true" class="stat-item">
|
||||
<up-icon name="share" color="#fff" size="20"></up-icon>
|
||||
<text class="stat-label">推广码</text>
|
||||
</view>
|
||||
|
||||
<view class="stat-divider"></view>
|
||||
<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.headImg)" mode="aspectFill" />
|
||||
<view class="member-details">
|
||||
<view class="name-tag-row">
|
||||
<text class="member-name">{{ member.nick }}</text>
|
||||
</view>
|
||||
<view class="user-id-tag">
|
||||
<image :src="Service.GetIconImg('/static/iconMent/user/viptype.png')" style="width: 20rpx; height: 20rpx; margin-right: 10rpx;"></image>
|
||||
<text class="id-text">ID: {{ member.userNo }}</text>
|
||||
</view>
|
||||
<text class="register-time">注册时间：{{ Service.formatDate(new Date(member.addTime),1) }}</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>
|
||||
|
||||
<up-popup :show="showCode" round='10' mode='center' @close="showCode=false" :closeable="true"
|
||||
:safeAreaInsetTop='true' :safeAreaInsetBottom='false' >
|
||||
<view class="" style=" margin: 0 auto; padding: 20rpx; background-color: #fff; " >
|
||||
<l-painter :board="poster" ref="posterFun">
|
||||
</l-painter>
|
||||
</view>
|
||||
<view class="" style="padding: 0 20rpx 20rpx;" >
|
||||
<up-button color='var(--nav-mian)' @click="save()" text="保存图片" ></up-button>
|
||||
</view>
|
||||
</up-popup>
|
||||
</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)
|
||||
let showCode=ref(false)
|
||||
let code=ref('')
|
||||
|
||||
let url = ref<string>('')
|
||||
let imgurl = ref<string>('')
|
||||
const posterFun = ref(null)
|
||||
|
||||
const poster = ref<any>({
|
||||
css: {
|
||||
// 根节点若无尺寸，自动获取父级节点
|
||||
position: ' relative',
|
||||
borderRadius: '18rpx',
|
||||
overflow: 'hidden',
|
||||
width:'550rpx'
|
||||
},
|
||||
|
||||
views: [{
|
||||
type: 'image',
|
||||
src: 'https://vp.clouds.xypays.cn/poster/poster1.png',
|
||||
css: {
|
||||
width: '550rpx',
|
||||
margin: '0 auto',
|
||||
},
|
||||
mode: "widthFix"
|
||||
}, {
|
||||
type: 'qrcode',
|
||||
text: '',
|
||||
css: {
|
||||
width: '80rpx',
|
||||
height: '80rpx',
|
||||
position: 'absolute',
|
||||
top: '870rpx',
|
||||
left: '65rpx'
|
||||
},
|
||||
}],
|
||||
|
||||
|
||||
})
|
||||
|
||||
let picture = ref<string>('')
|
||||
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
getCode()
|
||||
})
|
||||
|
||||
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 getCode=()=>{
|
||||
vpUserService.GetShareEwm().then(res=>{
|
||||
if(res.code==0){
|
||||
url.value=res.data.url
|
||||
imgurl.value = res.data.bgUrl
|
||||
poster.value.views[1].text = url.value
|
||||
poster.value.views[0].src = imgurl.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
Service.GoPageBack()
|
||||
}
|
||||
|
||||
const save=()=>{
|
||||
Service.LoadClose('开始下载')
|
||||
posterFun.value.canvasToTempFilePathSync({
|
||||
fileType: 'jpg',
|
||||
pathType:'url',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
picture.value = res.tempFilePath
|
||||
saveImage()
|
||||
},
|
||||
fail(e) {
|
||||
Service.Msg('下载失败')
|
||||
console.log('???????????', e)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
const saveImage = () => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: picture.value,
|
||||
success(res) {
|
||||
Service.Msg('保存成功！')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log(err,'===')
|
||||
Service.Msg('保存失败')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user