zx_flk_app/pages/storeDetails/storeDetails.vue

<template>
	<view class="container-view">
		<navBar type="index"></navBar>
		<!-- <view class="store-img-view" style="background-image: url('https://qiniu.bms16.com/FhG-xwyMdxPVjYNrxXnq5enGFT-2');background-repeat: no-repeat;background-size: 100% 500rpx;">
			
		</view> -->
		<view class="store-img-view">
			<swiper v-if="shop_image.length!=0" class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"
				indicator-color="rgba(0, 0, 0, 0.3)" indicator-active-color="#000000" :duration="1000" circular>
				<swiper-item class="swiper-item" v-for="(item,index) in shop_image" :key="index">
					<image class="swiper-item-img" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<image v-else class="bg-img" src="https://qiniu.bms16.com/FhRnr7rADHHsOFfpWO4duD15SgIt" mode="aspectFill">
			</image>
		</view>
		
		<view class="p-bg">
			<view class="store-info-view">
				<view class="store-name">{{storeInfo.shop_name}}</view>
				<view class="flex-row align-center" style="margin-bottom: 24rpx;">
					<view v-for="(item,index) of storeInfo.service_type_list" :key="index" class="store-type">
						{{item.title}}
					</view>
					<view class="store-num-type"> <text class="store-num">{{storeInfo.model_list.length || 0}}</text>
						款车型
					</view>
					<view class="store-phone" @tap="tapPhone"><img style="width: 84rpx;height: 64rpx;"
							src="https://qiniu.bms16.com/Ft0YA1JYmq66hdoeEN-PgBHy5vLa" alt=""></view>
				</view>
				<view class="flex-row flex-between">
					<view :class="isWorkTimer ? 'left_grid_2' : 'left_grid_1'">
						<view class="flex-row">
							<img style="width: 40rpx;height: 40rpx;"
								:src="!isWorkTimer ? 'https://zxappfile.bms16.com/zx_admin/cab_timer.png' : 'https://zxappfile.bms16.com/zx_admin/cab_timer_work.png'">
							<view :class="isWorkTimer ? 'grid_text_1' : 'grid_text_rest' ">
								{{isWorkTimer ? '营业中' : '已休息'}}
							</view>
						</view>
						<view v-if="storeInfo.work_begin_time" class="grid_text_2">
							{{storeInfo.work_begin_time[0]}}:{{storeInfo.work_begin_time[1]}}-{{storeInfo.work_end_time[0]}}:{{storeInfo.work_end_time[1]}}
						</view>
					</view>
					<view @tap="bindToNav" class="right_grid flex-between">
						<view>
							<view class="cab_distance">
								直线距您 {{storeInfo.distance}}
							</view>
							<view class="cab_address">{{storeInfo.address}}</view>
						</view>
						<view>
							<img class="icon_grid_1" src="https://zxappfile.bms16.com/zx_admin/cab_nav.png">
							<view class="grid_nav">导航</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="tip-view">
				<view class="tip-title-view flex-row align-center">
					<image style="width: 144rpx;height: 40rpx;" src="https://qiniu.bms16.com/FjUW1kuRvXWTEftyn9nH1AbGWuxK"
						mode='aspectFit'></image>
					<image style="width: 86rpx;height: 80rpx;" src="https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi"
						mode='aspectFill'></image>
					<view class="w-bg flex-row"></view>
				</view>
				<view class="step-view flex-row  align-center">
					<view class="icon-list-view">
						<image class="img1" src="https://qiniu.bms16.com/Fp0BE27Q0VTD8qUJRHUVhWO6VEbO" mode='aspectFit'></image>
					</view>
					<view class="dashed-line"></view>
					<view class="icon-list-view">
						<image class="img1" src="https://qiniu.bms16.com/FqDzYwAbnSEgf3yv9SAb92Vq4ZEB"
							mode='aspectFit'></image>
					</view>
					<view class="dashed-line"></view>
					<view class="icon-list-view">
						<image class="img1" src="https://qiniu.bms16.com/FlFMHzco6j9XOpMI21tSnR9500Un"
							mode='aspectFit'></image>
					</view>
				</view>
				<view class="step-tip-view flex-row  align-center">
					<view class="step-tip-text">
						<image class="step-num-1" src="https://qiniu.bms16.com/Fm4gMRmW6UOwLcU-eW8LDLNfiUJe" mode='aspectFill'>
						</image>线上选择用车方案生成待支付订单
					</view>
					<view class="step-tip-text">
						<image class="step-num-2" src="https://qiniu.bms16.com/FvYN7SxOYIhXEqSAJZrQIBQuTx79" mode='aspectFill'>
						</image>导航到店向商家支付订单金额
					</view>
					<view class="step-tip-text">
						<image class="step-num-3" src="https://qiniu.bms16.com/FhZ7w0X8iVuxFPdetEF9C3YYkJ7Z" mode='aspectFill'>
						</image>支付完成后直接现场取车
					</view>
				</view>
			</view>
			
			
			
			<view class="unit-type-view">
				<view @click="status = 0;modelListsFn()" class="unit-type " :class="{'unit-type-i' : status == 0}">短租
				</view>
				<view @click="status = 1;modelListsFn()" class="unit-type" :class="{'unit-type-i' : status == 1}">长租
				</view>
				<view @click="status = 2;modelListsFn()" class="unit-type " :class="{'unit-type-i' : status == 2}">出售
				</view>
			</view>
			
			<view class="car-info-list-view">
				<view v-for="(item,index) of modelListsFn()" :key="index" class="car-info-view align-center flex-row">
					<!-- <img class="car-img" src="https://qiniu.bms16.com/FsxOysJT2V3KNYev2YWadvjyKn2j" alt=""> -->
					<image class="car-img" :src="item.model_images" mode="aspectFill"></image>
					<view class="car-info">
						<view class="car-name flex-row">{{item.model_name}}</view>
						<view class="car-model-info">续航{{item.endurance}}km｜重量{{item.weight}}kg</view>
						<view class="flex-row flex-between">
							<view class="unit-type-price flex-row">
								<text v-if="status == 0" style="margin-right: 8rpx;">短租</text>
								<text v-if="status == 1" style="margin-right: 8rpx;">长租</text>
								<text v-if="status == 2" style="margin-right: 8rpx;">出售</text>
								<priceTool :price="Number(item.money)" :font_size="40" />
							</view>
							<view @click="srcFn(`/pages/carDetail/carDetail?model_id=${item.model_id}`)"
								class="lease-btn">购/租</view>
						</view>
					</view>
				</view>
			</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 priceTool from '@/component/priceTool/priceTool';
	// import UseGuidance from '@/component/useGuidance/useGuidance';
	export default {
		components: {
			priceTool,
			// UseGuidance
		},
		data() {
			return {
				shop_id:0,
				status: 0,
				shop_image: [],
				storeInfo: {
					model_list: []
				},
				isWorkTimer: null
			};
		},
		computed: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad:  function(options) {
			console.log(options, 'options');
			this.shop_id = options.admin_id || ''
			this.locationFn()
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			modelListsFn() {
				let obj = []
				for (let index = 0; index < this.storeInfo.model_list.length; index++) {
					let item = this.storeInfo.model_list[index];
					if(item.sell_price){
						obj.push({
							...item,
							money:(item.sell_price / 100).toFixed(2)
						})
					}
					for (var i = 0; i < item.price_setting.length; i++) {
						var items = item.price_setting[i];
						let money = (items.hire_price / 100).toFixed(2)
						if (!item.sell_price && this.status == 0 && (items.hire_duration_unit == 1 || items.hire_duration_unit == 4 || items
								.hire_duration_unit == 5 || items.hire_duration_unit == 6)) {
							obj.push({
								...item,
								money
							})
							break
						}
						if (!item.sell_price && this.status == 1 && (items.hire_duration_unit == 2 || items.hire_duration_unit == 3 || items
								.hire_duration_unit == 4)) {
							obj.push({
								...item,
								money
							})
							break
						}
				}
			}
			return obj
	},
	 locationFn() {
			let _this = this
			uni.getLocation({
				success(res) {
					_this.loadStoreDetail(_this.shop_id, res.longitude, res.latitude)
					
				}
			})
		},
		srcFn(url) {
			uni.navigateTo({
				url
			})
		},
		isWorkTimerFn() {
			this.storeInfo.work_end_time = ''
			this.storeInfo.work_end_time = ''
		},
		loadStoreDetail(shop_id, longitude, latitude) {
			const me = this
			console.log(shop_id)
			console.log(longitude)
			console.log(latitude)
			http.postApi(config.API_NEAR_SHOP_INFO, {
				shop_id,
				longitude,
				latitude,
			}, (resp) => {
				if (resp.data.code === 200) {
					me.setData({
						storeInfo: resp.data.data.info
					})
					this.storeInfo.distance = common.formatDistance(Number(this.storeInfo.distance))
					this.shop_image = JSON.parse(resp.data.data.info.shop_image) || []
					var cabinetInfo = resp.data.data.info
					this.storeInfo.work_begin_time = (cabinetInfo.work_begin_time == null ? '00:00:00' :
						cabinetInfo
						.work_begin_time).split(':')
					this.storeInfo.work_end_time = (cabinetInfo.work_end_time == null ? '00:00:00' :
						cabinetInfo
						.work_end_time).split(':')
					this.isWorkTimer = this.isWithinTimeRange(cabinetInfo.work_begin_time,
						cabinetInfo.work_end_time)
				} else {
					common.simpleToast(resp.data.msg)
				}
			})
		},
		isWithinTimeRange(startTime, endTime) {
			// 获取当前时间
			const now = new Date();
			const currentMinutes = now.getHours() * 60 + now.getMinutes();

			// 将传入的时间转换为分钟
			const [startHour, startMinute] = startTime.map(Number);
			const [endHour, endMinute] = endTime.map(Number);

			const startMinutes = startHour * 60 + startMinute;
			const endMinutes = endHour * 60 + endMinute;

			// 判断当前时间是否在指定范围内
			return currentMinutes >= startMinutes && currentMinutes <= endMinutes;
		},
		tapPhone() {
			const me = this
			uni.showModal({
				content: `您是否要拨打电话${me.storeInfo.link_phone}？`,
				confirmText: '确定',
				success: (res) => {
					if (res.confirm) {
						me.clearTimer()
						uni.makePhoneCall({
							phoneNumber: me.storeInfo.link_phone,
							success() {},
							fail() {}
						})
					}
				},
				fail: (res) => {}
			})
		},
		bindToNav() {
			const {
				address,
				latitude,
				longitude,
				shop_name
			} = this.storeInfo
			uni.openLocation({
				latitude: latitude - 0,
				longitude: longitude - 0,
				scale: 15,
				name: shop_name,
				address: address,
				success: function(res) {},
			})
		},
	}

	};
</script>

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