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">{{ind}}</text>
			</view>
			<view class="list-item">
				{{item.data[0].idxPx}}
			</view>
			<view class="list-item ">
				{{(item.data[0].idxPx - item.data[0].high24h) / item.data[0].high24h}}
			</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: {},
			}
		},
		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
			}
		},
		onLoad() {
			this.loadData()
		},
		
		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
					}) => {
						console.log('1111',data );
						that.navList = data.prices
					})
					.catch(e => {
						console.log(e);
					});
			},
			
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 1600rpx;
		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%;

			.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>