295 lines
8.5 KiB
Vue
295 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<!-- 轮播图 -->
|
|||
|
|
<CustomSwiper :list="bannerList"> </CustomSwiper>
|
|||
|
|
<!-- 入口 -->
|
|||
|
|
<uni-card
|
|||
|
|
class="entry-card"
|
|||
|
|
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
|||
|
|
:padding="'20px 10px'"
|
|||
|
|
:border="false"
|
|||
|
|
>
|
|||
|
|
<view class="item">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in entryItemList"
|
|||
|
|
:key="index"
|
|||
|
|
@click="handleClick(item)"
|
|||
|
|
class="item"
|
|||
|
|
>
|
|||
|
|
<view>
|
|||
|
|
<view class="text">{{ item.name }}</view>
|
|||
|
|
<view class="desc">{{ item.desc }}</view>
|
|||
|
|
<image :src="`${url}/static/img/battery/${item.path}`"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
<!-- 介绍 -->
|
|||
|
|
<uni-card
|
|||
|
|
class="avatar-card"
|
|||
|
|
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
|||
|
|
:padding="'20px 10px'"
|
|||
|
|
:border="false"
|
|||
|
|
>
|
|||
|
|
<view class="title">回收流程</view>
|
|||
|
|
<view class="flow">
|
|||
|
|
<text class="text">在线登记</text>
|
|||
|
|
<image :src="`${url}/static/img/battery/arrow.png`"></image>
|
|||
|
|
<text class="text">免费上门</text>
|
|||
|
|
<image :src="`${url}/static/img/battery/arrow.png`"></image>
|
|||
|
|
<text class="text">结算打款</text>
|
|||
|
|
<image :src="`${url}/static/img/battery/arrow.png`"></image>
|
|||
|
|
<text class="text">订单完成</text>
|
|||
|
|
</view>
|
|||
|
|
<up-gap height="10" bgColor="#F8F8F8"></up-gap>
|
|||
|
|
<view class="title mt-20">回收物品</view>
|
|||
|
|
<uni-grid :column="2" :showBorder="false" :square="false">
|
|||
|
|
<uni-grid-item
|
|||
|
|
class="item"
|
|||
|
|
v-for="(item, index) in serviceItemList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<uni-card
|
|||
|
|
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
|||
|
|
:padding="'0px'"
|
|||
|
|
:margin="'5px'"
|
|||
|
|
:border="false"
|
|||
|
|
>
|
|||
|
|
<view style="background-color: #e8edff">
|
|||
|
|
<image
|
|||
|
|
mode="aspectFill"
|
|||
|
|
:src="`${url}/static/img/vehicle/${item.path}`"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-box">
|
|||
|
|
<text class="text">{{ item.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
</uni-grid>
|
|||
|
|
|
|||
|
|
<!-- 常见问题 -->
|
|||
|
|
<view class="title mt-20 mb-20">常见问题</view>
|
|||
|
|
<view class="commonQ">
|
|||
|
|
<view v-for="(item, index) in questionList" :key="index">
|
|||
|
|
<view class="question">{{ item.q }}</view>
|
|||
|
|
<view class="answer">
|
|||
|
|
<view v-html="item.a"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="other">
|
|||
|
|
<view>其他问题请咨询客服电话</view>
|
|||
|
|
<view>15150231777</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import CustomSwiper from "@/components/CustomSwiper/index.vue";
|
|||
|
|
import { url } from "@/utils/data";
|
|||
|
|
|
|||
|
|
const bannerList = [
|
|||
|
|
{
|
|||
|
|
imgUrl: "ba-a1.png",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const entryItemList = ref([
|
|||
|
|
{
|
|||
|
|
path: "1.png",
|
|||
|
|
name: "我要询价>>",
|
|||
|
|
desc: "极速回复 · 价格透明",
|
|||
|
|
url: "/pagesBattery/inquiry",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
path: "2.png",
|
|||
|
|
name: "我要登记>>",
|
|||
|
|
desc: "免费上门 · 极速打款",
|
|||
|
|
url: "/pagesBattery/registration",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
const serviceItemList = ref([
|
|||
|
|
{
|
|||
|
|
path: "e1.png",
|
|||
|
|
name: "锂电池包回收",
|
|||
|
|
url: "/pagesVehicle/index",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
path: "e2.png",
|
|||
|
|
name: "锂电模组回收",
|
|||
|
|
url: "/pagesVehicle/index",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
path: "e3.png",
|
|||
|
|
name: "电芯回收",
|
|||
|
|
url: "/pagesVehicle/index",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
path: "e4.png",
|
|||
|
|
name: "极片回收",
|
|||
|
|
url: "/pagesVehicle/index",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const questionList = ref([
|
|||
|
|
{
|
|||
|
|
q: "1、为什么我的车无法评估?",
|
|||
|
|
a:
|
|||
|
|
"如若车辆出现以下情况，有概率出现无法评估或信息不完整的情况，您可过段时间后再次进行查询或联系客服进行反馈。<br/>" +
|
|||
|
|
"a、核实车辆型号信息是否正确，可在车辆行驶证、合格证、车辆铭牌等资料上进行查询;<br/>" +
|
|||
|
|
"b、该车型出品时间较短，如遇此种情况请联系客户反馈，我们会及时更新数据库信息;<br/>" +
|
|||
|
|
"c、部分油电混动、增程式及个别特殊车型(如纯进口车型)。",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
q: "2、报告中表显行驶里程和车上实际的里程表数据为什么不一致?",
|
|||
|
|
a:
|
|||
|
|
"1、报告表显行驶里程数据 >车辆里程表的数据分析:疑似调表。<br/>" +
|
|||
|
|
"2、报告表显行驶里程数据=车辆里程表的数据 看是否有疑似调表提醒:<br/>" +
|
|||
|
|
"① 有提示--疑似调表<br/>" +
|
|||
|
|
"② 无提示--需结合充电数据，行驶时间等综合判断是否有调表可能性;<br/>" +
|
|||
|
|
"3、报告表显行驶里程数据小于车辆里程表的数据此时，以车辆里程表数据为准， 原因分析:<br/>" +
|
|||
|
|
"① 报告每月3日00:00更新，本月行驶数据尚未更新。<br/>" +
|
|||
|
|
"② 车辆可能因信号、流量、平台等原因导致行驶数据未及时上传。",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
q: "3、为什么电池健康度数据缺失?",
|
|||
|
|
a:
|
|||
|
|
"首先，如出现该情况，针对数据缺失模块不扣除积分。<br/>" +
|
|||
|
|
"【原因】可能原因是，车辆长时间未行使或充电。车辆若长时间停放，电池化学性能会发生一定变化，从准确性角度考虑，我司不会对电池健康状况做评估。<br/>" +
|
|||
|
|
"【建议】<br/>" +
|
|||
|
|
"① 车辆长时间(超过7天)不使用时，尽量保持电池电量40%~60%，其它范围有降低动力电池的使用寿命的风险，建议每1-2个月对动力电池进行满充后再进行放电至40%~60%不然存在引起动力电池过放、降低电池性能的风,险。<br/>" +
|
|||
|
|
"② 本月充放电后，可于下月3日后可再次评估。",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
q: "4、多次查询为何报告数据结果相同?",
|
|||
|
|
a: "新能源车辆电池耐久度设计具有较大冗余空间，在行驶里程较短、充放电次数较少时车辆短期内电池各项数据不会出现较大波动，建议每次查询时间间隔1个月以上，以便查看数据波动。",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
q: "5、为什么表显里程数、健康度评估等数据更新时间不是每月3日?",
|
|||
|
|
a: "新能源车是电子产品，可能会因为信号、硬件传感器等问题导致数据无法传输或上传出现延迟，我们采用最后一次数据上传时间作为数据更新时间。",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
q: "6、为什么检测报告不显示充电次数，电池循环次数?",
|
|||
|
|
a: "因为数据传输故障、硬件系统故障、信号缺失等原因，充电数据、循环次数上传不完整，从数据的准确性考虑不做评估展示。",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const handleClick = (item: any) => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: item.url, // 要跳转到的页面路径
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.entry-card {
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-evenly;
|
|||
|
|
> view {
|
|||
|
|
background-color: #e8edff;
|
|||
|
|
border-radius: 13rpx;
|
|||
|
|
width: 300rpx;
|
|||
|
|
padding: 20rpx 10rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
image {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -10rpx;
|
|||
|
|
bottom: -20rpx;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #294ac7;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
}
|
|||
|
|
.desc {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: rgba(0, 0, 0, 0.55);
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.item + .item {
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-card {
|
|||
|
|
.flow {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 40rpx 20rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 38rpx;
|
|||
|
|
height: 12rpx;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
background: #e8edff;
|
|||
|
|
border-radius: 28rpx;
|
|||
|
|
border: 1px solid rgba(0, 0, 0, 0.35);
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #272727;
|
|||
|
|
padding: 10rpx 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #282728;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
}
|
|||
|
|
::v-deep .uni-card--shadow {
|
|||
|
|
padding: 0px !important;
|
|||
|
|
}
|
|||
|
|
::v-deep .uni-grid {
|
|||
|
|
justify-content: space-evenly !important;
|
|||
|
|
}
|
|||
|
|
.item {
|
|||
|
|
text-align: center;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 180rpx;
|
|||
|
|
}
|
|||
|
|
.text-box {
|
|||
|
|
background-color: #e8edff;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #011b7d;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
margin-top: -10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.commonQ {
|
|||
|
|
.question {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.answer {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: rgba(0, 0, 0, 0.55);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.other {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: rgba(0, 0, 0, 0.55);
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|