zx_flk_app/pages/storeDetails/storeDetails.vue

<template>
	<view class="container-view">
		<navBar></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.split(':')[0]}}:{{storeInfo.work_begin_time.split(':')[1]}}-{{storeInfo.work_end_time.split(':')[0]}}:{{storeInfo.work_end_time.split(':')[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="unit-type-view">
				<view v-for="(item,index) of tagList" :key="index" @click="tagId = item;modelListsFn()"
					class="unit-type " :class="{'unit-type-i' : item == tagId}">{{typeArrFn(item)}}
				</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 style="margin-right: 8rpx;">{{typeArrFn(tagId)}}</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 {
		MAX_LIMITS,
		LEASE_TYPE_ARR
	} from '@/common/constant.js';
	// import UseGuidance from '@/component/useGuidance/useGuidance';
	export default {
		components: {
			priceTool,
			// UseGuidance
		},
		data() {
			return {
				tagId: 0,
				tagList: [],
				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 (this.tagId == 100 && item.sell_price) {
						obj.push({
							...item,
							money: (item.sell_price / 100).toFixed(2)
						})
					} else if (this.tagId != 100) {
						for (let i = 0; i < item.price_setting.length; i++) {
							var items = item.price_setting[i];
							let money = (items.hire_price / 100).toFixed(2)
							if (items.hire_duration_unit == this.tagId) {
								obj.push({
									...item,
									money
								})
							}
						}
					}
				}
				return obj
			},

			typeArrFn(type) {
				if (!type) return ''
				const result = LEASE_TYPE_ARR.find(v => v.value == type);
				return result.label
			},
			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
				http.postApi(config.API_NEAR_SHOP_INFO, {
					shop_id,
					longitude,
					latitude,
				}, (resp) => {
					if (resp.data.code === 200) {
						me.setData({
							storeInfo: resp.data.data.info
						})
						let arr = []
						resp.data.data.info.model_list.map(item => {
							if (item.sell_price) {
								arr.push(100)
							}
							item.price_setting.map(item => {
								arr.push(item.hire_duration_unit)
							})

						})

						this.tagList = Array.from(new Set(arr));
						this.tagId = this.tagList[0] || 0
						this.storeInfo.distance = common.formatDistance(Number(this.storeInfo.distance))

						this.shop_image = 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)
						this.storeInfo.work_end_time = (cabinetInfo.work_end_time == null ? '00:00:00' :
							cabinetInfo
							.work_end_time)
						this.isWorkTimer = common.isWithinTimeRange(cabinetInfo.work_begin_time,
							cabinetInfo.work_end_time)
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			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>