BCMM/pages/index/index.vue

<template>
	<view class="container">
		<view class="topBox flex">
			<view class="topTpl flex_item">
				<image style="width: 49rpx;height: 45rpx;" src="/static/img/logo.png"></image>
				<view class="tpl clamp">BNB Smart Chain</view>
			</view>
			<view class="topTpl flex_item margin-l-30" v-if="userInfo.address">
				<image class="userIcon" src="/static/img/img10.png"></image>
				<view class="tpls clamp">{{userInfo.address|hideCenter}}</view>
			</view>
		</view>
		<view class="levelBox flex">
			<view class="levelInfo flex_item">
				<image src="/static/img/img04.png" style="width: 50rpx;height: 61rpx;"></image>
				<view class="levelTpl">
					<view class="level">S{{userInfo.level||'0'}}</view>
				</view>
				<view class="levelTpl">
					<view class="level">L{{userInfo.point_level||'0'}}</view>
				</view>
			</view>
			<view class="levelRight flex_item">
				<!-- <view class="flex_item method">
					<view class="">{{$t('home.教程')}}</view>
					<image src="/static/img/img02.png" style="width: 30rpx;height: 30rpx;margin-left: 8rpx;"></image>
				</view> -->
				<view class="flex_item invitation" @click="copyShareLink">
					<view class="">{{$t('home.邀请连接')}}</view>
					<image src="/static/img/img03.png" style="width: 24rpx;height: 28rpx;margin-left: 8rpx;"></image>
				</view>
			</view>
		</view>
		<view class="flex infoBox">
			<view class="info flex_item" v-if="userInfo.address">
				<view class="infoName">{{$t('home.账号')}}：</view>
				<view class="flex_item infoTpl clamp">
					<view class="clamp account">{{userInfo.address|hideCenter}}</view>
					<image src="/static/img/img03.png" class="infoTplImg" @click="copyAddress"></image>
				</view>
			</view>
			<view class="langBox flex_item">
				<!-- <image src="/static/img/img08.png" style="width: 36rpx;height: 34rpx;"></image> -->
				<picker :range="langList" range-key='label' @change="selectLang">
					<view class="langType">{{label}}</view>
				</picker>
				<image src="/static/img/img01.png" style="width: 15rpx;height: 10rpx;"></image>
			</view>
		</view>
		<view class="withdrawalBox">
			<view class="moneyName">{{$t('home.可提现')}}</view>
			<view class="flex">
				<!-- USTD -->
				<view>
					<view class="moneyBox">
						<view class="money" v-if="userInfo.USDT">{{userInfo.USDT|failNumber}}USDT</view>
						<view class="money" v-else>0.00USDT</view>
					</view>
					<view class="withdrawal" @click="withdrawBtn(userInfo.USDT,'USDT')">{{$t('home.提现')}}</view>
				</view>
				<!-- VGT -->
				<view>
					<view class="moneyBox">
						<!-- <view class="moneyName">{{$t('home.余额')}}</view> -->
						<view class="money" v-if="userInfo.VGT">{{userInfo.VGT|failNumber}}VGT</view>
						<view class="money" v-else>0.00VGT</view>
					</view>
					<view class="withdrawal" @click="withdrawBtn(userInfo.VGT,'VGT')">{{$t('home.提现')}}</view>
				</view>
			</view>
		</view>
		<view class="exchangeBox">
			<view class="exchangeTop flex">
				<view class="exchangeName">{{$t('home.充值')}}</view>
				<view class="exchangeTpl flex_item">
					<image src="/static/img/img05.png" style="width: 28rpx;height: 24rpx;"></image>
					<view class="exchangeText" @click="transferShow = true">{{$t('home.转账')}}</view>
				</view>
			</view>
			<view class="exchangeInfo flex">
				<view class="currency flex_item">
					<image class="moneyIcon" src="/static/img/homeVGT.png"></image>
					<input class="name" v-model="PayUSDT" @blur="addMoney" type="number" placeholder="VGT" />
				</view>
				<!-- <image src="/static/img/img07.png" style="width: 56rpx;height: 56rpx;"></image>
				<view class="currency flex_item">
					<image class="moneyIcon" src="/static/img/homeVGT.png" style=""></image>
					<input :value="($util.Mul(PayUSDT,userInfo.real_ratio))||''" class="name" type="number"
						placeholder="VGT" disabled />
				</view> -->
			</view>
			<view class="exchangeMoney flex">
				<!-- <view class="moneyTitle">{{$t('home.余额')}}:
				 <text v-if="userInfo.USDT">{{userInfo.USDT|failNumber}}</text>
				 <text v-else>0.00</text>
				</view> -->
				<view class="moneyTitle">{{$t('home.余额')}}:
				<text v-if="userInfo.VGT">{{userInfo.VGT|failNumber}}</text>
				<text v-else>0.00</text>
				</view>
			</view>
		</view>
		<view class="orderBox">
			<view class="orderList" v-for="item,index in orderList" :key="index">
				<view class="orderTop flex">
					<view class="topTitle flex_item">
						<image src="/static/img/img06.png" style="width: 59rpx;height: 60rpx;"></image>
						<view class="topName" v-if="lang=='tw'">{{item.name}}</view>
						<view class="topName" v-if="lang=='en'">{{item.en_name}}</view>
						<view class="topTip" :style="{background:( item.showswitch == 1? '#15C66E' :'#FF0000')}"></view>
					</view>
					<view class="topPrice">{{item.money_min}}-{{item.money_max}}USDT</view>
				</view>
				<view class="orderInfo">
					<view class="infoTpl flex_item">
						<image src="/static/img/img13.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplText">{{$t('home.时间')}}:<text>{{item.begin}}-{{item.end}}</text></view>
					</view>
					<view class="infoTpl flex_item">
						<image src="/static/img/img14.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplText">{{$t('home.周期')}}:<text>{{item.day}}{{$t('home.天')}}</text></view>
					</view>
					<view class="infoTpl flex_item">
						<image src="/static/img/img12.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplText">{{$t('home.收益')}}:<text>{{item.ratio}}</text></view>
					</view>
					<view class="subscribe" @click="openSubscrib(item)" v-if="item.showswitch == 1">{{$t('home.预约')}}
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="subscribeShow" @close="subscribeClose" :closeable="true">
			<view class="subscribePopup">
				<view class="popupTitle">{{orderItem.name}}</view>
				<view class="popupBox flex">
					<view class="popupTpl flex_item">
						<image src="/static/img/img12.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplName">{{$t('home.收益')}}:<text>{{orderItem.ratio}}</text></view>
					</view>
					<view class="popupTpl flex_item">
						<image src="/static/img/img14.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplName">{{$t('home.周期')}}:<text>{{orderItem.day}}{{$t('home.天')}}</text></view>
					</view>
				</view>
				<view class="popupBox">
					<view class="popupTpl flex_item">
						<image src="/static/img/img13.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplName">{{$t('home.时间')}}:<text>{{orderItem.begin}}-{{orderItem.end}}</text>
						</view>
					</view>
				</view>
				<view class="popupBox">
					<view class="popupTpl flex_item">
						<image src="/static/img/img14.png" style="width: 26rpx;height: 26rpx;"></image>
						<view class="tplName">{{$t('home.价格')}}:<text
								class="price">{{orderItem.min|failNumber}}-{{orderItem.max|failNumber}}USDT</text></view>
					</view>
				</view>
				<view class="timeBox">
					<view class="timeTitle">{{$t('home.请选择预约')}}</view>
					<view class="flex timeTpl">
						<view class="timeName" v-for="item,index in timeList"
							:class="item.check == true ? 'active' : ''" @click="timeSelect(item)" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="subscribeBtn" @click="submitTime">{{$t('home.预约')}}</view>
			</view>
		</u-popup>
		<u-popup :show="transferShow" @close="transferShow = false" :closeable="true">
			<view class="transferPopup">
				<view class="popupTitle">VGT{{$t('home.转出数量')}}</view>
				<view class="inputBox">
					<view class="inputTitle">{{$t('home.请输入VGT转出数量')}}</view>
					<input class="inputTpl" type="text" v-model="transferNum" :placeholder="$t('home.请输入VGT转出数量')" />
				</view>
				<view class="inputBox">
					<view class="inputTitle">{{$t('home.请输入VGT接收地址')}}</view>
					<input class="inputTpl" type="text" v-model="transferAddr" :placeholder="$t('home.请输入VGT接收地址')" />
				</view>
				<view class="subscribeBtn" @click="submitTransfer">{{$t('home.确定')}}</view>
			</view>
		</u-popup>
		<taber></taber>
	</view>
