zx_flk_app/pages/carDetail/carDetail.vue

<template>
	<view>
		<view class="car-detail-main">
			<Navigation :scroll='scrollTop'></Navigation>
			<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 style="width: 100%;height: 100%;" class="swiper-item-img" :src="item" mode="aspectFit">
						</image>
					</swiper-item>
				</swiper>
				<image v-else class="bg-img" src="https://qiniu.bms16.com/FhRnr7rADHHsOFfpWO4duD15SgIt"
					mode="aspectFit">
				</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">{{ $t('日租') }}</text>
						<text v-if="item.hire_duration_unit==2">{{ $t('月租') }}</text>
						<text v-if="item.hire_duration_unit==3">{{ $t('年租') }}</text>
						<text v-if="item.hire_duration_unit==4">{{ $t('时租') }}</text>
						<text v-if="item.hire_duration_unit==5">{{ $t('分租') }}</text>
						<text v-if="item.hire_duration_unit==6">{{ $t('周租') }}</text>
						<text v-if="item.hire_duration_unit==7">{{ $t('季租') }}</text>
					</view>

					<view v-if="car_detail.sell_price != 0"
						@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':'']">{{ $t('购买') }}</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">{{ $t('免费换电次数') }}</text>
				</view>
				<view class="free-num-time">1 {{ $t('次') }}/{{ $t('日') }}</view>
			</view>
			<view class="free-num-tip">{{ $t('日租享') }}1{{ $t('次免费换电数，超出后需要单独支付换电费用；') }}</view>
		</view> -->
			<useGuidance />
			<view class="card-car-detail">
				<view class="step-title-view flex-row align-center">
					<text class="txt-guide">{{ $t('本次消费门店') }}</text>
					<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.model_desc" :nodes="car_detail.model_desc"></rich-text>
			</view>
			<view style="height: 150rpx;"></view>
			<view class="use-car-view flex-row">
				<view @tap="useCarBtn" class="use-car-btn">{{ $t('我要用车') }}</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 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 {
				shop_type: 0,
				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()
			}
			if (options.shop_type) {
				this.shop_type = options.shop_type
				const d = {
					hire_duration_unit: options.shop_type,
					hire_price: Number(options.hire_price)
				}
				this.tapSelectType(d)
			}
			// this.loadCarInfo()
			// getFlatternDistance 获取直线距离
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		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) {
						// resp.data.data.desc = resp.data.data.desc.replaceAll('/<img\b/gi, '$& style="1"'')

						// me.tapSelectType(resp.data.data.rental_setting[0])
						resp.data.data.distance = common.formatDistance(Number(resp.data.data.distance))


						const imgRegex = /<img([^>]*)>/gi;

						// 替换函数，设置 width="100%" 和 height="auto"
						const updatedRichText = resp.data.data.model_desc.replace(imgRegex, (match) => {
							// 使用正则表达式移除已有的 width 和 height 属性
							const cleanedMatch = match.replace(/(width|height)="[^"]*"/gi, '');

							// 添加新的 width="100%" 和 height="auto"
							return cleanedMatch.replace('<img', '<img width="100%" height="auto"');
						});


						resp.data.data.model_desc = updatedRichText

						me.setData({
							car_detail: resp.data.data,
							// price: ((resp.data.data.rental_setting[0]?.hire_price || 0) / 100).toFixed(2)
						})
						let rental_setting = []
						resp.data.data.rental_setting.map((item, index) => {
							if (index === 0) {
								if (!me.shop_type) {
									me.tapSelectType({
										hire_duration_unit: item.hire_duration_unit,
										hire_price: Number(item.hire_price),
									})
								}
							}
							LEASE_TYPE_ARR.map(items => {
								if (items.value == item.hire_duration_unit) {
									item.sort = items.sort
									rental_setting.push(item)
								}
							})
						})
						resp.data.data.rental_setting = rental_setting.sort((x, y) => {
							return x.sort - y.sort
						})
					} 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: `${this.$t('您是否要拨打电话')+phone}？`,
					confirmText: this.$t('确定'),
					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) {},
				})
			},
			loadIsLogin() {
				uni.navigateTo({
					url: '/pages/loginRegister/login',
				})
			},
			useCarBtn() {
				const user_token = storage.getUserToken()
				if (!user_token) {
					this.loadIsLogin()
					return
				}
				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;
	}

	.txt-guide {
		font-family: PingFangSC, PingFang SC;
		height: 40rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
	}
</style>