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="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 class="store-type">租车</view>
					<view class="store-type">租车</view>
					<view class="store-type">租车</view>
					<view class="store-num-type"> <text class="store-num">7</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">{{isWorkTimer}}</view>
					</view>
					<view @tap="bindToNav" class="right_grid flex-between">
						<view>
							<view class="cab_distance">
								直线距您 600 m
							</view>
							<view class="cab_address">{{shopInfo.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 class="unit-type ">日租</view>
				<view class="unit-type unit-type-i">日租</view>
				<view class="unit-type ">日租</view>
				<view class="unit-type ">日租</view>
			</view>
			<view class="car-info-list-view">
				<view class="car-info-view align-center flex-row">
					<img class="car-img" src="https://qiniu.bms16.com/FsxOysJT2V3KNYev2YWadvjyKn2j" alt="">
					<view class="car-info">
						<view class="car-name flex-row">基础智能电动车</view>
						<view class="car-model-info">续航70km｜重量54kg</view>
						<view class="flex-row flex-between">
							<view class="unit-type-price flex-row"><text style="margin-right: 8rpx;">日租</text><priceTool :price="50" :font_size="40"/></view>
							<view 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 {
				storeInfo:{},
				isWorkTimer:"00:00-23:59"
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			console.log(options,'options');
			const shop_id = options.admin_id || ''
			this.loadStoreDetail(shop_id)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
		},
		methods: {
			loadStoreDetail(shop_id){
				const me=this
				console.log(shop_id,'shop_id');
				http.postApi(config.API_NEAR_SHOP_INFO, {shop_id}, (resp) => {
					if (resp.data.code === 200) {
						me.setData({
							storeInfo:resp.data.data.info
						})
					}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>
	@import './storeDetails.css';
</style>