292 lines
7.3 KiB
Vue
292 lines
7.3 KiB
Vue
<template>
|
||
<!-- 轮播图 -->
|
||
<CustomSwiper :list="bannerList"> </CustomSwiper>
|
||
<!-- 入口 -->
|
||
<view class="entry-card">
|
||
<uni-card
|
||
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
||
:padding="'20px 10px'"
|
||
:border="false"
|
||
>
|
||
<uni-grid :column="4" :showBorder="false" :square="false">
|
||
<uni-grid-item v-for="(item, index) in entryItemList" :key="index">
|
||
<view class="item">
|
||
<view @click="handleClick(item)">
|
||
<view>
|
||
<image :src="`${url}/static/img/vehicle/${item.path}`"></image>
|
||
</view>
|
||
<view>
|
||
<text class="text">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</uni-card>
|
||
</view>
|
||
<!-- 介绍 -->
|
||
<view class="avatar-card">
|
||
<uni-card
|
||
:shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
|
||
:padding="'20px 10px'"
|
||
:border="false"
|
||
>
|
||
<view class="title">服务项目</view>
|
||
<uni-grid :column="2" :showBorder="false" :square="false">
|
||
<uni-grid-item
|
||
class="item"
|
||
v-for="(item, index) in serviceItemList"
|
||
:key="index"
|
||
>
|
||
<view class="item">
|
||
<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>
|
||
</view>
|
||
</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">{{ item.a }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="other">
|
||
<view>其他问题请咨询客服电话</view>
|
||
<view
|
||
><text @click="callNumber('15150231777')" class="active"
|
||
>15150231777 欢迎咨询</text
|
||
></view
|
||
>
|
||
</view>
|
||
</uni-card>
|
||
<OpOnline />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import CustomSwiper from "@/components/CustomSwiper/index.vue";
|
||
import OpOnline from "@/components/OpOnline/index.vue";
|
||
import { url } from "@/utils/data";
|
||
import { useMemberStore } from "@/store/index";
|
||
import pinia from "@/store";
|
||
const store = useMemberStore(pinia);
|
||
const bannerList = [
|
||
{
|
||
imgUrl: "v-a1.png",
|
||
},
|
||
];
|
||
|
||
const entryItemList = ref([
|
||
{
|
||
path: "1.png",
|
||
name: "回收流程",
|
||
url: "/pagesVehicle/recycleFlow",
|
||
},
|
||
{
|
||
path: "2.png",
|
||
name: "所需材料",
|
||
url: "/pagesVehicle/requiredMaterials",
|
||
},
|
||
{
|
||
path: "3.png",
|
||
name: "我要询价",
|
||
url: "/pagesVehicle/inquiry",
|
||
},
|
||
{
|
||
path: "4.png",
|
||
name: "我要登记",
|
||
url: "/pagesVehicle/regisList",
|
||
},
|
||
]);
|
||
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",
|
||
},
|
||
{
|
||
path: "e5.png",
|
||
name: "报废大巴车回收",
|
||
url: "/pagesVehicle/index",
|
||
},
|
||
{
|
||
path: "e6.png",
|
||
name: "报废货车回收",
|
||
url: "/pagesVehicle/index",
|
||
},
|
||
{
|
||
path: "e7.png",
|
||
name: "报废油罐车回收",
|
||
url: "/pagesVehicle/index",
|
||
},
|
||
{
|
||
path: "e8.png",
|
||
name: "报废事故车回收",
|
||
url: "/pagesVehicle/index",
|
||
},
|
||
]);
|
||
|
||
const questionList = ref([
|
||
{
|
||
q: "1、车辆达到报废标准后还能继续使用吗？",
|
||
a: "不能。驾驶已达报废标准的机动车在道路上行驶的，处500-2000元罚款，收缴车辆，强制报废，并吊销驾驶证。",
|
||
},
|
||
{
|
||
q: "2、车辆是否可以当作破烂直接卖掉？",
|
||
a: "不可以，机动车报废需到正规的机动车回收拆解企业办理。",
|
||
},
|
||
{
|
||
q: "3、如果车辆在外地，无法开回本地进行报废，应该如何处理？",
|
||
a: "车主持身份证明、行驶证、登记证书及车辆到当地符合资质的机动车回收拆解企业办理。车辆拆解后，注册地车辆管理所在一个工作日内受理并出具《机动车注销证明》。",
|
||
},
|
||
{
|
||
q: "4.如果车辆存在违法或事故信息，可以申请报废吗？",
|
||
a: "存过车辆存在违法或事故信息，需要先处理完毕，才能进一步申请报废。",
|
||
},
|
||
{
|
||
q: "5、如果车主无法联系上，车辆可以如何申请报废？",
|
||
a: "如果车主无法联系上，可以由机动车所有人提出注销申请，并填写承担相关法律责任承诺书，公安交管部门经系统核查2年以内车辆无运行轨迹、无违法信息、无事故信息的，按照灭失情形办理注销登记。",
|
||
},
|
||
]);
|
||
|
||
const handleClick = (item: any) => {
|
||
if (item.name === "我要询价" || item.name === "我要登记") {
|
||
if (!store.profile.token) {
|
||
uni.navigateTo({
|
||
url: '/pagesLogin/index', // 要跳转到的页面路径
|
||
});
|
||
return
|
||
}
|
||
}
|
||
uni.navigateTo({
|
||
url: item.url, // 要跳转到的页面路径
|
||
});
|
||
};
|
||
|
||
const callNumber = (number: any) => {
|
||
// 判断是否为移动端
|
||
if (
|
||
uni.getSystemInfoSync().platform === "android" ||
|
||
uni.getSystemInfoSync().platform === "ios"
|
||
) {
|
||
// 在移动端使用内置拨号程序进行拨号
|
||
uni.makePhoneCall({
|
||
phoneNumber: number, // 电话号码
|
||
success: function () {
|
||
console.log("拨号成功");
|
||
},
|
||
fail: function (err) {
|
||
console.error("拨号失败：", err);
|
||
},
|
||
});
|
||
} else {
|
||
// 在桌面端或者其他平台，可以直接使用window.open打开拨号链接
|
||
window.open("tel:" + number);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.entry-card {
|
||
.item {
|
||
text-align: center;
|
||
image {
|
||
width: 74rpx;
|
||
height: 76rpx;
|
||
}
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.avatar-card {
|
||
.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;
|
||
.active {
|
||
color: $u-primary;
|
||
}
|
||
}
|
||
}
|
||
</style>
|