NFT/pages/index/appointment.vue

<template>
	<view class="center">
		<view class="box" v-for="(item, index) in list" :key="index" @click="nav(item.id)">
			<view class="top flex">
				<view class="bg"><image src=".../../static/img/index4.png" mode=""></image></view>
				<view class="title">{{ item.name }}</view>
			</view>
			<view class="main-bg">
				<image src="../../static/img/auto.png" mode=""></image>
			</view>
			<view class="font">
				预约消耗：<span class="money">{{ item.money * 1}}{{ item.money_type }}</span>
			</view>
			<view class="font" style="margin-top: 10rpx;">
				预约时间：<span class="time" >{{item.is_forever == 1? '永久' : item.valid_date+'天'}}</span>
			</view>
			<view class="btn">查看详情</view>
		</view>
	</view>
</template>

<script>
import { auto } from '@/api/product.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData() {
			auto({}).then(({ data }) => {
				this.list = data.data;
			});
		},
		nav(id) {
			uni.navigateTo({
				url: '/pages/index/appointmentD?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	background: #f5f5f5;
}
.box {
	margin: 20rpx auto 0;
	width: 690rpx;
	padding: 20rpx 20rpx 52rpx 30rpx;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	.top {
		justify-content: flex-start;
		align-items: center;
		.bg {
			width: 48rpx;
			height: 46rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.title {
			margin-left: 10rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0F253A;
		}
	}
	.main-bg {
		width: 520rpx;
		height: 165rpx;
		margin: 55rpx auto 0;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.font {
		margin-top: 62rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6D7C88;
		.money {
			font-size: 30rpx;
			color: #44969D;
		}
		.time {
			color:#0F253A;
		}
	}
	.btn {
		width: 558rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #60BAB0, #60BAB0, #45969B);
		border-radius: 40rpx;
		margin: 49rpx auto 0;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
}
</style>