Jingde-town-wechat-uniapp/pages_order/mine/subscribe.vue

<template>
	<view class="page">
		<!-- 我的预约 -->
		<navbar title="我的预约" leftClick @leftClick="$utils.navigateBack" />

		<view style="background-color: #fff;">
			<uv-tabs :list="tabs" 
			lineColor="#B12026" 
			lineHeight="8rpx" 
			lineWidth="50rpx" 
			:scrollable="false"
			@click="clickTabs"></uv-tabs>
		</view>
		
		<view class="subscribe-list">
			<view class="item">
				
				<!-- 主题 -->
				<uv-cell title="景德镇一日游"
				:border="false">
					<template #icon>
						<text class="text">主题</text>
					</template>
					<template #value>
						<text class="price">￥199.0</text>
					</template>
				</uv-cell>
				
				<!-- 时间 -->
				<uv-cell
				:border="false">
					<template #icon>
						<text class="text">时间</text>
					</template>
					<template #title>
						<text class="time">2024-04-21</text>
					</template>
				</uv-cell>
				
				<!-- 电话 -->
				<uv-cell
				:border="false">
					<template #icon>
						<text class="text">电话</text>
					</template>
					<template #title>
						<text class="phone">15423451221</text>
					</template>
				</uv-cell>
				
				<view class="btns">
					<view class="btn">
						再次预约
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						name: '遗产路径'
					},
					{
						name: '我要研学'
					},
					{
						name: '文创好物'
					},
				],
			}
		},
		methods: {
			//点击tab栏
			clickTabs(index) {
				if (index == 0) {
					this.state = -1;
				} else {
					this.state = index - 1;
				}
				this.getOrderList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.subscribe-list{
			.item{
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx;
				padding: 20rpx;
				box-shadow: 0 0 16rpx 6rpx #00000011;
				/deep/ text{
					font-size: 26rpx;
					color: #333333;
					font-weight: 900;
				}
				/deep/ .text{
					color: #B7BBC7;
					margin-right: 20rpx;
					font-size: 26rpx;
				}
				/deep/ .price{
					color: #f40;
				}
				/deep/ .time{
					color: $uni-color;
				}
				.btns{
					display: flex;
					justify-content: flex-end;
					.btn{
						padding: 10px 30rpx;
						font-size: 24rpx;
						background-color: $uni-color;
						color: #fff;
						border-radius: 35rpx;
					}
				}
			}
		}
	}
</style>