zx_flk_app/pages/index_1231/components/ReservationHireCar/index.vue

<template>
	<view class="container-view">
		<view class="card-box">
			<view class="card-top flex-row">
				<view class="top-left">
					<view>取车城市</view>
					<view @tap="navToPage" data-url="/pages/pickCarCity/pickCarCity?isFromComponent=true">
						{{cityName?cityName:desc_city}}
						<img style="margin-left: 4rpx;" src="https://qiniu.bms16.com/FiyzNhwVDwsoE-DszdymtconOypM" />
					</view>
				</view>
				<view class="top-center">
					<view class="flex-row">
						我的位置
						<view class="distance">距最近门店<text>{{distance}}</text></view>
					</view>
					<view v-if="isHaveCity||myLocation.address" class="other-record-wrap" @tap="navToMyPo">
						<text class="other-record-ellipsis">{{hideProvinceAndCity(myLocation.address?myLocation.address:desc_adress)}}</text>
						<img src="https://qiniu.bms16.com/FiyzNhwVDwsoE-DszdymtconOypM" />
					</view>
					<view v-else @tap="navToMyPo" style="color: #C2CEE0;font-weight: 400;">
						请选择您的位置
					</view>
				</view>
				<view class="top-right">
					<view>当前位置</view>
					<view class="top-right-img-wrap" @tap="getCurLocation">
						<img src="https://qiniu.bms16.com/Fg_gyOd78GozjxF4pPXM29Vme2CQ" />
					</view>
				</view>
			</view>
			<view class="card-center">
				<view class="center-left" @tap="openCalendar">
					<view style="margin-bottom: 26rpx;">取车时间</view>
					<view v-if="takeCar!=''" class="take-car-text">{{takeCar}}<img
							src="https://qiniu.bms16.com/FiyzNhwVDwsoE-DszdymtconOypM" /></view>
					<view v-else style="color: #C2CEE0;font-weight: 400;">请选择取车时间</view>
				</view>
				<view class="center-right" style="margin-left: 60rpx;" v-if="isUpdate" @tap="$emit('changeType')">
					<view style="margin-bottom: 18rpx;">选择租车类型</view>
					<view class="leatse-type">
						<view>{{ LEASE_TYPE_ARR.find(v => v.value == duration_unit).label }}</view>
						<img src="https://qiniu.bms16.com/FiyzNhwVDwsoE-DszdymtconOypM" />
					</view>
				</view>
				<view class="center-right" v-else>
					<view>选择{{ rentalType === 'short' ? '短租' : '长租'}}类型</view>
					<view class="lease-type-wrap">
						<view v-for="(unit, index) in leaseUnitsResult" :key="index" @tap="duration_unit = unit.value"
							:class="['lease-type-item', duration_unit === unit.value && 'lease-type-item-checked']">
							{{ unit.label }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="isUpdate" class="options">
				<view class="cancle-btn" @tap="updateClose('cancle')">关闭</view>
				<view class="submit-btn" @tap="updateClose('confirm')">确定</view>
			</view>
			<view @tap="navToCarRental" class="select-btn" v-else>
				立即选车
			</view>
			<view class="hire-tip flex-row">
				<view class="tip-text flex-row">
					<view>
						<image src="https://qiniu.bms16.com/FslaL_pBjFXzLsF9Ni_KEDbnVLFs" />
					</view>
					<text>大平台</text>
				</view>
				<view class="tip-text flex-row">
					<view>
						<image src="https://qiniu.bms16.com/FslaL_pBjFXzLsF9Ni_KEDbnVLFs" />
					</view>
					<text>有保障</text>
				</view>
				<view class="flex-row">
					<view>
						<image src="https://qiniu.bms16.com/FslaL_pBjFXzLsF9Ni_KEDbnVLFs" />
					</view>
					<text>放心租</text>
				</view>
			</view>
		</view>

		<Calendar ref="calendar" :showPopup.sync="isShowCalendar" @valuesUpdated="handleValuesUpdated" @close="closePopup" />
	</view>
</template>

<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
<script>
	const config = require('../../../../common/config.js');
	const common = require('../../../../common/common.js');
	const http = require('../../../../common/http.js');
	const storage = require('../../../../common/storage.js');
	import Calendar from '@/component/smartCalendar';
	import {
		LEASE_TYPE,
		LEASE_TYPE_ARR
	} from '@/common/constant.js'
	export default {
		components: {
			Calendar
		},
		props: {
			// 长租还是短租
			rentalType: {
				type: String,
				default: ''
			},
			// 是否为更新数据的作用
			isUpdate: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			leaseUnitsResult() {
				return LEASE_TYPE_ARR.filter(v => v.type === this.rentalType)
			}
		},
		data() {
			return {
				LEASE_TYPE_ARR,
				isShowCalendar: false,
				desc_adress: '',
				desc_city: '', //选中城市 默认为当前城市
				desc_cityCode: '',
				desc_city: '', //选中城市 默认为当前城市
				distance: '',
				takeCar: '',
				returnCar: '',
				leaseTime: 1,
				rentalUnit: '',
				duration_unit: 1,
				startDate: '',
				from: '',
				nowCity: '', //当前城市
				nowAdress: '', //当前位置
				emptyAdress: false,
				currentCity: true,
				myLocation: {
					latitude: null,
					longitude: null
				},
				cityCode: '',
				cityName: '',
				isHaveCity: true,
				dateText: ''
			};
		},
		watch: {
			// 切换长租短租时的默认值
			rentalType: {
				handler(val) {
					const mapVal = {
						'short': LEASE_TYPE.day,
						'long': LEASE_TYPE.month
					}
					this.duration_unit = mapVal[val]
				}
			}
		},
		created() {
			const locationStr = uni.getStorageSync('user_current_location');
			if (locationStr) {
				this.myLocation = locationStr;
				this.loadAddressLocation()
			} else {
				this.getCurLocation()
			}
			this.rentalUnit = '天'
			//#ifdef MP-ALIPAY
			this.from = 'ali'
			//#endif
			//#ifdef MP-WEIXIN
			this.from = 'wx'
			//#endif
			this.loadTime()
		},
		mounted() {
			uni.$on('getNewAdress', this.getNewAdress);
			uni.$on('getCityInfo', this.getCityInfo);
		},
		beforeDestroy() {
			uni.$off('getCityInfo', this.getCityInfo);
			uni.$off('getNewAdress', this.getNewAdress);
		},
		methods: {
			getCityInfo(info) {
				this.setData({
					cityCode: info.cityCode,
					cityName: info.cityName
				});
				this.loadHaveCity()
			},
			getNewAdress(adress) {
				this.setData({
					myLocation: JSON.parse(adress)
				});
			},

			setDataInfo(data) {
				const newData = {
					duration_unit: data.duration_unit,
					takeCar: data.takeCar,
					myLocation: data.myLocation,
					cityName: data.cityName,
					cityCode: data.cityCode
				}
				this.setData(newData)
				this.$refs.calendar && this.$refs.calendar.setTakeCarData({ 
					takeCar: data.takeCar,
					dateText: data.dateText
				 })
			},
			updateClose(type) {
				if (type === 'cancle') {
					this.$emit('close')
				} else {
					const obj = {
						myLocation: this.myLocation,
						desc_adress: this.desc_adress,
						takeCar: this.takeCar,
						duration_unit: this.duration_unit,
						cityName: this.cityName,
						cityCode: this.cityCode
					}
					this.$emit('close', obj)
				}
			},
			loadTime() {
				let _isNextDay = (new Date().getMinutes() - 0) > 30 && ((new Date().getHours() - 0 + 1) == 0)
				let _startH = (new Date().getMinutes() - 0) > 30 ? (new Date().getHours() - 0 + 1) : (new Date()
				.getHours() - 0)
				let _startM = (new Date().getMinutes() - 0) > 30 ? (new Date().getMinutes() - 30) : (new Date()
				.getMinutes() - 0 + 30)
				let time_text = _isNextDay ? common.getToDay(1) : common.getToDay()

				_startH = _startH < 10 && _startH !== '00' ? '0' + _startH : _startH
				_startM = _startM < 10 && _startM !== '00' ? '0' + _startM : _startM

				const startDate = time_text + 'T' + _startH + ':' + _startM
				this.startDate = startDate
				this.takeCar = common.formatDate(time_text) + ' ' + _startH + ':' + _startM
				const endDate = common.loadAugmentTime(this.leaseTime, startDate, 1)
				this.returnCar = common.formatTimeDate(endDate)
			},

			bindPickerChange(e) {

				const index = e.detail.value;
				this.setData({
					selectStatus: index,
					takeCar: '',
					leaseTime: '',
					rentalUnit: ''
				});
				if (this.selectStatus == 0) {
					this.rentalUnit = '小时'
					this.duration_unit = 4
				} else if (this.selectStatus == 1) {
					this.rentalUnit = '天'
					this.duration_unit = 1
				} else if (this.selectStatus == 2) {
					this.rentalUnit = '周'
					this.duration_unit = 6
				}
			},

			bindHireCar() {
				this.setData({
					isShowHireCar: true
				});
			},

			navToPage(e) {
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			getSkipUrlParams() {
				const rentalUnit = LEASE_TYPE_ARR.find(v => v.value === this.duration_unit).unit
				return {
					rentalUnit,
					desc_adress: this.desc_adress,
					takeCar: this.takeCar,
					returnCar: this.returnCar,
					leaseTime: this.leaseTime,
					duration_unit: this.duration_unit,
					longitude: this.myLocation.longitude,
					latitude: this.myLocation.latitude,
					desc_city: this.desc_city,
					startDate: this.startDate
				}
			},
			_getSkipUrlUrl() {
				const rentalUnit = LEASE_TYPE_ARR.find(v => v.value === this.duration_unit).unit
				const myLocation = JSON.stringify(this.myLocation)
				const skipUrl = `/pages/carRental/carRental?desc_adress=${this.desc_adress}&takeCar=${this.takeCar}` +
					`&returnCar=${this.returnCar}&leaseTime=${this.leaseTime}&rentalUnit=${rentalUnit}` +
					`&duration_unit=${this.duration_unit}&longitude=${this.myLocation.longitude}` +
					`&latitude=${this.myLocation.latitude}&desc_city=${this.desc_city}&startDate=${this.startDate}&myLocation=${myLocation}&cityName=${this.cityName}&cityCode=${this.cityCode}`;
				return skipUrl
			},
			loadFaceToken() {
				const me = this
				http.postApi(config.API_USER_FACE_TOKEN, {}, (resp) => {
					if (resp.data.code === 200) {
					me.face_token = resp.data.data.token
					me.face_key = resp.data.data.key
					uni.navigateTo({
						url: '/pages/livenessView/livenessView?face_token=' + me.face_token +
						'&face_key=' + this.face_key
					})
					} else {
					common.simpleToast(resp.data.msg)
					}
				})
			},
			// 判断是否登录或者实名
			_inletChecked() {
				const { userInfo = '' } = storage.getUserInfoData()
				if (userInfo.is_auth == 1 && userInfo.status != 2) {
					uni.showModal({
						title: '身份认证提示',
						content: '尚未完成身份认证，是否进行身份认证?',
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								this.loadFaceToken()
							}
						}
					})
					return false
				}
				if (!storage.getUserToken()) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								//#ifdef MP-ALIPAY
								uni.navigateTo({
									url: '/pages/phoneLogin/phoneLogin',
								})
								//#endif
								//#ifdef MP-WEIXIN
								uni.navigateTo({
									url: '/pages/login/login',
								})
								//#endif
							}
						}
					})
					return false
				}
				return true
			},
			async navToCarRental() {
				const check = await this._inletChecked()
				if (!check) return
				
				if (this.desc_adress == '') {
					common.simpleToast('请选择您的位置')
					return;
				}
				if (this.takeCar == '') {
					common.simpleToast('请选择取车时间')
					return;
				}
				if (this.leaseTime == '' || this.rentalUnit == '') {
					common.simpleToast('请选择租借时长')
					return;
				}

				// 我的位置+取车时间+还车时间+租借时长+租借时长单位+租借时长值+经度+纬度+选中城市+开始时间+是否为当前城市+城市代码
				const url = this._getSkipUrlUrl()
				uni.navigateTo({
					url
				})
			},

			openCalendar() {
				if (this.isUpdate) {
					this.$emit('calendarChange', '100%')
				}
				this.setData({
					isShowCalendar: true
				});
			},

			close() {
				this.setData({
					isShowCalendar: false
				})
			},

			loadAddressLocation(data) {
				common.loading()
				const me = this
				//#ifdef MP-ALIPAY
				const _pi = "ali_index"
				//#endif
				//#ifdef MP-WEIXIN
				const _pi = "wx_index"
				//#endif

				const lng = data ? data.longitude + '' : me.myLocation.longitude + ""
				const lat = data ? data.latitude + '' : me.myLocation.latitude + ""
				
				const pData = {
					lng,
					lat,
					pi: _pi
				}
				http.postApi(config.API_MAP_REGEO, pData, function(resp) {
					if (resp.data.code === 200) {
						uni.hideLoading()
						let jsonData = resp.data.data.data
						if (jsonData.code === 0) {
							if (!!me.myLocation.address) {
								me.nowAdress = me.myLocation.address
								me.desc_adress = me.myLocation.address
							} else {
								me.nowAdress = jsonData.address
								me.desc_adress = jsonData.address
							}

							me.nowCity = jsonData.city
							if (me.desc_city == '') {
								me.desc_city = me.nowCity
							}
							me.loadHaveCity()
							me.loadNearShop(me.desc_adress, lng, lat)
						}
					} else {
						uni.hideLoading()
						common.simpleToast(resp.data.msg)
					}
				})
			},

			loadHaveCity() {
				const me = this
				if (me.desc_city != '') {
					if (me.cityName == '' || (me.cityName != '' && me.cityName == me.desc_city)) {
						me.isHaveCity = true
					} else {
						me.isHaveCity = false
					}
				} else {
					me.isHaveCity = false
				}
			},

			loadNearShop(_cityname, _longitude, _latitude) {
				const me = this
				const pData = {
					cityname: _cityname,
					longitude: _longitude,
					latitude: _latitude
				}
				http.postApi(config.API_DAYHIRE_USER_MOST_NEAR_SHOP, pData, function(resp) {
					if (resp.data.code === 200) {
						let shopInfo = resp.data.data.shop_info ||{}
						let distance = ('distance' in shopInfo)?shopInfo.distance:''
						me.distance = common.formatDistance(distance)
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			handleValuesUpdated(e) {
				this.takeCar = e.takeCar
				this.returnCar = e.returnCar
				this.leaseTime = e.leaseTime
				this.startDate = e.startDate
				this.dateText = e.date
				this.closePopup()
			},
			// 获取当前位置
			getCurLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						const myLocation = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						this.setData({ myLocation })
						uni.setStorageSync('user_current_location', myLocation)
						this.loadAddressLocation(myLocation)
					}
				})
			},
			navToMyPo() {
				const _desc_city = this.cityName != '' ? this.cityName : this.desc_city
				uni.navigateTo({
					url: '/pages/myPosition/myPosition?descAdress=' + this.desc_adress + '&descCity=' +
						_desc_city +
						'&nowCity=' + this.desc_city + '&longitude=' + this.longitude + '&latitude=' + this
						.latitude + '&isFromComponent=true',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			closePopup() {
				if (this.isUpdate) {
					const timer = setTimeout(() => {
						this.$emit('calendarChange', 'auto')
						clearTimeout(timer)
					}, 300)
				}
				this.isShowCalendar = false
			},
			hideProvinceAndCity(address){
			    return common.hideProvinceAndCity(address)
			}
		}
	};
</script>

<style>
	@import './index.css';
</style>