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" 
			@click="clickTabs"></uv-tabs>
		</view>
		
		<view class="subscribe-list">
			<view class="item"
			v-for="(item, index) in list">
				
				<!-- 主题 -->
				<uv-cell :title="item.orderTitle"
				:border="false">
					<template #icon>
						<text class="text">主题</text>
					</template>
					<template #value>
						<text class="price">￥{{ item.orderPrice }}</text>
					</template>
				</uv-cell>
				
				<!-- 日期 -->
				<uv-cell
				:border="false">
					<template #icon>
						<text class="text">日期</text>
					</template>
					<template #title>
						<text class="time">{{ item.orderDate }}</text>
					</template>
				</uv-cell>
				
				<!-- 时间 -->
				<uv-cell
				:border="false">
					<template #icon>
						<text class="text">时间</text>
					</template>
					<template #title>
						<text class="time">{{ item.orderTime }}</text>
					</template>
				</uv-cell>
				
				<!-- 电话 -->
				<uv-cell
				:border="false">
					<template #icon>
						<text class="text">电话</text>
					</template>
					<template #title>
						<text class="phone">{{ item.orderPhone }}</text>
					</template>
				</uv-cell>
				
				<view class="btns">
					<view class="btn">
						再次预约
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins : [mixinsList],
		data() {
			return {
				tabs: [{
						name: '路径定制'
					},
					{
						name: '遗产讲述'
					},
					{
						name: '达人同游'
					},
					{
						name: '我要跟拍'
					},
					{
						name: '非遗体验'
					},
					{
						name: '遗产路径'
					},
					{
						name: '我要研学'
					},
				],
				mixinsListApi : 'queryOrderList',
				list : [],
			}
		},
		onLoad() {
			this.queryParams.orderType = 0
		},
		onShow() {
			this.getData()
		},
		methods: {
			//点击tab栏
			clickTabs({index}) {
				this.queryParams.orderType = index;
				this.getData()
			},
		}
	}
</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>