h5-tiyu/pages/mine/card.vue

<template>
	<view class="page">
		<u-tabs :font-size='28' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="list" v-if="current==0">
			<view class="box u-flex" v-for="(item,index) in MyCertificate" :key="index">
				<image :src="item.goods.image" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						{{item.goods.title}}
					</view>
					<view class="time">
						{{item.free_end_time||''}}
					</view>
				</view>
				<view v-if="item.is_expire==1" class="button" style="margin-left: 36rpx;" @click='use(item.id)'>
					立即使用
				</view>
				<view v-if="item.is_expire==0" class="">
					<image src="../../static/images/past.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list" v-if="current==1">
			<view class="box u-flex" v-for="(item,index) in certificate" :key="index">
				<image :src="item.goods.image" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						{{item.goods.title}}
					</view>
					<view class="time">
						{{item.free_end_time||''}}
					</view>
				</view>
				<view v-if="item.is_expire==1" class="button" style="margin-left: 36rpx;" @click='use(item.id)'>
					立即使用
				</view>
				<view v-if="item.is_expire==0" class="">
					<image src="../../static/images/past.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list" v-if="current==2">
			<view class="box u-flex" v-for="(item,index) in uncertificate" :key="index">
				<image :src="item.goods.image" style="width:120rpx;height: 160rpx;" mode=""></image>
				<view class="" style="margin-left: 62rpx;width: 300rpx;">
					<view class="title">
						{{item.goods.title}}
					</view>
					<view class="time">
						{{item.free_end_time||''}}
					</view>
				</view>
				<view v-if="item.is_expire==1" class="button" style="margin-left: 36rpx;">
					立即使用
				</view>
				<view v-if="item.is_expire==0" class="">
					<image src="../../static/images/past.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '生效中'
				}, {
					name: '已过期',
				}],
				current: 0,
				MyCertificate: [],
				certificate: [],
				uncertificate: [],
			};
		},
		onLoad() {
			this.getMyCertificate()
			this.Certificate()
			this.unCertificate()
		},
		methods: {
			use(id) {
				this.$u.post('/api/certificate/useCertificate', {
					id: this.id
				}).then(res => {

				})
			},
			change(index) {
				this.current = index;
			},
			getMyCertificate() {
				this.$u.post('/api/certificate/getMyCertificate', {
					is_expire: ''
				}).then(res => {
					console.log(res);
					this.MyCertificate = res.data.data
				})
			},
			Certificate() {
				this.$u.post('/api/certificate/getMyCertificate', {
					is_expire: 1
				}).then(res => {
					console.log(res);
					this.certificate = res.data.data
				})
			},
			unCertificate() {
				this.$u.post('/api/certificate/getMyCertificate', {
					is_expire: 0
				}).then(res => {
					console.log(res);
					this.uncertificate = res.data.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.time {
		font-size: 20rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #222222;
		margin-top: 40rpx;
		opacity: 0.6;
	}

	.button {
		width: 144rpx;
		height: 64rpx;
		background: #06A971;
		border-radius: 8rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	::v-deep .u-tab-bar {
		background-color: #06A971 !important;
	}

	::v-deep .u-tab-item {
		color: #222 !important
	}

	.box {
		margin-top: 20rpx;
		padding: 40rpx 20rpx 40rpx 28rpx;
		width: 694rpx;
		height: 240rpx;
		background: #FFFFFF;
		background: url('../../static/images/module.png') no-repeat;
		background-size: cover;
	}

	.list {
		padding: 0 28rpx;
	}

	.page {
		background: #F6F6F6;
		min-height: 100vh;

	}
</style>