BCMM/pages/index/index.vue

<template>
	<view class="container">
		<navBar></navBar>
		<view class="contenCenter">
			<!-- 轮播图 -->
			<swiper class="top-swiper position-relative" autoplay="true" duration="400" interval="5000">
				<swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item">
					<image :src="baseURL+item" />
				</swiper-item>
			</swiper>
			<!-- 轮播图END -->
			
			<!-- 中间列表 -->
			<view class="itemList flex padding-r-30 margin-t-30">
				<view class="itemLeft flex">
					<image class="itemImg topOne" src="../../static/img/itemList.png" mode="widthFix"></image>
					<view class="itemTitle">
						{{($t("home.共创社区"))}}
					</view>
				</view>
				<view class="itemRight flex" @click="navto('./community')">
					<view>
						<view class="moneyLine text-linear-gradient">
							$300
						</view>
						<view class="margin-t-10">
							{{($t("home.立即前往"))}}
						</view>
					</view>
					<image class="next" src="../../static/img/mininext.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="itemList flex padding-r-30 ">
				<view class="itemLeft flex">
					<image class="itemImg" src="../../static/img/itemList1.png" mode="center"></image>
					<view class="itemTitle">
						{{($t("home.闪兑"))}}
					</view>
				</view>
				<view class="itemRight flex" @click="navto('./buling')">
					<view>
						{{($t("home.立即前往"))}}
					</view>
					<image class="next" src="../../static/img/mininext.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="itemList flex padding-r-30">
				<view class="itemLeft flex">
					<image class="itemImg" src="../../static/img/itemList2.png" mode="center"></image>
					<view class="itemTitle">
						{{($t("home.节点认购"))}}
					</view>
				</view>
				<view class="itemRight flex" @click="navto('./node')">
					<view>
						{{($t("home.立即前往"))}}
					</view>
					<image class="next" src="../../static/img/mininext.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="itemList flex padding-v-30 padding-c-30">
				<view class="itemLeft flex">
					<view class="imageBg flex-center">
						<image class="bgTip" src="../../static/img/itemList3.png" mode="center"></image>
					</view>
					<view class="itemTitle">
						<view class="nameBox flex flex-start">
							<view class="name">
								BCMM
							</view>
							<!-- <view class="upNum">
								<text class="font-size-sm">+</text>10%
							</view> -->
						</view>
						<view class="type margin-t-10">
							{{($t("home.币种"))}}
						</view>
					</view>
				</view>
				<view class="itemRight">
					<view class="money">
						{{indexBase.price}}U
					</view>
					<view class="moneyText">
						{{($t("home.今日价格"))}}
					</view>
				</view>
			</view>
			<view class="itemList flex padding-r-30">
				<view class="itemLeft flex">
					<image class="itemImg" src="../../static/img/itemList4.png" mode="center"></image>
					<view class="itemTitle">
						{{($t("home.模式说明"))}}
					</view>
				</view>
				<view class="itemRight flex" @click="navto('./info')">
					<view>
						{{($t("home.立即前往"))}}
					</view>
					<image class="next" src="../../static/img/mininext.png" mode="scaleToFill"></image>
				</view>
			</view>
			<!-- 中间列表END -->
			<!-- 邀请 -->
			<view class="contentText">
				{{$t('home.邀请地址')}}
			</view>
			<view class="contentBox flex background-linear-gradient" @click="copyShareLink">
				<view class="shareLink clamp">
					{{userInfo.address}}
				</view>
				<view class="copy">
					{{($t("home.复制"))}}
				</view>
			</view>
			<!-- 邀请END -->
			
			<!-- 功能排 -->
			<view class="listConfige flex">
				<view class="list background-linear-gradient" @click="navto('/pages/user/shareItem')">
					<view class="listImg">
						<image class="imageTip" src="../../static/img/config01.png" mode="widthFix"></image>
					</view>
					<view class="listName">
						{{($t("home.我的邀请"))}}
					</view>
					<view class="listTip">
						{{($t("home.邀请团队信息"))}}
					</view>
				</view>
				<view class="list background-linear-gradient"  @click="navto('/pages/user/user')">
					<view class="listImg">
						<image class="imageTip" src="../../static/img/config02.png" mode="widthFix"></image>
					</view>
					<view class="listName">
						{{($t("home.我的资产"))}}
					</view>
					<view class="listTip">
						{{($t("home.资产明细"))}}
					</view>
				</view>
				<view class="list background-linear-gradient"  @click="navto('/pages/user/myDetail?type=BCMM')">
					<view class="listImg">
						<image class="imageTip" src="../../static/img/config03.png" mode="widthFix"></image>
					</view>
					<view class="listName">
						
						{{($t("home.我的收益"))}}
					</view>
					<view class="listTip">
						{{($t("home.收益明细"))}}
					</view>
				</view>
			</view>
			<!-- 功能排END -->
			<!-- 说明 -->
			<view class="listConfige flex">
				<view class="list big background-linear-gradient">
					<view class="listImg">
						<image class="imageTip" src="../../static/img/detail01.png" mode="center"></image>
					</view>
					<view class="listMinName">
						{{($t("home.共创"))}}
					</view>
					<view class="listMinTip">
						{{($t("home.行业领先"))}}
					</view>
				</view>
				<view class="list big background-linear-gradient">
					<view class="listImg">
						<image class="imageTip" src="../../static/img/detail02.png" mode="center"></image>
					</view>
					<view class="listMinName">
						{{($t("home.共享"))}}
					</view>
					<view class="listMinTip">
						{{($t("home.为全球数十个国家"))}}
					</view>
				</view>
				<view class="list big background-linear-gradient">
					<view class="listImg">
						<image class="imageTip" src="../../static/img/detail03.png" mode="center"></image>
					</view>
					<view class="listMinName">
						{{($t("home.共富"))}}
					</view>
					<view class="listMinTip">
						{{($t("home.BMCC生态"))}}
					</view>
				</view>
			</view>
			<!-- 说明END -->
			
			<!-- 底部合作伙伴 -->
			<view class="footerTitle margin-t-30 padding-t-30">
				{{($t("home.合作伙伴"))}}
			</view>
			<view class="footerTitle margin-t-20">
				Partners
			</view>
			<view class="footerImage">
				<image class="footerImg" src="../../static/img/footerImg.png" mode="scaleToFill"></image>
			</view>
			<!-- 底部合作伙伴END -->
		</view>
		
		<!-- <taber></taber> -->
	</view>
