GuangYuYuan-app/pages/my/free_fare.vue

<template>
	<view class="free_fare">
		<view class="day">
			<text>白天出租出行免车费设置(07:30-20:00)</text>

			<view class="select_box">
				<view class="option" :class="currentDay == index?'select':''" v-for="(item,index) in timeList" :key="index"
					@click="selectDay(item,index)">
					{{item.value}}公里
				</view>
			</view>

		</view>
		<view class="day">
			<text>夜间出租出行免车费设置(20:00-07:30)</text>
			<view class="select_box">
				<view class="option" :class="currentNight == index?'select':''" v-for="(item,index) in timeList" :key="index"
					@click="selectNight(item,index)">
					{{item.value}}公里
				</view>
			</view>
		</view>
		<view class="title">
			温馨提示：
			<text>1. 此处设置的免车费公里数是客服距离你的直线距离，直线距离的车行距离的地理位置特殊性上可能有一定误差，望大家设置距离时知晓。</text>
			<text>2. 设置的免出行费只针对出租车。</text>
		</view>
		<view class="btn_box">
			<view class="btn" @click="submit">
				确 认
			</view>
		</view>
	</view>

</template>

<script>
	import {
		freeFare,
		engineDetail
	} from '../../api/index.js'
	export default {
		data() {
			return {
				timeList: [{
						value: '0'
					},
					{
						value: '0.5'
					},
					{
						value: '1'
					},
					{
						value: '3'
					},
					{
						value: '5'
					},
					{
						value: '7'
					},
				],
				dayKm: '',
				nightKm: '',
				currentDay: null,
				currentNight: null,
				daytimeMileage: 0,
				nigthMileage: 0,
				id: '',
			}
		},
		methods: {
			selectDay(item, index) {
				this.currentDay = index
				this.daytimeMileage = item.value
			},
			selectNight(item, index) {
				this.currentNight = index
				this.nigthMileage = item.value
			},
			submit() {
				let data = {}
				data.id = this.id
				data.daytimeMileage = this.daytimeMileage
				data.nigthMileage = this.nigthMileage
				freeFare(data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '设置成功',
							icon: 'none'
						})
					}
				})
			},
			getInfo() {
				var openid = {
					cOpenId: uni.getStorageSync('wx_copenid')
				}
				engineDetail(openid).then(res => {
					if (res.data.data) {
						this.id = res.data.data.id
						this.daytimeMileage = res.data.data.daytimeMileage
						this.nigthMileage = res.data.data.nigthMileage
						for (let i = 0; i < this.timeList.length; i++) {
							if (this.timeList[i].value == this.daytimeMileage) {
								this.currentDay = i
							}
							if (this.timeList[i].value == this.nigthMileage) {
								this.currentNight = i
							}
						}
					}
				})
			}
		},
		onLoad() {
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.free_fare {
		width: 100vw;
		height: 100vh;
		padding: 32rpx 40rpx;
		box-sizing: border-box;
		background: linear-gradient(152deg, #DCFFF8 0%, #F1FEFF 100%);
		// position: relative;

		.day {
			margin-bottom: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			height: 248rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.05);
			border-radius: 20rpx;

			text {
				font-size: 28rpx;
				color: #2F3437;
				line-height: 33rpx;
				// margin-bottom: 12rpx;
			}

			.select_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 12rpx;

				.option {
					width: 162rpx;
					height: 56rpx;
					background-color: #DCE6E6;
					border-radius: 5px;
					// margin: 8px;
					text-align: center;
					line-height: 30px;
					margin: 12rpx;
				}

				.select {
					// width: 100px;
					// height: 30px;
					background-color: #20CBC3;
					border-radius: 5px;
					// margin: 8px;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
			// height: 268rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
			border-radius: 20rpx;
			padding: 24rpx;

			text {
				display: block;
				font-size: 28rpx;
				font-weight: 400;
				color: #2F3437;
				margin-top: 16rpx;
			}

			text:nth-child(1) {
				margin-top: 10px;
			}
		}

		.btn_box {
			width: 100vw;
			height: 116rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn {
				width: 90%;
				height: 76rpx;
				background: linear-gradient( 90deg, #1AD7CE 0%, #21C9C1 100%);
				border-radius: 106rpx ;
				text-align: center;
				line-height: 76rpx;
				color: #fff;
			}
		}
	}
</style>