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

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