jingcai/pages/index/index.vue

<template>
	<view class="container">
		<view class="top flex">
			<view class="icon1 flex">
				<image class="img margin-r-10" src="../../static/shouye/shouye1.png" mode="scaleToFill"></image>
				<text class="tet">{{$t('login.a0')}}</text>
			</view>
			<view class="flex">
				<view class="icon2 text margin-r-10" v-if="userInfo.nickname">
					{{userInfo.nickname}}
				</view>
				<view class="icon1  margin-r-10">
					<image class="langTip" src="../../static/shouye/shouye2.png" mode="scaleToFill"></image>
				</view>
				<view class="text1  margin-r-10">
					<picker :range="langList" range-key='label' @change="selectLang">
						<view>{{label}}</view>
					</picker>
				</view>
				<view class="icon1">
					<image class="langTipDom" src="../../static/shouye/shouye3.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="uni-margin-wrap margin-b-10">
			<swiper indicator-color='rgba(255,255,255,0.69)' indicator-active-color='#FFF' class="swiper" circular
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item class="swiper-box">
					<image class="swiper-item" src="../../static/shouye/shouye4.png" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item class="swiper-box">
					<image class="swiper-item" src="../../static/shouye/shouye4.png" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 底部 -->
		<view class="tra flex margin-b-10">
			<view class="tra-item">
				{{$t('home.b8')}}
			</view>
			<view class="tra-item">
				{{$t('home.k1')}}
			</view>
			<view class="tra-item">
				{{$t('home.b0')}}
			</view>
		</view>
		<!-- 每一项 -->
		<view class="list flex" v-for="(item,ind) in navList">
			<view class="list-item flex-start">
				<!-- <image class="img margin-r-10" :src="item.img" mode="scaleToFill"> </image> -->
				<text class="tli">{{item.name}}</text>
			</view>
			<view class="list-item">
				{{item.newVlaue}}
			</view>
			<view class="list-item flex items-right">
				<view class="box" :class="{green:item.new24Value>0,red:item.new24Value<=0}">
					{{item.new24Value}}
				</view>
			</view>
		</view>
		<taber tab='index'></taber>
	</view>
</template>
<script>
	import {
		prices
	} from "@/api/index.js"
	import {
		mapState,
		mapActions
	} from "vuex";
	import taber from "@/components/footer/footer.vue";
	export default {
		components: {
			taber
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				navList: [],
				timeout:'',
				
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo']),
			label() {
				const label = this.langList.find((item) => {
					console.log(this.lang, item.value);
					return item.value == this.lang
				}).label;
				return label
			}
		},
		filters: {
			decimalPlaces(value) {
				if (typeof value !== 'number') {
					return value;
				}
				return value.toFixed(5);
			}
		},
		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
			this.loadData()
		},
		onShow() {
			this.timeout = setInterval(this.loadData,60000)
		},
		onHide() {
			clearInterval(this.timeout);
		},
		methods: {
			...mapActions({
				setLang: "setLang",
			}),

			getCurrent() {
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				return curPage
			},
			selectLang(value) {
				this.setLang(this.langList[value.detail.value].value);
				let path = '/' + this.getCurrent().route
			},

			loadData(source) {
				//这里是将订单挂载到tab列表下
				const that = this;
				prices({})
					.then(({
						data
					}) => {
						let arr = [];
						for (let key in data.prices) {
							let item = data.prices[key];
							let ar = item.data[0];
							arr.push({
								name: key,
								newVlaue: ar.idxPx,
								new24Value: Number(((ar.idxPx - ar.open24h) / ar.open24h).toFixed(5))
							})
						}
						that.navList = arr
					})
					.catch(e => {
						console.log(e);
					});
			},

		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #000000;
		padding-top: var(--status-bar-height);
	}

	.top {
		font-weight: 500;
		padding: 40rpx 30rpx 24rpx 30rpx;
		line-height: 1;

		.icon1 {
			line-height: 0;

			.img {
				width: 47rpx;
				height: 47rpx;
			}

			.tet {
				font-size: 28rpx;
				color: #C3A76C;
			}
		}

		.icon2 {
			background: #292C3D;
			border: 2px solid #414243;
			border-radius: 21rpx;
		}

		.langTip {
			width: 34rpx;
			height: 34rpx;
		}

		.langTipDom {
			width: 23rpx;
			height: 15rpx;
		}

		.text {
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 10rpx 20rpx;
		}

		.text1 {
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.uni-margin-wrap {
		height: 394rpx;

		.swiper {
			height: 100%;

			.swiper-box {
				height: 100%;
				text-align: center;

				.swiper-item {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.tra {
		height: 93rpx;
		background: #2B2A26;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #999999;

		.tra-item {
			width: 33.3%;
		}

		.tra-item:nth-child(2) {
			text-align: center;
		}

		.tra-item:nth-child(3) {
			text-align: right;
		}
	}

	.list {
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 20rpx 30rpx 20rpx 30rpx;
		line-height: 1;
		border-bottom: 1px solid #2B2A26;

		.list-item:nth-child(2) {
			text-align: center;
		}

		.list-item:nth-child(3) {
			text-align: right;
		}

		.list-item {
			width: 33.3%;

			.box {
				padding: 20rpx 0;
				min-width: 150rpx;
				text-align: center;
				border-radius: 10rpx;

				&.red {
					background-color: $uni-color-error;
				}

				&.green {
					background-color: $color-green;
				}
			}

			.img {
				width: 60rpx;
				height: 60rpx;
			}

			.button {
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				min-width: 150rpx;
				text-align: center;
				display: inline-block;

				&.up {
					background: #FB5E57;
				}

				&.dom {
					background: #77DA90;
				}
			}
		}
	}
</style>