pz/pages/index/card.vue

<template>
	<view class="container">
		<view class="vheigh"></view>
		<view class="top"><image src="../../static/img/cardbg.png" mode=""></image></view>
		<view class="main">
			<view class="main-item" v-for="(item, index) in cardList" @click="navTo(item)">
				<view class="main-item-top flex">
					<view class="main-item-top-bg"><image :src="item.image" mode=""></image></view>
					<view class="main-item-top-left">
						<view class="main-item-title">{{ item.name }}</view>
						<view class="main-item-time" v-if="item.type == 1">有效期{{ item.time }}天</view>
						<view class="main-item-time" v-if="item.type == 2">有效次数{{ item.number }}次</view>
					</view>
					<view class="main-item-type">{{ item.type == 1 ? '时效卡' : '次卡' }}</view>
				</view>
				<view class="main-item-bottom">
					<view class="main-item-bottom-bg"><image src="../../static/img/cardbottom.png" mode=""></image></view>
					<view class="main-item-price">
						<text class="fh">￥</text>
						{{ item.price }}
						<text class="time"></text>
					</view>
					<view class="main-item-info flex">
						<view class="main-item-info-left">{{ item.info }}</view>
						<view class="main-item-info-right">
							<view class="main-item-info-font">查看详情</view>
							<view class="main-item-info-icon"><image src="../../static/img/img39.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { cardlist } from '@/api/jdr.js';
export default {
	data() {
		return {
			cardList: [],
			page: 1,
			limit: 1000
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		navTo(opt) {
			uni.navigateTo({
				url: '/pages/index/cardDetail?id=' + opt.id
			});
		},
		loadData() {
			const obj = this;
			cardlist({ page: obj.page, limit: obj.limit }).then(({ data }) => {
				obj.cardList = data;
			});
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	min-height: 100%;
	height: auto;
	background: #ffffff;
}
.vheigh {
	height: var(--status-bar-height);
	background-color: $base-color;
}
.top {
	position: relative;
	height: 534rpx;
	width: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.main {
	margin: 52rpx 0 0;
	padding: 0 24rpx;
	width: 750rpx;
	.main-item {
		.main-item-top {
			align-items: flex-start;
			width: 702rpx;
			height: 150rpx;
			position: relative;
			.main-item-top-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 702rpx;
				height: 150rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main-item-top-left {
				position: relative;
				z-index: 2;
				padding: 40rpx 0 0 30rpx;
				line-height: 1;
				.main-item-title {
					font-size: 42rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #c99f62;
				}
				.main-item-time {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #d6d1d1;
				}
			}
			.main-item-type {
				padding: 56rpx 24rpx 0 0;
				position: relative;
				z-index: 2;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #d6d1d1;
			}
		}
		.main-item-bottom {
			width: 702rpx;
			height: 176rpx;
			position: relative;
			padding: 30rpx 30rpx 0;
			line-height: 1;
			.main-item-bottom-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 702rpx;
				height: 176rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main-item-price {
				position: relative;
				z-index: 2;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff6f0f;
				.fh {
					font-size: 20px;
				}
				.time {
					font-size: 20px;
					color: #333333;
				}
			}
			.main-item-info {
				position: relative;
				z-index: 2;
				margin-top: 20rpx;
				.main-item-info-left {
					width: 100%;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
				.main-item-info-right {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					line-height: 1;
					.main-item-info-font {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-right: 10rpx;
					}
					.main-item-info-icon {
						position: relative;
						top: -10rpx;
						width: 19rpx;
						height: 19rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}
</style>