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

<template>
	<view>
		<block>
			<view :class='{"active" : activeMarkersId == item.id}' class="store-card" v-if="item.admin_id"  @click.stop="navToStore(item.admin_id)" v-for="(item, index) in near_store_list" :key="index">
				<view>
					<view class="card-top-style flex-row flex-between">
						<view class="shop_name">{{item.shop_name}}</view>
						<view>{{item.distance}}</view>
					</view>
					<view class="card-center-ren flex-row">
						<view style="color: #0A59F7;border-color: #0A59F7;" v-for="(items,indexs) of item.business_list" :key="indexs" class=" tag align-c">
							{{items.title}}
						</view>
						<view class="align-c tag">
							<text class="card-center-num">{{item.model_list.length}}</text>
							款车型
						</view>
					</view>
				</view>
				<view v-if="item.model_list.length===1">
					<view class="card-bottom card-first flex-row">
						<view class="second-view flex-row">
							<view>
								<image :src="item.model_list[0]!=''?item.model_list[0].model_images:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'" mode="aspectFill"></image>
								</view>
							<view class="bottom-item">
								<view>{{item.model_list[0].model_name}}</view>
								<view>
									续航{{ tools.formatDistance(item.model_list[0].endurance-0) }}｜重量{{ tools.formatWeight(item.model_list[0].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>
							</view>
						</view>
					</view>
				</view>
				
				<scroll-view v-if="item.model_list.length>1" :scroll-into-view="'into'+into" scroll-x="true" enable-flex class="scrollview-box"
					scroll-with-animation @scroll="onScroll">
					<view @click.stop="$srcFn(`/pages/carDetail/carDetail?model_id=${item.model_id}`)" v-for="(items,index) in item.model_list" :key="index"
						:style="{ marginLeft: index > 0 ? '32rpx' : '0' }" class="form-item" :data-item="items"
						>
						<view class="second-view flex-row">
							<view>
									<image :src="items.model_images!=''?items.model_images:'https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj'" mode="aspectFill"></image>
							</view>
							<view class="bottom-item">
								<view>{{ items.model_name }}</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>
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="margin-top: 20rpx;" 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;">{{item.work_begin_time+'-'+item.work_end_time}}</text>
					</view>
					<view class="flex-row align-center">
						<view>
								<image @click.stop="callFn(item.link_phone)" style="width: 84rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa"  mode=""></image>
						</view>
						<view style="margin-left: 20rpx;">
							<image @click.stop="bindToNav(item)" style="width: 112rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" mode=""></image>
								
						</view>
					</view>
				</view>
			</view>
		</block>
	</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
			},
			near_store_list:{
				type:Array,
				defult:[]
			},
			activeMarkersId:{
				type:Number,
				defult:0
			}
		},
		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: {
			
		},
		watch: {
			// params: {
			// 	handler(val, oldVal) {
			// 		if (!val.desc_adress) return
			// 		this.$_getData(val, oldVal)
			// 	}
			// }
		},
		methods: {
			bindToNav(item) {
				const {
					latitude,
					longitude,
					shop_name
				} = item
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: shop_name,
				})
			},
			callFn(){
				uni.showModal({
					content: `您是否要拨打电话${tel}？`,
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: tel,
								success() {},
								fail() {}
							})
						}
					},
				})
				uni.makePhoneCall({
					phoneNumber: tel 
				});
			},
			curType() {
				// const obj = LEASE_TYPE_ARR.find(v => v.value == this.duration_unit)
				// return obj && obj.label
				return '租'
			},
			async navToStore(admin_id) {
				const url = '/pages/storeDetails/storeDetails?admin_id=' + admin_id 
				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 =  items.model_images
							items.total_price = (me.leaseTime * (items.price_setting[0].hire_price - 0)) /100
							return item
						})
					}
					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
				});
			},

			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>