457 lines
13 KiB
Vue
457 lines
13 KiB
Vue
<template>
|
|
<view class="invite-page">
|
|
<!-- 自定义导航栏 -->
|
|
<!-- 自定义导航栏 -->
|
|
<wd-navbar :bordered="false"
|
|
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
|
safeAreaInsetTop fixed placeholder>
|
|
<template #left>
|
|
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
|
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
|
@click="toPages({type:'nav'})"></text>
|
|
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
|
@click="toPages({type:'home'})"></text>
|
|
<text class="li-text-42">邀请业主</text>
|
|
</view>
|
|
</template>
|
|
</wd-navbar>
|
|
<!-- 导航栏背景 -->
|
|
<view class="nav-bg-layer"></view>
|
|
|
|
<!-- 邀请卡片区域 -->
|
|
<view class="invite-card li-w-92% li-mx-auto li-mt-40 li-bg-white li-rd-20 li-shadow-sm li-p-30">
|
|
<view class="card-header li-flex li-justify-between li-items-center">
|
|
<text class="li-text-36 li-text-#333">邀请福利</text>
|
|
<!-- <text class="li-text-28 li-text-#0070F0" @click="showRules">活动规则</text> -->
|
|
</view>
|
|
<view class="card-content li-mt-30">
|
|
<!-- 主要返佣说明 -->
|
|
<view :style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center'}"
|
|
class="commission-card li-bg-gradient-to-r li-from-#4481EB li-to-#0070F0 li-rd-20 li-p-30 li-mb-30">
|
|
<view class="li-flex li-items-center li-mb-20">
|
|
<text class="ri-shopping-bag-3-line li-text-48 li-text-#0a4696"></text>
|
|
<text
|
|
class="li-text-34 li-text-#0a4696 li-ml-15 li-font-medium">{{codeInfo?.config?.shop_brokerage_mode==1?'业主消费返佣':'业主关系'}}</text>
|
|
</view>
|
|
<view v-if="codeInfo?.config?.shop_brokerage_mode == 1" class="li-flex li-items-baseline li-mb-15">
|
|
<text
|
|
class="li-text-70 li-text-#0a4696 li-font-bold">{{codeInfo?.config?.employee_shop_brokerage_rate}}</text>
|
|
<text class="li-text-34 li-text-#0a4696 li-ml-10">%</text>
|
|
</view>
|
|
<view v-else class="li-flex li-items-baseline li-mb-15">
|
|
<text class="li-text-50 li-text-#0a4696 li-font-bold">业主专属顾问</text>
|
|
</view>
|
|
<text
|
|
class="li-text-26 li-text-#0a4696 li-opacity-100">{{codeInfo?.config?.shop_brokerage_mode==1?'邀请的业主每笔消费，您都可获得返佣':'建立长期服务关系，共创双赢'}}</text>
|
|
</view>
|
|
|
|
<!-- 收益说明 -->
|
|
<view class="benefit-list li-bg-#f8faff li-rd-16 li-p-30">
|
|
<view class="benefit-item li-flex li-items-center li-mb-30">
|
|
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
|
<text class="ri-user-add-line li-text-36 li-text-#0070F0"></text>
|
|
</view>
|
|
<view class="li-ml-20">
|
|
<text class="li-text-30 li-text-#333">邀请入驻</text>
|
|
<text class="li-text-26 li-text-#666 li-block li-mt-5">邀请业主注册并完成实名认证</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="codeInfo?.config?.shop_brokerage_mode!=1"
|
|
class="benefit-item li-flex li-items-center li-mb-30">
|
|
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
|
<text class="ri-link-m li-text-36 li-text-#0070F0"></text>
|
|
</view>
|
|
<view class="li-ml-20">
|
|
<text class="li-text-30 li-text-#333">优先关系</text>
|
|
<text class="li-text-26 li-text-#666 li-block li-mt-5">建立专属业主服务通道</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="codeInfo?.config?.shop_brokerage_mode==1" class="benefit-item li-flex li-items-center">
|
|
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
|
<text class="ri-money-cny-box-line li-text-36 li-text-#0070F0"></text>
|
|
</view>
|
|
<view class="li-ml-20">
|
|
<text class="li-text-30 li-text-#333">持续收益</text>
|
|
<text class="li-text-26 li-text-#666 li-block li-mt-5">业主每次消费都可获得返佣</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invite-button li-mt-40">
|
|
<wd-button type="primary" block custom-class="share-btn" @click="openSharePoster">
|
|
<text class="ri-share-forward-line li-mr-10"></text>立即邀请
|
|
</wd-button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 邀请记录区域 -->
|
|
<view class="invite-records li-w-92% li-mx-auto li-mt-40">
|
|
<view class="records-header li-flex li-justify-between li-items-center">
|
|
<view class="li-flex li-items-center">
|
|
<text class="li-text-34 li-text-#333">邀请记录</text>
|
|
<text class="li-text-26 li-text-#666 li-ml-15">(共{{inviteListData?.length}}人)</text>
|
|
</view>
|
|
<view v-if="codeInfo?.config?.shop_brokerage_mode==1" class="li-flex li-items-center">
|
|
<text class="ri-money-cny-box-line li-text-32 li-text-#0070F0"></text>
|
|
<text class="li-text-26 li-text-#666 li-ml-10">累计返佣：¥{{codeInfo?.sumMoney}}</text>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y class="records-list li-mt-20" @scrolltolower="loadMore">
|
|
<view v-for="(item, index) in inviteListData" :key="index"
|
|
class="record-item li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm">
|
|
<view class="li-flex li-justify-between li-items-center">
|
|
<view class="li-flex li-items-center">
|
|
<image :src="item.avatar?item.avatar:'/static/logo.png'" class="avatar"></image>
|
|
<view class="li-ml-20">
|
|
<view class="li-text-32 li-text-#333">{{item.user_name}}</view>
|
|
<view class="li-text-26 li-text-#999 li-mt-10">{{item.create_time}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="status-tag success">
|
|
已建立关系
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="inviteListData?.length>0">
|
|
<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" />
|
|
</view>
|
|
|
|
<view v-if="inviteListData?.length === 0" class="empty-state">
|
|
<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/search.png'" tip="暂无邀请记录" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
|
|
<!-- 规则弹窗 -->
|
|
<wd-popup v-model="showRulePopup" position="center" @close="showRulePopup = false">
|
|
<view class="rules-popup li-bg-white ">
|
|
<view class="rules-header li-py-20 li-px-30 li-flex li-justify-between li-items-center li-border-b">
|
|
<text class="li-text-34 li-font-medium">邀请规则</text>
|
|
<text class="ri-close-line li-text-44 li-text-#999" @click="showRulePopup = false"></text>
|
|
</view>
|
|
<view class="rules-content li-p-30">
|
|
<view class="rule-item li-mb-15 li-flex li-items-center">
|
|
<text class="rule-icon li-mr-15">1</text>
|
|
<text class="li-text-28 li-text-#333">邀请业主加入平台并完成实名认证后，您将成为业主的专属顾问</text>
|
|
</view>
|
|
<view class="rule-item li-mb-15 li-flex li-items-center">
|
|
<text class="rule-icon li-mr-15">2</text>
|
|
<text class="li-text-28 li-text-#333">作为专属顾问，您将获得更多与业主合作的机会</text>
|
|
</view>
|
|
<view class="rule-item li-flex li-items-center">
|
|
<text class="rule-icon li-mr-15">3</text>
|
|
<text class="li-text-28 li-text-#333">平台将不断完善业主顾问机制，为您创造更多价值</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</wd-popup>
|
|
<zero-loading type="wobble" v-if="loading"></zero-loading>
|
|
|
|
<SharePoster v-model:show="showPoster" :posterInfo="posterInfo" @updateShare="handleUpdateShare"></SharePoster>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
defineExpose
|
|
} from 'vue'
|
|
import {
|
|
inviteList,
|
|
inviteCode
|
|
} from '@/api/invite'
|
|
import {
|
|
useToast
|
|
} from '@/uni_modules/wot-design-uni'
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
useNavigation
|
|
} from '@/hooks/useNavigation'
|
|
import SharePoster from '@/components/SharePoster.vue'
|
|
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
const Toast = useToast()
|
|
const loading = ref(false)
|
|
const inviteListData = ref([])
|
|
const showRulePopup = ref(false)
|
|
const showPoster = ref(false)
|
|
const posterInfo = ref({})
|
|
const state = ref('loading')
|
|
const codeInfo = ref({})
|
|
const page = ref(1)
|
|
const limit = ref(10)
|
|
const userInfo = ref(uni.getStorageSync('userInfo'))
|
|
const count = ref(0)
|
|
|
|
|
|
const card_back = uni.$globalData?.RESOURCE_URL + 'invite/card-back.png'
|
|
|
|
onLoad(() => {
|
|
checkRouteStack()
|
|
getInviteCode()
|
|
loadInviteRecords()
|
|
})
|
|
|
|
const getInviteCode = async () => {
|
|
var res = await inviteCode()
|
|
if (res.code == 200) {
|
|
codeInfo.value = res.data
|
|
}
|
|
posterInfo.value = {
|
|
title: userInfo.value.owner.name,
|
|
name: userInfo.value.realname,
|
|
qrcode: codeInfo.value.code,
|
|
backImage: uni.$globalData?.RESOURCE_URL + 'invite/poster_back.png'
|
|
}
|
|
}
|
|
|
|
|
|
// 加载邀请记录
|
|
const loadInviteRecords = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await inviteList({
|
|
page: page.value,
|
|
limit: limit.value,
|
|
})
|
|
if (res.code == 200) {
|
|
if (res.data.length < 10) {
|
|
state.value = 'finished'
|
|
}
|
|
inviteListData.value = [...inviteListData.value, ...res.data]
|
|
count.value = res.count
|
|
}
|
|
|
|
} catch (error) {
|
|
Toast.error('加载失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 页面跳转
|
|
const toPages = (item) => {
|
|
if (item.type === 'nav') {
|
|
uni.navigateBack()
|
|
} else if (item.type === 'home') {
|
|
// 这里是项目内部的跳转逻辑
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
|
|
// 滚动加载更多
|
|
const loadMore = () => {
|
|
|
|
if (inviteListData?.value.length >= count.value) {
|
|
state.value = 'finished'
|
|
return
|
|
}
|
|
page++
|
|
loadInviteRecords()
|
|
}
|
|
|
|
onMounted(() => {
|
|
// loadInviteRecords()
|
|
// 初始化海报信息
|
|
|
|
})
|
|
|
|
// 显示规则弹窗
|
|
const showRules = () => {
|
|
console.log('显示规则弹窗')
|
|
showRulePopup.value = true
|
|
}
|
|
|
|
// 打开分享海报
|
|
const openSharePoster = () => {
|
|
showPoster.value = true
|
|
}
|
|
|
|
// 处理分享海报关闭
|
|
const handleUpdateShare = (val) => {
|
|
showPoster.value = val
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f7f8fc;
|
|
}
|
|
|
|
.invite-page {
|
|
min-height: 100vh;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
/* 导航背景层 */
|
|
.nav-bg-layer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(var(--status-bar-height) + 88rpx);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
|
z-index: -1;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.invite-card .card-content .commission-card {
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.invite-card .card-content .commission-card .ri-shopping-bag-3-line {
|
|
font-size: 48rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.invite-card .card-content .commission-card .li-text-34 {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.invite-card .card-content .commission-card .li-text-26 {
|
|
font-size: 26rpx;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.invite-card .card-content .benefit-list {
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
background: #f8faff;
|
|
}
|
|
|
|
.invite-card .card-content .benefit-list .benefit-item .icon-box {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 12rpx;
|
|
background: #E1F0FF;
|
|
margin-right: 20rpx;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-user-add-line,
|
|
.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-link-m,
|
|
.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-money-cny-box-line {
|
|
font-size: 36rpx;
|
|
color: #0070F0;
|
|
}
|
|
|
|
.invite-card .card-content .benefit-list .benefit-item .li-text-30 {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.invite-card .card-content .benefit-list .benefit-item .li-text-26 {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
display: block;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.invite-card .share-btn {
|
|
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
|
|
border: none !important;
|
|
height: 90rpx !important;
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.invite-records .records-list {
|
|
height: calc(100vh - 600rpx);
|
|
}
|
|
|
|
.invite-records .records-list .record-item .avatar {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.invite-records .records-list .record-item .status-tag {
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.invite-records .records-list .record-item .status-tag.success {
|
|
color: #07c160;
|
|
background-color: rgba(7, 193, 96, 0.1);
|
|
}
|
|
|
|
.invite-records .records-list .record-item .status-tag.pending {
|
|
color: #f0ad4e;
|
|
background-color: rgba(240, 173, 78, 0.1);
|
|
}
|
|
|
|
.rules-popup {
|
|
width: 580rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rules-popup .rules-header {
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
position: relative;
|
|
}
|
|
|
|
.rules-popup .rules-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
transform: scaleY(0.5);
|
|
}
|
|
|
|
.rules-popup .rules-header .ri-close-line {
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.rules-popup .rules-content {
|
|
padding: 40rpx 30rpx 50rpx;
|
|
}
|
|
|
|
.rules-popup .rules-content .rule-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.rules-popup .rules-content .rule-item .rule-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
background: #0070F0;
|
|
color: white;
|
|
font-size: 24rpx;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rules-popup .rules-content .rule-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
::v-deep .wd-divider,
|
|
.wd-divider::after,
|
|
.wd-divider::before {
|
|
border: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
</style> |