123

pages/index/share.vue

@@ -1,3 +1,4 @@
+*-+
 <template>
 	<view class="content">
 		<top></top>
@@ -12,11 +13,17 @@
 			<view class="tj-lj-tit">【链接地址】</view>
 			<view class="tj-lj flex">
 				<view class="lj-tit">邀请链接：</view>
-				<view class="lj-info clamp">{{ address }}</view>
-				<view class="lj-copy">复制链接</view>
+				<view class="lj-info clamp">{{ address | addFile }}</view>
+				<view class="lj-copy" @click="copy(address)">复制链接</view>
+			</view>
+			<view class="tj-lj1 flex">
+				<view class="lj-tit">绑定关系：</view>
+				<view class="lj-info clamp" v-if="!userInfo.spread"><input type="text" v-model="recommend" value="" /></view>
+				<view class="lj-info clamp" v-if="userInfo.spread">{{ userInfo.spread.address | addFile }}</view>
+				<view class="lj-copy" v-if="!userInfo.spread" @click="spare()">绑定推荐关系</view>
 			</view>
 		</view>
-		<view class="tj-look">查看推荐</view>
+		<view class="tj-look" @click="button()">查看推荐</view>
 		<uni-popup ref="yeji" type="center">
 			<view class="yj-wrap">
 				<view class="yj-tit">收益明细</view>
@@ -55,24 +62,50 @@
 				</view>
 			</view>
 		</uni-popup>
+		<uni-popup ref="yeji1" type="center">
+			<view class="yj-wrap">
+				<view class="yj-tit">我的推荐</view>
+				<image src="../../static/img/yj-bg.png" mode="" class="yj-logo"></image>
+				<view class="yj-info-wrap">
+					<view class="yj-info-tit flex">
+						<view class="">钱包地址</view>
+						<view class="">时间</view>
+					</view>
+					<swiper class="yj-info-scroll" :current="tabIndex" duration="300">
+						<swiper-item v-for="item in navList">
+							<scroll-view scroll-y="true" class="yj-info-scroll" @scrolltolower="loadMore">
+								<view v-for="itemt in item.list" class="">
+									<view class="flex yj-info">
+										<view class="">{{ itemt.time }}</view>
+										<view class="">{{ itemt.val }}</view>
+									</view>
+								</view>
+								<uni-load-more :status="item.loadingType"></uni-load-more>
+							</scroll-view>
+						</swiper-item>
+					</swiper>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 import top from '@/components/top/top.vue';
 import { mapState, mapMutations } from 'vuex';
