zx_flk_app/pages/carDetail/carDetail.vue

<template>
	<view>
	<view class="car-detail-main">
		<navBar type="carDetail"/>
		<!-- <view v-if="car_detail.image" class="flex-row">
			<img style="width: 600rpx;height: 406rpx; margin: auto; margin-bottom: 20rpx;" :src="car_detail.image"
				alt="">
		</view> -->
		<view class="store-img-view">
			<swiper v-if="car_detail.model_images && car_detail.model_images.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 car_detail.model_images" :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="car-detail-model">
			<view class="car-detail-name">{{car_detail.car_model_name}}</view>
			<view class="car-detail-price">
				<allPrice :amount="Number(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" @click="tapSelectType(item)"
					: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 @click="tapSelectType({hire_duration_unit:100,hire_price:car_detail.sell_price})"
					: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="navAddress">
							<img style="width: 112rpx;height: 64rpx;"
								src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="nodes">
			<rich-text v-if="car_detail.desc" :nodes="car_detail.desc"></rich-text>
		</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>
</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,
				destance: 0,
				price: 0,
				params: {}
			};
		},
		components: {
			CarPlan,
			UseGuidance,
			allPrice
		},
		onLoad: function(options) {
			if (options.model_id) {
				this.model_id = options.model_id
				this.locationFn()
			}
			// this.loadCarInfo()
			// getFlatternDistance 获取直线距离
		},
		methods: {
			locationFn() {
				this.loadCarInfo(this.myLocation.longitude, this.myLocation.latitude)
			},
			loadCarInfo(latitude, longitude) {
				const me = this
				http.postApi(config.API_FLK_INDEX_CAR_MODEL_DETAIL, {
					model_id: me.model_id,
					latitude: latitude,
					longitude: longitude,
				}, (resp) => {
					if (resp.data.code === 200) {
						me.tapSelectType(resp.data.data.rental_setting[0])
						resp.data.data.distance = common.formatDistance(Number(resp.data.data.distance))
						me.setData({
							car_detail: resp.data.data,
							price: ((resp.data.data.rental_setting[0]?.hire_price || 0) / 100).toFixed(2)
						})
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			tapSelectType(e) {
				const {
					hire_duration_unit,
					hire_price
				} = e
				this.setData({
					selectType: hire_duration_unit,
					price: (hire_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) {
							uni.makePhoneCall({
								phoneNumber: phone,
							})
						}
					},
					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';
	.nodes{
		color: #333;
		font-size: 28rpx;
		padding: 34rpx 32rpx 32rpx;
	}
</style>