yzf/pages/index/index.vue

<template>
	<view class="container">
		<view class="top flex">
			<view class="icon1 flex" @click="openurl('/pages/user/set/set')">
				<image src="/static/image/img01.png" style="width: 139rpx;height: 55rpx;" mode="widthFix"></image>
				<view class="myName">我的</view>
			</view>
			<!-- #ifdef APP -->
			<view class="flex" @click="saoma">
				<image src="/static/image/img03.png" style="width: 39rpx;height: 36rpx;" mode="widthFix"></image>
				<!-- <image src="/static/image/img02.png" style="width: 39rpx;height: 40rpx;" mode="widthFix"></image> -->
			</view>
			<!-- #endif -->
		</view>
		<view class="swiper-box">
			<u-swiper :list="swiperList" indicator indicatorMode="line" height="280rpx" circular></u-swiper>
		</view>
		<view class="flex noteBox" @click="openurl('/pages/index/notice')">
			<view class="flex_item noteTpl">
				<image src="/static/image/img04.png" style="width: 42rpx;height: 34rpx;" mode="widthFix"></image>
				<view class="clamp textTpl">{{noticeList.title}}</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;height: 73rpx;" 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;height: 73rpx;" mode="widthFix"></image>
				<view class="navName">实名认证</view>
			</view> -->
			<view class="navTpl" @click="openurl('/pages/user/set/transaction')">
				<image src="/static/image/img08.png" style="width: 123rpx;height: 73rpx;" mode="widthFix"></image>
				<view class="navName">交易密码</view>
			</view>
			<view class="navTpl" @click="openurl('/pages/user/set/bindBank')">
				<image src="/static/image/img09.png" style="width: 123rpx;height: 73rpx;" mode="widthFix"></image>
				<view class="navName">收款信息</view>
			</view>
			<view class="navTpl" @click="openKf">
				<image src="/static/image/img10.png" style="width: 123rpx;height: 73rpx;" 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;height: 75rpx;" mode="widthFix"></image>
				<view class="starText">
					<view class="name">okx(欧易)</view>
					<view class="num">{{baseData.ok_price}}</view>
				</view>
			</view>
			<view class="starTpl flex_item">
				<image src="/static/image/img13.png" style="width: 75rpx;height: 75rpx;" mode="widthFix"></image>
				<view class="starText">
					<view class="name">STAR(星空）</view>
					<view class="num">{{baseData.us_price}}</view>
				</view>
			</view>
		</view>
		<navigator open-type='switchTab' url="/pages/index/pledge">
			<image src="/static/image/img11.png" style="width: 692rpx;padding-top: 31rpx;height: 179rpx;" mode="widthFix"></image>
		</navigator>
		<!-- <view class="titleBox">
			<view class="titleTip">累计成交量</view>
		</view> -->
		<view class="flex totalBox">
			<view class="totalTpl">
				<view class="totalNum">{{baseData.success_num||0}}</view>
				<view class="totalName">24小时成交量(U)</view>
			</view>
			<view class="totalTpl">
				<view class="totalNum">{{baseData.success_order||0}}</view>
				<view class="totalName">24小时成单量</view>
			</view>
			<view class="totalTpl">
				<view class="totalNum">{{baseData.success_ratio||0}}</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;height: 127rpx;" mode="widthFix"></image>
				<view class="advantageName">简单</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img15.png" style="width:149rpx;height: 127rpx;" mode="widthFix"></image>
				<view class="advantageName">安全</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img14.png" style="width:149rpx;height: 127rpx;" mode="widthFix"></image>
				<view class="advantageName">省心</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img17.png" style="width:149rpx;height: 127rpx;" 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 {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import { getArtList} from '@/api/notice.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				gameList: [],
				active_user: '0',
				swiperList:['/static/image/img05.png'],
				kefu:'ch125221',
				baseData:{
					ok_price:0,
					us_price:0
				},
				noticeList:''
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo','hasLogin']),
			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.loadData();
			this.getNotice()
		},
		methods: {
			...mapActions({
				setLang: "setLang",
			}),
			getNotice(){
				let obj = this;
				getArtList('1').then(function(e) {
					obj.noticeList = e.data[0]
					console.log(obj.noticeList,'obj.noticeList');
				})
			},
			openurl(url){
				if(!this.hasLogin){
					saveUrl();
					interceptor();
					return
				}
				uni.navigateTo({
					url: url,
					fail: (err) => {
						uni.showModal({
							title: '错误',
							content: err,
							showCancel: false,
						});
					}
				});
			},
			saoma(){
				uni.scanCode({
				    success(data) {
						let res = data.result
						// uni.navigateTo({
						//     url: res
						// })
						window.location.href = res;
				    },
				    fail(e) {
				        console.log(JSON.stringify(e));
				        console.log("扫码失败");
				    },
				});
			},
			// 打开客服
			openKf() {
				// this.$refs.popupkf.open();
				uni.previewImage({
					urls:['/static/image/shareImage.jpg']
				})
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
			// 请求载入数据
			async loadData() {
				getIndex({})
					.then(({
						data
					}) => {
						this.active_user = data.active_user
						this.baseData = data;
						console.log(data);
					})
					.catch(e => {});
			},
			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: var(--status-bar-height);
		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%;
			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>