midi-h5/pages/other/income.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>