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>
		
		<uv-empty
		v-if="total == 0"
		text="还没有订单呢!"
		textSize="30rpx"
		iconSize="200rpx"
		icon="list"></uv-empty>
		
		<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-info">
						{{ statusTitle[item.orderStatus] }}
					</view>
					
					<view class="btn"
					@click="toUrl(item)">
						再次预约
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins : [mixinsList],
		data() {
			return {
				statusTitle : ['待支付', '待使用', '已完成'],
				tabs: [
					{
						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()
			},
			toUrl(item){
				for(let key in this.$config.dict){
					if(this.$config.dict[key].payType == item.orderType){
						uni.navigateTo({
							url: `/pages_order/order/orderSubscribe?type=${key}&id=${item.itemId}`
						})
					}
				}
			},
		}
	}
</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: space-between;
					.btn-info{
						padding: 10px 30rpx;
						font-size: 24rpx;
						color: $uni-color;
					}
					.btn{
						padding: 10px 30rpx;
						font-size: 24rpx;
						background-color: $uni-color;
						color: #fff;
						border-radius: 35rpx;
					}
				}
			}
		}
	}
</style>