bn-q-icon/pages/index/index.vue

<script>
	import homeIndex from "@/pages/home/home-index.vue";
	import myIndex from "@/pages/my/my-index.vue";
	import convertIndex from "@/pages/convert/convert-index.vue";
	import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
	import tools from "@/common/js/tools";
	export default {
		components: {
			homeIndex,
			myIndex,
			convertIndex
		},
		data() {
			return {
				tab_index: 1,
				address: ''
			};
		},
		mounted() {
			this.getMyData()
			this.getAccount()
			// this.handlerDateDurationCurrent()
		},
		methods: {
			abbreviateString(str) {
				let startLength = 4;
				let endLength = 4;
				if (str.length <= startLength + endLength + 1) {
					return str; // 如果字符串长度不足以被截断，则返回原字符串
				}
				return str.slice(0, startLength) + '...' + str.slice(-endLength);
			},
			async getAccount() {
				tokenpocketBnb.getAccounts().then(async (Address) => {
					console.log(Address)
					if (Address) {
						this.address = Address
					} else {
						tools.error("地址信息获取失败")
					}
				}).catch((e) => {
					console.log(e)
					// tools.goToError(2)
				})
			},
			getMyData() {
				// let token = uni.getStorageSync('token')
				// if (token) {
				//   getMemberInfo().then((res) => {
				//     if (res.code === 1) {
				//       this.memberData = res.data
				//       tokenpocketBnb.getAccounts().then((babAddress)=>{
				//         if(babAddress && this.memberData.address.toLocaleLowerCase()!==babAddress.toLocaleLowerCase()){
				//           // uni.clearStorageSync()
				//           // uni.reLaunch({
				//           //   'url': 'pages/login/index'
				//           // })
				//         }
				//       })
				//     }
				//   })
				// }

			},
			tabClick(num) {
				if (num) {
					this.tab_index = num
				}
			},
			scrolltolower() {
				if(this.tab_index === 1) {
					this.$refs.homeIndexRef.scrolltolower()
				} else if(this.tab_index === 3) {
					this.$refs.myIndexRef.scrolltolower()
				}
			}
		},
	}
</script>

<template>
	<view class="flex-common-css">
		<view class="top-b bgc-f plr-20 box-sizing-border align-items-center flex-justify-space">
			<image class="img-box" src="@/static/img/logo/logo.png"></image>
			<view class="fs-30">
				{{abbreviateString(address)}}
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="p-20 box-sizing-border">
				<homeIndex ref="homeIndexRef" v-if="tab_index === 1" :address="address"></homeIndex>
				<convertIndex v-else-if="tab_index === 2"></convertIndex>
				<myIndex ref="myIndexRef" v-else></myIndex>
			</view>
		</scroll-view>
		<view class="tab-box box-sizing-border">
			<view class="tab-b align-items-center flex-justify-space b-rad-10 bgc-f">
				<view @click="tabClick(1)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
					<image class="tab-img mb-4" v-if="tab_index === 1" :src="require('@/static/img/tab/index.svg')">
					</image>
					<image class="tab-img mb-4" v-else :src="require('@/static/img/tab/index-two.svg')"></image>
					<view class="fs-28" :class="tab_index === 1?'fc-f78820':''">首页</view>
				</view>
				<view @click="tabClick(2)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
					<image class="tab-img mb-4" :src="require('@/static/img/tab/jh.svg')"></image>
					<view class="fs-28" :class="tab_index === 2?'fc-f78820':''">兑换</view>
				</view>
				<view @click="tabClick(3)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
					<image v-if="tab_index === 3" class="tab-img mb-4" :src="require('@/static/img/tab/my-two.svg')">
					</image>
					<image v-else class="tab-img mb-4" :src="require('@/static/img/tab/my.svg')"></image>
					<view class="fs-28" :class="tab_index === 3?'fc-f78820':''">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.content-b {
		width: 100%;
		height: calc(100vh - 98rpx);
		display: flex;
		flex-direction: column;
	}

	.top-b {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
	}

	.img-box {
		width: 78rpx;
		height: 60rpx;
	}

	.tab-img {
		width: 50rpx;
		height: 50rpx;
	}

	.tab-box {
		padding: 0 20rpx 20rpx;
	}

	.tab-b {
		width: 100%;
		height: 138rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
	}
</style>