zx_flk_app/pages/carRental/carRental.vue

<template>
	<view class="container">
		<view class="store-item">
			<CarDemand ref="CarDemand" @updateInfo="updateInfo" />
			<view @tap="carDemandHandle" class="store-select">
				<view class="select-bg flex-row flex-between">
					<view class="flex-row flex-between">
						<view class="other-record">{{hideProvinceAndCity( myLocation.address || desc_adress)}}</view>
						<view class="b-border">｜</view>
						<view> {{takeCar}} 取车</view>
						<view class="b-border">｜</view>
						<text v-if="duration_unit==1">日租</text>
						<text v-if="duration_unit==2">月租</text>
						<text v-if="duration_unit==4">时租</text>
						<text v-if="duration_unit==6">周租</text>
						<text v-if="duration_unit==7">季租</text>
						<!-- <view> 共{{leaseTime+rentalUnit}}</view> -->
					</view>
					<view><img src="https://qiniu.bms16.com/FjOxX76jH0xi9m5Dnyi8H6YeAuwj" /></view>
				</view>
			</view>
			<!-- <view class="select-tab flex-row">
				<view @tap="bindDropDown" :class="isDropDown ? 'selected-item' : 'select-item'">
					取还方式
					<img
						:src="isDropDown ? 'https://qiniu.bms16.com/FhjkDo4wFE9XNGVeMiokv-Oa0aGL' : 'https://qiniu.bms16.com/Fo_o-6okVZN86tCSfZnFk0nyjvfO'" />
				</view>
				<view @tap="bindDropMoney" :class="bindDropMoney ? 'selected-item' : 'select-item'">
					车辆押金
					<img src="https://qiniu.bms16.com/Fo_o-6okVZN86tCSfZnFk0nyjvfO" />
				</view>
			</view> -->
			<view @tap="isDropDown=false" v-if="isDropDown" class="down-box">
				<view class="isShowDropDown">
					<view @tap.stop.prevent="bindWaySelect"
						:class="hire_return_type == 0 ? 'way-selected' : 'way-select'" data-status="0">
						全部
						<img v-if="hire_return_type == 0" src="https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq" />
					</view>
					<view @tap.stop.prevent="bindWaySelect"
						:class="hire_return_type == 1 ? 'way-selected' : 'way-select'" data-status="1">
						自行去门店取还
						<img v-if="hire_return_type == 1" src="https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq" />
					</view>
					<view @tap.stop.prevent="bindWaySelect"
						:class="hire_return_type == 2 ? 'way-selected' : 'way-select'" data-status="2">
						送车上门
						<img v-if="hire_return_type == 2" src="https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq" />
					</view>
				</view>
			</view>

			<view @tap="isDropMoney=false" v-if="isDropMoney" class="down-box">
				<view class="isShowDropDown">
					<view @tap.stop.prevent="bindMoneySelect" :class="open_freeze == 0 ? 'way-selected' : 'way-select'"
						data-status="0">
						全部
						<img v-if="open_freeze == 0" src="https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq" />
					</view>
					<view @tap.stop.prevent="bindMoneySelect" :class="open_freeze == 1 ? 'way-selected' : 'way-select'"
						data-status="1">
						开启免押
						<img v-if="open_freeze == 1" src="https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq" />
					</view>
					<view @tap.stop.prevent="bindMoneySelect" :class="open_freeze == 2 ? 'way-selected' : 'way-select'"
						data-status="2">
						未开启免押
						<img v-if="open_freeze == 2" src="https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq" />
					</view>
				</view>
			</view>
		</view>

		<view v-if="!isShowStore">
			<view  v-for="(item,i) in shopModelList" :key="i" class="store-card">
				<view @tap="navToStore" :data-adminId="item.admin_id" class="card-top-style flex-row flex-between">
					<view>{{item.shop_name}}</view>
					<view>{{item.distance}}</view>
				</view>
				<view @tap="navToStore" :data-adminId="item.admin_id" class="card-center-ren flex-row">
					<view><text style="color: #0074FF;font-weight: 600;">{{item.model_list.length}}</text> 款车型</view>
					<view><text style="color: #0074FF;font-weight: 600;">{{item.all_num}}</text> 辆可租</view>
					<view v-if="hire_return_type == 2">送车上门</view>
					<view v-if="open_freeze == 1">芝麻免押</view>
				</view>
				<view  :data-adminId="item.admin_id" v-if="item.model_list.length == 1">
					<view v-for="(items,index) in item.model_list" @tap="navToCarOrder" :data-item="items" :key="index" class="card-bottom card-first flex-row">
						<view v-if="items.price_setting.length!=0" class="second-view flex-row">
							<view><img
									:src="items.model_images!=''?items.model_images[0]:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'" />
							</view>
							<view class="bottom-item">
								<view>{{items.car_model}}</view>
								<view>
									续航{{tools.formatDistance(items.endurance-0)}}｜重量{{tools.formatWeight(items.weight-0)}}
								</view>
								<view class="flex-row flex-between">
									<view class="bottom-text">
										总价 <text>￥</text><text>{{items.total_price}}</text>
									</view>
									<view style="font-size: 24rpx;">数量: {{items.car_num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view v-if="item.model_list.length > 1" scroll-x="true" enable-flex class="scrollview-box"
					scroll-with-animation @scroll="onScroll" :scroll-into-view="'into'+into">
					<view @tap="navToCarOrder" :data-item="items" v-for="(items,index) in item.model_list" :key="index" class='form-item'
						:style="{ marginLeft: index > 0 ? '32rpx' : '0' }">
						<view v-if="items.price_setting.length!=0" class="second-view flex-row">
							<view><img
									:src="items.model_images!=''?items.model_images[0]:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'" />
							</view>
							<view class="bottom-item">
								<view>{{items.car_model}}</view>
								<view>
									续航{{tools.formatDistance(items.endurance-0)}}｜重量{{tools.formatWeight(items.weight-0)}}
								</view>
								<view class="flex-row flex-between">
									<view class="bottom-text">
										总价<text>￥</text><text>{{items.total_price}}</text>
									</view>
									<view style="font-size: 24rpx;">数量: {{items.car_num}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-else>
			<view class="empty">
				暂无门店~
			</view>
		</view>
	</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>
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	import CarDemand from '../index/components/CarDemand/UpdatePopup.vue'
	export default {
		data() {
			return {
				showCarDemandPopup: false,
				isDropDown: false,
				isDropMoney: false,
				citycode: '', //城市代码
				desc_adress: '', // 我的位置
				takeCar: '', // 取车时间
				returnCar: '', // 还车时间
				leaseTime: '', // 租借时长
				rentalUnit: '', // 租借时长单位
				longitude: '', // 经度
				latitude: '', // 纬度
				duration_unit: 0, //周期单位
				desc_city: '', //选中城市
				startDate: '',
				currentCity: true, //是否为当前城市
				page: 1,
				limit: 20,
				hire_return_type: 0, // 还车方式
				open_freeze: 0, //是否免押
				shopModelList: [],
				icBatteryIndex: 0,
				into: 0,
				// all_num: 0,
				// distance: '',
				isShowStore: false,
				model_list: [],
				showUpdateInfoPopup:true,
				myLocation: {}
			};
		},
		components: { CarDemand },
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options,'optionsoptions');
			this.setData({
				citycode: options.citycode?options.citycode:'',
				cityName: options.cityName || '',
				// currentCity: options.currentCity?options.currentCity:'',
				rentalUnit: options.rentalUnit ? options.rentalUnit : '',
				desc_adress: options.desc_adress ? options.desc_adress : '',
				takeCar: options.takeCar ? options.takeCar : '',
				leaseTime: options.leaseTime ? options.leaseTime : ''
			})
			this.returnCar = options.returnCar ? options.returnCar : ''
			this.duration_unit = options.duration_unit ? options.duration_unit : ''
			this.longitude = options.longitude ? options.longitude : ''
			this.latitude = options.latitude ? options.latitude : ''
			this.desc_city = options.desc_city ? options.desc_city : ''
			this.startDate = options.startDate ? options.startDate : ''
			options.myLocation && (this.myLocation = JSON.parse( options.myLocation) || {})
			this.loadShopModelList()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			// 参数传入弹窗
			carDemandHandle() {
				const data = {
					myLocation: this.myLocation,
					desc_adress: this.desc_adress,
					takeCar: this.takeCar,
					duration_unit: this.duration_unit,
					cityName: this.cityName,
					citycode: this.citycode
				}
				this.$refs.CarDemand.open(data)
			},
			updateInfo(data) {
				console.log(1111222);
				this.setData({
					myLocation: data.myLocation,
					desc_adress: data.desc_adress,
					takeCar: data.takeCar,
					duration_unit: data.duration_unit,
					cityName: data.cityName,
					citycode: data.citycode
				})
				this.loadShopModelList()
			},
			clickReSelectTime() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},

			loadShopModelList() {
				const me = this
				http.postApi(config.API_DAYHIRE_USER_SHOP_MODEL_LIST, {
					page: me.page,
					limit: me.limit,
					hire_return_type: me.hire_return_type,
					open_freeze: me.open_freeze,
					longitude: me.longitude,
					latitude: me.latitude
				}, (resp) => {
					if (resp.data.code === 200) {
						me.shopModelList = resp.data.data.list
						me.loadFilteredList()
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			//加上距离数量门店数据
			recombineShopModelList(shopModelList) {
				const me = this

				shopModelList = shopModelList.map((item, index) => {
					if (item.model_list && Array.isArray(item.model_list)) {
						var all_num = 0
						var distance = ''
						for (var i = 0; item.model_list.length > i; i++) {
							var model_item = item.model_list[i]
							all_num += item.model_list[i].car_num - 0
							distance = common.formatDistance(item.distance)
						}
						item.all_num = all_num
						item.distance = distance
						item.model_list.map(items => {
							items.model_images = (typeof items.model_images == "string") ? items
								.model_images.split(',') : items.model_images
							items.total_price = (me.leaseTime * (items.price_setting[0].hire_price - 0)) /
								100
						})
					}
					return item;
				});
				return shopModelList
			},

			//判断当前是否有租赁周期类型
			loadFilteredList() {
				var shopModelList = []
				console.log(this.shopModelList,'shopModelList');
				for (var i = 0; this.shopModelList.length > i; i++) {
					var searchIndex = false
					var item = this.shopModelList[i]
					if (!(item.model_list && Array.isArray(item.model_list))) return
					item.model_list = item.model_list.filter(items => items.car_num !== 0);
					var model_list = []
					for (var j = 0; item.model_list.length > j; j++) {
						var price_setting_list = item.model_list[j].price_setting
						price_setting_list = price_setting_list.filter(items => this.duration_unit == items
							.hire_duration_unit);
							console.log(price_setting_list,'price_setting_list');
						if (!common.isObjectEmpty(price_setting_list)) {
							searchIndex = true
							item.model_list[j].price_setting = price_setting_list
							model_list.push(item.model_list[j])
						}
					}
					console.log(model_list,'model_list');
					if (searchIndex) {
						item.model_list = model_list
						shopModelList.push(item)
					}
				}
				shopModelList = this.recombineShopModelList(shopModelList)
				this.setData({
					shopModelList: shopModelList
				})
			},

			navToPage(e) {
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url: url
				});
			},

			navToStore(e) {
				//#ifdef MP-ALIPAY
				const adminId = e.currentTarget.dataset.adminId
				//#endif
				//#ifdef MP-WEIXIN
				const adminId = e.currentTarget.dataset.adminid
				//#endif

				// 门店id+是否免押+我的位置+取车时间+换车时间+租借时长+租借时长单位+经度+纬度+选中城市+开始时间
				const skipUrl = '/pages/storeDetails/storeDetails?shop_id=' + adminId + '&open_freeze=' + this
					.open_freeze +
					'&desc_adress=' + this.desc_adress + '&takeCar=' + this.takeCar + '&returnCar=' + this.returnCar +
					'&leaseTime=' + this.leaseTime + '&rentalUnit=' + this.rentalUnit +'&duration_unit=' + this.duration_unit +
					'&longitude=' + this.longitude + '&latitude=' + this.latitude + '&desc_city=' + this.desc_city +
					'&startDate=' + this.startDate
				uni.navigateTo({
					url: skipUrl,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			bindDropDown() {
				this.isDropDown = !this.isDropDown
				this.isDropMoney = false
			},

			bindDropMoney() {
				this.isDropMoney = !this.isDropMoney
				this.isDropDown = false
			},

			bindWaySelect(e) {
				const hire_return_type = e.target.dataset.status;
				this.setData({
					hire_return_type: hire_return_type
				})
				this.loadShopModelList()
				this.isDropDown = false
			},

			bindMoneySelect(e) {
				this.open_freeze = e.target.dataset.status;
				this.loadShopModelList()
				this.isDropMoney = false
			},

			onScroll(e) {
				var scrollX = e.detail.scrollLeft
				// if (scrollX % 356 > 178) {
				this.setData({
					into: Math.round(scrollX / 356)
				})
				// }
			},
			navToCarOrder(e){
				console.log(111);
				const item = e.currentTarget.dataset.item
				const url = '/pages/purchaseOrder/purchaseOrder' +
				  '?modelId=' + item.model_id +
				  '&takeCar=' + this.takeCar +
				  '&returnCar=' + this.returnCar +
				  '&leaseTime=' + this.leaseTime +
				  '&rentalUnit=' + this.rentalUnit +
				  '&longitude=' + this.longitude +
				  '&latitude=' + this.latitude +
				  '&desc_city=' + this.desc_city +
				  '&startDate=' + this.startDate +
				  '&duration_unit=' + this.duration_unit
				uni.navigateTo({ url })
			},
			hideProvinceAndCity(address){
			    return common.hideProvinceAndCity(address)
			}
		}
	};
</script>

<style scoped>
	@import './carRental.css';
</style>