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">互娛共享</text>
			</view>
			<view class="flex">
				<view class="icon2 text margin-r-10">
					oxs***23b
				</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.orderList">
			<view class="list-item flex-start">
				<image class="img margin-r-10" :src="item.img" mode="scaleToFill"> </image>
				<text class="tli">TRX</text>
			</view>
			<view class="list-item">
				29385.97
			</view>
			<view class="list-item ">
				<text class="button" :class="{up:item.fl==1,dom:item.fl==0}">
					{{item.fl==1?'+':'-'}} {{item.bfb}}%
				</text>
			</view>
		</view>
		<taber tab='index'></taber>
	</view>
</template>
<script>
	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: {
					loadingType: 'more',
					orderList: [{
						type: 'TRX',
						img: '../../static/shouye/shouye5.png',
						money: 2222,
						fl: 1,
						bfb: 0.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye6.png',
						money: 2222,
						fl: 0,
						bfb: 9.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye7.png',
						money: 2222,
						fl: 1,
						bfb: 0.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye8.png',
						money: 2222,
						fl: 1,
						bfb: 0.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye9.png',
						money: 2222,
						fl: 0,
						bfb: 0.25,
					}],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			label() {
				const label = this.langList.find((item) => {
					console.log(this.lang, item.value);
					return item.value == this.lang
				}).label;
				return label
			}
		},
		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列表下
				let navItem = this.navList;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				getCertList({
						page: navItem.page,
						limit: navItem.limit
					})
					.then(({
						data
					}) => {
						let list = data.list.data;
						navItem.orderList = navItem.orderList.concat(list);
						navItem.page++;
						if (navItem.limit == list.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
							if (navItem.orderList.length == 0) {
								uni.showModal({
									title: '提示',
									content: '您未申请证书是否立即申请',
									success: res => {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/certificate/apply'
											})
										}
									},
									fail: () => {},
									complete: () => {}
								});
							}
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 1600rpx;
		background-color: #000000;
	}

	.top {
		font-family: PingFang SC;
		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>