dati/pages/my/openkemu.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">已开通科目</view>
			</view>
		</view>
		<!--#endif-->
		<view class="kemulist" v-if="myexchange.length > 0">
			<view class="kemubox" v-for="(item,index) in myexchange">
				<view class="kemutitle">{{item.subject_name}}</view>
				<view class="kemutime">到期时间：{{$myUtils.$common.formatDate(item.end_time * 1000,"Y年M月D日 h:m:s")}}</view>
			</view>
		</view>
		<view class="nokemu" v-else>
			<image src="../../static/img/mescroll-empty.png" mode="aspectFit" class="nokemuimg"></image>
			<view class="nokemutitle">暂无已开通科目</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myexchange: [],
			}
		},
		onLoad() {
			this.getmyexchange()
		},
		methods: {
			async getmyexchange() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.myexchange,
					data: {
						page: 1,
						limit: 999,
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.myexchange = res.data.data
				}
			},
		}
	}
</script>

<style>
	page {
		background: #f6f6f6;
	}

	.nokemu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.nokemuimg {
		width: 150px;
		height: 150px;
		margin-top: 30px;
	}

	.nokemutitle {
		margin-top: 10px;
		font-size: 12px;
		color: gray;
	}

	.kemulist {
		margin: 0 15px;
	}

	.kemubox {
		margin: 15px 0;
		padding: 15px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 2px 4px 10px rgb(0 0 0 / 8%);
	}

	.kemutitle {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-bottom: 6px;
		color: #333;
	}

	.kemutime {
		color: #999;
		font-size: 13px;
	}
</style>