shunfengche-sfd/my/order/tdSet.vue

<template>
	<view v-if="shangxian === '否'" style="padding-bottom: 300rpx;">
		<view class="item_view" style="background: none;margin: 0rpx 30rpx;padding-bottom: 0rpx;">
			<view class=" flex justify-between center">
				<view class="item_name"
					style="width: 500rpx;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">当前位置：<text
						style="color: #346EF6;">{{address}}</text></view>
				<view class="flex align-center" @tap="getAddress">
					<image src="/static/upload/shuaxin.png" style="width: 30rpx;height: 30rpx;">
					</image>
					<view class="item_name" style="margin-left: 6rpx;">刷新</view>
				</view>
			</view>

			<view class="item_name margin-top-sm" style="color: #346EF6;">*请勿关闭声音，避免错过消息提醒</view>
		</view>
		<view class="item_view">
			<view class="item_title">出行信息</view>
			<view class="margin-top flex justify-between">
				<view class="item_name">换乘车辆</view>
				<view class="item_name">{{driverPlate}}</view>
			</view>
			<view class="margin-top flex align-center justify-between">
				<view class="item_name">语音类型</view>
				<view class="flex">
					<view :class="musicType == 2 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZYY(2)">
						女生
					</view>
					<view :class="musicType == 1 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZYY(1)">
						男生
					</view>
				</view>
			</view>
			<view class="margin-top flex align-center justify-between">
				<view class="item_name">是否有亲友</view>
				<view class="flex">
					<view :class="friendsType == 2 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZQY(2)">
						否
					</view>
					<view :class="friendsType == 1 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZQY(1)">
						是
					</view>
				</view>
			</view>
			<view class="margin-top flex align-center justify-between">
				<view class="item_name">可提供座位数</view>
				<view style="width: 272rpx;">
					<u-subsection :list="list" :current="current" @change="currentSel" :animation="true"
						height="60"></u-subsection>
				</view>
			</view>
		</view>

		<view class="item_view">
			<view class="item_title">听单偏好</view>
			<view class="item_kuang">
				<view class="item_name">播市内单</view>
				<u-switch v-model="snShow" inactive-color="#999999"></u-switch>
			</view>

			<view class="item_kuang">
				<view class="item_name">播跨城单</view>
				<u-switch v-model="kcShow" inactive-color="#999999"></u-switch>
			</view>
		</view>


		<view class="item_view">
			<view class="item_title">换乘距离</view>
			<view class="margin-top">
				<u-slider v-model="hcNum" min="10" step="10" height="20"></u-slider>
				<view class="flex justify-between margin-top-sm">
					<view class="item_name">{{hcNum / 10}}Km</view>
					<view class="item_name">10Km</view>
				</view>
			</view>

			<view class="item_title margin-top">出发时间</view>
			<view class="flex margin-top-sm">
				<view :class="timeNum == 1 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZSJ(1)">
					15分钟内
				</view>
				<view :class="timeNum == 2 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZSJ(2)">
					30分钟内
				</view>
				<view :class="timeNum == 3 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZSJ(3)">
					60分钟内
				</view>
				<view :class="timeNum == 4 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZSJ(4)">
					全天
				</view>
			</view>

			<view class="item_title margin-top">独享/愿拼</view>
			<view class="flex margin-top-sm">
				<view :class="dxSel == 1 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZDX(1)">
					不限
				</view>
				<view :class="dxSel == 2 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZDX(2)">
					只接拼座
				</view>
				<view :class="dxSel == 3 ? 'sj_item_sel' : 'sj_item'" @tap="checkBZDX(3)">
					只接独享
				</view>
			</view>
		</view>

		<view class="btn_view">
			<view class="mr_btn" @tap="mrClick">恢复默认</view>
			<view class="save_btn" @tap="saveSet">保持设置</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: '',
				musicType: 2,
				driverId: '',
				dxSel: 1,
				timeNum: 4,
				snShow: true,
				kcShow: true,
				current: 3,
				list: [{
						name: '1'
					},
					{
						name: '2'
					},
					{
						name: '3'
					},
					{
						name: '4'
					}
				],
				hcNum: 100,
				driverPlate: '',
				friendsType: 2,
				shangxian: '是'
			}
		},
		onLoad() {
			this.shangxian = uni.getStorageSync('shangxian')
			if (this.shangxian === '否') {
				uni.setNavigationBarTitle({
					title: '听单设置'
				})
			}
			this.getDetail();
			this.getAddress();
		},
		methods: {
			getAddress() {
				let that = this;
				that.$queue.showLoading('刷新中...')
				uni.getLocation({
					// #ifdef APP
					type: 'wgs84',
					// #endif
					// #ifndef APP
					type: 'gcj02', //wgs84  gcj02
					// #endif
					success: function(res) {
						console.log(res, '获取经纬度')
						let data = {
							lat: res.latitude,
							lng: res.longitude
						}
						that.$Request.getT('/app/Login/selectCity', data).then(res => {
							uni.hideLoading();
							if (res.code === 0 && res.data) {
								that.address = res.data.address
							}
						});
					},
					fail: function(ree) {
						uni.hideLoading();
					}
				});
			},
			currentSel(e) {
				this.current = e;
			},
			saveSet() {
				let latitude = uni.getStorageSync('latitude')
				let longitude = uni.getStorageSync('longitude')
				let city = uni.getStorageSync('cityName')
				let startTime = ''
				if (this.timeNum == 1) {
					startTime = '15分钟内'
				} else if (this.timeNum == 2) {
					startTime = '30分钟内'
				} else if (this.timeNum == 3) {
					startTime = '60分钟内'
				} else if (this.timeNum == 4) {
					startTime = '全天'
				}
				let data = {
					driverId: this.driverId,
					latitude: latitude,
					longitude: longitude,
					city: city,
					seatNum: this.current + 1,
					isFriends: this.friendsType,
					musicType: this.musicType,
					isCityOrders: this.snShow ? 1 : 0,
					isProvinceOrders: this.kcShow ? 1 : 0,
					ordersKm: this.hcNum / 10,
					ordersStartTime: startTime,
					ordersType: this.dxSel,
				}
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认保存听单设置吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: red => {
						if (red.confirm) {
							that.$queue.showLoading('保存中...')
							that.$Request.postJson('/app/driver/updateDriver', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.$queue.showToast('保存成功！')
									setTimeout(d => {
										uni.navigateBack();
									}, 1500)
								} else {
									that.$queue.showToast(res.msg)
								}
							});
						}
					}
				});
			},
			mrClick() {
				this.dxSel = 1;
				this.musicType = 2;
				this.timeNum = 4;
				this.snShow = true;
				this.kcShow = true;
				this.current = 3;
				this.hcNum = 100;
				this.friendsType = 2;
			},
			checkBZDX(index) {
				this.dxSel = index;
			},
			checkBZSJ(index) {
				this.timeNum = index;
			},
			checkBZYY(index) {
				this.musicType = index;
			},
			checkBZQY(index) {
				this.friendsType = index;
			},
			getDetail() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/driver/selectDriverByUserId?userId=' + userId).then(res => {
					if (res.code == 0 && res.data) {
						this.driverPlate = res.data.driverPlate
						this.driverId = res.data.driverId

						if (res.data.seatNum) {
							this.current = parseInt(res.data.seatNum) - 1
						}
						if (res.data.isFriends) {
							this.friendsType = res.data.isFriends
						}
						if (res.data.isCityOrders) {
							this.snShow = res.data.isCityOrders == 1 ? true : false
						}
						if (res.data.musicType) {
							this.musicType = res.data.musicType;
						}
						if (res.data.isProvinceOrders) {
							this.kcShow = res.data.isProvinceOrders == 1 ? true : false
						}
						if (res.data.ordersKm) {
							this.hcNum = parseInt(res.data.ordersKm) * 10
						}
						if (res.data.ordersStartTime) {
							// this.current = res.data.ordersStartTime
							if (res.data.ordersStartTime === '15分钟内') {
								this.timeNum = 1
							} else if (res.data.ordersStartTime === '30分钟内') {
								this.timeNum = 2
							} else if (res.data.ordersStartTime === '60分钟内') {
								this.timeNum = 3
							} else if (res.data.ordersStartTime === '全天') {
								this.timeNum = 4
							}
						}
						if (res.data.ordersType) {
							this.dxSel = res.data.ordersType
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.mr_btn {
		width: 214rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		border: 1px solid #999999;
		text-align: center;
		line-height: 98rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #161616;
	}

	.save_btn {
		width: 444rpx;
		height: 98rpx;
		background: #346EF6;
		border-radius: 32rpx;
		text-align: center;
		line-height: 98rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.item_view {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: 30rpx;
		padding: 30rpx;

		.item_title {
			font-family: Source Han Sans CN;
			font-weight: 800;
			font-size: 30rpx;
			color: #333333;
		}

		.item_kuang {
			width: 637rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #CCCCCC;
			align-items: center;
			padding: 30rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.item_name {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #030303;
		}
	}
	
	.btn_view{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
	}
	
	.sj_item {
		width: 140rpx;
		padding: 20rpx 0rpx;
		text-align: center;
		// height: 71rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 1px solid #CCCCCC;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #030303;
		margin-right: 20rpx;
	}

	.sj_item_sel {
		width: 140rpx;
		padding: 20rpx 0rpx;
		text-align: center;
		// height: 71rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 1px solid #346EF6;
		background: #EFF4FF;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #346EF6;
		margin-right: 20rpx;
	}

	.bz_item {
		width: fit-content;
		padding: 14rpx 30rpx;
		// height: 71rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 1px solid #CCCCCC;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #030303;
		margin-left: 20rpx;
	}

	.bz_item_sel {
		width: fit-content;
		padding: 14rpx 30rpx;
		// height: 71rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 1px solid #346EF6;
		background: #EFF4FF;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #346EF6;
		margin-left: 20rpx;
	}
</style>