FXB/pages/index/index.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#15130E'"></topView>
		<view class="imageBox">
			<image style="width: 100%;height: 450rpx;" src="/static/img/img02.png"></image>
			<view class="flex_item titleBox">
				<image src="../../static/img/img04.png" style="width: 41rpx;height: 23rpx;"></image>
				<view class="title">{{ $t("index.矿机购买") }}</view>
				<image src="../../static/img/img04.png" style="width: 41rpx;height: 23rpx;"></image>
			</view>
			<view class="tip">{{ $t("index.购买更高") }}</view>
		</view>
		<view class="infoBox">
			<view class="flex reg" @click="navTo('/pages/index/exchange')">
				<view class="flex_item">
					<image src="../../static/img/img08.png" style="width: 86rpx;height: 100rpx;"></image>
					<view class="name">{{ $t("index.闪兑") }}</view>
				</view>
				<view class="flex_item">
					<view class="goText">{{ $t("index.立即前往") }}</view>
					<view><u-icon name="arrow-right" size="16" style="position: relative;top: 3rpx;"></u-icon></view>
				</view>
			</view>
			<view class="listBox">
				<view class="itemTpl flex" v-for="item,index in list" 
				:key="index" @click="navTo('/pages/index/details?id='+item.id)">
					<view class="flex_item infoTpl">
						<image style="width: 191rpx;height: 191rpx;border: 1rpx solid #9A7B52;border-radius: 25rpx;" 
							:src="'https://www.bscnice.com'+item.image"></image>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="tip">{{ $t("index.价格") }}：<text class="price">{{item.price * 1}}NUSD</text></view>
							<view class="tip">{{ $t("index.总收益") }}：<text class="price">{{item.send_all * 1}}NUSD</text></view>
						</view>
					</view>
					<view class="flex_item">
						<view class="goText">{{ $t("index.查看详情") }}</view>
						<view><u-icon name="arrow-right" size="14" style="position: relative;top: 3rpx;"></u-icon></view>
					</view>
				</view>
			</view>
			<view class="flex reg" @click="navTo('/pages/index/detailsTpl')">
				<view class="flex_item">
					<image src="../../static/img/img09.png" style="width: 96rpx;height:79rpx;"></image>
					<view class="name">{{ $t("index.我的矿机") }}</view>
				</view>
				<view class="flex_item">
					<view class="goText">{{ $t("index.查看详情") }}</view>
					<view><u-icon name="arrow-right" size="16" style="position: relative;top: 3rpx;"></u-icon></view>
				</view>
			</view>
			<view class="flex navList">
				<view class="navItme" @click="navTo('/pages/index/invite')">
					<image src="/static/img/img10.png" style="width: 103rpx;height: 97rpx;"></image>
					<view class="navName">{{ $t("index.我的邀请") }}</view>
					<view class="navText">{{ $t("index.邀请团队信息") }}</view>
				</view>
				<view class="navItme" @click="navTo('/pages/index/property')">
					<image src="/static/img/img11.png" style="width: 95rpx;height: 110rpx;"></image>
					<view class="navName">{{ $t("index.我的资产") }}</view>
					<view class="navText">{{ $t("index.资产明细") }}</view>
				</view>
				<view class="navItme" @click="navTo('/pages/index/income')">
					<image src="/static/img/img12.png" style="width: 146rpx;height:106rpx;"></image>
					<view class="navName">{{ $t("index.我的收益") }}</view>
					<view class="navText">{{ $t("index.收益明细") }}</view>
				</view>
			</view>
			<view class="shareBox">
				<view class="shareTitle">{{ $t("index.邀请地址") }}</view>
				<view class="flex shareTpl">
					<view class="addr clamp">{{userInfo.address}}</view>
					<view class="copyBtn" @click="copyClick(userInfo.address)">{{ $t("index.复制") }}</view>
				</view>
			</view>
			<view style="text-align: center;padding-top: 85rpx;">
				<image src="/static/img/img13.png" style="width: 617rpx;height:382rpx;"></image>
			</view>
		</view>
		<image src="/static/img/img03.png" style="width: 100%;height: 320rpx;"></image>
		<u-popup :show="popShow" mode="center" class="popBox" @close="popShow = false" @open="popShow = true">
			<view class="imgBox">
				<image src="../../static/img/img29.png" style="width:492rpx;height: 458rpx;"></image>
			</view>
			<view class="inputBox">
				<input type="text" v-model="address"/>
			</view>
			<view class="submitBnt" :class="{ submitNo: !payOn }" @click="payOn ? submit() : ''">{{$t("index.确认绑定")}}</view>
		</u-popup>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import { mining } from '@/api/index.js';
	import {bandgingSpead} from '@/api/login.js';
	import {mapState,mapActions,mapMutations} from "vuex";
	export default {
		components: {
			topView
		},
		data () {
			return {
				list:[],
				popShow:false,
				address:'',
				payOn:true
			}
		},
		onLoad(option) {
			if(option.address){
				uni.setStorageSync('address', option.address);
			}else{
				uni.setStorageSync('address', '');
			}
		},
		onShow() {
			this.loadDate()
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			submit () {
				let obj = this;
				obj.payOn = false
				ethereum.request({
					method: 'eth_requestAccounts'
				}).then((account) => {
					const PKR_BIND = 'PKR_BIND' + (new Date()).getTime();
					ethereum.request({
						"method": "personal_sign",
						"params": [
							PKR_BIND,
							account[0]
						]
					}).then((res) => {
						obj.bing(res,PKR_BIND);
					});
				});
			},
			bing(sign,msg){
				let obj = this;
				bandgingSpead({
					address: obj.address,
					sign,
					msg,
				}).then((res) => {
					obj.popShow = false
					if(res.code == 1){
						obj.payOn = true
						uni.setStorageSync('address', '');
						uni.showToast({
							title: obj.$t('common.绑定成功'),
							duration: 1500,
							mask: false,
							icon: 'none',
						})
						obj.loadDate()
					}else{
						obj.payOn = true
						uni.showToast({
							title: res.msg,
							duration: 1500,
							mask: false,
							icon: 'none',
						})
					}
				}).catch(e => {
					obj.payOn = true
				});
			},
			loadDate(){
				let obj = this
				mining({}).then(function(res){
					if (res.code == 402) {
						uni.showModal({
							title: obj.$t('common.温馨提示'),
							content: obj.$t('common.请先绑定推荐人'),
							showCancel: false,//没有取消按钮的弹框
							buttonText:obj.$t('common.确定'),
							success: function (res) {
								if (res.confirm) {
									obj.address = uni.getStorageSync("address") || "";
									obj.popShow = true
								} else if (res.cancel) {
									
								}
							}
						});
					}else {
						obj.list = res.data.list
						
					}
				})
			},
			copyClick (value) {
				if (value == "" || value == null) {
					uni.showToast({
						title: this.$t('common.内容为空'),
						icon: "none",
					});
					return;
				}
				let text = 'https://www.bscnice.com/index/#/pages/index/index?address='+value
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: this.$t("common.不支持"),
					});
				} else {
					uni.showToast({
						title: this.$t("common.复制成功"),
						icon: "none",
					});
				}
			},
			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
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.imageBox{
		.titleBox{
			justify-content: center;
			.title{
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				padding: 0rpx 25rpx;
			}
		}
		.tip{
			text-align: center;
			color: #999999;
			font-size: 22rpx;
			padding: 18rpx;
		}
	}
	.infoBox{
		padding: 25rpx 30rpx;
		color: #FFFFFF;
		.reg{
			background: #1A1A17;
			padding: 23rpx 55rpx;
			box-shadow: 1rpx 1rpx 1rpx 1rpx rgba(0,0,0,0.24);
			border-radius: 30rpx;
			.name{
				padding-left: 25rpx;
				font-weight: bold;
				font-size: 35rpx;
			}
		}
	}
	.listBox{
		padding-top: 30rpx;
		.itemTpl{
			margin-bottom: 25rpx;
			background: #1A1A17;
			padding: 25rpx 25rpx;
			box-shadow: 1rpx 1rpx 1rpx 1rpx rgba(0,0,0,0.24);
			border-radius: 30rpx;
			.infoTpl{
				align-items: flex-start;
				.info{
					padding-left: 20rpx;
					.name{
						font-weight: bold;
						font-size: 36rpx;
						color: #FFFFFF;
						padding-bottom: 45rpx;
					}
					.tip{
						font-size: 24rpx;
						color: #999999;
						padding-top: 15rpx;
						.price{
							color:#E3C49C;
						}
					}
				}
			}
		}
	}
	.navList{
		margin:25rpx 0;
		.navItme{
			background: #1A1A17;
			padding: 25rpx 0rpx;
			padding-bottom: 40rpx;
			box-shadow: 1rpx 1rpx 1rpx 1rpx rgba(0,0,0,0.24);
			border-radius: 30rpx;
			text-align: center;
			width: 31%;
			.navName{
				padding-top: 10rpx;
				font-weight: bold;
				font-size: 33rpx;
			}
			.navText{
				padding-top: 10rpx;
				opacity: 0.18;
				font-size: 24rpx;
			}
		}
	}
	.shareBox{
		.shareTitle{
			font-weight: bold;
			font-size: 29rpx;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}
		.shareTpl{
			background: #1A1A17;
			border-radius: 25rpx;
			.addr{
				padding: 18rpx 25rpx;
				width: 80%;
			}
			.copyBtn{
				padding: 18rpx 35rpx;
				background: linear-gradient(258deg, #FFF0CF, #CBA16B, #FCE9CF, #C29963);
				border-radius: 30rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #31190B;
			}
		}
	}
	//绑定弹窗
	/deep/.u-popup__content{
		background: #1A1A17;
		border-radius: 25rpx;
		padding: 25rpx 25rpx;
		width: 90%;
	}
	.imgBox{
		text-align: center;
	}
	.inputBox{
		background: #fff;
		border-radius: 50rpx;
		padding: 25rpx 25rpx;
		width: 100%;
	}
	.submitBnt{
		background: linear-gradient(258deg, #FFF0CF, #CBA16B, #FCE9CF, #C29963);
		border-radius: 43rpx;
		font-weight: bold;
		font-size: 34rpx;
		line-height: 90rpx;
		text-align: center;
		margin: 60rpx 0;
	}
	.submitNo {
		background: #999999 !important;
		color: #fff !important;
	}
	//
	.goText{
		font-size: 22rpx;
		color: #FFFFFF;
		opacity: 0.7;
		padding-right: 15rpx;
	}
</style>