yanzong_qianduan/pages/news/recycling/timer.vue

<template>
	<view class="recycling">
		<scroll-view scroll-x class="recycling-hd">
			<view class="item" v-for="(i,index) in dataList" :key="i" :class="tabIndex == index?'item-on':''"
				@click="tabItem(index,i)">
				<text>{{i.name}}</text>{{i.date}}
			</view>
		</scroll-view>
		<view class="recycling-bd">
			<view class="item" :style="i.status==1?'color:#212121':'color:#999'" v-for="(i,index) in timeList" :key="i"
				:class="(tabIndex1 == index &&i.status==1)?'item-on':''" @click="tabItem1(index,i)">
				{{i.value}}
				<text>{{i.status==1?'可约':'不可约'}}</text>
			</view>
		</view>
		<view class="recycling-fd">
			<view class="a">
				<u-divider>实际到达时间可能会有30分钟浮动</u-divider>
			</view>
			<view class="b" @click="onSend()">确定选择</view>
		</view>
	</view>
</template>
<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				tabIndex1: 1,
				tabIndex: 0,
				dataList: [],
				timeList: [],
				infor: '',
				time: ''
			}
		},
		onLoad(op) {
			this.infor = op.infor ? JSON.parse(op.infor) : ''
			this.getstopTimes(op.shop_id)
		},
		methods: {
			async onSend() {
				if (!this.time) {
					uni.showToast({
						title: '请选择时间',
						icon: 'none'
					})
					return
				}
				let {
					status,
					message,
					data
				} = await newFunApi.updateOrder(this.infor);
				if (status == 200) {
					uni.reLaunch({
						url: "/pages/news/recycling/orderList"
					})
				}
			},
			/**
			 * 时间
			 */
			async getstopTimes(shop_id) {
				let {
					status,
					message,
					data
				} = await newFunApi.stopTimes({
					shop_id: shop_id
				});
				if (status == 200) {
					this.dataList = data;
					this.timeList = data[0].list
				}
			},
			tabItem1(i, item) {
				this.tabIndex1 = i
				this.time = item.value
				this.infor.server_time = item.time
			},
			tabItem(index, item) {
				this.tabIndex = index;
				this.timeList = item.list
			},
		}
	}
</script>
<style lang="scss" scoped>
	.recycling {
		min-height: 100vh;
		padding-bottom: 210rpx;
		overflow: hidden;

		&-hd {
			padding: 30rpx;
			background-color: #FFFFFF;
			white-space: nowrap;
			box-sizing: border-box;

			.item {
				width: 220rpx;
				height: 130rpx;
				text-align: center;
				font-size: 26rpx;
				border-radius: 12rpx;
				display: inline-block;
				margin-left: 20rpx;
				color: #5c5c5c;
				border: 1px solid #f5f5f5;
				background-color: #f5f5f5;

				text {
					display: block;
					font-size: 30rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				&:first-child {
					margin-left: 0;
				}

				&-on {
					border-color: #fdeded;
					color: #D22C24;
					background-color: #fdeded;
				}
			}
		}

		&-bd {
			overflow: hidden;

			.item {
				width: 160rpx;
				height: 90rpx;
				text-align: center;
				font-size: 28rpx;
				color: #212121;
				border-radius: 10rpx;
				float: left;
				margin-left: 20rpx;
				margin-top: 30rpx;
				background-color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
				position: relative;
				overflow: hidden;
				border: 1px solid #FFFFFF;

				text {
					position: absolute;
					right: 0;
					top: 0;
					display: block;
					padding: 0 5rpx;
					line-height: 30rpx;
					background: #F3E7D7;
					font-size: 20rpx;
					font-weight: 500;
					color: #B18A55;
					border-radius: 0 5rpx 0 5rpx;
				}

				&-on {
					border-color: #D22C24;
					background-color: #FDEDED;
					color: #D22C24;
				}
			}
		}

		&-fd {
			width: 100%;
			height: 200rpx;
			background-color: #FFFFFF;
			padding: 15rpx 25rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;

			.a {
				font-size: 28rpx;
				font-weight: 400;
				color: #727272;
			}

			.b {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: #D22C24;
				border-radius: 90rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}
	}
</style>