149 lines
4.7 KiB
Plaintext
149 lines
4.7 KiB
Plaintext
<!-- car-detail.wxml -->
|
|
<view class="my_container">
|
|
<!-- 加载状态 -->
|
|
<van-overlay show="{{loading}}" z-index="100">
|
|
<view class="loading-container">
|
|
<van-loading size="24px" color="#667eea">加载中...</van-loading>
|
|
</view>
|
|
</van-overlay>
|
|
|
|
<!-- 头部图片区域 -->
|
|
<view class="hero-section">
|
|
<swiper
|
|
class="car-swiper"
|
|
indicator-dots="true"
|
|
autoplay="false"
|
|
current="{{currentImageIndex}}"
|
|
bindchange="onSwiperChange"
|
|
>
|
|
<block wx:for="{{carDetail.cover_image}}" wx:key="index">
|
|
<swiper-item>
|
|
<image
|
|
src="{{item}}"
|
|
class="car-image"
|
|
mode="aspectFill"
|
|
bindtap="previewImage"
|
|
data-src="{{item}}"
|
|
/>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
|
|
|
|
<view class="car-info-card car-type-{{carDetail.car_type}}">
|
|
<view class="car-header">
|
|
<view class="car-title">{{carDetail.title}}</view>
|
|
<view class="car-type-tag">
|
|
<text wx:if="{{carDetail.car_type == 1}}" class="tag-new">新车</text>
|
|
<text wx:elif="{{carDetail.car_type == 2}}" class="tag-rent">租车</text>
|
|
<text wx:elif="{{carDetail.car_type == 3}}" class="tag-used">二手车</text>
|
|
</view>
|
|
<!-- <view class="favorite-btn" bindtap="toggleFavorite">
|
|
<van-icon name="{{carDetail.is_favorite ? 'star' : 'star-o'}}" size="20px" color="{{carDetail.is_favorite ? '#ff6b6b' : '#999'}}" />
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="car-desc">{{carDetail.desc}}</view>
|
|
|
|
<!-- 新车价格展示 -->
|
|
<view wx:if="{{carDetail.car_type == 1}}" class="price-section price-new">
|
|
<view class="price-main">
|
|
<text class="current-price">¥{{carDetail.price}}万起</text>
|
|
</view>
|
|
<text wx:if="{{carDetail.re_price}}" class="original-price">指导价 ¥{{carDetail.re_price}}万</text>
|
|
|
|
</view>
|
|
|
|
<!-- 租车价格展示 -->
|
|
<view wx:elif="{{carDetail.car_type == 2}}" class="price-section price-rent">
|
|
<view class="price-main">
|
|
<text class="current-price">¥{{carDetail.price}}/天</text>
|
|
</view>
|
|
<text wx:if="{{carDetail.re_price}}" class="monthly-price">月租 ¥{{carDetail.re_price}}</text>
|
|
</view>
|
|
|
|
<!-- 二手车价格展示 -->
|
|
<view wx:elif="{{carDetail.car_type == 3}}" class="price-section price-used">
|
|
<view class="price-main">
|
|
<text class="current-price">¥{{carDetail.price}}万</text>
|
|
</view>
|
|
<text wx:if="{{carDetail.re_price}}" class="original-price">新车价 ¥{{carDetail.re_price}}万</text>
|
|
|
|
</view>
|
|
|
|
<view class="brand-info">
|
|
<image src="{{carDetail.brand.logo}}" class="brand-logo" mode="aspectFill" />
|
|
<view class="brand-text">
|
|
<view class="brand-name">{{carDetail.brand.name}}</view>
|
|
<view class="series-name">{{carDetail.series.name}}</view>
|
|
</view>
|
|
|
|
<!-- 不同车型的操作按钮 -->
|
|
<view class="action-buttons">
|
|
<!-- 新车操作按钮 -->
|
|
<view wx:if="{{carDetail.car_type == 1}}" class="calculator-btn" bindtap="openCalculator">
|
|
<van-icon name="calculator" size="16px" />
|
|
<text>贷款计算</text>
|
|
</view>
|
|
|
|
<!-- 租车操作按钮 -->
|
|
<view wx:elif="{{carDetail.car_type == 2}}" class="rent-btn" bindtap="openRentCalculator">
|
|
<van-icon name="calendar" size="16px" />
|
|
<text>租期计算</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车辆属性 -->
|
|
<view class="attributes-card">
|
|
<view class="card-title">车辆详情</view>
|
|
<view class="attributes-grid">
|
|
<view
|
|
wx:for="{{attributesList}}"
|
|
wx:key="key"
|
|
class="attribute-item {{item.key === '检测状态' ? 'status-checked' : ''}}"
|
|
bindtap="{{item.key === '检测状态' ? 'viewInspectionReport' : ''}}"
|
|
>
|
|
<view class="attribute-label">{{item.key}}</view>
|
|
<view class="attribute-value">
|
|
{{item.value}}
|
|
<van-icon wx:if="{{item.key === '检测状态' && item.value === '已检测'}}" name="arrow" size="12px" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系我们 -->
|
|
<view class="contact-section">
|
|
<view class="contact-buttons">
|
|
<!-- 电话咨询 -->
|
|
<button
|
|
class="contact-btn primary"
|
|
open-type="makePhoneCall"
|
|
data-phone="{{contactPhone}}"
|
|
bindtap="makePhoneCall"
|
|
>
|
|
<van-icon name="phone" size="20px" class="btn-icon" />
|
|
<text>电话咨询</text>
|
|
</button>
|
|
|
|
<!-- 微信咨询 -->
|
|
<button
|
|
class="contact-btn secondary"
|
|
bindtap="openWechat"
|
|
>
|
|
<van-icon name="chat" size="20px" class="btn-icon" />
|
|
<text>微信咨询</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 底部安全区域 -->
|
|
<view class="safe-area-bottom"></view>
|
|
</view>
|
|
|
|
<!-- Toast 组件 -->
|
|
<van-toast id="van-toast" /> |