zx_flk_app/pages/carDetail/carDetail.vue

<template>
	<view class="car-detail-main">
		<view v-if="car_detail.image" class="flex-row">
			<img style="width: 600rpx;height: 406rpx;" :src="car_detail.image"
				alt="">
		</view>
		<view class="car-detail-model">
			<view class="car-detail-name">{{car_detail.car_model_name}}</view>
			<view class="car-detail-price"><allPrice :amount="price"/></view>
			<view style="flex-wrap: wrap;justify-content: flex-start;" class="flex-row car-detail-time">
				<view v-for="(item,index) in car_detail.rental_setting"  :key="index" @tap="tapSelectType" :data-price="item.hire_price"
					:data-select_type="item.hire_duration_unit"
					:class="['time-unit',selectType==item.hire_duration_unit? 'time-unit-i':'']">
					<text v-if="item.hire_duration_unit==1">日租</text>
					<text v-if="item.hire_duration_unit==2">月租</text>
					<text v-if="item.hire_duration_unit==3">年租</text>
					<text v-if="item.hire_duration_unit==4">时租</text>
					<text v-if="item.hire_duration_unit==5">分租</text>
					<text v-if="item.hire_duration_unit==6">周租</text>
					<text v-if="item.hire_duration_unit==7">季租</text>
				</view>
				
				<view @tap="tapSelectType" :data-select_type="100" :data-price="car_detail.sell_price"
					:class="['time-unit',selectType==100? 'time-unit-i':'']">购买</view>
			</view>
		</view>
		<!-- <view class="free-num-model">
			<view class="flex-row flex-between">
				<view class="free-num-view">
					<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" alt="">
					<text class="free-num-text">免费换电次数</text>
				</view>
				<view class="free-num-time">1 次/日</view>
			</view>
			<view class="free-num-tip">日租享1次免费换电数，超出后需要单独支付换电费用；</view>
		</view> -->
		<useGuidance />
		<view class="card-car-detail">
			<view class="step-title-view flex-row align-center">
				<img style="width: 208rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fms8V0l4bNwGUgWwkdRku4dIx_tt"
					alt="">
				<img style="width: 86rpx;height: 80rpx;" src="https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi"
					alt="">
				<view class="w-bg flex-row"></view>
			</view>
			<view class="step-car-view">
				<view class="step-img-view"></view>
				<view class="flex-row flex-between" style="margin-bottom: 24rpx;">
					<view class="store-name-view">
						<view>{{car_detail.shop_name}}</view>
						<view class="address-txt">{{car_detail.address}}</view>
					</view>
					<view class="distance-num">{{car_detail.distance}}m</view>
				</view>
				<view class="flex-row flex-between align-center">
					<view class="time-view flex-row alert-center">
						<img class="time-icon" src="https://qiniu.bms16.com/FlGVpR2fdrD1GfeHfDgt-dUMgkOq" alt="">
						<text>{{car_detail.work_begin_time + '-' + car_detail.work_end_time}}</text>
					</view>
					<view class="phone-or-nav flex-row">
						<view @tap="tapCallPhone">
							<img style="width: 84rpx;height: 64rpx;margin-right: 20rpx;" src="https://qiniu.bms16.com/FkZYljvsgGtXUGnQaA0wk_sbjlUC" alt="">
						</view>
						<view @tap="">
							<img style="width: 112rpx;height: 64rpx;" src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="use-car-view flex-row">
			<view @tap="useCarBtn" class="use-car-btn">我要用车</view>
		</view>
		<carPlan v-if="showCarPlan" @changeSelectType="changeSelectType" @closeShowMore="closeShowMore" :params="params" :selectType="selectType"/>
	</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>
	import CarPlan from '@/component/carPlan/carPlan';
	import UseGuidance from '@/component/useGuidance/useGuidance';
	import allPrice from '@/component/allPrice/allPrice';
	import {
		LEASE_TYPE_ARR
	} from '@/common/constant.js'
	var app = getApp();
	var config = require('@/common/config.js');
	var common = require('@/common/common.js');
	var http = require('@/common/http.js');
	var storage = require('@/common/storage.js');
	export default {
		data() {
			return {
				recommend_id: '',
				car_detail: {},
				showCarPlan: false,
				selectType: 1,
				myLocation: {
					latitude: 23.099994,
					longitude: 113.324004,
				},
				destance: 0,
				price:0,
				params:{}
			};
		},
		components: {
			CarPlan,
			UseGuidance,
			allPrice
		},
		onLoad: function(options) {
			console.log(options, 'options');
			if(options.model_id){
				this.model_id=options.model_id
				this.loadCarInfo()
			}
			// this.loadCarInfo()
			// getFlatternDistance 获取直线距离
		},
		methods: {
			async locationFn() {
					let res = await uni.getLocation()
					if (res[1]) {
						return {
							latitude: res[1].latitude,
							longitude: res[1].longitude,
						}
					}
				},
			async loadCarInfo() {
				const me = this
				// let test = {
				// 	"recommend_id": 3,
				// 	"title": "噢抬哇塞红擦无论谁",
				// 	"image": "https://loremflickr.com/400/400?lock=201810282360670",
				// 	"desc": "voluptate commodo quis fugiat ut",
				// 	"model_id": 1,
				// 	"car_model_name": "电摩-12",
				// 	"sell_price": 100,
				// 	"deposit": 10,
				// 	"rental_setting": [
				// 	  {
				// 		"setting_id": 1,
				// 		"admin_id": 1,
				// 		"hire_duration": 1,
				// 		"hire_duration_unit": 1,
				// 		"hire_price": 15,
				// 		"ctime": 1736330909,
				// 		"delete_time": 0
				// 	  },
				// 	  {
				// 		"setting_id": 2,
				// 		"admin_id": 1,
				// 		"hire_duration": 1,
				// 		"hire_duration_unit": 2,
				// 		"hire_price": 5,
				// 		"ctime": 1736386379,
				// 		"delete_time": 0
				// 	  }
				// 	],
				// 	"services_list": [
				// 	  {
				// 		"service_id": 3,
				// 		"admin_id": 1,
				// 		"service_name": "手套",
				// 		"ctime": 1736476283,
				// 		"delete_time": 0
				// 	  }
				// 	],
				// 	"shop_name": "智寻出行 - 测试",
				// 	"longitude": "115.815236",
				// 	"latitude": "28.691463",
				// 	"address": "江西省南昌市新建区友谊路与自强路交叉口北80米",
				// 	"work_begin_time": "03:00:00",
				// 	"work_end_time": "23:59:59",
				// 	"link_phone": "18779187403",
				// 	"distance": 11
				//   }
				// me.destance = common.getFlatternDistance(me.myLocation.latitude, me.myLocation.longitude, test.latitude,test.longitude)
				// console.log(me.destance);
				// me.setData({
				// 	car_detail: test
				// })
				let adress = await this.locationFn()
				http.postApi(config.API_FLK_INDEX_CAR_MODEL_DETAIL, {
					model_id:me.model_id,
					latitude: adress.latitude,
					longitude: adress.longitude,
				}, (resp) => {
					if (resp.data.code === 200) {
						
						me.setData({
							car_detail:resp.data.data,
							price:(resp.data.data.rental_setting[0].hire_price/100).toFixed(2)
						})
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			
			
			tapSelectType(e) {
				const {select_type,price} = e.currentTarget.dataset
				console.log(select_type,price,'select_type,price');
				this.setData({
					selectType: select_type,
					price:(price/100).toFixed(2)
				})
			},
			tapCallPhone(){
				const me = this
				const phone = this.car_detail.link_phone
				// const phone = 18170410707
				uni.showModal({
					content: `您是否要拨打电话${phone}？`,
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							me.clearTimer()
							uni.makePhoneCall({
								phoneNumber: phone,
								success() {},
								fail() {}
							})
						}
					},
					fail: (res) => {}
				})
			},
			navAddress(){
				const {
					address,
					latitude,
					longitude,
					shop_name
				} = this.car_detail
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: shop_name,
					address: address,
					success: function (res) {},
				})
			},
			useCarBtn(){
				const pData={
					...this.car_detail,
					price:this.price
				}
				this.setData({
					showCarPlan:true,
					params:pData
				})
			},
			changeSelectType(select_type,price){
				this.setData({
					selectType: select_type,
					price:(price/100).toFixed(2)
				})
			},
			closeShowMore(){
				this.setData({
					showCarPlan:false
				})
			}
		}
	};
</script>
<style>
	@import './carDetail.css';
</style>