|
|
|
@@ -0,0 +1,916 @@ |
|
|
|
<template> |
|
|
|
<filter> |
|
|
|
<view class="wrapper"> |
|
|
|
<!-- Banner --> |
|
|
|
<view class="banner"> |
|
|
|
<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" |
|
|
|
:interval="swiper.interval" :duration="swiper.duration" |
|
|
|
indicator-active-color="rgba(0, 179, 139, 1)" :easing-function="swiper.easing"> |
|
|
|
<block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id"> |
|
|
|
<swiper-item class="swiper-item" @click="link(item)"> |
|
|
|
<image :src="fileURLList + item.imgUrl" mode="widthFix"></image> |
|
|
|
</swiper-item> |
|
|
|
</block> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<view class="notice"> |
|
|
|
<image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false" |
|
|
|
mode="aspectFill"> |
|
|
|
</image> |
|
|
|
<uni-notice-bar style="width: 100%;" scrollable single :text="state.notice"> |
|
|
|
</uni-notice-bar> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 按钮导航 --> |
|
|
|
<view class="nav"> |
|
|
|
<!-- <view class="item-box" @click="cardRecharge(1)"> |
|
|
|
<view class="item item-1"> |
|
|
|
<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">储值卡充值</view> |
|
|
|
</view> --> |
|
|
|
<view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4', true)"> |
|
|
|
<view class="item item-2"> |
|
|
|
<image :src="fileURL + 'image/index/item-2.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">卡签信息查询</view> |
|
|
|
</view> |
|
|
|
<view class="item-box" |
|
|
|
@click="$util.navTo('/subpackage/personal-center/install-activation-order',true)"> |
|
|
|
<view class="item item-4"> |
|
|
|
<image :src="fileURL + 'image/index/item-4.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">激活服务</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="item-box" @click="cardRecharge(3)"> |
|
|
|
<view class="item item-5"> |
|
|
|
<image :src="fileURL + 'image/index/item-5.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">设备注销</view> |
|
|
|
</view> |
|
|
|
<view class="item-box" @click="$util.navTo(`/subpackage/after-sale/equipment-upgrade/select-car`,true)"> |
|
|
|
<view class="item item-6"> |
|
|
|
<image :src="fileURL + 'image/index/item-6.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">设备升级</view> |
|
|
|
</view> |
|
|
|
<view class="item-box" @click="$util.navTo(`/subpackage/after-sale/onlineService`,true)"> |
|
|
|
<view class="item item-7"> |
|
|
|
<image :src="fileURL + 'image/index/item-7.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">在线客服</view> |
|
|
|
</view> |
|
|
|
<view class="item-box" @click="$util.navTo(`/pages/service/service`,true)"> |
|
|
|
<view class="item item-8"> |
|
|
|
<image :src="fileURL + 'image/index/item-more.png'" mode="aspectFill" /> |
|
|
|
</view> |
|
|
|
<view class="text">更多</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!--快速办理通道 --> |
|
|
|
<view class="express-lane"> |
|
|
|
<view class="title">快速办理</view> |
|
|
|
<view class="lane"> |
|
|
|
<view class="lane-item lane-1" :style="{ '--background': bgOrange }" @click="showMask(1)"> |
|
|
|
<image :src="fileURL + 'image/index/icon-car.png'" mode="aspectFill"></image> |
|
|
|
<view class="text"> |
|
|
|
<text class="head">客车用户</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="lane-item lane-2" :style="{ '--background': bgBlue }" @click="showMask(2)"> |
|
|
|
<image :src="fileURL + 'image/index/icon-truck.png'" mode="aspectFill"></image> |
|
|
|
<view class="text"> |
|
|
|
<text class="head">货车用户</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 办理流程 --> |
|
|
|
<view class="flow-path"> |
|
|
|
<scroll-view scroll-x="true" class="scroll-view"> |
|
|
|
<view class="top-menu"> |
|
|
|
<view :class="item == state.tabActive ? 'tab active' : 'tab'" |
|
|
|
v-for="item in state.flowPathTabList" :key="item" @click="flowPathTabHandle(item)"> |
|
|
|
<view class="border"></view>{{ item }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<view v-if="state.tabActive === '办理流程'"> |
|
|
|
<view class="flow-list"> |
|
|
|
<flow-path-list :options="state.flowList"></flow-path-list> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-else-if="state.tabActive === '办理条件'"> |
|
|
|
<view class="flow-list as-gravity-center"> {{state.processeConditionText}} </view> |
|
|
|
</view> |
|
|
|
<view v-else-if="state.tabActive === '常见问题'"> |
|
|
|
<view class="flow-list as-gravity-center"> {{state.commonQuestionText}} </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 高速快讯 --> |
|
|
|
<view class="news" v-if="state.highMsgData.length!=0"> |
|
|
|
<view class="title">高速快讯</view> |
|
|
|
<view class="news-box"> |
|
|
|
<view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)"> |
|
|
|
<view class="left-text"> |
|
|
|
<view class="tit description">{{item.title}}</view> |
|
|
|
<view class="span">{{item.copywriting}}</view> |
|
|
|
</view> |
|
|
|
<view class="image-box"> |
|
|
|
<image :src="fileURLList + item.imgUrl" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="state.highMsgData.length!=0" class="more" |
|
|
|
@click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">查看更多</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</filter> |
|
|
|
|
|
|
|
|
|
|
|
<!-- ETC选择弹窗 --> |
|
|
|
<view class="mask" v-if="isShowMask"> |
|
|
|
|
|
|
|
<view class="mask-content"> |
|
|
|
<filter> |
|
|
|
<view class="mask-close"> |
|
|
|
<image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image> |
|
|
|
</view> |
|
|
|
<view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view> |
|
|
|
<view class="mask-tab"> |
|
|
|
<view class="tab-item active" @click="toCreatOrder('1')"> |
|
|
|
<image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image> |
|
|
|
<text class="tab-tit on">个人办理</text> |
|
|
|
</view> |
|
|
|
<view class="tab-item" @click="toCreatOrder('2')"> |
|
|
|
<image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image> |
|
|
|
<text class="tab-tit on">单位办理</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</filter> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { |
|
|
|
onMounted, |
|
|
|
ref |
|
|
|
} from "vue"; |
|
|
|
import { |
|
|
|
onPageScroll, |
|
|
|
onLoad, onReachBottom,onReady |
|
|
|
} from "@dcloudio/uni-app"; |
|
|
|
import flowPathList from "./components/flow-path-list.vue"; |
|
|
|
import filter from '@/components/filter/filter.vue'; |
|
|
|
import { |
|
|
|
request |
|
|
|
} from "@/utils/network/request.js"; |
|
|
|
import { |
|
|
|
stringToJson |
|
|
|
} from "@/utils/network/encryption.js"; |
|
|
|
import { |
|
|
|
useUserStore |
|
|
|
} from "@/stores/user"; |
|
|
|
import { |
|
|
|
getItem, |
|
|
|
setItem, |
|
|
|
StorageKeys |
|
|
|
} from "@/utils/storage"; |
|
|
|
import { |
|
|
|
queryKey, |
|
|
|
querySwiper, |
|
|
|
envs, |
|
|
|
infoQuery, |
|
|
|
queryHighMsg, |
|
|
|
orderList |
|
|
|
} from "@/utils/network/api.js"; |
|
|
|
import { |
|
|
|
reactive |
|
|
|
} from "vue"; |
|
|
|
import { |
|
|
|
fileURL, fileURLList |
|
|
|
} from "@/datas/fileURL.js"; |
|
|
|
import { |
|
|
|
navTo, |
|
|
|
msg, |
|
|
|
noticeUser |
|
|
|
} from "@/utils/utils"; |
|
|
|
import { |
|
|
|
getCodeName |
|
|
|
} from "@/datas/queryKey.js"; |
|
|
|
// import { jump } from "@/datas/9901Jump.js"; |
|
|
|
import navBar from "@/components/nav-bar/nav-bar2.vue"; |
|
|
|
const tools = require("../../static/etcUtil/tools.js"); |
|
|
|
const bgOrange = `url(${fileURL}image/index/bg-orange.png) center center no-repeat`; |
|
|
|
const bgBlue = `url(${fileURL}image/index/bg-blue.png) center center no-repeat`; |
|
|
|
const list = reactive(["您有一条待办事项，还未办理完成"]) |
|
|
|
const scrollTop = ref(0); |
|
|
|
const isBack = ref(false); |
|
|
|
const swiper = reactive({ |
|
|
|
indicatorDots: true, |
|
|
|
autoplay: true, |
|
|
|
interval: 3000, |
|
|
|
duration: 3000, |
|
|
|
easing: "easeInOutCubic" |
|
|
|
}) |
|
|
|
console.log('输出内容==============', getItem(StorageKeys.OpenId), '==============') |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
type: 0, //1客车 2货车 |
|
|
|
userType: 1, //1个人 2单位 |
|
|
|
notice: "", |
|
|
|
swiperList: [], |
|
|
|
noticeList: [], //公告栏列表 |
|
|
|
flowPathTabList: ["办理流程", "办理条件", "常见问题"], |
|
|
|
tabActive: "办理流程", |
|
|
|
flowList: [ |
|
|
|
//办理流程数据 |
|
|
|
{ |
|
|
|
title: "第一步：产品选择", |
|
|
|
desc: "选择购买的发行产品", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "第二步：信息校验", |
|
|
|
desc: "提交车牌号、车牌颜色、收货地址相关信息", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "第三步：证件上传", |
|
|
|
desc: "上传身份证、行驶证等相关信息", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "第四步：订单支付", |
|
|
|
desc: "支付完成订单", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "第五步：签约代扣", |
|
|
|
desc: "选择签约账户并关联", |
|
|
|
}, |
|
|
|
], |
|
|
|
highMsgData: '',//高速快讯内容 |
|
|
|
processeConditionText: "", //办理条件文本 |
|
|
|
commonQuestionText: "", //常见问题文本 |
|
|
|
isEnableSetGray: false |
|
|
|
}); |
|
|
|
const isShowMask = ref(false); |
|
|
|
const isShowBar = ref(false) |
|
|
|
const userStore = useUserStore(); |
|
|
|
const type = 0; |
|
|
|
const title = ref("我是测试"); |
|
|
|
const statusBarHeight = ref(0) |
|
|
|
|
|
|
|
|
|
|
|
//监听页面滚动 |
|
|
|
onPageScroll((e) => { |
|
|
|
if (e.scrollTop > statusBarHeight.value) { |
|
|
|
isShowBar.value = true; |
|
|
|
} else { |
|
|
|
isShowBar.value = false; |
|
|
|
} |
|
|
|
scrollTop.value = e.scrollTop; |
|
|
|
}); |
|
|
|
onLoad((options) => { |
|
|
|
console.log("wechatSignNo",options) |
|
|
|
getInfo(); |
|
|
|
}) |
|
|
|
// 页面初次渲染完成时触发 |
|
|
|
onReady(()=>{ |
|
|
|
setTimeout(()=>{ |
|
|
|
quanKeyAction() |
|
|
|
},5000) |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
uni.getSystemInfo({ |
|
|
|
success: (e : any) => { |
|
|
|
statusBarHeight.value = e.statusBarHeight; |
|
|
|
} |
|
|
|
}) |
|
|
|
getSwiper() |
|
|
|
}); |
|
|
|
onReachBottom(() => { |
|
|
|
highMsg(); //高速快讯 |
|
|
|
}) |
|
|
|
// const tip = () => { |
|
|
|
// const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index")) |
|
|
|
// tools.toUrl(`/subpackage/personal-center/webview?url=` + params); |
|
|
|
// } |
|
|
|
//获取轮播 |
|
|
|
const getSwiper = () => { |
|
|
|
|
|
|
|
let options = { |
|
|
|
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) |
|
|
|
data: { |
|
|
|
}, //请求参数 |
|
|
|
method: "POST", //提交方式(默认POST) |
|
|
|
showLoading: true, //是否显示加载中(默认显示) |
|
|
|
}; |
|
|
|
|
|
|
|
//调用方式 |
|
|
|
request(querySwiper, options).then((res) => { |
|
|
|
console.log(stringToJson(res.bizContent)); |
|
|
|
const data = stringToJson(res.bizContent) |
|
|
|
console.log("轮播图", data) |
|
|
|
state.swiperList = data.swipers ? data.swipers : [] |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
//办理流程tab选择 |
|
|
|
const flowPathTabHandle = (tab) => { |
|
|
|
state.tabActive = tab; |
|
|
|
if (tab == "办理条件") { |
|
|
|
processeCondition();//办理条件 |
|
|
|
} else if (tab == "常见问题") { |
|
|
|
commonQuestion(); |
|
|
|
} |
|
|
|
}; |
|
|
|
//全量枚举值查询 |
|
|
|
const quanKeyAction = () => { |
|
|
|
var data = {}; |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: data, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
request(queryKey, options).then((res) => { |
|
|
|
console.log(stringToJson(res.bizContent)); |
|
|
|
const data = stringToJson(res.bizContent) |
|
|
|
console.log("轮播图", data) |
|
|
|
setItem('key', data.dictTypeAndItem) |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const toCreatOrder = (val : number) => { |
|
|
|
console.log(typeof (val)); |
|
|
|
state.userType = val; |
|
|
|
navTo(`/subpackage/orders/choice-product?type=${state.type}&&userType=${state.userType}`) |
|
|
|
closeMask(); |
|
|
|
}; |
|
|
|
|
|
|
|
const showMask = (val : any) => { |
|
|
|
state.type = val; //1 客车 2货车 |
|
|
|
isShowMask.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
const closeMask = () => { |
|
|
|
isShowMask.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取文本信息----用户协议 |
|
|
|
const getInfo = () => { |
|
|
|
//参数说明 |
|
|
|
let options = { |
|
|
|
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) |
|
|
|
data: { |
|
|
|
businessType: 'BROADCAST' //广播栏信息 |
|
|
|
}, //请求参数 |
|
|
|
method: "POST", //提交方式(默认POST) |
|
|
|
showLoading: true, //是否显示加载中(默认显示) |
|
|
|
}; |
|
|
|
|
|
|
|
//调用方式 |
|
|
|
request(infoQuery, options) |
|
|
|
.then((res) => { |
|
|
|
let data = stringToJson(res.bizContent) |
|
|
|
console.log(data,'公告'); |
|
|
|
state.notice = data.text |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 高速快讯查询接口 |
|
|
|
const highMsg = () => { |
|
|
|
let options = { |
|
|
|
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) |
|
|
|
data: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 2 |
|
|
|
}, //请求参数 |
|
|
|
method: "POST", //提交方式(默认POST) |
|
|
|
showLoading: true, //是否显示加载中(默认显示) |
|
|
|
}; |
|
|
|
|
|
|
|
//调用方式 |
|
|
|
request(queryHighMsg, options).then((res) => { |
|
|
|
console.log("高速快讯查询接口", stringToJson(res.bizContent)); |
|
|
|
state.highMsgData = stringToJson(res.bizContent).data |
|
|
|
for (var i = 0; i < state.highMsgData.length; i++) { |
|
|
|
state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"]) |
|
|
|
if (state.highMsgData[i]["type"] == 3) { |
|
|
|
state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"] |
|
|
|
} |
|
|
|
} |
|
|
|
state.highMsgData.sort(function (a, b) { |
|
|
|
return a.sequence - b.sequence//正序 |
|
|
|
}) |
|
|
|
}).catch((err) => { console.log(err) }); |
|
|
|
} |
|
|
|
const link = (item : any) => { |
|
|
|
if (item.type == 1) { |
|
|
|
const params = encodeURIComponent(JSON.stringify(item.hyperLink)) |
|
|
|
tools.toUrl(`/subpackage/personal-center/webview?url=` + params); |
|
|
|
} else if (item.type == 2) { |
|
|
|
navTo(item.hyperLink) |
|
|
|
} else if (item.type == 3) { |
|
|
|
const param = encodeURIComponent(JSON.stringify(item)) |
|
|
|
tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param); |
|
|
|
} else if (item.type == 4) { |
|
|
|
uni.navigateToMiniProgram({ |
|
|
|
appId: item.hyperLink, |
|
|
|
path: item.speedUrl, |
|
|
|
success(res) { |
|
|
|
console.log(res); |
|
|
|
}, |
|
|
|
complete(res) { |
|
|
|
console.log(res); |
|
|
|
}, |
|
|
|
fail(res) { |
|
|
|
console.log(res); |
|
|
|
// 未成功跳转到车主小程序 |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
const processeCondition = () => { |
|
|
|
let options = { |
|
|
|
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) |
|
|
|
data: { |
|
|
|
businessType: 'PROCESSING_CONDITIONS' //办理条件 |
|
|
|
}, //请求参数 |
|
|
|
method: "POST", //提交方式(默认POST) |
|
|
|
showLoading: true, //是否显示加载中(默认显示) |
|
|
|
}; |
|
|
|
|
|
|
|
//调用方式 |
|
|
|
request(infoQuery, options) |
|
|
|
.then((res) => { |
|
|
|
let data = stringToJson(res.bizContent) |
|
|
|
console.log("办理条件", data) |
|
|
|
state.processeConditionText = data.text |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
} |
|
|
|
const commonQuestion = () => { |
|
|
|
let options = { |
|
|
|
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) |
|
|
|
data: { |
|
|
|
businessType: 'COMMON_PROBLEM' //常见问题 |
|
|
|
}, //请求参数 |
|
|
|
method: "POST", //提交方式(默认POST) |
|
|
|
showLoading: true, //是否显示加载中(默认显示) |
|
|
|
}; |
|
|
|
|
|
|
|
//调用方式 |
|
|
|
request(infoQuery, options) |
|
|
|
.then((res) => { |
|
|
|
let data = stringToJson(res.bizContent) |
|
|
|
console.log("常见问题", data) |
|
|
|
state.commonQuestionText = data.text |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 代办事项 |
|
|
|
const doSomething = () => { |
|
|
|
let options = { |
|
|
|
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) |
|
|
|
data: { |
|
|
|
"opId": getItem(StorageKeys.OpenId), |
|
|
|
"source": "WECHAT", |
|
|
|
"vehiclePlate": "", |
|
|
|
"tabIndex": 3 + '', |
|
|
|
"pageNo": 1, |
|
|
|
"pageSize": 100, |
|
|
|
"promotionModes": 1 |
|
|
|
}, |
|
|
|
method: "POST", //提交方式(默认POST) |
|
|
|
}; |
|
|
|
|
|
|
|
//调用方式 |
|
|
|
request(orderList, options) |
|
|
|
.then((res) => { |
|
|
|
let data = stringToJson(res.bizContent) |
|
|
|
let obj = {}; |
|
|
|
obj["id"] = 1; |
|
|
|
obj['title'] = "您有" + data.data.length + "条未完成订单，前往处理" |
|
|
|
state.noticeList.push(obj) |
|
|
|
console.log("代办事项", data.data) |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
const cardRecharge = (val) => { |
|
|
|
// #ifdef MP-ALIPAY |
|
|
|
if (val == 1 || val == 2 || val == 3) { |
|
|
|
msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787") |
|
|
|
} |
|
|
|
// #endif |
|
|
|
|
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
if (val == 1) { |
|
|
|
navTo('/pages/recharge/recharge-pay', true) |
|
|
|
} else if (val == 2) { |
|
|
|
navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true) |
|
|
|
} else if (val == 3) { |
|
|
|
navTo('/subpackage/after-sale/activation-once-again/select-car?type=2', true) |
|
|
|
} |
|
|
|
// #endif |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
page { |
|
|
|
background: #eef7f7; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.statusBar { |
|
|
|
width: 100%; |
|
|
|
position: sticky; |
|
|
|
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%); |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.banner { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.banner swiper { |
|
|
|
height: 470rpx; |
|
|
|
width: 750rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.banner .notice { |
|
|
|
position: absolute; |
|
|
|
background: rgba(0, 0, 0, 0.28); |
|
|
|
border-radius: 30rpx; |
|
|
|
width: 500rpx; |
|
|
|
height: 60rpx; |
|
|
|
bottom: 46rpx; |
|
|
|
left: 125rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding: 0 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
::v-deep .uni-noticebar { |
|
|
|
background: none !important; |
|
|
|
margin-bottom: 0; |
|
|
|
|
|
|
|
text { |
|
|
|
font-size: 24rpx !important; |
|
|
|
color: #ffffff !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.banner .notice .icon { |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
margin: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.banner .notice .notice-text { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #ffffff; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-item image { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.nav { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
padding: 0 35rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.nav .item-box { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.nav .item { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin: 50rpx 45rpx 20rpx 45rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.nav .text { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #172843; |
|
|
|
} |
|
|
|
|
|
|
|
.item-1 { |
|
|
|
background: linear-gradient(133deg, #5fff9b 0%, #00b38b 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-2 { |
|
|
|
background: linear-gradient(-50deg, #018ffd 0%, #27fcff 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-3 { |
|
|
|
background: linear-gradient(-47deg, #f88721 0%, #fecd61 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-4 { |
|
|
|
background: linear-gradient(-47deg, #018ffd 0%, #27fcff 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-5 { |
|
|
|
background: linear-gradient(-44deg, #018ffd 0%, #27fcff 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-6 { |
|
|
|
background: linear-gradient(-50deg, #f88721 0%, #fecd61 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-7 { |
|
|
|
background: linear-gradient(129deg, #5fff9b 0%, #00b38b 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item-8 { |
|
|
|
background: linear-gradient(124deg, #b8f0f2 0%, #62aeb1 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.item image { |
|
|
|
width: 56rpx; |
|
|
|
height: 56rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.express-lane { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #000000; |
|
|
|
padding-top: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.express-lane .title { |
|
|
|
padding-left: 30rpx; |
|
|
|
margin: 0rpx 0 20rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.lane { |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
} |
|
|
|
|
|
|
|
.lane-item { |
|
|
|
width: 330rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.lane-item image { |
|
|
|
width: 120rpx; |
|
|
|
height: 100rpx; |
|
|
|
margin: 0 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.lane-item .text { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
color: #ffffff; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.lane-item .head { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.lane-item .decribe { |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.lane-1 { |
|
|
|
background: var(--background); |
|
|
|
} |
|
|
|
|
|
|
|
.lane-2 { |
|
|
|
background: var(--background); |
|
|
|
} |
|
|
|
|
|
|
|
.news { |
|
|
|
padding: 30rpx 30rpx 0 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.news .title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.news .left-text { |
|
|
|
flex: 1; |
|
|
|
margin-right: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.news-box { |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); |
|
|
|
margin: 20rpx 0 50rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.news .tit { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #172843; |
|
|
|
} |
|
|
|
|
|
|
|
.news .news-item { |
|
|
|
display: flex; |
|
|
|
border-bottom: 1px solid #dcdcdc; |
|
|
|
padding: 32rpx 0 15rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.news .image-box image { |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.news .span { |
|
|
|
font-size: 22rpx; |
|
|
|
display: inline-block; |
|
|
|
text-align: center; |
|
|
|
background: #bae0f1; |
|
|
|
border-radius: 6rpx; |
|
|
|
color: #0a8f8a; |
|
|
|
padding: 4rpx 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.news .more { |
|
|
|
font-size: 24rpx; |
|
|
|
text-align: center; |
|
|
|
color: #0a8f8a; |
|
|
|
padding: 22rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.mask { |
|
|
|
background: $uni-bg-color-mask; |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.mask-content { |
|
|
|
background: $uni-bg-color; |
|
|
|
width: 570rpx; |
|
|
|
height: 480rpx; |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.mask-close { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.mask-title { |
|
|
|
text-align: center; |
|
|
|
font-size: 32rpx; |
|
|
|
color: $uni-text-color-black; |
|
|
|
margin-bottom: 50rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.mask-tab { |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-closed { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
margin: 24rpx 24rpx 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-tit { |
|
|
|
font-size: 32rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item image { |
|
|
|
width: 160rpx; |
|
|
|
height: 160rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.backlog-notice { |
|
|
|
margin: 50rpx 30rpx 0rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.flow-path { |
|
|
|
padding: 20rpx 0rpx 20rpx; |
|
|
|
|
|
|
|
.scroll-view { |
|
|
|
white-space: nowrap; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .tab { |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 38rpx 30rpx; |
|
|
|
color: #666666; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .active .border { |
|
|
|
position: absolute; |
|
|
|
width: 70%; |
|
|
|
height: 16rpx; |
|
|
|
background: #00b38b; |
|
|
|
opacity: 0.3; |
|
|
|
bottom: 40rpx; |
|
|
|
z-index: -99; |
|
|
|
left: 15%; |
|
|
|
border-radius: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .active { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #0d0f26; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .active::before { |
|
|
|
width: 100%; |
|
|
|
height: 16rpx; |
|
|
|
background: #00b38b; |
|
|
|
opacity: 0.3; |
|
|
|
} |
|
|
|
|
|
|
|
.flow-list { |
|
|
|
margin: 0rpx 30rpx; |
|
|
|
min-height: 700rpx; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 55rpx 30rpx 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.description { |
|
|
|
overflow: hidden; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
text-overflow: ellipsis; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
} |
|
|
|
</style> |
