665 lines
15 KiB
Vue
665 lines
15 KiB
Vue
<template>
|
|
<view class="view-page">
|
|
<view class="nav w-fill flex-line"
|
|
:style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}">
|
|
<view class="icon-image" @click="closeWeb">
|
|
<uni-icons type="left" size="24"></uni-icons>
|
|
</view>
|
|
<view class="color-3 title font-w500 font-32">
|
|
邀请收益
|
|
</view>
|
|
<view class="font-24" @click="bind" style="color: #FF8ACC;">
|
|
手动绑定
|
|
</view>
|
|
</view>
|
|
<view class="content-view" v-if="detailData">
|
|
<view class="content">
|
|
<view class="nav-coinList flex-container">
|
|
<view v-for="(item,index) in listData" :key="index" class="flex-item decorate-box flex-line">
|
|
<view class="image-icon">
|
|
<img :src="item.icon" alt="" />
|
|
</view>
|
|
<view class="decorate-title">
|
|
<view class="title font-24 font-w400">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="value font-24 font-w400 flex-line">
|
|
<view class="">
|
|
{{detailData[item.prop]}}
|
|
</view>
|
|
<view v-if="!index" class="ml-6" @click="exChangeData"
|
|
style="width: 68rpx;height: 32rpx;">
|
|
<img src="@/static/image/income/duihuan.png" alt="" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 文字 -->
|
|
<view class="title-view">
|
|
<view class="QRCode-view w-fill flex-line flex-spaceB">
|
|
<view class="flex-line w-fill flex-spaceB">
|
|
<view class="">
|
|
<view class="color-3 font-32 font-w500">
|
|
羽声语音
|
|
</view>
|
|
<view class="color-3 font-32 font-w500">
|
|
邀请码
|
|
</view>
|
|
<view class="color-6 font-24 mt-24">
|
|
一级充值的4%为邀请收益
|
|
</view>
|
|
</view>
|
|
<view class="QRCodeImage">
|
|
<!-- <img src="@/static/image/income/QRCode.png" alt="" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="flex-line w-fill mt-24 flex-spaceB">
|
|
<view class="Code-view color-3 font-w500" style="letter-spacing: 44rpx;text-align: center;">
|
|
{{detailData.init_code}}
|
|
</view>
|
|
<view class="copy-button color-3 font-w500 font-24" @click="copyText(detailData.init_code)">
|
|
复制
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="NavigationTabs-view">
|
|
<NavigationTabs :tabs-data="[{type:1,value:'我的邀请'},{type:2,value:'账单明细'}]"
|
|
:default-active="currentIndex" @tab-change="handleTabChange" />
|
|
<Table :tableData="dataList" v-if="!currentIndex" />
|
|
<Table :tableData="dataList" v-else :tableLabel="columns" />
|
|
</view>
|
|
</view>
|
|
<view class="tiXian" @click="Withdrawal">
|
|
<img src="@/static/image/income/tixian.png" alt="" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="bindPopup" type="center" background-color="#fff" border-radius="32rpx">
|
|
<view class="bindPopup-view">
|
|
<view class="bind-title font-32 font-w500 color-3">
|
|
<view class="">
|
|
手动绑定
|
|
</view>
|
|
<img @click="closeBind" class="closeIcon" src="@/static/image/income/close.png" alt="" />
|
|
</view>
|
|
|
|
<view class="bind-input">
|
|
<input class="uni-input" v-model="bindValue" placeholder="输入好友邀请码" />
|
|
</view>
|
|
<view class="color-3 font-w400 font-24" style="text-align: left;">
|
|
{{detailData.explain}}
|
|
</view>
|
|
<view class="bind-footer" @click="decorate">
|
|
<view class="confirm-button flex-line">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import headerHeight from '@/component/headerHeight.vue';
|
|
import http from '@/until/http.js';
|
|
import Table from '@/component/table.vue'
|
|
import ZS from '@/static/image/income/zuanshi.png';
|
|
import Coin from '@/static/image/income/coin.png';
|
|
import Tx from '@/static/image/income/tixian.png';
|
|
import DH from '@/static/image/income/duihuan.png';
|
|
import NavigationTabs from '@/component/tab.vue';
|
|
import WeChat from '@/static/image/income/WeChat.png';
|
|
import PYQ from '@/static/image/income/pyq.png';
|
|
import Qcode from '@/static/image/income/Qcode.png';
|
|
import QQ from '@/static/image/income/QQ.png';
|
|
export default {
|
|
components: {
|
|
NavigationTabs,
|
|
headerHeight,
|
|
Table
|
|
},
|
|
data() {
|
|
return {
|
|
errorPage: false,
|
|
detailData: null,
|
|
currentIndex: 0,
|
|
// 金币是两位，钻石四位。
|
|
listData: [{
|
|
icon: ZS,
|
|
prop: 'diamond_total',
|
|
value: 120,
|
|
title: '钻石余额'
|
|
},
|
|
{
|
|
icon: Coin,
|
|
value: 200,
|
|
prop: 'today_earnings',
|
|
title: '今日收益'
|
|
},
|
|
{
|
|
icon: Coin,
|
|
value: 200,
|
|
prop: 'total_earnings',
|
|
title: '累计收益'
|
|
}
|
|
],
|
|
statusBarHeight: 0,
|
|
bindValue: '',
|
|
dataList: [],
|
|
columns: [
|
|
{ title: '昵称', key: 'nickname', width: '20%' },
|
|
{ title: '时间', key: 'createtime', width: '35%' },
|
|
{ title: '充值金额', key: 'coin', width: '30%' },
|
|
{ title: '获得收益', key: 'earnings', width: '30%' }
|
|
]
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const {
|
|
id,
|
|
h
|
|
} = options
|
|
uni.setStorageSync('token', id)
|
|
if (uni.getStorageSync('token')) this.gettabs()
|
|
this.statusBarHeight = this.getStatusBarHeight()
|
|
this.statusBarHeight = h
|
|
},
|
|
methods: {
|
|
copyText(text) {
|
|
if(text) {
|
|
if (uni.getSystemInfoSync().platform === 'h5') {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
} else {
|
|
uni.setClipboardData({
|
|
data: text,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '已复制到剪贴板',
|
|
icon: 'none',
|
|
duration: 1500
|
|
});
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '复制失败，请重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '暂无可复制文本',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
getStatusBarHeight() {
|
|
const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
|
|
uni.setStorageSync('BarHeight', systemInfo.statusBarHeight)
|
|
return systemInfo.statusBarHeight || 0;
|
|
},
|
|
closeWeb() {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
// 通过 messageHandlers 调用 iOS 原生方法
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'closeWeb'
|
|
});
|
|
} else if (platform === 'android') {
|
|
// 调用 Android 原生方法
|
|
window.Android.closeWeb();
|
|
}
|
|
},
|
|
async gettabs() {
|
|
http.get('/api/Invited/get_init_code', {
|
|
token: uni.getStorageSync('token') ?? '',
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
// console.log(data)
|
|
this.detailData = data
|
|
}
|
|
this.$nextTick(() => {
|
|
this.getData()
|
|
})
|
|
this.errorPage = false
|
|
}).catch(error => {
|
|
this.errorPage = true
|
|
});
|
|
},
|
|
getData() {
|
|
if (this.currentIndex) {
|
|
// 账单列表
|
|
this.getBillList()
|
|
} else {
|
|
// 邀请列表
|
|
this.getInvitedList()
|
|
|
|
}
|
|
},
|
|
getInvitedList() {
|
|
http.get('/api/Invited/invited_list', {
|
|
token: uni.getStorageSync('token') ?? '',
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
this.dataList = data
|
|
}
|
|
}).catch(error => {});
|
|
},
|
|
getBillList() {
|
|
http.get('/api/Invited/bill_list', {
|
|
token: uni.getStorageSync('token') ?? '',
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
this.dataList = data
|
|
}
|
|
}).catch(error => {
|
|
this.errorPage = true
|
|
});
|
|
},
|
|
// 提现
|
|
Withdrawal() {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'Withdrawal'
|
|
});
|
|
} else if (platform === 'android') {
|
|
window.Android.Withdrawal();
|
|
}
|
|
},
|
|
invite() {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'inviteUser'
|
|
});
|
|
} else if (platform === 'android') {
|
|
window.Android.inviteUser();
|
|
}
|
|
},
|
|
exChangeData() {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'exchange'
|
|
});
|
|
} else if (platform === 'android') {
|
|
window.Android.exchange();
|
|
}
|
|
},
|
|
closePopup() {
|
|
this.$refs.popup.close()
|
|
},
|
|
handleTabChange({
|
|
index,
|
|
tab
|
|
}) {
|
|
this.currentIndex = index
|
|
// console.log(this.currentIndex)
|
|
this.getData()
|
|
},
|
|
// 绑定
|
|
bind() {
|
|
this.$refs.bindPopup.open('center')
|
|
},
|
|
closeBind() {
|
|
this.$refs.bindPopup.close()
|
|
},
|
|
decorate() {
|
|
if (this.bindValue) {
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
http.post('/api/Invited/invited_bind', {
|
|
token: uni.getStorageSync('token') ?? '',
|
|
init_code: this.bindValue
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = response
|
|
if (code) {
|
|
uni.showToast({
|
|
title: '绑定成功',
|
|
icon: 'success',
|
|
mask: true,
|
|
duration: 1000
|
|
});
|
|
uni.hideLoading()
|
|
this.closeBind()
|
|
} else {
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: 'error',
|
|
mask: true,
|
|
duration: 1000
|
|
});
|
|
uni.hideLoading()
|
|
this.closeBind()
|
|
}
|
|
|
|
}).catch(error => {});
|
|
} else {
|
|
uni.showToast({
|
|
title: '请输入邀请码',
|
|
icon: 'error',
|
|
mask: true,
|
|
duration: 1000
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.view-page {
|
|
width: 100vw;
|
|
|
|
margin: 0 auto;
|
|
|
|
.nav {
|
|
padding: 24rpx;
|
|
justify-content: space-between;
|
|
width: calc(100% - 48rpx);
|
|
background: #fff;
|
|
|
|
.icon-image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.content-view {
|
|
min-height: 93vh;
|
|
padding-top: 24rpx;
|
|
background: #FBEEDD;
|
|
background-image: url('@/static/image/income/Maskgroup.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.content {
|
|
padding: 0 30rpx;
|
|
width: calc(100vw - 60rpx);
|
|
|
|
.tiXian {
|
|
width: 44rpx;
|
|
height: 96rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.nav-coinList {
|
|
width: 100%;
|
|
min-height: 108rpx;
|
|
background-image: url('@/static/image/income/Rectangle.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
|
|
.flex-container {
|
|
display: flex;
|
|
/* 启用 Flex 布局 */
|
|
flex-wrap: wrap;
|
|
/* 允许换行 */
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-item {
|
|
flex: 0 0 calc(30%);
|
|
/* 基础宽度25% 减去间隔 */
|
|
// margin: 5px;
|
|
/* 元素间距 */
|
|
box-sizing: border-box;
|
|
/* 包含内边距和边框 */
|
|
border-radius: 14rpx;
|
|
/* 样式美化（可选） */
|
|
// background-color: #fff;
|
|
// padding: 20rpx;
|
|
text-align: center;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
.image-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.decorate-title {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
text-align: left;
|
|
|
|
.title {
|
|
color: #6A2E00;
|
|
}
|
|
|
|
.value {
|
|
color: #FF2727;
|
|
width: 100%;
|
|
// justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-view {
|
|
width: calc(100% - 60rpx);
|
|
height: 68rpx;
|
|
position: absolute;
|
|
top: 770rpx;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
.QRCode-view {
|
|
background: #F7F2F1;
|
|
flex-wrap: wrap;
|
|
padding: 32rpx;
|
|
border-radius: 32rpx;
|
|
width: 100%;
|
|
|
|
// min-height:338rpx;
|
|
.QRCodeImage {
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.Code-view {
|
|
background-color: #E5E5E5;
|
|
border-radius: 4rpx;
|
|
width: 70%;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.copy-button {
|
|
// width: 112rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #0DFFB9;
|
|
text-align: center;
|
|
padding: 12rpx 24rpx;
|
|
}
|
|
}
|
|
|
|
.title-bg {
|
|
width: 80%;
|
|
height: 100%;
|
|
background-image: url('@/static/image/income/title-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.NavigationTabs-view {
|
|
margin-top: 32rpx;
|
|
padding: 24rpx 32rpx;
|
|
background-color: #F7F2F1;
|
|
width: calc(100% - 60rpx);
|
|
border-radius: 10rpx;
|
|
|
|
.navigation-container {
|
|
::v-deep .nav-tabs {
|
|
// background: #F7F2F1;
|
|
display: inline-flex !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-view {
|
|
padding: 32rpx;
|
|
min-height: 300rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
// background: #FFFFFF;
|
|
|
|
.share-view {
|
|
display: flex;
|
|
/* 启用 Flex 布局 */
|
|
flex-wrap: wrap;
|
|
/* 允许换行 */
|
|
justify-content: center;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.share-item {
|
|
flex: 0 0 calc(25% - 10px);
|
|
/* 基础宽度25% 减去间隔 */
|
|
margin: 5px;
|
|
/* 元素间距 */
|
|
box-sizing: border-box;
|
|
/* 包含内边距和边框 */
|
|
border-radius: 14rpx;
|
|
/* 样式美化（可选） */
|
|
// background-color: #fff;
|
|
// padding: 20rpx;
|
|
// text-align: center;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
|
|
.share-icon {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bindPopup-view {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
padding: 24rpx;
|
|
width: 70vw;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
.closeIcon {
|
|
width: 22rpx;
|
|
height: 26rpx;
|
|
position: absolute;
|
|
top: 34rpx;
|
|
right: 34rpx;
|
|
}
|
|
|
|
.bind-title {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.bind-input {
|
|
background: #EFF2F8;
|
|
border-radius: 22rpx;
|
|
padding: 18rpx 32rpx;
|
|
margin: 70rpx 0;
|
|
}
|
|
|
|
.bind-footer {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
margin-top: 78rpx;
|
|
|
|
.confirm-button {
|
|
width: 356rpx;
|
|
height: 84rpx;
|
|
background: #0DFFB9;
|
|
border-radius: 106rpx;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
width: 100%;
|
|
height: 140rpx;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 0;
|
|
right: 0;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.footer-button {
|
|
width: 186rpx;
|
|
height: 68rpx;
|
|
background: linear-gradient(180deg, #EE9D87 0%, #E74B47 100%);
|
|
box-shadow: inset 0rpx 8rpx 0rpx 0rpx #EA805F;
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |