zx_flk_app/pages/storeDetails/storeDetails.vue

<template>
	<view class="container-view">
		<!-- <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 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>
			<useGuidance />
			<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="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 {
				status: 0,
				shop_image: [],
				storeInfo: {
					model_list: []
				},
				isWorkTimer: null
			};
		},
		computed: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: async function(options) {
			console.log(options, 'options');
			const shop_id = options.admin_id || ''
			let data = await this.locationFn()
			console.log(data)
			this.loadStoreDetail(shop_id, data.longitude, data.latitude)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			modelListsFn() {
				let obj = []
				for (let index = 0; index < this.storeInfo.model_list.length; index++) {
					let item = this.storeInfo.model_list[index];
					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 (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 (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
	},
	async locationFn() {
			let res = await uni.getLocation()
			if (res[1]) {
				return {
					latitude: res[1].latitude,
					longitude: res[1].longitude,
				}
			}
		},
		srcFn(url) {
			uni.navigateTo({
				url
			})
		},
		isWorkTimerFn() {
			this.storeInfo.work_end_time = ''
			this.storeInfo.work_end_time = ''
		},
		loadStoreDetail(shop_id, longitude, latitude) {
			const me = this
			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>
	@import './storeDetails.css';
</style>