增加分销功能，调整页面
This commit is contained in:
332
src/views/Distribution.vue
Normal file
332
src/views/Distribution.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="distribution-page">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-left">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.go(-1)"
|
||||
class="back-btn"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<h1 class="nav-title">分销推广</h1>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<!-- 占位元素，保持标题居中 -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 分销说明 -->
|
||||
<div class="intro-section">
|
||||
<div class="intro-card">
|
||||
<h3 class="intro-title">邀请好友注册</h3>
|
||||
<p class="intro-desc">分享您的专属二维码，邀请好友注册</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二维码区域 -->
|
||||
<div class="qrcode-section">
|
||||
<div class="qrcode-card">
|
||||
<h4 class="qrcode-title">我的推广二维码</h4>
|
||||
<div class="qrcode-container">
|
||||
<canvas
|
||||
ref="qrcodeCanvas"
|
||||
class="qrcode-canvas"
|
||||
v-show="qrcodeGenerated"
|
||||
></canvas>
|
||||
<div v-show="!qrcodeGenerated" class="qrcode-loading">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span>生成中...</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="qrcode-tip">扫描二维码，好友可直接注册并绑定您的推荐关系</p>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
@click="shareQRCode"
|
||||
>
|
||||
分享二维码
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 推广链接 -->
|
||||
<div class="link-section">
|
||||
<div class="link-card">
|
||||
<h4 class="link-title">推广链接</h4>
|
||||
<div class="link-container">
|
||||
<el-input
|
||||
v-model="inviteLink"
|
||||
readonly
|
||||
class="link-input"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="copyLink" type="primary">
|
||||
复制
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Loading
|
||||
} from '@element-plus/icons-vue'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const qrcodeCanvas = ref(null)
|
||||
const qrcodeGenerated = ref(false)
|
||||
const generating = ref(false)
|
||||
const inviteLink = ref('')
|
||||
|
||||
|
||||
// 生成邀请链接
|
||||
const generateInviteLink = () => {
|
||||
const userId = userStore.user?.id || userStore.user?.user_id || 'guest'
|
||||
console.log(userStore.user.id,userStore.user.user_id)
|
||||
const baseUrl = 'http://192.168.1.124:5173'
|
||||
return `${baseUrl}/register?inviter=${userId}`
|
||||
}
|
||||
|
||||
// 生成二维码
|
||||
const generateQRCode = async () => {
|
||||
try {
|
||||
generating.value = true
|
||||
qrcodeGenerated.value = false
|
||||
|
||||
// 生成邀请链接
|
||||
const link = generateInviteLink()
|
||||
inviteLink.value = link
|
||||
|
||||
// 等待DOM更新
|
||||
await nextTick()
|
||||
|
||||
if (qrcodeCanvas.value) {
|
||||
// 生成二维码到canvas
|
||||
await QRCode.toCanvas(qrcodeCanvas.value, link, {
|
||||
width: 200,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
}
|
||||
})
|
||||
|
||||
qrcodeGenerated.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成二维码失败:', error)
|
||||
ElMessage.error('生成二维码失败')
|
||||
} finally {
|
||||
generating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 复制链接
|
||||
const copyLink = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(inviteLink.value)
|
||||
ElMessage.success('链接已复制到剪贴板')
|
||||
} catch (error) {
|
||||
// 降级方案
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = inviteLink.value
|
||||
document.body.appendChild(textArea)
|
||||
textArea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textArea)
|
||||
ElMessage.success('链接已复制到剪贴板')
|
||||
}
|
||||
}
|
||||
|
||||
// 分享二维码
|
||||
const shareQRCode = () => {
|
||||
if (navigator.share && qrcodeCanvas.value) {
|
||||
// 将canvas转换为blob
|
||||
qrcodeCanvas.value.toBlob(async (blob) => {
|
||||
const file = new File([blob], 'qrcode.png', { type: 'image/png' })
|
||||
try {
|
||||
await navigator.share({
|
||||
title: '邀请注册',
|
||||
text: '扫描二维码注册获得奖励',
|
||||
files: [file]
|
||||
})
|
||||
} catch (error) {
|
||||
console.log('分享取消或失败')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 降级方案：复制链接
|
||||
copyLink()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
generateQRCode()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.distribution-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
.nav-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.intro-section,
|
||||
.qrcode-section,
|
||||
.link-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.intro-card,
|
||||
.qrcode-card,
|
||||
.link-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.intro-title,
|
||||
.qrcode-title,
|
||||
.link-title {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.intro-desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.qrcode-canvas {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.qrcode-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 24px;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.qrcode-tip {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link-container {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.link-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 欢迎弹窗 -->
|
||||
<!-- <el-dialog
|
||||
<el-dialog
|
||||
v-model="showWelcomeDialog"
|
||||
width="90%"
|
||||
:style="{ height: '425px' }"
|
||||
@@ -86,13 +86,25 @@
|
||||
<div class="welcome-icon">🎉</div>
|
||||
<h3>融汇通更新</h3>
|
||||
<div class="welcome-features">
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">💎</span>
|
||||
<span>获取融豆赚取积分</span>
|
||||
<div class="announcements-container" v-if="announcements.length > 0">
|
||||
<div
|
||||
class="announcement-item"
|
||||
v-for="announcement in announcements"
|
||||
:key="announcement.id"
|
||||
>
|
||||
<div class="announcement-header">
|
||||
<h4 class="announcement-title">{{ announcement.title }}</h4>
|
||||
<span class="announcement-priority" :class="announcement.priority">{{ announcement.priority }}</span>
|
||||
</div>
|
||||
<div class="announcement-content">{{ announcement.content }}</div>
|
||||
<div class="announcement-meta">
|
||||
<span class="announcement-time">{{ formatDate(announcement.created_at) }}</span>
|
||||
<span class="announcement-author">发布者: {{ announcement.creator_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">🛒</span>
|
||||
<span>积分商城兑换好礼</span>
|
||||
<div v-else class="no-announcements">
|
||||
<span>暂无更新信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,7 +113,7 @@
|
||||
<el-button @click="showWelcomeDialog = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog> -->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,6 +127,7 @@ import { useUserStore } from '../stores/user';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/autoplay';
|
||||
import 'swiper/css/pagination';
|
||||
import api from '@/utils/api'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -128,6 +141,9 @@ export default {
|
||||
// 响应式数据
|
||||
const userPoints = ref(0);
|
||||
const showWelcomeDialog = ref(false);
|
||||
|
||||
const updateNotice = ref('');
|
||||
const announcements = ref([]);
|
||||
|
||||
// 计算属性 - 获取用户名
|
||||
const userName = computed(() => {
|
||||
@@ -181,11 +197,31 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
const getUpdateNotice = async () => {
|
||||
try {
|
||||
const response = await api.get('/announcements');
|
||||
console.log('获取更新信息',response);
|
||||
if (response.data.success && response.data.data.announcements) {
|
||||
announcements.value = response.data.data.announcements;
|
||||
// 设置第一个公告的标题作为默认显示
|
||||
if (announcements.value.length > 0) {
|
||||
updateNotice.value = announcements.value[0].title;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取更新信息失败', error);
|
||||
ElMessage.error('获取更新信息失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
// 定时刷新积分
|
||||
let refreshInterval;
|
||||
|
||||
onMounted(() => {
|
||||
getUserPoints();
|
||||
|
||||
getUpdateNotice();
|
||||
|
||||
// 每5分钟刷新一次积分（可根据需求调整时间）
|
||||
refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000);
|
||||
|
||||
@@ -199,6 +235,18 @@ export default {
|
||||
clearInterval(refreshInterval);
|
||||
});
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
modules: [Autoplay, Pagination],
|
||||
userPoints,
|
||||
@@ -207,6 +255,9 @@ export default {
|
||||
headerItems,
|
||||
newsItems,
|
||||
showWelcomeDialog,
|
||||
updateNotice,
|
||||
announcements,
|
||||
formatDate,
|
||||
getUserPoints, // 如果需要外部调用可以暴露
|
||||
};
|
||||
},
|
||||
@@ -529,25 +580,110 @@ export default {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.announcements-container {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--primary-color) #f1f1f1;
|
||||
}
|
||||
|
||||
.announcements-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.announcements-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.announcements-container::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.announcements-container::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
.announcement-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
background: #e9ecef;
|
||||
transform: translateX(4px);
|
||||
.announcement-item:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
.announcement-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.announcement-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.announcement-priority {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.announcement-priority.high {
|
||||
background: #ffebee;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.announcement-priority.medium {
|
||||
background: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.announcement-priority.low {
|
||||
background: #e8f5e8;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.announcement-content {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.announcement-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.announcement-time,
|
||||
.announcement-author {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.no-announcements {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
:deep(.welcome-dialog .el-dialog__footer) {
|
||||
@@ -615,11 +751,6 @@ export default {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.welcome-dialog .el-dialog__footer) {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
@@ -897,12 +897,18 @@ export default {
|
||||
|
||||
const actualAmount = parseFloat(this.transferDialog.actualAmount)
|
||||
|
||||
// 处理voucher，去掉开头的'https://minio.zrbjr.com'
|
||||
let processedVoucher = this.transferDialog.voucher
|
||||
if (processedVoucher.startsWith('https://minio.zrbjr.com')) {
|
||||
processedVoucher = processedVoucher.replace('https://minio.zrbjr.com', '')
|
||||
}
|
||||
|
||||
this.processing = true
|
||||
try {
|
||||
await api.post(`/matching/confirm-allocation/${this.transferDialog.allocationId}`, {
|
||||
transferAmount: actualAmount,
|
||||
description: this.transferDialog.description,
|
||||
voucher: this.transferDialog.voucher
|
||||
voucher: processedVoucher
|
||||
})
|
||||
this.$message.success('转账凭证已提交，转账记录已创建')
|
||||
this.closeTransferDialog()
|
||||
|
||||
@@ -160,6 +160,7 @@ export default {
|
||||
const settings = ref([
|
||||
{text:'账号安全',path:'/editpasswordpage'},
|
||||
{text:'商户资料',path:'/editdetailspage'},
|
||||
{text:'分销',path:'/distribution'},
|
||||
{text:'通知设置'},
|
||||
{text:'积分获取规则'},
|
||||
{text:'隐私协议'},
|
||||
|
||||
@@ -173,8 +173,7 @@ const formatDateTime = (dateTime) => {
|
||||
|
||||
const formatAddress = (address) => {
|
||||
if (!address) return ''
|
||||
const { province, city, district, detail } = address
|
||||
return `${province || ''}${city || ''}${district || ''}${detail || ''}`
|
||||
return address.detail_address || address.detail || ''
|
||||
}
|
||||
|
||||
const fetchOrderData = async () => {
|
||||
@@ -202,12 +201,12 @@ const fetchOrderData = async () => {
|
||||
subtotal: order.total_amount || 0,
|
||||
shippingFee: 0,
|
||||
address: {
|
||||
recipient: data.address?.receiver_name || order.username || '收件人',
|
||||
phone: data.address?.receiver_phone || order.phone || '手机号',
|
||||
province: data.address?.province_name || '',
|
||||
city: data.address?.city_name || '',
|
||||
district: data.address?.district_name || '',
|
||||
detail: data.address?.detailed_address || '暂无地址信息'
|
||||
recipient: data.address?.recipient_name || order.username || '收件人',
|
||||
phone: data.address?.phone || order.phone || '手机号',
|
||||
province: data.address?.province || '',
|
||||
city: data.address?.city || '',
|
||||
district: data.address?.district || '',
|
||||
detail_address: data.order.address?.detail_address || '暂无地址信息'
|
||||
},
|
||||
cartItems: (data.items || order.items || []).map(item => ({
|
||||
id: item.id,
|
||||
|
||||
Reference in New Issue
Block a user