Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.vue 26KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145
  1. <template>
  2. <view class='container'>
  3. <view class="bg-img">
  4. <image :src="`${fileURL}image/newHome/header.png`" mode="scaleToFill" class="icon"></image>
  5. </view>
  6. <view class="content">
  7. <view class="header">
  8. <!-- <navBar :isBack='false' :title='首页'></navBar> -->
  9. <view class="title">
  10. <view :style="{ height: `${statusBarHeight}px` }"></view>
  11. <!-- 自定义导航栏高度 -->
  12. <view class='title-txt' :style="{
  13. height: `${barHeight}px`,
  14. 'line-height': `${barHeight}px`
  15. }">
  16. <text>首页</text>
  17. </view>
  18. </view>
  19. <view class="search-box">
  20. <image :src="`${fileURL}image/newHome/search.png`" class="icon" mode="aspectFill"></image>
  21. <input class="search" placeholder="办业务·搜一搜" @input="onKeyInput" />
  22. <!-- <u-input v-model="searchParams" type="text" :border="false" :height="80" placeholder-style='color: #fff;' /> -->
  23. </view>
  24. </view>
  25. <view class="nav">
  26. <view class="item-box" v-for='(item,index) in navList' :key='index' @click="handleNav(item)">
  27. <view class="icon-img">
  28. <image :src="item.imgUrl" mode="aspectFit" class='img'></image>
  29. </view>
  30. <view class="b-txt">
  31. {{item.title}}
  32. </view>
  33. </view>
  34. </view>
  35. <view class="notice" :style="{'--bgimg':`url(${fileURL}image/newHome/tongzhi.png)`}">
  36. <view class="l-img">
  37. <image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
  38. </view>
  39. <view class="r-info">
  40. <uni-notice-bar style="width: 100%;" scrollable single :text="state.notice"></uni-notice-bar>
  41. </view>
  42. </view>
  43. <view class="supervision-con">
  44. <!-- <u-swiper :list="state.swiperListArr"></u-swiper> -->
  45. <swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
  46. :interval="swiper.interval" :duration="swiper.duration" >
  47. <block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
  48. <swiper-item class="swiper-item" @click="link(item)">
  49. <image :src="fileURLList + item.imgUrl" mode="widthFix" class='img'></image>
  50. </swiper-item>
  51. </block>
  52. </swiper>
  53. <!-- <view class="txt">
  54. ETC服务监督电话
  55. </view>
  56. <view class="phone">
  57. 0851-883065555
  58. </view>
  59. <view class="btn">
  60. <text>立即拨打 ></text>
  61. </view> -->
  62. </view>
  63. <view class="title-name title-h">
  64. 快速办理
  65. </view>
  66. <view class="express-lane">
  67. <view class="item keche" :style="{'--bgimg':`url(${fileURL}image/newHome/keche.png)`}">
  68. <view class="item-con" @click="showMask(1)">
  69. <view class="top-txt">
  70. 客车用户
  71. </view>
  72. <view class="btn">
  73. 进入
  74. </view>
  75. </view>
  76. </view>
  77. <view class="item huoche" :style="{'--bgimg':`url(${fileURL}image/newHome/huoche.png)`}">
  78. <view class="item-con" @click="showMask(2)">
  79. <view class="top-txt">
  80. 货车用户
  81. </view>
  82. <view class="btn">
  83. 进入
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="news-con">
  89. <view class="title-con">
  90. <text class='title-h'>高速快讯</text>
  91. <view class="r-more" @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">
  92. <text class='txt'>更多</text>
  93. <image :src="`${fileURL}image/newHome/r-icon.png`" mode="aspectFit" class='icon'></image>
  94. </view>
  95. </view>
  96. <view class="news-box">
  97. <template v-if='state.highMsgData'>
  98. <view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
  99. <view class="l-img">
  100. <image :src="fileURLList + item.imgUrl" mode="aspectFill" class="img"></image>
  101. </view>
  102. <view class="r-txt">
  103. <view class="tit">
  104. {{item.title}}
  105. </view>
  106. <view class="b-time">
  107. {{item.updateTime}}
  108. </view>
  109. </view>
  110. </view>
  111. </template>
  112. <view class="empty-news" v-else>
  113. <u-empty text="暂无数据" mode="news" :icon-size='90' :font-size='24'></u-empty>
  114. </view>
  115. </view>
  116. </view>
  117. <!-- 办理流程 -->
  118. <view class="flow-path">
  119. <view class="top-menu">
  120. <view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
  121. :key="item" @click="flowPathTabHandle(item)">
  122. <view class="txt">
  123. {{ item }}
  124. </view>
  125. <view class="border" :style="{'--bgimg':`url(${fileURL}image/newHome/bottom-select.png)`}">
  126. </view>
  127. </view>
  128. </view>
  129. <view v-if="state.tabActive === '办理流程'">
  130. <view class="flow-list">
  131. <flow-path-list :options="state.flowList"></flow-path-list>
  132. </view>
  133. </view>
  134. <view v-else-if="state.tabActive === '办理条件'">
  135. <view class="flow-list tiaojian">
  136. <view class="title-top">
  137. <image :src="`${fileURL}image/newHome/tiaojian.png`" mode="scaleToFill" class="icon-img"></image>
  138. <view class="txt">
  139. 基本条件
  140. </view>
  141. <image :src="`${fileURL}image/newHome/tiaojianr.png`" mode="scaleToFill" class="icon-img"></image>
  142. </view>
  143. <view class="list-info"> {{state.processeConditionText}} </view>
  144. </view>
  145. </view>
  146. <view v-else-if="state.tabActive === '常见问题'">
  147. <view class="flow-list wenti">
  148. <view class="item-box" v-for='(item,index) in state.commonQuestionArr' :key='index'>
  149. <view class="l-icon">
  150. <image :src="`${fileURL}image/newHome/wenhao.png`" mode="scaleToFill" class="icon-img"></image>
  151. </view>
  152. <view class="txt">
  153. {{item}}
  154. </view>
  155. </view>
  156. <!-- <view class="list-info"> {{state.commonQuestionText}} </view> -->
  157. </view>
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. <!-- ETC选择弹窗 -->
  163. <view class="mask" v-if="isShowMask">
  164. <view class="mask-content">
  165. <filter>
  166. <view class="mask-close">
  167. <image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image>
  168. </view>
  169. <view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view>
  170. <view class="mask-tab">
  171. <view class="tab-item active" @click="toCreatOrder('1')">
  172. <image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image>
  173. <text class="tab-tit on">个人办理</text>
  174. </view>
  175. <view class="tab-item" @click="toCreatOrder('2')">
  176. <image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image>
  177. <text class="tab-tit on">单位办理</text>
  178. </view>
  179. </view>
  180. </filter>
  181. </view>
  182. </view>
  183. </template>
  184. <script setup lang="ts">
  185. import {
  186. onMounted,
  187. ref, reactive
  188. } from "vue";
  189. import {
  190. onPageScroll,
  191. onLoad, onReachBottom, onReady
  192. } from "@dcloudio/uni-app";
  193. import flowPathList from "./components/flow-path-list.vue";
  194. import filter from '@/components/filter/filter.vue';
  195. import { requestNew} from "@/utils/network/request.js";
  196. import {
  197. setItem,
  198. } from "@/utils/storage";
  199. import {
  200. queryKey,
  201. querySwiper,
  202. infoQuery,
  203. queryHighMsg
  204. } from "@/utils/network/api.js";
  205. import {
  206. fileURL, fileURLList
  207. } from "@/datas/fileURL.js";
  208. import {
  209. navTo,
  210. msg,hasLogin,confirm
  211. } from "@/utils/utils";
  212. import {
  213. getCodeName
  214. } from "@/datas/queryKey.js";
  215. import { getCurrentInstance } from 'vue';
  216. const tools = require("../../static/etcUtil/tools.js");
  217. const instance = getCurrentInstance();
  218. const swiper = reactive({
  219. indicatorDots: false,
  220. autoplay: true,
  221. interval: 6000,
  222. duration: 500,
  223. easing: "default"
  224. })
  225. onLoad((options) => {
  226. console.log("wechatSignNo", options)
  227. getInfo();
  228. })
  229. onMounted(() => {
  230. const query = uni.createSelectorQuery().in(instance.proxy);
  231. query
  232. .select(".news-con")
  233. .boundingClientRect((data) => {
  234. console.log("得到布局位置信息", data);
  235. console.log("节点离页面顶部的距离为" + data.top);
  236. newTop.value = data.top
  237. })
  238. .exec();
  239. let systemInfo = uni.getSystemInfoSync()
  240. viewHeight.value = systemInfo.windowHeight
  241. statusBarHeight.value = systemInfo.statusBarHeight;
  242. const {
  243. top,
  244. height
  245. } = uni.getMenuButtonBoundingClientRect();
  246. barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
  247. console.log(barHeight.value, statusBarHeight.value, systemInfo, '计算的顶部高度');
  248. getSwiper()
  249. })
  250. const statusBarHeight = ref(0)
  251. const viewHeight = ref(0) //可视区高度
  252. const barHeight = ref(0)
  253. const searchParams = ref('')
  254. const newTop = ref(0) //高速快讯距离顶部距离
  255. const isShowMask = ref(false);
  256. //搜索
  257. const onKeyInput = (event) => {
  258. searchParams.value = event.target.value;
  259. console.log('搜索内容', searchParams.value);
  260. }
  261. const navList = [{
  262. imgUrl: `${fileURL}image/newHome/kaqian.png`,
  263. title: "卡签信息查询",
  264. path: '/pages/bluetooth/bluetooth?routeType=4'
  265. }, {
  266. imgUrl: `${fileURL}image/newHome/jihuo.png`,
  267. title: "激活服务",
  268. path: '/subpackage/personal-center/install-activation-order'
  269. }, {
  270. imgUrl: `${fileURL}image/newHome/zhuxiao.png`,
  271. title: "设备注销",
  272. path: "",
  273. handlePath: () => {
  274. cardRecharge(3)
  275. }
  276. }, {
  277. imgUrl: `${fileURL}image/newHome/shenji.png`,
  278. title: "设备升级",
  279. path: `/subpackage/after-sale/equipment-upgrade/select-car`
  280. }, {
  281. imgUrl: `${fileURL}image/newHome/kefu.png`,
  282. title: "在线客服",
  283. path: `/subpackage/after-sale/onlineService`
  284. }, {
  285. imgUrl: `${fileURL}image/newHome/wangdian.png`,
  286. title: "网点查询",
  287. path: "/subpackage/after-sale/wangdian"
  288. }, {
  289. imgUrl: `${fileURL}image/newHome/yewu.png`,
  290. title: "业务指引",
  291. path: ""
  292. }, {
  293. imgUrl: `${fileURL}image/newHome/more.png`,
  294. title: "更多",
  295. path: `/pages/service/service`
  296. }]
  297. const handleNav = (item) => {
  298. console.log("item",item)
  299. if(item.title=='更多'){
  300. if (!hasLogin()) {
  301. confirm('您需要登录过后才能使用此功能', () => {
  302. uni.navigateTo({
  303. url: '/login/login',
  304. });
  305. }, '温馨提示', true, '去登录');
  306. } else {
  307. uni.switchTab({
  308. url:item.path
  309. })
  310. }
  311. }else{
  312. if (item.path) {
  313. navTo(item.path, true)
  314. } else if (item.handlePath) {
  315. item.handlePath()
  316. }
  317. }
  318. }
  319. const cardRecharge = (val) => {
  320. // #ifdef MP-ALIPAY
  321. if (val == 1 || val == 2 || val == 3) {
  322. msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787")
  323. }
  324. // #endif
  325. // #ifdef MP-WEIXIN
  326. if (val == 1) {
  327. navTo('/pages/recharge/recharge-pay', true)
  328. } else if (val == 2) {
  329. navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true)
  330. } else if (val == 3) {
  331. navTo('/subpackage/after-sale/activation-once-again/select-car?type=2', true)
  332. }
  333. // #endif
  334. }
  335. const state = reactive({
  336. vanType: 0, //1客车 2货车
  337. userType: 1, //1个人 2单位
  338. notice: "",
  339. swiperList: [],
  340. swiperListArr: [],
  341. noticeList: [], //公告栏列表
  342. flowPathTabList: ["办理流程", "办理条件", "常见问题"],
  343. tabActive: "办理流程",
  344. flowList: [
  345. //办理流程数据
  346. {
  347. title: "01 产品选择",
  348. desc: "选择购买的发行产品",
  349. imgUrl: `${fileURL}image/newHome/1.png`,
  350. },
  351. {
  352. title: "02 信息校验",
  353. desc: "提交车牌号、车牌颜色、收货地址相关信息",
  354. imgUrl: `${fileURL}image/newHome/2.png`,
  355. },
  356. {
  357. title: "03 证件上传",
  358. desc: "上传身份证、行驶证等相关信息",
  359. imgUrl: `${fileURL}image/newHome/3.png`,
  360. },
  361. {
  362. title: "04 订单支付",
  363. desc: "支付完成订单",
  364. imgUrl: `${fileURL}image/newHome/4.png`,
  365. },
  366. {
  367. title: "05 签约代扣",
  368. desc: "选择签约账户并关联",
  369. imgUrl: `${fileURL}image/newHome/5.png`,
  370. },
  371. ],
  372. highMsgData: '',//高速快讯内容
  373. processeConditionText: "", //办理条件文本
  374. commonQuestionText: "", //常见问题文本
  375. commonQuestionArr: [], //常见问题数组
  376. isEnableSetGray: false
  377. });
  378. // 页面初次渲染完成时触发
  379. onReady(() => {
  380. // setTimeout(() => {
  381. quanKeyAction()
  382. // }, 5000)
  383. })
  384. onMounted(() => {
  385. uni.getSystemInfo({
  386. success: (e : any) => {
  387. statusBarHeight.value = e.statusBarHeight;
  388. }
  389. })
  390. getSwiper()
  391. });
  392. onReachBottom(() => {
  393. highMsg(); //高速快讯
  394. })
  395. // const tip = () => {
  396. // const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index"))
  397. // tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  398. // }
  399. //办理流程tab选择
  400. const flowPathTabHandle = (tab) => {
  401. state.tabActive = tab;
  402. if (tab == "办理条件") {
  403. processeCondition();//办理条件
  404. } else if (tab == "常见问题") {
  405. commonQuestion();
  406. }
  407. };
  408. const showMask = (val : any) => {
  409. state.vanType = val; //1 客车 2货车
  410. isShowMask.value = true;
  411. };
  412. const closeMask = () => {
  413. isShowMask.value = false;
  414. };
  415. // 获取文本信息----用户协议
  416. const getInfo = () => {
  417. //参数说明
  418. let options = {
  419. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  420. data: {
  421. businessType: 'BROADCAST' //广播栏信息
  422. }, //请求参数
  423. method: "POST", //提交方式(默认POST)
  424. showLoading: true, //是否显示加载中(默认显示)
  425. };
  426. //调用方式
  427. requestNew(infoQuery, options)
  428. .then((res) => {
  429. let data = res
  430. state.notice=data.text
  431. // state.noticeList.push(data.text)
  432. // state.noticeList = [data.text || '暂无公告', '平明送客楚山孤',]
  433. console.log(data, state.noticeList, '公告');
  434. })
  435. .catch((err) => {
  436. console.log(err, '错误');
  437. });
  438. }
  439. let newLock = false
  440. // 高速快讯查询接口
  441. const highMsg = () => {
  442. newLock = true
  443. let options = {
  444. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  445. data: {
  446. pageNo: 1,
  447. pageSize: 2
  448. }, //请求参数
  449. method: "POST", //提交方式(默认POST)
  450. showLoading: true, //是否显示加载中(默认显示)
  451. };
  452. //调用方式
  453. requestNew(queryHighMsg, options).then((res) => {
  454. console.log("高速快讯查询接口", res);
  455. state.highMsgData = res.result.slice(0, 4)
  456. for (var i = 0; i < state.highMsgData.length; i++) {
  457. state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
  458. state.highMsgData[i]["updateTime"] = state.highMsgData[i]["updateTime"].replace('T', ' ')
  459. if (state.highMsgData[i]["type"] == 3) {
  460. state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
  461. }
  462. }
  463. state.highMsgData.sort(function (a, b) {
  464. return a.sequence - b.sequence//正序
  465. })
  466. }).catch((err) => { console.log(err) });
  467. }
  468. const processeCondition = () => {
  469. let options = {
  470. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  471. data: {
  472. businessType: 'PROCESSING_CONDITIONS' //办理条件
  473. }, //请求参数
  474. method: "POST", //提交方式(默认POST)
  475. showLoading: true, //是否显示加载中(默认显示)
  476. };
  477. //调用方式
  478. requestNew(infoQuery, options)
  479. .then((res) => {
  480. let data = res
  481. console.log("办理条件", data)
  482. state.processeConditionText = data.text
  483. })
  484. .catch((err) => {
  485. console.log(err);
  486. });
  487. }
  488. const commonQuestion = () => {
  489. let options = {
  490. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  491. data: {
  492. businessType: 'COMMON_PROBLEM' //常见问题
  493. }, //请求参数
  494. method: "POST", //提交方式(默认POST)
  495. showLoading: true, //是否显示加载中(默认显示)
  496. };
  497. //调用方式
  498. requestNew(infoQuery, options)
  499. .then((res) => {
  500. let data = res
  501. console.log("常见问题", data)
  502. state.commonQuestionText = data.text
  503. state.commonQuestionArr = data.text.split('。').filter(item => item)
  504. })
  505. .catch((err) => {
  506. console.log(err);
  507. });
  508. }
  509. //监听页面滚动
  510. onPageScroll((e) => {
  511. let h = viewHeight.value + e.scrollTop
  512. if (h >= newTop.value - 50 && !newLock) {
  513. highMsg()
  514. }
  515. });
  516. const toCreatOrder = (val : number) => {
  517. console.log(typeof (val));
  518. state.userType = val;
  519. navTo(`/subpackage/orders/choice-product?vanType=${state.vanType}&&userType=${state.userType}`)
  520. closeMask();
  521. };
  522. //全量枚举值查询
  523. const quanKeyAction = () => {
  524. var data = {};
  525. const options = {
  526. type: 2,
  527. data: data,
  528. method: "POST",
  529. };
  530. requestNew(queryKey, options).then((res) => {
  531. const data =res
  532. console.log("枚举", data)
  533. setItem('key', data.dictTypeAndItem)
  534. })
  535. .catch((err) => {
  536. console.log(err);
  537. });
  538. }
  539. //获取轮播
  540. const getSwiper = () => {
  541. let options = {
  542. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  543. data: {
  544. }, //请求参数
  545. method: "POST", //提交方式(默认POST)
  546. showLoading: true, //是否显示加载中(默认显示)
  547. };
  548. //调用方式
  549. requestNew(querySwiper, options).then((res) => {
  550. const data = res
  551. console.log("轮播图", data)
  552. state.swiperList = data.swipers ? data.swipers : [],
  553. state.swiperListArr = state.swiperList.map(item => fileURLList + item.imgUrl)
  554. })
  555. .catch((err) => {
  556. console.log(err);
  557. });
  558. };
  559. const link = (item : any) => {
  560. console.log(item);
  561. if (item.type == 1) {
  562. const params = encodeURIComponent(JSON.stringify(item.hyperLink))
  563. tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  564. } else if (item.type == 2) {
  565. navTo(item.hyperLink)
  566. } else if (item.type == 3) {
  567. const param = encodeURIComponent(JSON.stringify(item))
  568. tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param);
  569. } else if (item.type == 4) {
  570. uni.navigateToMiniProgram({
  571. appId: item.hyperLink,
  572. path: item.speedUrl,
  573. success(res) {
  574. console.log(res);
  575. },
  576. complete(res) {
  577. console.log(res);
  578. },
  579. fail(res) {
  580. console.log(res);
  581. // 未成功跳转到车主小程序
  582. },
  583. });
  584. }
  585. }
  586. </script>
  587. <style lang="scss" scoped>
  588. .container {
  589. height: 100%;
  590. background-color: #f2f5f7;
  591. position: relative;
  592. }
  593. .bg-img {
  594. width: 100%;
  595. position: absolute;
  596. z-index: 0;
  597. .icon {
  598. width: 100%;
  599. height: 750rpx;
  600. }
  601. }
  602. .content {
  603. position: relative;
  604. padding-bottom: 30rpx;
  605. }
  606. .header {
  607. height: 590rpx;
  608. .title {
  609. .title-txt {
  610. font-family: PingFangSC, PingFang SC;
  611. font-weight: bold;
  612. font-size: 32rpx;
  613. color: #FFFFFF;
  614. text-align: center;
  615. }
  616. }
  617. .search-box {
  618. margin: 10rpx 30rpx 0;
  619. position: relative;
  620. height: 80rpx;
  621. background: #1a394d;
  622. // border: 1px solid #DCDCDC;
  623. border-radius: 40rpx;
  624. display: flex;
  625. justify-content: center;
  626. align-items: center;
  627. box-sizing: border-box;
  628. flex: 1;
  629. .icon {
  630. width: 27rpx;
  631. height: 27rpx;
  632. margin-left: 26rpx;
  633. }
  634. .search {
  635. flex: 1;
  636. margin-right: 20rpx;
  637. height: 100%;
  638. padding: 0 10rpx;
  639. color: #fff;
  640. font-weight: 500;
  641. font-size: 26rpx;
  642. background: #1a394d;
  643. ::v-deep .input-placeholder {
  644. color: #fff !important;
  645. }
  646. }
  647. }
  648. }
  649. .nav {
  650. background-color: #fff;
  651. margin: 0 30rpx;
  652. width: 100%;
  653. width: 690rpx;
  654. height: 360rpx;
  655. background: #FFFFFF;
  656. border-radius: 12rpx;
  657. display: grid;
  658. grid-template-columns: repeat(4, 25%);
  659. grid-template-rows: repeat(2, 50%);
  660. // grid-gap: 10px;
  661. .item-box {
  662. display: flex;
  663. align-items: center;
  664. justify-content: center;
  665. flex-direction: column;
  666. .icon-img {
  667. height: 100rpx;
  668. width: 100rpx;
  669. border-radius: 50%;
  670. padding: 25rpx;
  671. background: #ECF1F4;
  672. box-sizing: border-box;
  673. .img {
  674. width: 100%;
  675. height: 100%;
  676. }
  677. }
  678. .b-txt {
  679. margin-top: 16rpx;
  680. font-size: 26rpx;
  681. color: #111111;
  682. }
  683. }
  684. }
  685. .notice {
  686. background-image: var(--bgimg);
  687. background-size: 100% 100%;
  688. background-repeat: no-repeat;
  689. height: 80rpx;
  690. width: 690rpx;
  691. margin: 24rpx 30rpx 0;
  692. display: flex;
  693. align-items: center;
  694. .l-img {
  695. width: 136rpx;
  696. height: 80rpx;
  697. margin-left: 20rpx;
  698. .img {
  699. height: 100%;
  700. width: 100%;
  701. }
  702. }
  703. .r-info {
  704. line-height: 80rpx;
  705. margin-left: 16rpx;
  706. font-size: 27rpx;
  707. color: #000;
  708. font-weight: 500;
  709. width: 400rpx;
  710. }
  711. }
  712. .supervision-con {
  713. box-sizing: border-box;
  714. height: 180rpx;
  715. width: 690rpx;
  716. margin: 24rpx 30rpx 0;
  717. // background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/phone.png);
  718. // background-size: 100% 100%;
  719. // background-repeat: no-repeat;
  720. // padding: 35rpx 0 0 52rpx;
  721. // background: #FFFFFF;
  722. border-radius: 12rpx;
  723. overflow: hidden;
  724. .swiper {
  725. height: 180rpx;
  726. width: 690rpx;
  727. }
  728. .swiper-item .img {
  729. overflow: hidden;
  730. border-radius: 12rpx;
  731. height: 180rpx !important;
  732. width: 690rpx;
  733. }
  734. .txt {
  735. font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  736. font-weight: 400;
  737. font-size: 26rpx;
  738. color: #111111;
  739. }
  740. .phone {
  741. margin: 10rpx 0 10rpx;
  742. font-family: Arial, Arial;
  743. font-weight: normal;
  744. font-size: 38rpx;
  745. color: #B99A46;
  746. }
  747. .btn {
  748. font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  749. font-weight: 400;
  750. font-size: 24rpx;
  751. color: #01243A;
  752. }
  753. }
  754. .title-name {
  755. margin: 24rpx 30rpx 0;
  756. }
  757. .title-h {
  758. font-family: PingFangSC, PingFang SC;
  759. font-weight: bold;
  760. font-size: 34rpx;
  761. color: #01243A;
  762. }
  763. .express-lane {
  764. margin: 22rpx 30rpx 0;
  765. display: flex;
  766. align-items: center;
  767. justify-content: space-between;
  768. .item {
  769. background-size: 100% 100%;
  770. background-repeat: no-repeat;
  771. width: 334rpx;
  772. height: 168rpx;
  773. text-align: right;
  774. display: flex;
  775. align-items: flex-end;
  776. justify-content: center;
  777. flex-direction: column;
  778. background-image: var(--bgimg);
  779. .item-con {
  780. margin-right: 53rpx;
  781. }
  782. .top-txt {
  783. font-family: PingFangSC, PingFang SC;
  784. font-size: 30rpx;
  785. color: #FFFFFF;
  786. }
  787. .btn {
  788. margin-top: 30rpx;
  789. background: #03385D;
  790. border-radius: 20rpx;
  791. font-family: PingFangSC, PingFang SC;
  792. font-size: 24rpx;
  793. color: #FFFFFF;
  794. height: 40rpx;
  795. width: 80rpx;
  796. line-height: 40rpx;
  797. text-align: center;
  798. }
  799. }
  800. .keche {
  801. .btn {
  802. background-color: #03385D;
  803. }
  804. }
  805. .huoche {
  806. margin-left: 22rpx;
  807. .btn {
  808. background-color: #C2A75F;
  809. }
  810. }
  811. }
  812. .news-con {
  813. margin: 39rpx 30rpx 0;
  814. .title-con {
  815. display: flex;
  816. align-items: center;
  817. justify-content: space-between;
  818. .r-more {
  819. width: 100rpx;
  820. height: 44rpx;
  821. border-radius: 22rpx;
  822. border: 1rpx solid #01243A;
  823. display: flex;
  824. align-items: center;
  825. justify-content: center;
  826. .txt {
  827. font-family: PingFangSC, PingFang SC;
  828. font-weight: bold;
  829. font-size: 24rpx;
  830. color: #01243A;
  831. }
  832. .icon {
  833. width: 10rpx;
  834. height: 100%;
  835. margin-left: 5rpx;
  836. }
  837. }
  838. }
  839. .empty-news {}
  840. .news-box {
  841. border-radius: 12rpx;
  842. background-color: #fff;
  843. margin-top: 22rpx;
  844. padding: 0 20rpx;
  845. .news-item {
  846. padding: 20rpx 0;
  847. display: flex;
  848. &:nth-child(n+2) {
  849. border-top: 1rpx solid #eee;
  850. }
  851. .l-img {
  852. width: 180rpx;
  853. height: 135rpx;
  854. .img {
  855. height: 100%;
  856. width: 100%;
  857. }
  858. }
  859. .r-txt {
  860. margin-left: 20rpx;
  861. display: flex;
  862. flex-direction: column;
  863. justify-content: space-between;
  864. .tit {
  865. font-family: PingFangSC, PingFang SC;
  866. font-weight: bold;
  867. font-size: 30rpx;
  868. color: #111111;
  869. }
  870. .b-time {
  871. font-family: PingFangSC, PingFang SC;
  872. font-size: 24rpx;
  873. color: #999999;
  874. }
  875. }
  876. }
  877. }
  878. }
  879. .flow-path {
  880. margin: 31rpx 30rpx 0;
  881. .top-menu {
  882. display: flex;
  883. .tab {
  884. font-family: MicrosoftYaHeiUI;
  885. font-size: 28rpx;
  886. color: #5A5E61;
  887. margin-right: 39rpx;
  888. position: relative;
  889. &.active {
  890. font-size: 34rpx;
  891. color: #01243A;
  892. .border {
  893. position: relative;
  894. }
  895. .border::after {
  896. content: "";
  897. background-image: var(--bgimg);
  898. background-repeat: no-repeat;
  899. background-size: 100% 100%;
  900. position: absolute;
  901. bottom: 0;
  902. left: 0;
  903. width: 100%;
  904. height: 16rpx;
  905. }
  906. }
  907. .txt {
  908. position: relative;
  909. z-index: 2;
  910. }
  911. }
  912. }
  913. .flow-list {
  914. margin-top: 30rpx;
  915. background-color: #fff;
  916. border-radius: 12rpx;
  917. padding: 20rpx;
  918. }
  919. .tiaojian {
  920. .title-top {
  921. display: flex;
  922. justify-content: center;
  923. align-items: center;
  924. padding-bottom: 20rpx;
  925. .txt {
  926. margin: 0 24rpx;
  927. font-family: MicrosoftYaHei;
  928. font-size: 30rpx;
  929. color: #01243A;
  930. }
  931. .icon-img {
  932. width: 16rpx;
  933. height: 20rpx;
  934. }
  935. }
  936. }
  937. .list-info {
  938. font-family: MicrosoftYaHeiUI;
  939. font-size: 26rpx;
  940. color: #222222;
  941. }
  942. .wenti {
  943. .item-box:nth-child(n+2) {
  944. border-top: 1rpx solid #E8E8E8;
  945. }
  946. .item-box {
  947. display: flex;
  948. padding: 15rpx 0;
  949. }
  950. .l-icon {
  951. flex-shrink: 0;
  952. width: 38rpx;
  953. height: 38rpx;
  954. display: flex;
  955. align-items: center;
  956. justify-content: center;
  957. background-color: #c2a75f;
  958. border-radius: 50%;
  959. .icon-img {
  960. width: 14rpx;
  961. height: 24rpx;
  962. }
  963. }
  964. .txt {
  965. margin-left: 14rpx;
  966. font-family: PingFangSC, PingFang SC;
  967. font-size: 28rpx;
  968. color: #222222;
  969. line-height: 38rpx;
  970. }
  971. }
  972. }
  973. .mask {
  974. background: $uni-bg-color-mask;
  975. position: fixed;
  976. left: 0;
  977. top: 0;
  978. right: 0;
  979. bottom: 0;
  980. }
  981. .mask-content {
  982. background: $uni-bg-color;
  983. width: 570rpx;
  984. height: 480rpx;
  985. position: absolute;
  986. left: 50%;
  987. top: 50%;
  988. transform: translate(-50%, -50%);
  989. display: flex;
  990. flex-direction: column;
  991. border-radius: 20rpx;
  992. }
  993. .mask-close {
  994. text-align: right;
  995. }
  996. .mask-title {
  997. text-align: center;
  998. font-size: 32rpx;
  999. color: $uni-text-color-black;
  1000. margin-bottom: 50rpx;
  1001. }
  1002. .mask-tab {
  1003. display: flex;
  1004. justify-content: space-evenly;
  1005. }
  1006. .icon-closed {
  1007. width: 48rpx;
  1008. height: 48rpx;
  1009. margin: 24rpx 24rpx 0 0;
  1010. }
  1011. .tab-item {
  1012. display: flex;
  1013. flex-direction: column;
  1014. justify-content: center;
  1015. align-items: center;
  1016. }
  1017. .tab-tit {
  1018. font-size: 32rpx;
  1019. margin-top: 20rpx;
  1020. color: #666;
  1021. }
  1022. .tab-item image {
  1023. width: 160rpx;
  1024. height: 160rpx;
  1025. }
  1026. .backlog-notice {
  1027. margin: 50rpx 30rpx 0rpx;
  1028. }
  1029. </style>