update
This commit is contained in:
aaron
parent
15a6ed7252
commit
5c70929173
BIN
src/assets/images/deliveryman.png
Normal file
BIN
src/assets/images/deliveryman.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 842 KiB |
BIN
src/assets/images/share_title.png
Normal file
BIN
src/assets/images/share_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@ -6,6 +6,8 @@ import './assets/main.css'
|
|||||||
import ElementPlus from 'element-plus'
|
import ElementPlus from 'element-plus'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||||
|
// 引入Element Plus图标
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
|
|
||||||
// 配置axios默认请求路径
|
// 配置axios默认请求路径
|
||||||
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL || '/api'
|
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL || '/api'
|
||||||
@ -15,6 +17,12 @@ app.use(router)
|
|||||||
app.use(ElementPlus, {
|
app.use(ElementPlus, {
|
||||||
locale: zhCn,
|
locale: zhCn,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 注册所有图标
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component)
|
||||||
|
}
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
// 检测小程序环境并注入全局方法
|
// 检测小程序环境并注入全局方法
|
||||||
|
|||||||
@ -11,6 +11,7 @@ import SystemHealth from '../components/SystemHealth.vue'
|
|||||||
import PdfViewer from '../components/PdfViewer.vue'
|
import PdfViewer from '../components/PdfViewer.vue'
|
||||||
import MarkdownViewer from '../components/MarkdownViewer.vue'
|
import MarkdownViewer from '../components/MarkdownViewer.vue'
|
||||||
import PlatformOrderPage from '../views/PlatformOrderPage.vue'
|
import PlatformOrderPage from '../views/PlatformOrderPage.vue'
|
||||||
|
import InviteFriendPage from '../views/InviteFriend/InviteFriendPage.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -113,6 +114,15 @@ const routes = [
|
|||||||
title: '平台订单列表',
|
title: '平台订单列表',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/invite',
|
||||||
|
name: 'InviteFriend',
|
||||||
|
component: InviteFriendPage,
|
||||||
|
meta: {
|
||||||
|
title: '邀请好友送积分',
|
||||||
|
requiresAuth: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
449
src/views/InviteFriend/InviteFriendPage.vue
Normal file
449
src/views/InviteFriend/InviteFriendPage.vue
Normal file
@ -0,0 +1,449 @@
|
|||||||
|
<template>
|
||||||
|
<div class="invite-container">
|
||||||
|
<!-- 顶部标题区域 -->
|
||||||
|
<div class="invite-header">
|
||||||
|
<div class="header-image">
|
||||||
|
<img src="../../assets/images/logo_bee@3x.png" alt="蜂快到家" class="logo-image" />
|
||||||
|
</div>
|
||||||
|
<div class="header-title">
|
||||||
|
<img src="../../assets/images/share_title.png" alt="邀请好友 送积分福利" class="title-image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 邀请卡片 -->
|
||||||
|
<div class="invite-card">
|
||||||
|
<!-- 奖励规则 -->
|
||||||
|
<div class="reward-rules">
|
||||||
|
<h2 class="section-title">奖励规则</h2>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon">
|
||||||
|
<el-icon><Medal /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="rule-content">
|
||||||
|
<h3>好友首单奖励</h3>
|
||||||
|
<p>好友注册并完成首单，您将获得 <span class="highlight">5积分</span> 奖励</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon">
|
||||||
|
<el-icon><ShoppingCart /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="rule-content">
|
||||||
|
<h3>好友后续订单</h3>
|
||||||
|
<p>好友每完成后续订单，您将获得 <span class="highlight">1积分</span> 奖励</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<div class="divider">
|
||||||
|
<span class="divider-text">积分说明</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 积分使用说明 -->
|
||||||
|
<div class="points-usage">
|
||||||
|
<div class="usage-item">
|
||||||
|
<div class="usage-icon">
|
||||||
|
<el-icon><Coin /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="usage-content">
|
||||||
|
<p>积分可用于抵扣配送费，<span class="highlight">10积分=1元</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usage-item">
|
||||||
|
<div class="usage-icon">
|
||||||
|
<el-icon><Timer /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="usage-content">
|
||||||
|
<p>积分长期有效，无需担心过期</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 邀请朋友按钮 -->
|
||||||
|
<div class="invite-action">
|
||||||
|
<button class="btn-invite" @click="handleInvite">
|
||||||
|
<el-icon style="margin-right: 5px;"><Share /></el-icon> 立即邀请好友
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 邀请步骤 -->
|
||||||
|
<div class="invite-steps">
|
||||||
|
<h3 class="steps-title">邀请步骤</h3>
|
||||||
|
<div class="step-list">
|
||||||
|
<div class="step-item">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<div class="step-desc">点击邀请按钮</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-arrow">→</div>
|
||||||
|
<div class="step-item">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div class="step-desc">分享给好友</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-arrow">→</div>
|
||||||
|
<div class="step-item">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div class="step-desc">好友下单完成</div>
|
||||||
|
</div>
|
||||||
|
<div class="step-arrow">→</div>
|
||||||
|
<div class="step-item">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<div class="step-desc">获得积分奖励</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'InviteFriendPage',
|
||||||
|
setup() {
|
||||||
|
// 获取路由实例
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// 用户code
|
||||||
|
const userCode = ref('')
|
||||||
|
|
||||||
|
// 邀请链接
|
||||||
|
const inviteLink = ref('https://beefast.cn/invite?code=ABC123')
|
||||||
|
|
||||||
|
// 小程序环境标志
|
||||||
|
const isMiniProgram = ref(false)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 检测是否在微信小程序环境中
|
||||||
|
checkMiniProgramEnvironment()
|
||||||
|
|
||||||
|
// 获取URL中的user_code参数
|
||||||
|
userCode.value = route.query.user_code || 'ABC123'
|
||||||
|
|
||||||
|
// 更新邀请链接
|
||||||
|
inviteLink.value = `https://beefast.cn/invite?code=${userCode.value}`
|
||||||
|
})
|
||||||
|
|
||||||
|
// 检测小程序环境
|
||||||
|
const checkMiniProgramEnvironment = () => {
|
||||||
|
const userAgent = navigator.userAgent.toLowerCase()
|
||||||
|
isMiniProgram.value = /miniprogram/.test(userAgent) || window.__wxjs_environment === 'miniprogram'
|
||||||
|
console.log('Is Mini Program:', isMiniProgram.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理邀请按钮点击
|
||||||
|
const handleInvite = () => {
|
||||||
|
// 直接调用微信分享API，不再显示弹窗
|
||||||
|
if (window.wx && window.wx.miniProgram) {
|
||||||
|
shareToWxMiniProgram()
|
||||||
|
} else {
|
||||||
|
// 确保显示消息
|
||||||
|
ElMessage({
|
||||||
|
message: '请在微信小程序中使用此功能',
|
||||||
|
type: 'info',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用小程序分享API
|
||||||
|
const shareToWxMiniProgram = () => {
|
||||||
|
if (window.wx && window.wx.miniProgram) {
|
||||||
|
try {
|
||||||
|
window.wx.miniProgram.shareAppMessage({
|
||||||
|
title: '先领券｜再下单｜免费配送',
|
||||||
|
imageUrl: 'https://dman-1311994147.cos.ap-chengdu.myqcloud.com/uploads/1/WechatIMG6617_bdd56586-85ab-491c-ad34-74a0b1916d1f.jpg', // 分享图片地址
|
||||||
|
path: `/pages/help/index/index?shared_user_code=${userCode.value}`, // 分享的小程序页面路径
|
||||||
|
success: function() {
|
||||||
|
ElMessage({
|
||||||
|
message: '分享成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: function() {
|
||||||
|
ElMessage({
|
||||||
|
message: '分享失败',
|
||||||
|
type: 'error',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('分享出错:', error)
|
||||||
|
ElMessage({
|
||||||
|
message: '分享功能出错',
|
||||||
|
type: 'error',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
handleInvite,
|
||||||
|
isMiniProgram,
|
||||||
|
userCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 主容器样式 */
|
||||||
|
.invite-container {
|
||||||
|
padding: 50px 20px;
|
||||||
|
max-width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #EDB500;
|
||||||
|
color: #333;
|
||||||
|
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题区域 */
|
||||||
|
.invite-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-image {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-image {
|
||||||
|
max-width: 80%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 邀请卡片 */
|
||||||
|
.invite-card {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 奖励规则 */
|
||||||
|
.section-title {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #EDB500;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 6px;
|
||||||
|
height: 16px;
|
||||||
|
width: 4px;
|
||||||
|
background-color: #EDB500;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #FFF3D9;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #EDB500;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-content h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-content p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: #EDB500;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分割线 */
|
||||||
|
.divider {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before,
|
||||||
|
.divider::after {
|
||||||
|
content: '';
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #ECECEC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-text {
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 积分使用说明 */
|
||||||
|
.usage-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-color: #FFF3D9;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #EDB500;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-content p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 邀请按钮 */
|
||||||
|
.invite-action {
|
||||||
|
margin: 25px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-invite {
|
||||||
|
border-radius: 30px;
|
||||||
|
background: linear-gradient(180deg, #FFDE71 0%, #FFC300 100%);
|
||||||
|
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.08);
|
||||||
|
color: #FFF;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 18px;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: #000000;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 8px rgba(255, 107, 0, 0.3);
|
||||||
|
transition: all 0.3s;
|
||||||
|
outline: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-invite i {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-invite:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
box-shadow: 0 2px 4px rgba(255, 107, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 邀请步骤 */
|
||||||
|
.invite-steps {
|
||||||
|
margin-top: 20px;
|
||||||
|
background-color: #FFF9E6;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-title {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #EDB500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #EDB500;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-arrow {
|
||||||
|
color: #EDB500;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user