samehome/pages/subscription/index.vue

<template>
	<view class="main">
		<!-- nav -->
		<view class="nav-head">
			<view class="navItem" @click="pageState = 'product'" :class="{ select: pageState === 'product' }">
				{{ i18n.Product }}
			</view>
			<view class="navItem" @click="pageState = 'pending'" :class="{ select: pageState === 'pending' }">
				{{ i18n.Pending }}
			</view>
			<view class="navItem" @click="pageState = 'complete'" :class="{ select: pageState === 'complete' }">
				{{ i18n.Complete }}
			</view>
		</view>
		<!-- Product 产品列表 -->
		<view class="cardList">
			<view class="card" v-for="(item, index) in info" :key="index" @click="gotoDetails(item,index)">
				<!-- 卡片条件渲染 -->
				<!-- product -->
				<card-header v-if="pageState === 'product'" :iconName="baseURL+'/coins/'+item.coinCode+'.png'"
					:title="item.fullName"
					:rightName="item.status=='open'?'Subscribe':item.status=='close'?'Ended':'Coming soon'"
					:hasBtn="true" :btnColor="item.status=='open'?'#00E8A2':item.status=='close'?'#A1A0A8':'#F2FE8D'">
				</card-header>
				<view class="dataBody" v-if="pageState === 'product'">
					<key-value-row :keyName="i18n.STLTotalCirculation" :value="item.issueAmount"></key-value-row>
					<key-value-row :keyName="i18n.PrivateSalePrice" :value="item.initalPrice+item.coinCode">
					</key-value-row>
					<key-value-row :keyName="i18n.ICOTime" :value="item.startDate"></key-value-row>
				</view>


				<!-- pending -->
				<card-header v-if="pageState === 'pending'" :iconName="'../../static/maskets/bye.png'"
					:title="'973430980989323445'" :rightName="'Pending'" fontColor="#00E8A2">
				</card-header>
				<view class="dataBody" v-if="pageState === 'pending'">
					<key-value-row :keyName="i18n.Price" :value="'284145.61'"></key-value-row>
					<key-value-row :keyName="i18n.Quantity" :value="'1000'"></key-value-row>
					<key-value-row :keyName="i18n.USDT" :value="'3166.61'"></key-value-row>
					<key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>
				</view>


				<!-- complete -->
				<card-header v-if="pageState === 'complete'" :iconName="'../../static/maskets/bye.png'"
					:title="'973430980989323445'" :rightName="'complete'" fontColor="#00E8A2">
				</card-header>
				<view class="dataBody" v-if="pageState === 'complete'">
					<key-value-row :keyName="i18n.Price" :value="'284145.61'"></key-value-row>
					<key-value-row :keyName="i18n.Quantity" :value="'1000'"></key-value-row>
					<key-value-row :keyName="i18n.ConfirmAmount" :value="'999'" :leftColor="'#F2FE8D'"
						:rightColor="'#F2FE8D'"></key-value-row>
					<key-value-row :keyName="i18n.USDT" :value="'3166.61'"></key-value-row>
					<key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="'2000'" :leftColor="'#F2FE8D'"
						:rightColor="'#F2FE8D'">
					</key-value-row>
					<key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>

				</view>

			</view>
		</view>
		<u-empty :text="i18n.Dataisempty" mode="data" v-if="info.length==0"></u-empty>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" v-if="info.length" height="80" />
		<!-- tabBar -->
		<tab-bar :selectActive="4"></tab-bar>
	</view>
</template>

<script>
	import CardHeader from '../../components/cardHeader/cardHeader.vue';
	import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		components: {
			KeyValueRow,
			CardHeader
		},
		name: 'subscription',
		data() {
			return {
				baseURL: '',
				userInfoObj: [],
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				info: [],
				pageState: 'product', // 当前页签状态
				form: {
					pageNumber: 1,
					pageSize: 20,
					type: 'crypto',
				},
			}
		},
		onLoad() {
		},
		onShow() {
			this.baseURL = constant.BASE_URL
			this.getGoods();
		},
		onHide() {},
		computed: {
			i18n() {
				return this.$t('subscription')
			}
		},
		methods: {
			getGoods() {
				api.subscriptionList().then(res => {
					this.info = res;
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				})
			},
			gotoDetails(i, index) {
				if (this.pageState !== 'product') return
				if (i.status == 'close') {
					uni.$u.toast(this.$t("subscription").Subcompleted)
					return;
				}
				if (i.status == 'unstart') {
					uni.$u.toast(this.$t("subscription").Substarted)
					return;
				}
				uni.navigateTo({
					url: `/pages/subscription/details?id=${i.coinCode}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .cardHeader .button {
		width: 160rpx;
	}

	.main {
		padding-bottom: 198rpx; // 避免底部TabBar盖住内容

		.nav-head {
			overflow: hidden;
			position: fixed;
			top: 0rpx;
			height: 80rpx;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			z-index: 8;
			background-color: #15141F;
			padding: 94rpx 48rpx 0;


			.navItem {
				width: 218rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #0b7e60;
				font-size: 28rpx;
				border-bottom: 10rpx solid #0b7e60;
			}

			.select {
				color: #00E8A2;
				border-bottom: 10rpx solid #00E8A2;
			}

		}


		.cardList {
			margin-top: 212rpx;

			.card {
				background: #211F32;
				border-radius: 32rpx;
				margin: 32rpx;



				.dataBody {
					box-sizing: border-box;
					padding: 32rpx;
				}
			}
		}





	}
</style>