You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.vue 26KB

2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
1 jaar geleden
2 jaren geleden
2 jaren geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086
  1. <template>
  2. <filter>
  3. <view class="wrapper">
  4. <view class="top_title">畅行高速·全国通行95折</view>
  5. <view class="top_bg nav">
  6. <view class="item-box"
  7. @click="showMask(1)">
  8. <view class="item">
  9. <image :src="fileURL + 'image/yxb/yxb6.png'" mode="aspectFill" />
  10. </view>
  11. <view class="text">客车ETC</view>
  12. </view>
  13. <!-- <view class="item-box"
  14. @click="$util.navTo('/subpackage/after-sale/activation-once-again/select-car',true)">
  15. <view class="item ">
  16. <image :src="fileURL + 'image/yxb/yxb7.png'" mode="aspectFill" />
  17. </view>
  18. <view class="text">OBU重新激活</view>
  19. </view> -->
  20. <view class="item-box"
  21. @click="$util.navTo('/subpackage/personal-center/install-activation-order',true)">
  22. <view class="item">
  23. <image :src="fileURL + 'image/yxb/yxb8.png'" mode="aspectFill" />
  24. </view>
  25. <view class="text">首次激活</view>
  26. </view>
  27. <view class="item-box" @click="$util.navTo(`/subpackage/after-sale/onlineService`,true)">
  28. <view class="item">
  29. <image :src="fileURL + 'image/yxb/yxb9.png'" mode="aspectFill" />
  30. </view>
  31. <view class="text">在线客服</view>
  32. </view>
  33. </view>
  34. <view class="entrance">
  35. <view class="triangle"></view>
  36. <view class="tips">
  37. <view class="tips_left">
  38. <image class="etc_picture" :src="fileURL + 'image/yxb/yxb1.png'" mode=""></image>
  39. <view>仅展示,产品以实物为准</view>
  40. </view>
  41. <view class="tips_right">
  42. <view class="title">客车ETC申办</view>
  43. <view class="title1">设备邮寄到家,国家三包,故障免费换新,防乱扣费,0元注销</view>
  44. <view class="title2"><text>全国通用</text><text>极速发货</text><text>售后无忧</text></view>
  45. </view>
  46. </view>
  47. <view class="handle" @click="showMask(1)">立即办理</view>
  48. <view class="quickly">
  49. <view><image :src="fileURL + 'image/yxb/yxb2.png'"></image>极速处理</view>
  50. <view><image :src="fileURL + 'image/yxb/yxb4.png'"></image>安全可靠</view>
  51. <view><image :src="fileURL + 'image/yxb/yxb3.png'"></image>专业售后</view>
  52. </view>
  53. </view>
  54. <image class="show_banner" :src="fileURL + 'image/yxb/yxb5.png'" mode=""></image>
  55. <!-- Banner -->
  56. <!-- <view class="banner">
  57. <swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
  58. :interval="swiper.interval" :duration="swiper.duration"
  59. indicator-active-color="rgba(0, 179, 139, 1)" :easing-function="swiper.easing">
  60. <block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
  61. <swiper-item class="swiper-item" @click="link(item)">
  62. <image :src="fileURLList + item.imgUrl" mode="widthFix"></image>
  63. </swiper-item>
  64. </block>
  65. </swiper>
  66. <view class="notice">
  67. <image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false"
  68. mode="aspectFill">
  69. </image>
  70. <uni-notice-bar style="width: 100%;" scrollable single :text="state.notice" @click="tip()">
  71. </uni-notice-bar>
  72. </view>
  73. </view> -->
  74. <!-- 按钮导航 -->
  75. <view class="nav">
  76. <!-- <view class="item-box" @click="cardRecharge(1)">
  77. <view class="item item-1">
  78. <image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill" />
  79. </view>
  80. <view class="text">储值卡充值</view>
  81. </view> -->
  82. <!-- <view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4', true)">
  83. <view class="item item-2">
  84. <image :src="fileURL + 'image/index/item-2.png'" mode="aspectFill" />
  85. </view>
  86. <view class="text">卡签信息查询</view>
  87. </view> -->
  88. <!-- <view class="item-box"
  89. @click="$util.navTo('/subpackage/after-sale/activation-once-again/select-car',true)">
  90. <view class="item item-3">
  91. <image :src="fileURL + '20230511/24e179d44e2d4e5687339bff_obucxjh.png'" mode="aspectFill" />
  92. </view>
  93. <view class="text">OBU重新激活</view>
  94. </view>
  95. <view class="item-box"
  96. @click="$util.navTo('/subpackage/personal-center/install-activation-order',true)">
  97. <view class="item item-4">
  98. <image :src="fileURL + 'image/index/item-4.png'" mode="aspectFill" />
  99. </view>
  100. <view class="text">首次激活</view>
  101. </view> -->
  102. <!--
  103. <view class="item-box" @click="cardRecharge(3)">
  104. <view class="item item-5">
  105. <image :src="fileURL + 'image/index/item-5.png'" mode="aspectFill" />
  106. </view>
  107. <view class="text">设备注销</view>
  108. </view>
  109. <view class="item-box" @click="$util.navTo(`/subpackage/after-sale/equipment-upgrade/select-car`,true)">
  110. <view class="item item-6">
  111. <image :src="fileURL + 'image/index/item-6.png'" mode="aspectFill" />
  112. </view>
  113. <view class="text">设备升级</view>
  114. </view> -->
  115. <!-- <view class="item-box"
  116. @click="$util.navTo(`/subpackage/personal-center/setting/personal-information/corrections`,true)">
  117. <view class="item item-7">
  118. <image :src="fileURL + 'image/index/item-7.png'" mode="aspectFill" />
  119. </view>
  120. <view class="text">基础信息变更</view>
  121. </view> -->
  122. <!-- <view class="item-box" @click="$util.navTo(`/subpackage/after-sale/onlineService`,true)">
  123. <view class="item item-7">
  124. <image :src="fileURL + 'image/index/item-7.png'" mode="aspectFill" />
  125. </view>
  126. <view class="text">在线客服</view>
  127. </view> -->
  128. <!-- <view class="item-box" @click="$util.navTo(`/pages/service/service`,true)">
  129. <view class="item item-8">
  130. <image :src="fileURL + 'image/index/item-more.png'" mode="aspectFill" />
  131. </view>
  132. <view class="text">更多</view>
  133. </view> -->
  134. </view>
  135. <!--快速办理通道 -->
  136. <!-- <view class="express-lane">
  137. <view class="title">快速办理</view>
  138. <view class="lane">
  139. <view class="lane-item lane-1" :style="{ '--background': bgOrange }" @click="showMask(1)">
  140. <image :src="fileURL + 'image/index/icon-car.png'" mode="aspectFill"></image>
  141. <view class="text">
  142. <text class="head">客车用户</text>
  143. </view>
  144. </view>
  145. <view class="lane-item lane-2" :style="{ '--background': bgBlue }" @click="showMask(2)">
  146. <image :src="fileURL + 'image/index/icon-truck.png'" mode="aspectFill"></image>
  147. <view class="text">
  148. <text class="head">货车用户</text>
  149. </view>
  150. </view>
  151. </view>
  152. </view> -->
  153. <!-- 办理流程 -->
  154. <view class="flow-path">
  155. <scroll-view scroll-x="true" class="scroll-view">
  156. <view class="top-menu">
  157. <view :class="item == state.tabActive ? 'tab active' : 'tab'"
  158. v-for="item in state.flowPathTabList" :key="item" @click="flowPathTabHandle(item)">
  159. <view class="border"></view>{{ item }}
  160. </view>
  161. </view>
  162. </scroll-view>
  163. <view v-if="state.tabActive === '办理流程'">
  164. <view class="flow-list">
  165. <flow-path-list :options="state.flowList"></flow-path-list>
  166. </view>
  167. </view>
  168. <view v-else-if="state.tabActive === '办理条件'">
  169. <view class="flow-list as-gravity-center"> {{state.processeConditionText}} </view>
  170. </view>
  171. <view v-else-if="state.tabActive === '常见问题'">
  172. <view class="flow-list as-gravity-center"> {{state.commonQuestionText}} </view>
  173. </view>
  174. </view>
  175. </view>
  176. <!-- 高速快讯 -->
  177. <!-- <view class="news" v-if="state.highMsgData.length!=0">
  178. <view class="title">高速快讯</view>
  179. <view class="news-box">
  180. <view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
  181. <view class="left-text">
  182. <view class="tit description">{{item.title}}</view>
  183. <view class="span">{{item.copywriting}}</view>
  184. </view>
  185. <view class="image-box">
  186. <image :src="fileURLList + item.imgUrl" mode="aspectFill"></image>
  187. </view>
  188. </view>
  189. <view v-if="state.highMsgData.length!=0" class="more"
  190. @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">查看更多</view>
  191. </view>
  192. </view> -->
  193. </filter>
  194. <!-- ETC选择弹窗 -->
  195. <view class="mask" v-if="isShowMask">
  196. <view class="mask-content">
  197. <filter>
  198. <view class="mask-close">
  199. <image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image>
  200. </view>
  201. <view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view>
  202. <view class="mask-tab">
  203. <view class="tab-item active" @click="toCreatOrder('1')">
  204. <image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image>
  205. <text class="tab-tit on">个人办理</text>
  206. </view>
  207. <view class="tab-item" @click="toCreatOrder('2')">
  208. <image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image>
  209. <text class="tab-tit on">单位办理</text>
  210. </view>
  211. </view>
  212. </filter>
  213. </view>
  214. </view>
  215. </template>
  216. <script setup lang="ts">
  217. import {
  218. onMounted,
  219. ref
  220. } from "vue";
  221. import {
  222. onPageScroll,
  223. onLoad, onReachBottom
  224. } from "@dcloudio/uni-app";
  225. import flowPathList from "./components/flow-path-list.vue";
  226. import filter from '@/components/filter/filter.vue';
  227. import {
  228. request
  229. } from "@/utils/network/request.js";
  230. import {
  231. stringToJson
  232. } from "@/utils/network/encryption.js";
  233. import {
  234. useUserStore
  235. } from "@/stores/user";
  236. import {
  237. getItem,
  238. setItem,
  239. StorageKeys
  240. } from "@/utils/storage";
  241. import {
  242. queryKey,
  243. querySwiper,
  244. envs,
  245. infoQuery,
  246. queryHighMsg,
  247. orderList
  248. } from "@/utils/network/api.js";
  249. import {
  250. reactive
  251. } from "vue";
  252. import {
  253. fileURL, fileURLList
  254. } from "@/datas/fileURL.js";
  255. import {
  256. navTo,
  257. msg,
  258. noticeUser
  259. } from "@/utils/utils";
  260. import {
  261. getCodeName
  262. } from "@/datas/queryKey.js";
  263. import navBar from "@/components/nav-bar/nav-bar2.vue";
  264. const tools = require("../../static/etcUtil/tools.js");
  265. const bgOrange = `url(${fileURL}image/index/bg-orange.png) center center no-repeat`;
  266. const bgBlue = `url(${fileURL}image/index/bg-blue.png) center center no-repeat`;
  267. const list = reactive(["您有一条待办事项,还未办理完成"])
  268. const scrollTop = ref(0);
  269. const isBack = ref(false);
  270. const swiper = reactive({
  271. indicatorDots: true,
  272. autoplay: true,
  273. interval: 3000,
  274. duration: 3000,
  275. easing: "easeInOutCubic"
  276. })
  277. console.log('输出内容==============', getItem(StorageKeys.OpenId), '==============')
  278. const state = reactive({
  279. type: 0, //1客车 2货车
  280. userType: 1, //1个人 2单位
  281. notice: "",
  282. swiperList: [],
  283. noticeList: [], //公告栏列表
  284. flowPathTabList: ["办理流程", "办理条件", "常见问题"],
  285. tabActive: "办理流程",
  286. flowList: [
  287. //办理流程数据
  288. {
  289. title: "第一步:产品选择",
  290. desc: "选择购买的发行产品",
  291. },
  292. {
  293. title: "第二步:信息校验",
  294. desc: "提交车牌号、车牌颜色、收货地址相关信息",
  295. },
  296. {
  297. title: "第三步:证件上传",
  298. desc: "上传身份证、行驶证等相关信息",
  299. },
  300. {
  301. title: "第四步:订单支付",
  302. desc: "支付完成订单",
  303. },
  304. {
  305. title: "第五步:签约代扣",
  306. desc: "选择签约账户并关联",
  307. },
  308. ],
  309. highMsgData: '',//高速快讯内容
  310. processeConditionText: "", //办理条件文本
  311. commonQuestionText: "", //常见问题文本
  312. isEnableSetGray: false
  313. });
  314. const isShowMask = ref(false);
  315. const isShowBar = ref(false)
  316. const userStore = useUserStore();
  317. const type = 0;
  318. const title = ref("我是测试");
  319. const statusBarHeight = ref(0)
  320. //监听页面滚动
  321. onPageScroll((e) => {
  322. if (e.scrollTop > statusBarHeight.value) {
  323. isShowBar.value = true;
  324. } else {
  325. isShowBar.value = false;
  326. }
  327. scrollTop.value = e.scrollTop;
  328. });
  329. onLoad(() => {
  330. // getInfo();
  331. quanKeyAction().then((val : any) => {
  332. setItem('key', val.dictTypeAndItem)
  333. })
  334. })
  335. onMounted(() => {
  336. uni.getSystemInfo({
  337. success: (e : any) => {
  338. statusBarHeight.value = e.statusBarHeight;
  339. }
  340. })
  341. getSwiper()
  342. });
  343. onReachBottom(() => {
  344. // highMsg(); //高速快讯
  345. })
  346. const tip = () => {
  347. const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index"))
  348. tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  349. }
  350. //获取轮播
  351. const getSwiper = () => {
  352. let options = {
  353. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  354. data: {
  355. }, //请求参数
  356. method: "POST", //提交方式(默认POST)
  357. showLoading: true, //是否显示加载中(默认显示)
  358. };
  359. //调用方式
  360. request(querySwiper, options).then((res) => {
  361. console.log(stringToJson(res.bizContent));
  362. const data = stringToJson(res.bizContent)
  363. console.log("轮播图", data)
  364. state.swiperList = data.swipers ? data.swipers : []
  365. })
  366. .catch((err) => {
  367. console.log(err);
  368. });
  369. };
  370. //办理流程tab选择
  371. const flowPathTabHandle = (tab) => {
  372. state.tabActive = tab;
  373. if (tab == "办理条件") {
  374. processeCondition();//办理条件
  375. } else if (tab == "常见问题") {
  376. commonQuestion();
  377. }
  378. };
  379. //全量枚举值查询
  380. const quanKeyAction = () => {
  381. var data = {};
  382. const options = {
  383. type: 2,
  384. data: data,
  385. method: "POST",
  386. showLoading: true,
  387. };
  388. return new Promise(async (resolve, reject) => {
  389. const res = await request(queryKey, options);
  390. const data = stringToJson(res.bizContent);
  391. resolve(data);
  392. }).catch((error) => {
  393. reject(error);
  394. });
  395. }
  396. const toCreatOrder = (val : number) => {
  397. console.log(typeof (val));
  398. state.userType = val;
  399. navTo(`/subpackage/orders/choice-product?type=${state.type}&&userType=${state.userType}`)
  400. closeMask();
  401. };
  402. const showMask = (val : any) => {
  403. state.type = val; //1 客车 2货车
  404. isShowMask.value = true;
  405. };
  406. const closeMask = () => {
  407. isShowMask.value = false;
  408. };
  409. // 获取文本信息----用户协议
  410. const getInfo = () => {
  411. //参数说明
  412. let options = {
  413. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  414. data: {
  415. businessType: 'BROADCAST' //广播栏信息
  416. }, //请求参数
  417. method: "POST", //提交方式(默认POST)
  418. showLoading: true, //是否显示加载中(默认显示)
  419. };
  420. //调用方式
  421. request(infoQuery, options)
  422. .then((res) => {
  423. let data = stringToJson(res.bizContent)
  424. console.log(data);
  425. state.notice = data.text
  426. })
  427. .catch((err) => {
  428. console.log(err);
  429. });
  430. }
  431. // 高速快讯查询接口
  432. const highMsg = () => {
  433. let options = {
  434. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  435. data: {
  436. pageNo: 1,
  437. pageSize: 2
  438. }, //请求参数
  439. method: "POST", //提交方式(默认POST)
  440. showLoading: true, //是否显示加载中(默认显示)
  441. };
  442. //调用方式
  443. request(queryHighMsg, options).then((res) => {
  444. console.log("高速快讯查询接口", stringToJson(res.bizContent));
  445. state.highMsgData = stringToJson(res.bizContent).data
  446. for (var i = 0; i < state.highMsgData.length; i++) {
  447. state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
  448. if (state.highMsgData[i]["type"] == 3) {
  449. state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
  450. }
  451. }
  452. state.highMsgData.sort(function (a, b) {
  453. return a.sequence - b.sequence//正序
  454. })
  455. }).catch((err) => { console.log(err) });
  456. }
  457. const link = (item : any) => {
  458. if (item.type == 1) {
  459. const params = encodeURIComponent(JSON.stringify(item.hyperLink))
  460. tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  461. } else if (item.type == 2) {
  462. navTo(item.hyperLink)
  463. } else if (item.type == 3) {
  464. const param = encodeURIComponent(JSON.stringify(item))
  465. tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param);
  466. } else if (item.type == 4) {
  467. uni.navigateToMiniProgram({
  468. appId: item.hyperLink,
  469. path: item.speedUrl,
  470. success(res) {
  471. console.log(res);
  472. },
  473. complete(res) {
  474. console.log(res);
  475. },
  476. fail(res) {
  477. console.log(res);
  478. // 未成功跳转到车主小程序
  479. },
  480. });
  481. }
  482. }
  483. const processeCondition = () => {
  484. let options = {
  485. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  486. data: {
  487. businessType: 'PROCESSING_CONDITIONS' //办理条件
  488. }, //请求参数
  489. method: "POST", //提交方式(默认POST)
  490. showLoading: true, //是否显示加载中(默认显示)
  491. };
  492. //调用方式
  493. request(infoQuery, options)
  494. .then((res) => {
  495. let data = stringToJson(res.bizContent)
  496. console.log("办理条件", data)
  497. state.processeConditionText = data.text
  498. })
  499. .catch((err) => {
  500. console.log(err);
  501. });
  502. }
  503. const commonQuestion = () => {
  504. let options = {
  505. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  506. data: {
  507. businessType: 'COMMON_PROBLEM' //常见问题
  508. }, //请求参数
  509. method: "POST", //提交方式(默认POST)
  510. showLoading: true, //是否显示加载中(默认显示)
  511. };
  512. //调用方式
  513. request(infoQuery, options)
  514. .then((res) => {
  515. let data = stringToJson(res.bizContent)
  516. console.log("常见问题", data)
  517. state.commonQuestionText = data.text
  518. })
  519. .catch((err) => {
  520. console.log(err);
  521. });
  522. }
  523. // 代办事项
  524. const doSomething = () => {
  525. let options = {
  526. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  527. data: {
  528. "opId": getItem(StorageKeys.OpenId),
  529. "source": "WECHAT",
  530. "vehiclePlate": "",
  531. "tabIndex": 3 + '',
  532. "pageNo": 1,
  533. "pageSize": 100,
  534. "promotionModes": 1
  535. },
  536. method: "POST", //提交方式(默认POST)
  537. };
  538. //调用方式
  539. request(orderList, options)
  540. .then((res) => {
  541. let data = stringToJson(res.bizContent)
  542. let obj = {};
  543. obj["id"] = 1;
  544. obj['title'] = "您有" + data.data.length + "条未完成订单,前往处理"
  545. state.noticeList.push(obj)
  546. console.log("代办事项", data.data)
  547. })
  548. .catch((err) => {
  549. console.log(err);
  550. });
  551. }
  552. const cardRecharge = (val) => {
  553. // #ifdef MP-ALIPAY
  554. if (val == 1 || val == 2 || val == 3) {
  555. msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787")
  556. }
  557. // #endif
  558. // #ifdef MP-WEIXIN
  559. if (val == 1) {
  560. navTo('/pages/recharge/recharge-pay', true)
  561. } else if (val == 2) {
  562. navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true)
  563. } else if (val == 3) {
  564. navTo('/subpackage/after-sale/ETC-log-off/select-car', true)
  565. }
  566. // #endif
  567. }
  568. </script>
  569. <style>
  570. page {
  571. background: #eef7f7;
  572. }
  573. </style>
  574. <style lang="scss" scoped>
  575. .statusBar {
  576. width: 100%;
  577. position: sticky;
  578. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  579. top: 0;
  580. left: 0;
  581. z-index: 999;
  582. }
  583. .banner {
  584. position: relative;
  585. }
  586. .banner swiper {
  587. height: 470rpx;
  588. width: 750rpx;
  589. }
  590. .banner .notice {
  591. position: absolute;
  592. background: rgba(0, 0, 0, 0.28);
  593. border-radius: 30rpx;
  594. width: 500rpx;
  595. height: 60rpx;
  596. bottom: 46rpx;
  597. left: 125rpx;
  598. display: flex;
  599. justify-content: center;
  600. align-items: center;
  601. padding: 0 20rpx;
  602. box-sizing: border-box;
  603. ::v-deep .uni-noticebar {
  604. background: none !important;
  605. margin-bottom: 0;
  606. text {
  607. font-size: 24rpx !important;
  608. color: #ffffff !important;
  609. }
  610. }
  611. }
  612. .banner .notice .icon {
  613. width: 40rpx;
  614. height: 40rpx;
  615. margin: 10rpx;
  616. }
  617. .banner .notice .notice-text {
  618. font-size: 24rpx;
  619. color: #ffffff;
  620. flex: 1;
  621. }
  622. .swiper-item image {
  623. width: 100%;
  624. height: auto;
  625. }
  626. .nav {
  627. display: flex;
  628. flex-wrap: wrap;
  629. padding: 0 35rpx;
  630. font-size: 28rpx;
  631. }
  632. .nav .item-box {
  633. // display: flex;
  634. // flex-direction: column;
  635. // justify-content: center;
  636. // align-items: center;
  637. text-align: center;
  638. }
  639. .nav .item {
  640. width: 80rpx;
  641. height: 80rpx;
  642. border-radius: 30rpx;
  643. display: flex;
  644. justify-content: center;
  645. align-items: center;
  646. margin: 50rpx 45rpx 20rpx 45rpx;
  647. }
  648. .nav .text {
  649. font-size: 24rpx;
  650. color: white;
  651. }
  652. .item-1 {
  653. background: linear-gradient(133deg, #5fff9b 0%, #00b38b 100%);
  654. }
  655. .item-2 {
  656. background: linear-gradient(-50deg, #018ffd 0%, #27fcff 100%);
  657. }
  658. .item-3 {
  659. background: linear-gradient(-47deg, #f88721 0%, #fecd61 100%);
  660. }
  661. .item-4 {
  662. background: linear-gradient(-47deg, #018ffd 0%, #27fcff 100%);
  663. }
  664. .item-5 {
  665. background: linear-gradient(-44deg, #018ffd 0%, #27fcff 100%);
  666. }
  667. .item-6 {
  668. background: linear-gradient(-50deg, #f88721 0%, #fecd61 100%);
  669. }
  670. .item-7 {
  671. background: linear-gradient(129deg, #5fff9b 0%, #00b38b 100%);
  672. }
  673. .item-8 {
  674. background: linear-gradient(124deg, #b8f0f2 0%, #62aeb1 100%);
  675. }
  676. .item image {
  677. width: 80rpx;
  678. height: 80rpx;
  679. }
  680. .express-lane {
  681. font-size: 36rpx;
  682. font-weight: 400;
  683. color: #000000;
  684. padding-top: 30rpx;
  685. }
  686. .express-lane .title {
  687. padding-left: 30rpx;
  688. margin: 0rpx 0 20rpx;
  689. font-size: 32rpx;
  690. font-weight: bold;
  691. }
  692. .lane {
  693. display: flex;
  694. justify-content: space-evenly;
  695. }
  696. .lane-item {
  697. width: 330rpx;
  698. height: 150rpx;
  699. border-radius: 20rpx;
  700. display: flex;
  701. justify-content: center;
  702. align-items: center;
  703. }
  704. .lane-item image {
  705. width: 120rpx;
  706. height: 100rpx;
  707. margin: 0 18rpx;
  708. }
  709. .lane-item .text {
  710. display: flex;
  711. flex-direction: column;
  712. justify-content: center;
  713. color: #ffffff;
  714. flex: 1;
  715. }
  716. .lane-item .head {
  717. font-size: 30rpx;
  718. font-weight: bold;
  719. }
  720. .lane-item .decribe {
  721. font-size: 24rpx;
  722. }
  723. .lane-1 {
  724. background: var(--background);
  725. }
  726. .lane-2 {
  727. background: var(--background);
  728. }
  729. .news {
  730. padding: 30rpx 30rpx 0 30rpx;
  731. }
  732. .news .title {
  733. font-size: 32rpx;
  734. font-weight: bold;
  735. }
  736. .news .left-text {
  737. flex: 1;
  738. margin-right: 100rpx;
  739. }
  740. .news-box {
  741. background: #ffffff;
  742. border-radius: 20rpx;
  743. padding: 0 32rpx;
  744. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  745. margin: 20rpx 0 50rpx;
  746. }
  747. .news .tit {
  748. font-size: 26rpx;
  749. color: #172843;
  750. }
  751. .news .news-item {
  752. display: flex;
  753. border-bottom: 1px solid #dcdcdc;
  754. padding: 32rpx 0 15rpx;
  755. }
  756. .news .image-box image {
  757. width: 100rpx;
  758. height: 100rpx;
  759. border-radius: 10rpx;
  760. }
  761. .news .span {
  762. font-size: 22rpx;
  763. display: inline-block;
  764. text-align: center;
  765. background: #bae0f1;
  766. border-radius: 6rpx;
  767. color: #0a8f8a;
  768. padding: 4rpx 8rpx;
  769. }
  770. .news .more {
  771. font-size: 24rpx;
  772. text-align: center;
  773. color: #0a8f8a;
  774. padding: 22rpx 0;
  775. }
  776. .mask {
  777. background: $uni-bg-color-mask;
  778. position: fixed;
  779. left: 0;
  780. top: 0;
  781. right: 0;
  782. bottom: 0;
  783. }
  784. .mask-content {
  785. background: $uni-bg-color;
  786. width: 570rpx;
  787. height: 480rpx;
  788. position: absolute;
  789. left: 50%;
  790. top: 50%;
  791. transform: translate(-50%, -50%);
  792. display: flex;
  793. flex-direction: column;
  794. border-radius: 20rpx;
  795. }
  796. .mask-close {
  797. text-align: right;
  798. }
  799. .mask-title {
  800. text-align: center;
  801. font-size: 32rpx;
  802. color: $uni-text-color-black;
  803. margin-bottom: 50rpx;
  804. }
  805. .mask-tab {
  806. display: flex;
  807. justify-content: space-evenly;
  808. }
  809. .icon-closed {
  810. width: 48rpx;
  811. height: 48rpx;
  812. margin: 24rpx 24rpx 0 0;
  813. }
  814. .tab-item {
  815. display: flex;
  816. flex-direction: column;
  817. justify-content: center;
  818. align-items: center;
  819. }
  820. .tab-tit {
  821. font-size: 32rpx;
  822. margin-top: 20rpx;
  823. color: #666;
  824. }
  825. .tab-item image {
  826. width: 160rpx;
  827. height: 160rpx;
  828. }
  829. .backlog-notice {
  830. margin: 50rpx 30rpx 0rpx;
  831. }
  832. .flow-path {
  833. padding: 20rpx 0rpx 20rpx;
  834. .scroll-view {
  835. white-space: nowrap;
  836. // position: sticky;
  837. top: 0;
  838. }
  839. .top-menu {
  840. display: flex;
  841. }
  842. .top-menu .tab {
  843. font-size: 28rpx;
  844. padding: 38rpx 30rpx;
  845. color: #666666;
  846. position: relative;
  847. }
  848. .top-menu .active .border {
  849. position: absolute;
  850. width: 70%;
  851. height: 16rpx;
  852. background: #00b38b;
  853. opacity: 0.3;
  854. bottom: 40rpx;
  855. z-index: -99;
  856. left: 15%;
  857. border-radius: 6rpx;
  858. }
  859. .top-menu .active {
  860. font-weight: bold;
  861. font-size: 32rpx;
  862. color: #0d0f26;
  863. }
  864. .top-menu .active::before {
  865. width: 100%;
  866. height: 16rpx;
  867. background: #00b38b;
  868. opacity: 0.3;
  869. }
  870. .flow-list {
  871. margin: 0rpx 30rpx;
  872. min-height: 700rpx;
  873. background: #ffffff;
  874. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  875. border-radius: 20rpx;
  876. padding: 55rpx 30rpx 30rpx;
  877. }
  878. }
  879. .description {
  880. overflow: hidden;
  881. -webkit-line-clamp: 2;
  882. text-overflow: ellipsis;
  883. display: -webkit-box;
  884. -webkit-box-orient: vertical;
  885. }
  886. // 新样式
  887. .top_bg{
  888. background-color: $uni-theme-color;
  889. height: 25vh;
  890. width: 100%;
  891. border-radius: 0 0 20rpx 20rpx;
  892. }
  893. .entrance{
  894. width: 90%;
  895. height: 40vh;
  896. background-color: white;
  897. margin: 0 auto;
  898. margin-top: -50rpx;
  899. border-radius: 20rpx;
  900. }
  901. .top_title{
  902. color: white;
  903. font-size: 34rpx;
  904. background: $uni-theme-color;
  905. padding-left: 36rpx;
  906. }
  907. .triangle{
  908. width: 0;
  909. height: 0;
  910. border-left: 20px solid transparent;
  911. border-right: 20px solid transparent;
  912. border-bottom: 10px solid white; /* 箭头颜色 */
  913. position: relative;
  914. top: -20rpx;
  915. left: 20rpx;
  916. }
  917. .etc_picture{
  918. width: 150rpx;
  919. height: 100rpx;
  920. margin-bottom: 45rpx;
  921. margin-top: 10rpx;
  922. }
  923. .tips{
  924. display: flex;
  925. justify-content: space-between;
  926. font-size: 26rpx;
  927. padding: 0 30rpx;
  928. }
  929. .tips_left{
  930. width: 35%;
  931. display: flex;
  932. flex-direction: column;
  933. align-items: center;
  934. font-size: 21rpx;
  935. color: #93969E ;
  936. }
  937. .tips_right{
  938. width: 60%;
  939. }
  940. .tips_right .title{
  941. color: $uni-theme-color;
  942. font-weight: bold;
  943. }
  944. .tips_right .title1{
  945. color: #93969E;
  946. margin: 20rpx 0;
  947. }
  948. .tips_right .title2{
  949. color: $uni-theme-color;
  950. }
  951. .tips_right .title2 text{
  952. border: 1rpx solid $uni-theme-color;
  953. border-radius: 4rpx;
  954. font-size: 22rpx;
  955. padding: 2rpx 4rpx;
  956. margin-right: 14rpx;
  957. }
  958. .handle{
  959. width: 90%;
  960. height: 72rpx;
  961. background: $uni-theme-color;
  962. color: white;
  963. font-weight: bold;
  964. font-size: 30rpx;
  965. text-align: center;
  966. margin: 30rpx auto;
  967. line-height: 72rpx;
  968. border-radius: 10rpx;
  969. }
  970. .quickly{
  971. font-size: 26rpx;
  972. display: flex;
  973. justify-content: space-evenly;
  974. align-items: center;
  975. color: #93969E;
  976. }
  977. .quickly>view>image{
  978. width: 30rpx;
  979. height: 30rpx;
  980. vertical-align: baseline;
  981. }
  982. .quickly>view{
  983. display: flex;
  984. align-items: center;
  985. }
  986. .show_banner{
  987. height: 150rpx;
  988. margin: 30rpx 0;
  989. margin-bottom: 0;
  990. width: 100%;
  991. }
  992. </style>