</template>
<script>
	import {
		auctions,
		trade,
		changeCalculator,
		change,
		appointment,
		extract,
		chargeCalculator,
		charge
	} 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 icon from '../../uni_modules/uview-ui/libs/config/props/icon';
	export default {
		filters: {
			hideCenter: function(value) {
				const st = value.slice(7,value.length-7);
				const sr = value.replace(st,'...')
				return sr;
			},
			failNumber:function(number){
				return +(+number).toFixed(2)
			}
		},
		components: {
			taber
		},
		data() {
			return {
				orderList: [],
				subscribeShow: false, //预约时间弹窗
				orderItem: {}, //点击预约的数据
				//转账参数
				transferShow: false, //转账弹窗
				transferNum: '', //转账数量
				transferAddr: '', //转账地址
				loading: 'loadmore', //加载状态
				PayUSDT: '', //兑换的usde
				getVGT: 0, //获得的VGT
				typeList: [{
					name: "今天",
					langname: "今天",
					check: false,
					type: 1
				}, {
					name: "明天",
					langname: "明天",
					check: false,
					type: 2
				}, {
					name: "后天",
					langname: "后天",
					check: false,
					type: 3
				}]
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState(['baseURL', 'urlFile']),
			...mapState("user", ['userInfo', 'hasLogin']),
			label() {
				let label = ''
				try {
					label = this.langList.find((item) => {
						return item.value == this.lang
					}).label;
				} catch (e) {
					label = 'tw'
				}

				return label
			},
			//时间列表
			timeList() {
				for (var i = 0; i < this.typeList.length; i++) {
					this.typeList[i].name = this.$t(`home.${this.typeList[i].langname}`)
				}
				return this.typeList;
			}
		},
		onLoad(option) {
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
		},
		onShow() {
			this.loadData();
			this.getUserInfo();
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			...mapActions({
				setLang: "setLang",
			}),
			// 申请提现
			withdrawBtn(money,type) {
				let token = ''
				if(type == 'USDT'){
					token = 'USDT'
					if (+this.userInfo.USDT == 0) {
						uni.showToast({
							title: this.$t('home.无法提现'),
							icon: "error"
						});
					}
					return false
				}
				if(type == 'VGT'){
					token = 'VGT_OUT'
					if (+this.userInfo.VGT == 0) {
						uni.showToast({
							title: this.$t('home.无法提现'),
							icon: "error"
						});
					}
					return
				}
				extract({
					token: token,
					number: +money
				}).then((res) => {
					uni.showToast({
						title: res.msg
					});
					console.log(res);
				})
			},
			// 充值
			async addMoney(res) {
				const that = this;
				if (res.detail.value <= 0) {
					return
				}
				uni.showLoading({
					mask: true
				});
				const num = res.detail.value;
				let token = 'VGT'
				try {
					const {
						data
					} = await chargeCalculator({
						num,
						token
					});
					const txHash = await ethereum.request({
						method: 'eth_sendTransaction',
						params: [{
							from: that.userInfo.address, // The user's active address.
							to: data.data.to,
							value: 0,
							data: data.data.data,
						}]
					})
					const req = await change({
						order_sn: data.order_sn,
						hash: txHash,
					});
					that.getUserInfo();
					uni.showToast({
						title: this.$t('home.充值成功')
					})
				} catch (e) {
					uni.showToast({
						title: this.$t('home.充值失败'),
						icon: 'error'
					})
				}
			},
			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.成功')
							})
						},
					});
				}
			},
			copyAddress() {
				const that = this;
				uni.setClipboardData({
					data: this.userInfo.address,
					showToast: false,
					success: function() {
						uni.showToast({
							title: that.$t('home.成功')
						})
						//调用方法成功
						console.log("success");
					},
				});
			},
			// 请求载入数据
			async loadData() {
				auctions().then((res) => {
					this.orderList = res.data.map((res) => {
						res.min = +res.min;
						res.max = +res.max;
						res.money_max = +res.money_max;
						res.money_min = +res.money_min;
						return res
					});
					console.log(res);
				}).catch((res) => {
					console.log(res);
				})
			},
			// 获取更新用户信息
			getUserInfo() {
				getUserInfo().then((res) => {
					this.setUserInfo(res.data);
				}).catch((res) => {
					console.log(res);
				})
			},
			//时间选择
			timeSelect(item) {
				console.log(item);
				item.check = !item.check;
			},
			//打开时间选择弹窗
			openSubscrib(item) {
				this.orderItem = item
				this.subscribeShow = true
			},
			//关闭时间选择弹窗
			subscribeClose() {
				this.subscribeShow = false
			},
			//提交预约时间
			submitTime() {
				const that = this;
				uni.showLoading({
					mask: true
				});
				let push = {
					id: that.orderItem.id,
					type: that.timeList.filter((res) => {
						return res.check
					}).map((res) => {
						if (res.check) {
							return res.type
						}
					}).join(',')
				}
				console.log(push, 'push');
				appointment(push).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: that.$t("home.预约成功")
					});
					that.subscribeShow = false
				}).catch((err) => {
					uni.hideLoading()
					uni.showToast({
						title: err.msg,
						icon: 'error'
					});
				})
			},
			//提交转账申请
			submitTransfer() {
				const that = this;
				const VGT_TRADE = 'VGT_TRADE' + (new Date()).getTime();
				const num = that.transferNum;
				const address = that.transferAddr;
				uni.showLoading({
					mask: true
				});
				ethereum.request({
					"method": "personal_sign",
					"params": [
						VGT_TRADE,
						that.userInfo.address
					]
				}).then((res) => {
					trade({
						num,
						token: 'VGT',
						address,
						sign: res,
						msg: VGT_TRADE,
					}).then((res) => {
						that.transferShow = false;
						uni.hideLoading()
						uni.showToast({
							title: that.$t("home.转账成功")
						});
					}).catch((res) => {
						uni.hideLoading()
						uni.showToast({
							title:res.msg,
							icon: 'error'
						});
					})
				});
			},
			//切换语言
			selectLang(value) {
				this.setLang(this.langList[value.detail.value].value);
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		padding: 25rpx;
		line-height: 1;
	}

	.topBox {
		padding-bottom: 31rpx;
		width: 700rpx;

		.topTpl {
			background: #E9EBEC;
			border: 2rpx solid #CCCECF;
			border-radius: 36rpx;
			height: 71rpx;
			padding-left: 10rpx;
			font-weight: bold;
			padding-right: 20rpx;
			

			&.margin-l-30 {
				width: 0;
				flex-grow: 1;
			}

			.userIcon {
				width: 51rpx;
				height: 48rpx;
				flex-shrink: 0;
			}

			.tpl {
				font-size: 28rpx;
				color: #141414;
			}

			.tpls {
				font-size: 30rpx;
				color: #788387;
			}
		}
	}

	.levelBox {
		.levelInfo {
			.levelTpl {
				background: url('../../static/img/img11.png') no-repeat;
				width: 80rpx;
				height: 34rpx;
				background-size: 100% 100%;
				position: relative;
				margin-left: 10rpx;

				.level {
					position: absolute;
					right: 10rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #AB7600;
					line-height: 34rpx;
				}
			}
		}

		.levelRight {
			.method {
				background: #FBEBEC;
				border: 1px solid #FFBE96;
				border-radius: 50rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #FE6107;
				padding: 10rpx 16rpx;
				margin-right: 17rpx;
			}

			.invitation {
				border: 1px solid #BCC7CB;
				border-radius: 50rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #313F4A;
				padding: 10rpx 16rpx;
			}
		}

	}

	.infoBox {
		padding: 35rpx 0rpx;
		width: 680rpx;

		.info {
			// width: 70%;
			flex-grow: 1;
			width: 0;
			padding-right: 30rpx;

			.infoName {
				font-size: 32rpx;
				font-weight: bold;
				color: #141414;
				flex-shrink: 0;
			}

			.infoTpl {
				border: 1px solid #BCC7CB;
				border-radius: 50rpx;
				line-height: 58rpx;
				padding: 0rpx 15rpx;
				flex-grow: 1;

				.account {
					flex-grow: 1;
				}

				.infoTplImg {
					flex-shrink: 0;
					width: 24rpx;
					height: 28rpx;
				}
			}
		}

		.langBox {
			.langType {
				font-size: 27rpx;
				font-weight: bold;
				color: #141414;
				padding: 0rpx 8rpx;
			}
		}
	}

	.withdrawalBox {
		background: url('../../static/img/img09.png') no-repeat;
		width: 100%;
		height: 217rpx;
		background-size: 100% 100%;
		padding: 20rpx 48rpx 0rpx 48rpx;
        .moneyName {
        	font-size: 32rpx;
        	font-weight: bold;
        	padding: 10rpx 10rpx;
			color: #FFFFFF;
        }
		.moneyBox {
			color: #FFFFFF;
			font-weight: bold;


			.money {
				font-size: 44rpx;
				padding-top: 15rpx;
			}
		}

		.withdrawal {
			background: #FFFFFF;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #1DBC71;
			line-height: 55rpx;
			padding: 0rpx 70rpx;
			flex-shrink: 0;
			margin-top: 10rpx;
		}
	}

	.exchangeBox {
		padding: 50rpx 0rpx;

		.exchangeTop {
			.exchangeName {
				font-size: 38rpx;
				font-weight: bold;
				color: #242627;
			}

			.exchangeTpl {
				.exchangeText {
					font-size: 27rpx;
					font-weight: 500;
					color: #084D92;
					padding-left: 10rpx;
				}
			}
		}

		.exchangeInfo {
			padding: 23rpx 0rpx;
            justify-content: center; 
			.currency {
				width: 98%;
				border: 1px solid #BCC7CB;
				border-radius: 10rpx;
				padding: 20rpx;
				line-height: 40rpx;

				.moneyIcon {
					flex-shrink: 0;
					width: 35rpx;
					height: 35rpx;
				}

				.name {
					font-size: 29rpx;
					color: #242627;
					padding-left: 15rpx;
				}
			}
		}

		.exchangeMoney {
			.moneyTitle {
				font-size: 28rpx;
				color: #1C2645;
			}
		}
	}

	.orderBox {
		.orderList {
			background: #FFFFFF;
			border-radius: 15rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;

			.orderTop {
				.topTitle {
					.topName {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #262626;
						padding-left: 8rpx;
					}

					.topTip {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						margin-left: 24rpx;
					}
				}

				.topPrice {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F99328;
				}
			}

			.orderInfo {
				position: relative;

				.infoTpl {
					padding-top: 15rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6A6A6A;

					.tplText {
						padding-left: 8rpx;

						text {
							color: #262626;
						}
					}
				}

				.subscribe {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					background: linear-gradient(90deg, #38F855, #21EDD3);
					border-radius: 10rpx;
					width: 163rpx;
					line-height: 63rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #141414;
				}
			}

		}
	}

	.subscribePopup {
		padding: 50rpx 40rpx 40rpx 40rpx;

		.popupTitle {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #262626;
			margin-bottom: 55rpx;
		}

		.popupBox {
			.popupTpl {
				flex-grow: 1;
				margin-bottom: 32rpx;

				.tplName {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6A6A6A;
					padding-left: 12rpx;

					text {
						color: #262626;
					}

					.price {
						color: #FF0000 !important;
					}
				}
			}
		}

		.timeBox {
			background: url('../../static/img/img16.png') no-repeat;
			width: 100%;
			height: 346rpx;
			background-size: 100% 100%;
			padding: 50rpx 60rpx 0rpx 60rpx;
			margin-bottom: 35rpx;

			.timeTitle {
				position: relative;
				font-size: 36rpx;
				font-family: PingFang SC;
				color: #262626;
			}

			.timeTpl {
				padding-top: 40rpx;
				flex-wrap: wrap;
				justify-content: space-between;

				.timeName {
					flex-grow: 1;
					text-align: center;
					border-radius: 50rpx;
					margin-right: 20rpx;
					border: 1rpx solid #0062E9;
					color: #0062E9;
					padding: 16rpx 10rpx;
					font-size: 24rpx;
				}

				.active {
					background: #0062E9;
					color: #fff;
				}
			}
		}
	}

	.subscribeBtn {
		background: linear-gradient(90deg, #38F855, #21EDD3);
		border-radius: 10rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #332730;
		line-height: 93rpx;
		text-align: center;
	}

	.transferPopup {
		padding: 50rpx 40rpx 40rpx 40rpx;

		.popupTitle {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #262626;
			margin-bottom: 55rpx;
		}

		.inputBox {
			margin-bottom: 50rpx;

			.inputTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #262626;
				padding-bottom: 22rpx;
			}

			.inputTpl {
				background: #F6F6F6;
				border-radius: 5rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #5A6483;
				height: 100rpx;
				padding-left: 25rpx;
			}
		}
	}

	.input-placeholder {
		color: #5A6483;
	}
</style>