+import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
 export default {
-	computed: {
-		...mapState('user', ['address', 'hasLogin', 'userInfo'])
-	},
 	comments: {
 		top
 	},
+	computed: {
+		...mapState('user', ['address', 'hasLogin', 'userInfo'])
+	},
 	filters: {
 		addFile(provider) {
 			if (provider.length >= 19) {
-				var subStr1 = provider.substr(0, 18);
-				var subStr2 = provider.substr(provider.length - 8, 8);
+				var subStr1 = provider.substr(0, 14);
+				var subStr2 = provider.substr(provider.length - 6, 6);
 				var subStr = subStr1 + '...' + subStr2;
 				provider = subStr;
 			}
@@ -103,10 +136,30 @@ export default {
 		};
 	},
 	methods: {
+		copy(value) {
+			let obj = this;
+			let content = value; //需要复制的内容
+			console.log('复制的内容:', content);
+			// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
+			const result = uniCopy(content);
+			if (result === false) {
+				uni.showToast({
+					title: '不支持'
+				});
+			} else {
+				uni.showToast({
+					title: '复制成功',
+					icon: 'none'
+				});
+			}
+		},
 		qrR() {},
 		opneYj() {
 			this.$refs.yeji.open();
 		},
+		button() {
+			this.$refs.yeji1.open();
+		},
 		// 点击切换
 		navClick(index) {
 			this.tabIndex = index;
@@ -130,6 +183,7 @@ export default {
 page {
 	background-color: #00050f;
 }
+
 .top-tit {
 	text-align: center;
 	font-size: 160rpx;
@@ -140,35 +194,43 @@ page {
 	line-height: 168rpx;
 	margin-bottom: 62rpx;
 }
+
 .box-top {
 	display: flex;
 	padding: 36rpx 41rpx 72rpx 41rpx;
+
 	.bg3 {
 		width: 56rpx;
 		height: 62rpx;
+
 		image {
 			width: 100%;
 			height: 100%;
 		}
 	}
+
 	.two {
 		margin-left: 36rpx;
+
 		image {
 			width: 100%;
 			height: 100%;
 		}
 	}
 }
+
 .center-wrap {
 	width: 680rpx;
 	height: 891rpx;
 	margin: auto;
 	position: relative;
+
 	.tj-bg {
 		position: absolute;
 		width: 680rpx;
 		height: 891rpx;
 	}
+
 	.center-tit {
 		width: 680rpx;
 		height: 102rpx;
@@ -181,6 +243,7 @@ page {
 		position: absolute;
 		top: 0;
 	}
+
 	.tj-jl {
 		text-align: center;
 		width: 61rpx;
@@ -198,6 +261,7 @@ page {
 		flex-direction: column;
 		justify-content: center;
 	}
+
 	.tj-qr {
 		width: 383rpx;
 		height: 383rpx;
@@ -209,6 +273,7 @@ page {
 		top: 204rpx;
 		margin: auto;
 	}
+
 	.tj-lj-tit {
 		width: 680rpx;
 		text-align: center;
@@ -220,6 +285,20 @@ page {
 		position: absolute;
 		top: 560rpx;
 	}
+	
+	.tj-lj1 {
+		width: 636rpx;
+		height: 67rpx;
+		background: #233b75;
+		border: 2rpx solid #08ede7;
+		border-radius: 10rpx;
+		position: absolute;
+		bottom: 30rpx;
+		right: 0;
+		left: 0;
+		margin: auto;
+	}
+	
 	.tj-lj {
 		width: 636rpx;
 		height: 67rpx;
@@ -231,38 +310,41 @@ page {
 		right: 0;
 		left: 0;
 		margin: auto;
-		.lj-tit {
-			width: 148rpx;
-			flex-shrink: 0;
-			text-align: right;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #ffffff;
-			line-height: 67rpx;
-		}
-		.lj-info {
-			width: 148rpx;
-			flex-grow: 1;
-			text-align: right;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #ffffff;
-			line-height: 67rpx;
-		}
-		.lj-copy {
-			flex-shrink: 0;
-			width: 148rpx;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #08ede7;
-			line-height: 67rpx;
-			// opacity: 0.75;
-		}
+	}
+	.lj-tit {
+		width: 148rpx;
+		flex-shrink: 0;
+		text-align: right;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+		line-height: 67rpx;
+	}
+	
+	.lj-info {
+		width: 148rpx;
+		flex-grow: 1;
+		text-align: left;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+		line-height: 67rpx;
+	}
+	
+	.lj-copy {
+		flex-shrink: 0;
+		width: 148rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #08ede7;
+		line-height: 67rpx;
+		// opacity: 0.75;
 	}
 }
+
 .tj-look {
 	width: 450rpx;
 	height: 75rpx;
@@ -277,11 +359,13 @@ page {
 	line-height: 75rpx;
 	text-align: center;
 }
+
 .yj-wrap {
 	width: 680rpx;
 	height: 854rpx;
 	background: linear-gradient(180deg, #254fab 0%, #230a8e 100%);
 	border-radius: 20rpx;
+
 	.yj-logo {
 		display: block;
 		width: 326rpx;
@@ -289,6 +373,7 @@ page {
 		margin: auto;
 		border-radius: 20px;
 	}
+
 	.yj-tit {
 		width: 100%;
 		padding-top: 60rpx;
@@ -300,6 +385,7 @@ page {
 		color: #ffffff;
 		// line-height: 38px;
 	}
+
 	.yj-hj {
 		width: 653rpx;
 		height: 147rpx;
@@ -307,6 +393,7 @@ page {
 		border: 2rpx solid #08ede7;
 		border-radius: 10rpx;
 		margin: 40rpx auto;
+
 		.yj-hj-item {
 			width: 50%;
 			text-align: center;
@@ -315,6 +402,7 @@ page {
 			font-weight: bold;
 			color: #ffffff;
 			line-height: 38rpx;
+
 			// opacity: 0.7;
 			.hj-item-val {
 				font-size: 41rpx;
@@ -326,6 +414,7 @@ page {
 			}
 		}
 	}
+
 	.yj-nav {
 		width: 582rpx;
 		border-bottom: 2rpx solid #fff;
@@ -335,18 +424,22 @@ page {
 		font-weight: bold;
 		color: #97a1d2;
 		line-height: 38rpx;
+
 		.nav-item {
 			padding: 20rpx 40rpx;
 		}
+
 		.active {
 			color: #fff;
 		}
 	}
 }
+
 .yj-info-wrap {
 	height: 362rpx;
 	width: 582rpx;
 	margin: auto;
+
 	// background-color: #fff;
 	.yj-info-tit {
 		font-size: 28rpx;
@@ -357,10 +450,12 @@ page {
 		justify-content: space-between;
 		padding: 10rpx 0;
 	}
+
 	.yj-info-scroll {
 		// touch-action: none;
 		width: 582rpx;
 		height: 320rpx;
+
 		// background-color: red;
 		.yj-info {
 			font-size: 28rpx;