| <template> | |
| 	<view class="pagea"> | |
| 		 | |
| 		<navbar  | |
| 		title="预约列表"  | |
| 		leftClick  | |
| 		@leftClick="$utils.navigateBack" /> | |
| 		 | |
| 		<!-- <uv-tabs :list="tabs"  | |
| 		:activeStyle="{color : '#FD5100', fontWeight : 600}" | |
| 		lineColor="#FD5100" | |
| 		lineHeight="8rpx" | |
| 		lineWidth="50rpx" | |
| 		@click="clickTabs"></uv-tabs> --> | |
| 		 | |
| 		<view class="list"> | |
| 			<view class="item"  | |
| 			v-for="(item, index) in list"  | |
| 			@click="toOrderDetail(item.id)" | |
| 			:key="index"> | |
| 	 | |
| 				<view class="top"> | |
| 					<view class="service"> | |
| 						<text>预约日期:{{item.yearValue}}-{{item.monthDay}}</text> | |
| 					</view> | |
| 					<view class="status"> | |
| 						<text>{{ tabs[item.state].name }}</text> | |
| 					</view> | |
| 				</view> | |
| 	 | |
| 				<view class="contenta"> | |
| 	 | |
| 					<view class="left" | |
| 					v-if="item.image"> | |
| 						<image mode="aspectFill" :src="item.image"></image> | |
| 					</view> | |
| 	 | |
| 					<view class="right"> | |
| 						<view class="text-hidden-1"> | |
| 							客户姓名:{{item.name}} | |
| 						</view> | |
| 						<view class="text-hidden-1"> | |
| 							电话:{{item.phone}} | |
| 						</view> | |
| 						<view class="text-hidden-1"> | |
| 							预约时间:{{item.dayTime}} | |
| 						</view> | |
| 					</view> | |
| 	 | |
| 				</view> | |
| 	 | |
| 				<view class="bottom"> | |
| 					地址:{{ item.province }} | |
| 					{{ item.city }} | |
| 					{{ item.area }} | |
| 					{{ item.address }} | |
| 				</view> | |
| 				 | |
| 				<view class="bottom"> | |
| 					<view></view> | |
| 					 | |
| 					<view class="b2" | |
| 					v-if="item.state == 1" | |
| 					@click.stop="toEvaluate(item.id)"> | |
| 						去评价 | |
| 					</view> | |
| 				</view> | |
| 	 | |
| 			</view> | |
| 		</view> | |
| 		 | |
| 	</view> | |
| </template> | |
|  | |
| <script> | |
| 	import { mapGetters } from 'vuex' | |
| 	import mixinsList from '@/mixins/list.js' | |
| 	export default { | |
| 		mixins : [mixinsList], | |
| 		components : { | |
| 		}, | |
| 		computed : { | |
| 		}, | |
| 		data() { | |
| 			return { | |
| 				tabs: [ | |
| 					{ | |
| 						name: '待上门' | |
| 					}, | |
| 					{ | |
| 						name: '待评价' | |
| 					}, | |
| 					{ | |
| 						name: '已完成' | |
| 					}, | |
| 				], | |
| 				mixinsListApi : 'queryReservation', | |
| 			} | |
| 		}, | |
| 		onShow() { | |
| 		}, | |
| 		methods: { | |
| 			//点击tab栏 | |
| 			clickTabs(index) { | |
| 				if (index == 0) { | |
| 				} else { | |
| 				} | |
| 				this.queryParams.pageSize = 10 | |
| 				this.getData() | |
| 			}, | |
| 			 | |
| 			//跳转订单详情页面 | |
| 			toOrderDetail(id) { | |
| 				uni.navigateTo({ | |
| 					url: '/pages_order/info/appoint?id=' + id | |
| 				}) | |
| 			}, | |
| 			 | |
| 			// 去评价 | |
| 			toEvaluate(id){ | |
| 				// uni.navigateTo({ | |
| 				// 	url: '/pages/index/review?oid=' + id | |
| 				// }) | |
| 				 | |
| 				this.$store.commit('getAnswerList', id) | |
| 			}, | |
| 		} | |
| 	} | |
| </script> | |
|  | |
| <style scoped lang="scss"> | |
| 	.pagea{ | |
| 	} | |
| 	.list { | |
| 		.item { | |
| 			width: calc(100% - 40rpx); | |
| 			background-color: #fff; | |
| 			margin: 20rpx; | |
| 			box-sizing: border-box; | |
| 			border-radius: 16rpx; | |
| 			padding: 30rpx; | |
| 	 | |
| 			.top { | |
| 				display: flex; | |
| 				justify-content: space-between; | |
| 				align-items: center; | |
| 				font-size: 26rpx; | |
| 	 | |
| 				.service {} | |
| 	 | |
| 				.status { | |
| 					font-size: 26rpx; | |
| 					font-weight: 600; | |
| 				} | |
| 			} | |
| 	 | |
| 			.contenta { | |
| 				display: flex; | |
| 				margin: 10rpx 0; | |
| 	 | |
| 				.left { | |
| 					width: 150rpx; | |
| 					height: 150rpx; | |
| 					border-radius: 10rpx; | |
| 	 | |
| 					image { | |
| 						width: 150rpx; | |
| 						height: 150rpx; | |
| 						border-radius: 10rpx; | |
| 					} | |
| 				} | |
| 	 | |
| 				.right { | |
| 					flex: 1; | |
| 					color: #777; | |
| 					font-size: 24rpx; | |
| 					padding-left: 20rpx; | |
| 					line-height: 40rpx; | |
| 					background-color: #F8F8F8; | |
| 				} | |
| 			} | |
| 	 | |
| 			.bottom { | |
| 				display: flex; | |
| 				justify-content: space-between; | |
| 				font-size: 25rpx; | |
| 				.price { | |
| 					font-weight: 900; | |
| 					text { | |
| 						color: #ff780099; | |
| 						font-size: 30rpx; | |
| 					} | |
| 				} | |
| 				.b1 { | |
| 					border: 1px solid #777; | |
| 					color: #777; | |
| 					box-sizing: border-box; | |
| 				} | |
| 	 | |
| 				.b2 { | |
| 					background: linear-gradient(178deg, #ecb86488, #ecb864); | |
| 					color: #fff; | |
| 				} | |
| 	 | |
| 				view { | |
| 					margin: 12rpx; | |
| 					border-radius: 28rpx; | |
| 					padding: 8rpx 28rpx; | |
| 					margin-bottom: 0; | |
| 				} | |
| 			} | |
| 		} | |
| 	} | |
| </style>
 |