</template>
<script>
	import {
		loadIndexs,
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	// import taber from "@/components/footer/footer.vue";
	import navBar from "@/components/nav/nav.vue"
	export default {
		filters: {
			failNumber: function(number) {
				return +(+number).toFixed(2)
			}
		},
		components: {
			navBar
			// taber
		},
		data() {
			return {
				bannerList: [],
				indexBase: {
					price: 'loding',
				}
			}
		},
		computed: {
			...mapState(['baseURL', 'urlFile']),
			...mapState("user", ['userInfo', 'hasLogin']),
		},
		onLoad(option) {
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
		},
		onShow() {
			this.loadData();
			this.getUserInfo();
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			
			navto(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url,
					});
				}
			},
			// 复制分享链接
			copyShareLink() {
				const that = this;
				if (!that.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.setClipboardData({
						data: that.baseURL + that.urlFile + '/#/pages/index/index?spread=' + that.userInfo.address,
						showToast: false,
						success: function() {
							uni.showToast({
								title: that.$t('home.成功')
							})
						},
					});
				}
			},
			// 请求载入数据
			async loadData() {
				loadIndexs().then((res) => {
					this.bannerList = res.data.banner.split(',');
					this.indexBase = res.data;
					console.log(this.bannerList)
				}).catch((res) => {
					console.log(res);
				})
			},
			// 获取更新用户信息
			getUserInfo() {
				getUserInfo().then((res) => {
					this.setUserInfo(res.data);
				}).catch((res) => {
					console.log(res);
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		line-height: 1;
		background-color: rgb(12, 8, 21);
	}
	.contenCenter{
		padding: 25rpx;
	}

	// 顶部轮播图
	.top-swiper {
		height: 320rpx;
		border-radius: 30rpx;
		overflow: hidden;
		z-index: 9;

		// margin: 20rpx 0 0;
		image {
			width: 100%;
			height: 320rpx;
		}
	}


	.itemList {
		margin-bottom: 30rpx;
		background: url("../../static/img/itemBg.png") no-repeat;
		background-size: 100% 100%;
		color: #FFF;

		.itemLeft {
			font-weight: bold;

			.itemImg {
				width: 158rpx;
				height: 158rpx;

				&.topOne {
					width: 158rpx;
				}
			}

			.itemTitle {
				font-size: 35rpx;
			}

		}

		.itemRight {
			font-size: 20rpx;
			text-align: right;

			.next {
				margin-left: 10rpx;
				width: 11rpx;
				height: 18rpx;
			}

			.moneyLine {
				font-weight: bold;
				font-size: 28rpx;
			}

			.money {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: right;
			}

			.moneyText {
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
				opacity: 0.3;
				margin-top: 10rpx;
			}
		}

		.itemTitle {
			.name {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.upNum {
				background: rgba(28, 215, 183, .22);
				border-radius: 19px;
				font-weight: 500;
				font-size: 22rpx;
				color: #1AD9BA;
				padding: 10rpx 20rpx;
				margin-left: 10rpx;
			}

			.type {
				font-size: 22rpx;
				opacity: .30;

			}
		}

		.imageBg {
			width: 83rpx;
			height: 83rpx;
			background: #2C2933;
			border-radius: 10rpx;
			margin-right: 20rpx;

			.bgTip {
				width: 33rpx;
				height: 41rpx;
			}
		}
	}

	.contentText {
		font-weight: 500;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		padding-left: 30rpx;
		padding-top: 30rpx;
	}

	.contentBox {
		margin-top: 30rpx;
		color: #FFF;
		border-radius: 100rpx;
		line-height: 1;
		line-height: 70rpx;

		.shareLink {
			padding: 0 30rpx;
		}

		.copy {
			background: linear-gradient(90deg, #7D32FF, #3EE0FF);
			border-radius: 100rpx;
			padding: 0rpx 50rpx;
			flex-shrink: 0;
		}
	}

	.listConfige {
		margin-top: 100rpx;
		color: #FFF;
		text-align: center;

		.list {
			width: 215rpx;
			height: 244rpx;
			border-radius: 30rpx;
			line-height: 1;

			.listImg {
				.imageTip {
					margin-top: -130rpx;
					margin-left: -40rpx;
					width: 280rpx;
					height: 280rpx;
				}
			}

			.listName {
				margin-top: -40rpx;
				font-size: 33rpx;
			}

			.listTip {
				margin-top: 20rpx;
				ont-weight: 500;
				font-size: 23rpx;
				opacity: 0.39;
			}

			.listMinName {
				margin-top: -60rpx;
			}

			.listMinTip {
				line-height: 1.5;
				margin-top: 20rpx;
				ont-weight: 400;
				font-size: 17rpx;
				opacity: 0.41;
				padding: 0 10rpx;
			}

			&.big {
				height: 287rpx;
			}
		}
	}

	.footerTitle {
		line-height: 1;
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.footerImage {
		text-align: center;
		padding-bottom: 100rpx;

		.footerImg {
			width: 617rpx;
			height: 268rpx;
		}
	}
</style>