zx_flk_app/pages/service/components/carRentalList/carRentalList.vue

<template>
	<view>
		<!-- <view
        v-for="(item,i) in shopModelListView"
        :key="i"
        class="store-card"
      > -->
		<view class="store-card">
			<view @tap="navToStore" :data-adminId="item.admin_id">
				<view class="card-top-style flex-row flex-between">
					<view>ashdjkahsdha</view>
					<view>240m</view>
				</view>
				<view class="card-center-ren flex-row">
					<view class="align-c">
						<text class="card-center-num">6</text>
						款车型
					</view>
				</view>
			</view>
			<view v-if="true">
				<view class="card-bottom card-first flex-row">
					<view class="second-view flex-row">
						<view><img :src="'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'"></view>
						<view class="bottom-item">
							<view>dhaksdhsha</view>
							<view>
								续航{{ 70 }}｜重量{{ 54 }}
							</view>
							<view class="flex-row flex-between">
								<view class="bottom-text">
									日租 <text style="margin-left: 10rpx;">￥</text><text>{{60 }}</text>
								</view>
								<view style="font-size: 24rpx;">数量: {{ 1 }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-row flex-between">
					<view class="align-center flex-row time-style-view">
						<img style="width: 40rpx;height: 40rpx;"
							src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
						<text style="margin-left: 2rpx;">10:00-22:00</text>
					</view>
					<view class="flex-row align-center">
						<view><img style="width: 84rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa" alt=""></view>
						<view style="margin-left: 20rpx;"><img style="width: 112rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt=""></view>
					</view>
				</view>
			</view>
			<scroll-view v-if="false" :scroll-into-view="'into'+into" scroll-x="true" enable-flex class="scrollview-box"
				scroll-with-animation @scroll="onScroll">
				<view v-for="(items,index) in item.model_list" :key="index"
					:style="{ marginLeft: index > 0 ? '32rpx' : '0' }" class="form-item" :data-item="items"
					@tap="navToOrderPage">
					<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">
									{{ curType }} <text style="margin-left: 10rpx;">￥</text><text>{{ 60}}</text>
								</view>
								<view style="font-size: 24rpx;">数量: 7</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view><view class="store-card">
			<view @tap="navToStore" :data-adminId="item.admin_id">
				<view class="card-top-style flex-row flex-between">
					<view>ashdjkahsdha</view>
					<view>240m</view>
				</view>
				<view class="card-center-ren flex-row">
					<view class="align-c">
						<text class="card-center-num">6</text>
						款车型
					</view>
				</view>
			</view>
			<view v-if="true">
				<view class="card-bottom card-first flex-row">
					<view class="second-view flex-row">
						<view><img :src="'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'"></view>
						<view class="bottom-item">
							<view>dhaksdhsha</view>
							<view>
								续航{{ 70 }}｜重量{{ 54 }}
							</view>
							<view class="flex-row flex-between">
								<view class="bottom-text">
									日租 <text style="margin-left: 10rpx;">￥</text><text>{{60 }}</text>
								</view>
								<view style="font-size: 24rpx;">数量: {{ 1 }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-row flex-between">
					<view class="align-center flex-row time-style-view">
						<img style="width: 40rpx;height: 40rpx;"
							src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
						<text style="margin-left: 2rpx;">10:00-22:00</text>
					</view>
					<view class="flex-row align-center">
						<view><img style="width: 84rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa" alt=""></view>
						<view style="margin-left: 20rpx;"><img style="width: 112rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt=""></view>
					</view>
				</view>
			</view>
			<scroll-view v-if="false" :scroll-into-view="'into'+into" scroll-x="true" enable-flex class="scrollview-box"
				scroll-with-animation @scroll="onScroll">
				<view v-for="(items,index) in item.model_list" :key="index"
					:style="{ marginLeft: index > 0 ? '32rpx' : '0' }" class="form-item" :data-item="items"
					@tap="navToOrderPage">
					<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">
									{{ curType }} <text style="margin-left: 10rpx;">￥</text><text>{{ 60}}</text>
								</view>
								<view style="font-size: 24rpx;">数量: 7</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-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>
	// let config = require('../../../common/config.js');
	// let common = require('../../../common/common.js');
	// let http = require('../../../common/http.js');
	// let storage = require('../../../common/storage.js');
	import {
		LEASE_TYPE_ARR
	} from '@/common/constant.js'
	import {
		loginToast
	} from '@/utils'
	export default {
		props: {
			params: {
				type: Object
			}
		},
		data() {
			return {
				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: [],
				shopModelListView: []
			};
		},
		computed: {
			curType() {
				const obj = LEASE_TYPE_ARR.find(v => v.value == this.duration_unit)
				return obj && obj.label
			}
		},
		watch: {
			params: {
				handler(val, oldVal) {
					if (!val.desc_adress) return
					this.$_getData(val, oldVal)
				}
			}
		},
		methods: {
			async navToOrderPage(e) {
				const isLogin = await loginToast()
				if (!isLogin) return
				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
				})
			},
			$_getData(val, oldVal = {}) {
				const oldValObj = oldVal || {}
				this.setData({
					rentalUnit: val.rentalUnit || '',
					desc_adress: val.desc_adress || '',
					takeCar: val.takeCar || '',
					leaseTime: val.leaseTime || ''
				})
				this.returnCar = val.returnCar || ''
				this.duration_unit = val.duration_unit || ''
				this.longitude = val.longitude || ''
				this.latitude = val.latitude || ''
				this.desc_city = val.desc_city || ''
				this.startDate = val.startDate || ''
				// 位置是否改变
				const isChangeLocation = (val.latitude !== oldValObj.latitude) || (val.longitude !== oldValObj.longitude)
				if (!this.shopModelList.length || isChangeLocation) {
					this.loadShopModelList()
				} else {
					this.loadFilteredList()
				}
			},
			loadShopModelList() {
				let 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) {
				let me = this

				shopModelList = shopModelList.map((item, index) => {
					if (item.model_list && Array.isArray(item.model_list)) {
						let all_num = 0
						let distance = ''
						for (let i = 0; item.model_list.length > i; i++) {
							let 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() {
				let shopModelList = []
				const list = this.$u.deepClone(this.shopModelList)
				for (let i = 0; list.length > i; i++) {
					let searchIndex = false
					let item = list[i]
					if (!(item.model_list && Array.isArray(item.model_list))) return

					item.model_list = item.model_list.filter(items => items.car_num !== 0);
					let model_list = []
					for (let j = 0; item.model_list.length > j; j++) {
						let price_setting_list = item.model_list[j].price_setting
						price_setting_list = price_setting_list.filter(items => this.duration_unit == items
							.hire_duration_unit);
						if (!common.isObjectEmpty(price_setting_list)) {
							searchIndex = true
							item.model_list[j].price_setting = price_setting_list
							model_list.push(item.model_list[j])
						}
					}
					if (searchIndex) {
						item.model_list = model_list
						shopModelList.push(item)
					}
				}
				shopModelList = this.recombineShopModelList(shopModelList)
				this.setData({
					shopModelListView: shopModelList
				})
			},

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

			async navToStore(e) {
				const isLogin = await loginToast()
				if (!isLogin) return
				//#ifdef MP-ALIPAY
				let adminId = e.currentTarget.dataset.adminId
				//#endif
				//#ifdef MP-WEIXIN
				let adminId = e.currentTarget.dataset.adminid
				//#endif

				// 门店id+是否免押+我的位置+取车时间+换车时间+租借时长+租借时长单位+经度+纬度+选中城市+开始时间
				let 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 +
					'&longitude=' + this.longitude + '&latitude=' + this.latitude + '&desc_city=' + this.desc_city +
					'&startDate=' + this.startDate + '&duration_unit=' + this.duration_unit
				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) {
				let 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) {
				let scrollX = e.detail.scrollLeft
				// if (scrollX % 356 > 178) {
				this.setData({
					into: Math.round(scrollX / 356)
				})
				// }
			},
		}
	};
</script>

<style scoped>
	@import url("./carRentalList.css");
</style>