daijia/司机端/pages/shunfeng/publish.vue

<template>
	<view>
		<view class="plr-36 flex">
			<view class="u-flex-1">
				<view class="flex ptb-40">
					<view class="center flex-column">
						<view style="width: 28rpx;height: 28rpx;background: #6340FF;border-radius: 50%;"></view>
						<view class="mt-10">
							起点
						</view>
					</view>
					<view class="input ml-30 u-flex-1 ptb-12 plr-20" style="border: 1rpx solid #ddd;" @click="goSearch(1)">
						<input type="text" v-model="start.city+'--'+start.name" placeholder="请选择起点" :disabled="true" v-if="start.address" />
						<text class="gray-2 size-28" v-else>请选择起点</text>
					</view>
				</view>
				<view class="flex pb-40">
					<view class="center flex-column">
						<view style="width: 28rpx;height: 28rpx;background: #EA0000;border-radius: 50%;"></view>
						<view class="mt-10">
							终点
						</view>
					</view>
					<view class="input ml-30 u-flex-1 ptb-12 plr-20" style="border: 1rpx solid #ddd;" @click="goSearch(2)">
						<input type="text" v-model="end.city+'--'+end.name" placeholder="请选择终点" :disabled="true" v-if="end.address" />
						<text class="gray-2 size-28" v-else>请选择终点</text>
					</view>
				</view>
			</view>
			<view class="img plr-20" @click="change">
				<image src="../../static/pub-switching.png" mode=""></image>
			</view>
		</view>
		<u-field class=" textarea" type="textarea" :clearable="false" v-model="line" label-width="140" label="路线" placeholder="请输入路线">
			<view slot="icon" class="icon flex1 mr-20">
				<image src="../../static/pub-icon-1.png" mode=""></image>
			</view>
		</u-field>
		<u-field class="" v-model="time" label-width="140" label="时间" :disabled="true" placeholder="请选择出发时间" @click="showTime=true">
			<view slot="icon" class="icon flex mr-20">
				<image src="../../static/pub-icon-2.png" mode=""></image>
			</view>
		</u-field>
		<u-field class="" v-model="model" label-width="140" label="车型" placeholder="例: 大众朗逸">
			<view slot="icon" class="icon flex mr-20">
				<image src="../../static/pub-icon-3.png" mode=""></image>
			</view>
		</u-field>
		<u-field class="" v-model="seat" label-width="140" label="余座" :disabled="true" placeholder="请选择余座" @click="show=true">
			<view slot="icon" class="icon flex mr-20">
				<image src="../../static/pub-icon-4.png" mode=""></image>
			</view>
		</u-field>
		<u-field class="" v-model="price" label-width="140" label="A费" placeholder="例: 30元/座">
			<view slot="icon" class="icon flex mr-20">
				<image src="../../static/pub-icon-5.png" mode=""></image>
			</view>
		</u-field>
		<u-field class="" v-model="mark" label-width="140" label="备注" placeholder="请填写备注">
			<view slot="icon" class="icon flex mr-20">
				<image src="../../static/pub-icon-6.png" mode=""></image>
			</view>
		</u-field>
		<view class="plr-36 flex1 flex-middle mt-40 mb-40">
			<view class="radio center">
				<view class="radio-circle">

				</view>
			</view>
			<view class="size-26 ml-10">
				我已阅读并同意<text class="blue" @click="goDetail">《合乘协议》</text>
			</view>
		</view>
		<u-button class="mt-30" :disabled="!line || !time || !model || !seat || !price || !mark" type="primary" @click="submit">发布出行信息</u-button>
		<!-- 选择时间 -->
		<u-popup v-model="showTime" mode="bottom" height="400" @close="$emit('close')">
			<longDate type="day" :openStatus="true" :getDayNum="7" :chooesMaxDay="7" @select="onSelectTime">
			</longDate>
		</u-popup>
		<!-- 选择座位 -->
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<!-- 弹出提示 -->
		<u-modal v-model="showModal" :content="content" :show-title="false" :show-cancel-button="true" :confirm-text="confirmText" @confirm="goOwner"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import longDate from '../../components/long-date/long-date.vue'
	export default {
		data() {
			return {
				line: '',
				time: '',
				model: '',
				seat: '',
				price: '',
				mark: '顺路上下，预订后电话确认一下',
				showTime: false,
				show:false,
				list:[{
					value:1,
					label:'1座'
				},
				{
					value:2,
					label:'2座'
				},
				{
					value:3,
					label:'3座'
				},
				{
					value:4,
					label:'4座'
				},
				{
					value:5,
					label:'5座'
				},
				{
					value:6,
					label:'6座'
				},
				{
					value:7,
					label:'7座'
				}],
				showModal: false,
				content:'',
				confirmText:''
			};
		},
		components:{
			longDate
		},
		computed: {
			...mapState(['start', 'end','userInfo']),
		},
		onShow() {
			if(this.userInfo.card_verified == 2){
				this.showModal = true
				this.confirmText = '确认'
				this.content = '您的车主认证正在审核中，请耐心等待审核通过之后才能发布订单'
			}else if(this.userInfo.card_verified != 1){
				this.showModal = true
				this.confirmText = '去认证'
				this.content = '请先进行车主认证之后，才能发布订单'
			}
			
			this.model = this.userInfo.card_type
			this.getLine()
		},
		methods: {
			//合乘协议
			goDetail(){
				uni.navigateTo({
					url:'/pages/my/help/details?id=16'
				})
			},
			// 切换起点和终点
			change(){
				let start = this.start
				let end = this.end
				this.$store.commit('getStart', end)
				this.$store.commit('getEnd', start)
				this.getLine()
			},
			// 获取路线
			getLine(){
				if(this.start.address && this.end.address ){
					this.line = this.start.name + '出发，X 站上车，X站下车，目的地：' + this.end.name
				}
			},
			goSearch(i) {
				uni.navigateTo({
					url: '/pages/shunfeng/search?type=' + i
				})
			},
			// 确定时间
			onSelectTime(res) {
				console.log(res);
				if (res.tip) {
					uni.showToast({
						title: res.tip,
						icon: 'none'
					})
				} else {
					this.time = res.time
					this.showTime = false
				}
			},
			// 选择余座
			confirm(e){
				console.log(e);
				this.seat = e[0].value
			},
			// 去车主认证
			goOwner(){
				if(this.userInfo.card_verified !=2 && this.userInfo.card_verified !=1){
					uni.navigateTo({
						url:'/pages/my/owner/index'
					})
				}
			},
			submit() {
				let arr = []
				arr.push(this.time.split(' ')[0].split('-')[0],this.time.split(' ')[0].split('-')[1]-1,this.time.split(' ')[0].split('-')[2])
				let t = new Date(...(arr),...(this.time.split(' ')[1].split(':')),"00");
				let time = parseInt(t.getTime()/1000)
				this.$http('/addons/ddrive/sforder/ddriver_create',{
					start_address: this.start.district + this.start.address + this.start.name,
					start_name:this.start.name,
					end_address: this.end.district + this.end.address + this.end.name,
					end_name:this.end.name,
					order_type: 2,
					route: this.line,
					start_time: time,
					car_type: this.model,
					more_seats: this.seat,
					car_price: this.price,
					remark: this.mark,
					start_city: this.start.city,
					end_city: this.end.city,
					people_num:'',
					start_latitude: this.start.latitude,
					start_longitude:this.start.longitude,
					end_latitude:this.end.latitude,
					end_longitude:this.end.longitude
				},"POST").then(data=>{
					uni.showToast({
						title:'发布成功'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/shunfeng/pub-list'
						})
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-primary-hover {
		background-color: $blue !important;
	}

	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}

	/deep/.u-field {
		margin: 0 34rpx !important;
		padding: 26rpx 0 !important;
	}

	/deep/.u-field .u-label-text {
		font-weight: 400 !important;
	}
	.textarea{
		/deep/.fild-body {
			margin-top: 10rpx;
		}
	}
	
	.input {
		input {
			font-size: 28rpx;
		}
	}

	.img {
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.icon {
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.radio {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;

		.radio-circle {
			width: 22rpx;
			height: 22rpx;
			background: $blue;
			border-radius: 50%;
		}
	}
</style>