第一次上传

This commit is contained in:
Ls
2026-03-09 16:39:03 +08:00
commit 3d9efaf15c
924 changed files with 326227 additions and 0 deletions

View File

@@ -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.avatar)" 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">注册时间:{{ 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>
<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'
},
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',
margin: '0 auto',
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>

View File

@@ -0,0 +1,282 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标批量下载工具</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
color: #6366F1;
margin-bottom: 10px;
}
.subtitle {
color: #64748B;
margin-bottom: 40px;
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.icon-card {
border: 2px solid #E2E8F0;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s;
}
.icon-card:hover {
border-color: #6366F1;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(99,102,241,0.2);
}
.icon-preview {
width: 80px;
height: 80px;
margin: 0 auto 15px;
background: #F8FAFC;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.icon-name {
font-weight: 600;
color: #0F172A;
margin-bottom: 8px;
}
.icon-size {
font-size: 14px;
color: #64748B;
margin-bottom: 12px;
}
.btn {
display: inline-block;
padding: 8px 20px;
background: #6366F1;
color: white;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
}
.btn:hover {
background: #4F46E5;
transform: scale(1.05);
}
.instructions {
background: #F8FAFC;
padding: 24px;
border-radius: 12px;
margin-bottom: 30px;
}
.instructions h3 {
color: #0F172A;
margin-bottom: 12px;
}
.instructions ol {
padding-left: 20px;
color: #64748B;
line-height: 1.8;
}
.download-all {
text-align: center;
margin: 30px 0;
}
.download-all .btn {
padding: 15px 40px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 图标批量下载工具</h1>
<p class="subtitle">一键下载项目所需的所有图标素材</p>
<div class="instructions">
<h3>📖 使用说明</h3>
<ol>
<li>点击下方任意图标卡片的"下载"按钮</li>
<li>会自动跳转到 RemixIcon 图标库(免费、开源)</li>
<li>点击下载图标,选择 PNG 格式</li>
<li>调整颜色为对应的颜色代码</li>
<li>下载并保存到项目的 <code>static/icons/</code> 目录</li>
</ol>
</div>
<div class="icon-grid">
<!-- 底部导航栏 -->
<div class="icon-card">
<div class="icon-preview">🏠</div>
<div class="icon-name">首页</div>
<div class="icon-size">48x48 px | #94A3B8 / #6366F1</div>
<a href="https://remixicon.com/icon/home-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">👤</div>
<div class="icon-name">我的</div>
<div class="icon-size">48x48 px | #94A3B8 / #6366F1</div>
<a href="https://remixicon.com/icon/user-line" class="btn" target="_blank">下载</a>
</div>
<!-- 首页图标 -->
<div class="icon-card">
<div class="icon-preview">🔍</div>
<div class="icon-name">搜索</div>
<div class="icon-size">24x24 px | #94A3B8</div>
<a href="https://remixicon.com/icon/search-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">📍</div>
<div class="icon-name">位置</div>
<div class="icon-size">24x24 px | #94A3B8</div>
<a href="https://remixicon.com/icon/map-pin-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">🍽️</div>
<div class="icon-name">餐饮</div>
<div class="icon-size">32x32 px | #6366F1</div>
<a href="https://remixicon.com/icon/restaurant-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">🍷</div>
<div class="icon-name">酒馆</div>
<div class="icon-size">32x32 px | #6366F1</div>
<a href="https://remixicon.com/icon/goblet-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">🏪</div>
<div class="icon-name">超市</div>
<div class="icon-size">32x32 px | #6366F1</div>
<a href="https://remixicon.com/icon/shop-3-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">📦</div>
<div class="icon-name">全部</div>
<div class="icon-size">32x32 px | #6366F1</div>
<a href="https://remixicon.com/icon/apps-line" class="btn" target="_blank">下载</a>
</div>
<!-- 个人中心图标 -->
<div class="icon-card">
<div class="icon-preview">✏️</div>
<div class="icon-name">编辑</div>
<div class="icon-size">24x24 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/edit-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">💎</div>
<div class="icon-name">会员</div>
<div class="icon-size">32x32 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/vip-diamond-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">🎫</div>
<div class="icon-name">优惠券</div>
<div class="icon-size">32x32 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/coupon-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">💰</div>
<div class="icon-name">积分</div>
<div class="icon-size">32x32 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/coin-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">📋</div>
<div class="icon-name">订单</div>
<div class="icon-size">32x32 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/file-list-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">⭐</div>
<div class="icon-name">收藏</div>
<div class="icon-size">24x24 px | #64748B</div>
<a href="https://remixicon.com/icon/star-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">❓</div>
<div class="icon-name">帮助</div>
<div class="icon-size">24x24 px | #64748B</div>
<a href="https://remixicon.com/icon/question-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">⚙️</div>
<div class="icon-name">设置</div>
<div class="icon-size">24x24 px | #64748B</div>
<a href="https://remixicon.com/icon/settings-3-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">→</div>
<div class="icon-name">箭头</div>
<div class="icon-size">20x20 px | #CBD5E1</div>
<a href="https://remixicon.com/icon/arrow-right-line" class="btn" target="_blank">下载</a>
</div>
<!-- 店铺详情图标 -->
<div class="icon-card">
<div class="icon-preview">📞</div>
<div class="icon-name">电话</div>
<div class="icon-size">32x32 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/phone-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">🧭</div>
<div class="icon-name">导航</div>
<div class="icon-size">32x32 px | #FFFFFF</div>
<a href="https://remixicon.com/icon/compass-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">🕐</div>
<div class="icon-name">时间</div>
<div class="icon-size">24x24 px | #64748B</div>
<a href="https://remixicon.com/icon/time-line" class="btn" target="_blank">下载</a>
</div>
<!-- 优惠券图标 -->
<div class="icon-card">
<div class="icon-preview">✓</div>
<div class="icon-name">已使用</div>
<div class="icon-size">24x24 px | #10B981</div>
<a href="https://remixicon.com/icon/check-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">✕</div>
<div class="icon-name">已过期</div>
<div class="icon-size">24x24 px | #94A3B8</div>
<a href="https://remixicon.com/icon/close-line" class="btn" target="_blank">下载</a>
</div>
<div class="icon-card">
<div class="icon-preview">📭</div>
<div class="icon-name">空状态</div>
<div class="icon-size">80x80 px | #CBD5E1</div>
<a href="https://remixicon.com/icon/inbox-line" class="btn" target="_blank">下载</a>
</div>
</div>
<div class="download-all">
<p style="color: #64748B; margin-bottom: 20px;">
💡 提示:所有图标来自 RemixIcon完全免费开源
</p>
</div>
</div>
</body>
</html>