yzf/pages/index/index.vue

<template>
	<view class="container">
		<view class="top flex">
			<view class="icon1 flex">
				<image src="/static/image/img01.png" style="width: 139rpx;" mode="widthFix"></image>
				<view class="myName">我的</view>
			</view>
			<view class="flex">
				<image src="/static/image/img03.png" style="width: 39rpx;margin-right: 38rpx;" mode="widthFix"></image>
				<image src="/static/image/img02.png" style="width: 39rpx;" mode="widthFix"></image>
			</view>
		</view>
		<view class="swiper-box">
			<u-swiper :list="swiperList" indicator indicatorMode="line" height="280rpx" circular></u-swiper>
		</view>
		<view class="flex noteBox">
			<view class="flex_item noteTpl">
				<image src="/static/image/img04.png" style="width: 42rpx;" mode="widthFix"></image>
				<view class="clamp textTpl">上线活动的公告等等公告内容上线活动的公告等等公告内容等上线活动的公告等等公告内容等</view>
			</view>
			<view class="tip"></view>
		</view>
		<view class="flex navList">
			<view class="navTpl" @click="openurl('/pages/index/recharge')">
				<image src="/static/image/img06.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">充值</view>
			</view>
			<view class="navTpl" @click="openurl('/pages/index/personal')">
				<image src="/static/image/img07.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">实名认证</view>
			</view>
			<view class="navTpl" @click="openurl('/pages/index/transaction')">
				<image src="/static/image/img08.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">交易密码</view>
			</view>
			<view class="navTpl" @click="openurl('/pages/index/information')">
				<image src="/static/image/img09.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">收款信息</view>
			</view>
			<view class="navTpl" @click="openKf">
				<image src="/static/image/img10.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">联系客服</view>
			</view>
		</view>
		<view class="starBox flex">
			<view class="starTpl flex_item">
				<image src="/static/image/img12.png" style="width: 75rpx;" mode="widthFix"></image>
				<view class="starText">
					<view class="name">okx(欧易)</view>
					<view class="num">7.21</view>
				</view>
			</view>
			<view class="starTpl flex_item">
				<image src="/static/image/img13.png" style="width: 75rpx;" mode="widthFix"></image>
				<view class="starText">
					<view class="name">STAR(星空）</view>
					<view class="num">7.21</view>
				</view>
			</view>
		</view>
		<image src="/static/image/img11.png" style="width: 692rpx;padding-top: 31rpx;" mode="widthFix"></image>
		<view class="titleBox">
			<view class="titleTip">累计成交量</view>
		</view>
		<view class="flex totalBox">
			<view class="totalTpl">
				<view class="totalNum">10,910,000<text>USDT</text></view>
				<view class="totalName">累计买入</view>
			</view>
			<view class="totalTpl">
				<view class="totalNum">10,910,000<text>USDT</text></view>
				<view class="totalName">累计卖出</view>
			</view>
		</view>
		<view class="titleBox">
			<view class="titleTip">平台优势</view>
		</view>
		<view class="advantageBox flex">
			<view class="advantageTpl">
				<image src="/static/image/img16.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">简单</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img15.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">安全</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img14.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">省心</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img17.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">极速</view>
			</view>
		</view>
		<uni-popup
			ref="popupkf"
			type="center">
			<view class="popup-box">
				<view class="img">
					<image
						src="/static/image/img24.png"
						mode=""></image>
				</view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image
							src="/static/image/img25.png"
							mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ kefu }}</view>
					<view class="comfirm-box">
						<view
							class="cancel"
							@click="cancel"
							>取消</view
						>
						<view
							class="comfirm"
							@click="comfirm(kefu)"
							>复制微信</view
						>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getIndex
	} from '@/api/index.js';
	import {
		getGameList,
	} from "@/api/game.js";
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				gameList: [],
				active_user: '0',
				swiperList:['/static/image/img05.png'],
				kefu:'ch125221',
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo']),
			label() {
				const label = this.langList.find((item) => {
					console.log(this.lang, item.value);
					return item.value == this.lang
				}).label;
				return label
			}
		},
		onLoad(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		onShow() {
			this.getGameList();
			this.loadData();
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			...mapActions({
				setLang: "setLang",
			}),
			openurl(url){
				uni.navigateTo({
					url: url,
					fail: (err) => {
						uni.showModal({
							title: '错误',
							content: err,
							showCancel: false,
						});
					}
				});
			},
			// 打开客服
			openKf() {
				this.$refs.popupkf.open();
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
			// 请求载入数据
			async loadData() {
				getIndex({})
					.then(({
						data
					}) => {
						this.active_user = data.active_user
						console.log(data);
					})
					.catch(e => {});
			},
			selectLang(value) {
				this.setLang(this.langList[value.detail.value].value);
			},

			getGameList() {
				getGameList().then((res) => {
					this.gameList = res.data.list;

					if (this.gameList.length > 2) {
						this.gameList = this.gameList.slice(0, 2)
					}
				})
			},
			comfirm(text) {
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: "不支持",
					});
				} else {
					uni.showToast({
						title: "复制成功",
						icon: "none",
					});
				}
				this.$refs.popupkf.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function () {
						console.log("success");
						return true;
					},
				});
				//#endif
			
				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported("copy")) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement("textarea");
				textarea.value = content;
				textarea.readOnly = "readOnly";
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand("copy"); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #051137;
		padding: 0rpx 30rpx;
		padding-top: calc(60px + var(--status-bar-height));
		padding-bottom: 50rpx;
	}
	.top {
		font-weight: 500;
		padding: 40rpx 30rpx 24rpx 30rpx;
		line-height: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #051137;
		z-index: 99;
		.icon1 {
			line-height: 0;
			position: relative;
			.myName{
				position: absolute;
				right: 22rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #2884FF;
			}
		}
	}
	.noteBox{
		padding: 46rpx 0rpx;
		.noteTpl{
			color: #fff;
			width: 85%;
			.textTpl{
				width: calc(100% - 42rpx);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				padding-left: 30rpx;
			}
		}
		.tip{
			width: 12rpx;
			height: 12rpx;
			background: #F7453D;
			border-radius: 100%;
		}
	}
	.navList{
		text-align: center;
		padding:15rpx 0rpx;
		.navTpl{
			.navName{
				padding-top: 23rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
	.starBox{
		padding-top: 43rpx;
		.starTpl{
			width: 48%;
			background: #1F2A4A;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50,50,52,0.06);
			border-radius: 20rpx;
			padding: 20rpx 18rpx;
			.starText{
				padding-left: 25rpx;
				.name{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 24rpx;
				}
				.num{
					padding-top: 15rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFA235;
					line-height: 24rpx;
				}
			}
		}
	}
	.titleBox{
		text-align: center;
		padding: 45rpx 0rpx;
		.titleTip{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			position: relative;
			font-weight: bold;
			font-size: 42rpx;
			color: #FFFFFF;
			line-height: 110rpx;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 3px solid #FFFFFF;
				border-radius: 25rpx;
			}
		}
	}
	.totalBox{
		padding-top: 30rpx;
		.totalTpl{
			width: 45%;
			background: url('../../static/image/img18.png') no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 45rpx 0rpx;
			.totalNum{
				font-family: FZCuHeiSongS-B-GB;
				font-weight: 400;
				font-size: 39rpx;
				color: #66FFFF;
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #66FFFF;
				}
			}
			.totalName{
				padding-top: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
	.advantageBox{
		padding-top: 50rpx;
		.advantageTpl{
			text-align: center;
			.advantageName{
				padding-top: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;
	
		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;
	
			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 450rpx;
				height: 132rpx;
			}
		}
	
		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;
	
			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;
	
				.title {
				}
	
				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}
	
			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}
	
			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;
	
				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;
	
					font-size: 32rpx;
					color: #605128;
				}
	
				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(
						-90deg,
						#d1ba77 0%,
						#f7e8ad 100%
					);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}
</style>