|
@@ -1,41 +1,45 @@
|
|
|
<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 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 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 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 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>
|
|
|
- <!-- <view class="free-num-model">
|
|
|
+ <!-- <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="">
|
|
@@ -45,54 +49,53 @@
|
|
|
</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">
|
|
|
- <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>
|
|
|
+ <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="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 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 @tap="navAddress">
|
|
|
- <img style="width: 112rpx;height: 64rpx;"
|
|
|
- src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
|
|
|
+ <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 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>
|
|
@@ -110,6 +113,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ shop_type: 0,
|
|
|
recommend_id: '',
|
|
|
car_detail: {},
|
|
|
showCarPlan: false,
|
|
@@ -130,9 +134,10 @@
|
|
|
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)
|
|
|
+ hire_duration_unit: options.shop_type,
|
|
|
+ hire_price: Number(options.hire_price)
|
|
|
}
|
|
|
this.tapSelectType(d)
|
|
|
}
|
|
@@ -155,14 +160,49 @@
|
|
|
}, (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))
|
|
|
- resp.data.data.desc = this.$htmlData(resp.data.data.desc)
|
|
|
+
|
|
|
+
|
|
|
+ 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);
|
|
|
}
|
|
@@ -211,7 +251,17 @@
|
|
|
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
|
|
@@ -237,9 +287,18 @@
|
|
|
</script>
|
|
|
<style>
|
|
|
@import './carDetail.css';
|
|
|
- .nodes{
|
|
|
+
|
|
|
+ .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>
|