xxdj1/user/pages/traffic/index.vue

<template>
	<view class="traffic">
		<view class="trafficItem" @click="showDistance=true">
			<text>接单距离（公里）</text>
			<view class="right">
				<text>{{form.max_distance}}</text>
				<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
			</view>
		</view>
		<view class="trafficItem"  @click="getActionSheet('day')">
			<text>白天车费类型</text>
			<view class="right">
				<text>{{form.day_car_name}}</text>
				<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
			</view>
		</view>
		<view class="trafficItem" @click="getActionSheet('night')">
			<text>晚上车费类型</text>
			<view class="right">
				<text>{{form.night_car_name}}</text>
				<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
			</view>
		</view>
		<view class="btn" @click="trafficList">
			保存
		</view>
		<u-action-sheet :actions="list" 
		:closeOnClickOverlay="true"
		@close="closeHandle"
		@select="selectHandle"
		:show="show"></u-action-sheet>
		<u-action-sheet :actions="list1"
		:closeOnClickOverlay="true"
		@close="closeDistanceHandle"
		@select="selectDistanceHandle"
		:show="showDistance"></u-action-sheet>
	</view>
</template>

<script>
export default{
	data(){
		return{
			list1:[
				{name:10},{name:20},{name:30},{name:40},{name:50},{name:60},{name:70},{name:80}
			],
			list: [
				{
					name:'免费',
					value:0
				},
				{
					name:'单程',
					value:1
				},
				{
					name:'双程',
					value:2
				},
			],
			show: false,
			showDistance:false,
			form:{
				day_car:0,
				day_car_name:'免费',
				night_car:0,
				night_car_name:'免费',
				max_distance:20
			},
			handleName:''
		}
	},
	methods:{
		closeHandle(){
			this.show = false
		},
		closeDistanceHandle(){
			this.showDistance = false
		},
		selectDistanceHandle(item){
			this.form.max_distance = item.name;
		},
		selectHandle(item){
			console.log(item,"0000")
			if(this.handleName=='day'){
				this.form.day_car = item.value;
				this.form.day_car_name = item.name
			}
			if(this.handleName=='night'){
				this.form.night_car = item.value;
				this.form.night_car_name = item.name
			}
		},
		getActionSheet(val){
			console.log(val)
			this.show = true;
			this.handleName=val
		},
		async trafficList(){
			let res= await this.$api.mine.trafficList({
				day_car:this.form.day_car,
				night_car:this.form.night_car,
				max_distance:this.form.max_distance
			})
			console.log(res,"nnn")
		}
	}
}
</script>

<style lang="scss" scoped>
	.traffic{
		background: #FFFFFF;
		border-radius: 30rpx;
		margin:20rpx 24rpx;
		position: relative;
	}
.trafficItem{
	// border:1px solid red;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin:0  30rpx;
	padding:40rpx 0;
	border-bottom:1px solid #eaeaea;
	text{
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}
	.right{
		display:flex;
	}
}
.btn{
	position: fixed;
	bottom:66rpx;
	padding:31rpx 0;
	background: #08BF77;
	border-radius: 45px;
	left:8%;
	width:84%;
	font-size: 30rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	text-align: center;
	color: #FFFFFF;
}
</style>