BiKing/pages/index/index.vue

<template>
	<view class="content" :rise-fall="stocksColor">
		<!-- 头部 -->
		<headContent>
			<template #left>
				<loginStatus></loginStatus>
			</template>
			<template #content>
				<view class="haed-title">
					<image class="logo" src="../../static/images/logo.png" mode="aspectFit"></image>
					<image class="name" src="../../static/images/name.png" mode="aspectFit"></image>
				</view>
			</template>
			<template #right>
				<message></message>
				<share @openShare="openShare"></share>
			</template>
		</headContent>
		<!-- 轮播图 -->
		<carousels :BannerList="BannerList"></carousels>

		<!-- 滚动消息 -->
		<rollMessage :rollMsg="Announcement"></rollMessage>
 
		<!-- usdt -->
		<usdt :usdtList="usdtList"></usdt>
 
		<gap />
		<!-- 快捷买币 -->
		<shortcut></shortcut>

		<gap />
		<!-- 快捷菜单 -->
		<navMuen></navMuen>

		<!-- 自选 / 市场 -->
		<market :market="quotationNew"></market>

		<!-- 邀请 -->
		<sharePage ref="sharePageRef" :tabBar="false" />
	</view>
</template>

<script>
	import loginStatus from "@/components/headModules/login.vue"
	import message from "@/components/headModules/message.vue"
	import share from "@/components/headModules/share.vue"
	import usdt from "./modules/usdt.vue"
	import shortcut from "./modules/shortcut.vue"
	import navMuen from "./modules/nav.vue"
	import market from "./modules/market.vue"

	import {
		Api_getNewsList,
		Api_getQuotationNew
	} from "@/api/index.js"

	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			loginStatus,
			message,
			share,
			usdt,
			shortcut,
			navMuen,
			market
		},
		data() {
			return {
				usdtList: [],
				title: 'Hello',
				BannerList: [],
				Announcement: [],
				quotationNew: [],
				refreshStatus: false,
			}
		},
		computed: {
			...mapGetters([
				'stocksColor'
			]),
		},
		watch: {
			quotationNew: {
				handler(newArr) {
					this.usdtList = [];
					if (newArr && newArr.length > 0) {
						const nums = newArr.length > 3 ? 3 : newArr.length;
						this.usdtList = newArr.slice(0, nums);
					} else {
						this.usdtList = []
					}
				},
				deep: true
			}
		},
		onLoad() {
			this.getBanner();
			this.getAnnouncement();
		},
		onShow() {
			this.refreshStatus = true;
			this.getQuotationNew();
		},
		onHide() {
			this.refreshStatus = false;
		},
		methods: {
			openShare() {
				this.$nextTick(() => {
					this.$refs.sharePageRef.openShare()
				})
			},
			// 获取banner
			getBanner() {
				Api_getNewsList({
					cid: 5,
					limit: 10
				}).then(res => {
					this.BannerList = res.list
				})
			},
			// 获取公告
			getAnnouncement() {
				Api_getNewsList({
					cid: 3,
					limit: 10
				}).then(res => {
					this.Announcement = res.list
				})
			},
			// 获取行情 / 首页推荐
			getQuotationNew() {
				Api_getQuotationNew().then(res => {
					if (res && res.length > 0) {
						this.quotationNew = res.find((item) => item.name == 'USDT').quotation || [];
					}
				}).catch(err => {
				 
				}).finally(() => {
					setTimeout(() => {
						if (this.refreshStatus) {
							this.getQuotationNew()
						}
					}, 1000)
				})
			},
			clearInt() {
				try {
					clearInterval(this.timeInterval);
				} catch (e) {
					//TODO handle the exception
				}
				this.timeInterval = null;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// padding: 0 30rpx;
	}

	.haed-title {

		image {
			width: 85rpx;
			height: 67rpx;
		}
		.logo{
			width: 85rpx;
			height: 67rpx;
		}
		.name{
			width: 85rpx;
			height: 80rpx;
		}
	}
</style>