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.

user.vue 21KB

6 달 전
6 달 전
1 년 전
1 년 전
1 년 전
7 달 전
7 달 전
1 년 전
7 달 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
7 달 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
2 년 전
1 년 전
2 년 전
2 년 전
2 년 전
2 년 전
2 년 전
2 년 전
1 년 전
7 달 전
7 달 전
1 년 전
1 년 전
1 년 전
2 년 전
7 달 전
2 년 전
2 년 전
2 년 전
2 년 전
7 달 전
2 년 전
1 년 전
1 년 전
1 년 전
7 달 전
1 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893
  1. <template>
  2. <navBar title="九州ETC" :scrollTop="scrollTop" :isBack="isBack" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
  3. <filter>
  4. <view class="wrapper">
  5. <image :src="`${$imgUrl}myImage/headbg.png`" class="bg-head" mode="widthFix"></image>
  6. <view class="content" :style="{ top: margin + 'px' }">
  7. <view class="head" :style="{ marinTop: margin + 'px' }">
  8. <view class="avatar">
  9. <image :src="`${$imgUrl}myImage/touxiang.png`" :class="!state.data.opId ? 'unlogin' : ''" @click="goLogin">
  10. </image>
  11. <view v-if="!state.data.opId" class="name" @click="$util.navTo('/login/login')">
  12. <view class="nickname">登录/注册</view>
  13. </view>
  14. <view v-else class="name">
  15. <view class="nickname">{{state.accountInfoVo.nickName || state.accountInfoVo.userName}}</view>
  16. <view class="user-id">
  17. <view class="phone">{{state.accountInfoVo.mobile}}</view>
  18. <view v-if="false" @click="$util.navTo('/subpackage/personal-center/setting/change-phone', true)"
  19. class="btn-change">已关联</view>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- <view v-if="false" class="setting" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
  24. <text>签到</text>
  25. </view> -->
  26. <view class="r-setting" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
  27. <image :src="`${$imgUrl}myImage/shezhi.png`" class="img" mode="widthFix"></image>
  28. </view>
  29. </view>
  30. <view class="my-equity" :style="{'--bgimg':`url(${$imgUrl}myImage/quanuyikuang.png)`}" @click="goEquity()">
  31. <view class="l-con">
  32. <image :src="`${$imgUrl}myImage/quanyi.png`" class="equity-icon" mode="widthFix"></image>
  33. <view class="txt">
  34. 我的权益
  35. </view>
  36. </view>
  37. <view class="r-icon" >
  38. <image :src="`${$imgUrl}myImage/quanyixiayi.png`" class="r-img" mode="widthFix"></image>
  39. </view>
  40. </view>
  41. <view class="info-content">
  42. <view class="order box">
  43. <view class="right-head">
  44. <view class="tit">我的订单</view>
  45. <view class="more" @click="goOrder(0)">
  46. <text class="more-text">查看全部</text>
  47. <image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
  48. </view>
  49. </view>
  50. <view class="order-items">
  51. <view class="item" @click="goOrder(1)">
  52. <view style="position: relative;">
  53. <image :src="`${$imgUrl}myImage/icon1.png`" class="icon" mode="widthFix"></image>
  54. <view v-if='state.orderInfoSumQueryVo.orderStep8>0' class="rtop-badge bgVar"
  55. :style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
  56. {{state.orderInfoSumQueryVo.orderStep8}}
  57. </view>
  58. </view>
  59. <text class="tit">待发货</text>
  60. </view>
  61. <view class="item" @click="goOrder(2)">
  62. <view style="position: relative;">
  63. <image :src="`${$imgUrl}myImage/icon2.png`" class="icon" mode="widthFix"></image>
  64. <view v-if='state.orderInfoSumQueryVo.orderStep9>0' class="rtop-badge bgVar"
  65. :style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
  66. {{state.orderInfoSumQueryVo.orderStep9}}
  67. </view>
  68. </view>
  69. <text class="tit">待收货</text>
  70. </view>
  71. <view class="item" @click="goOrder(3)">
  72. <view style="position: relative;">
  73. <image :src="`${$imgUrl}myImage/icon3.png`" class="icon" mode="widthFix"></image>
  74. <view class="rtop-badge bgVar" v-if='state.orderInfoSumQueryVo.orderStep10>0'
  75. :style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
  76. {{state.orderInfoSumQueryVo.orderStep10}}
  77. </view>
  78. </view>
  79. <text class="tit">待激活</text>
  80. </view>
  81. <view class="item" @click="goOrder(4)">
  82. <view style="position: relative;">
  83. <image :src="`${$imgUrl}myImage/icon4.png`" class="icon" mode="widthFix"></image>
  84. <view v-if='state.orderInfoSumQueryVo.orderStep12>0' class="rtop-badge bgVar"
  85. :style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
  86. {{state.orderInfoSumQueryVo.orderStep12}}
  87. </view>
  88. </view>
  89. <text class="tit">退换货/退款</text>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="go-through box" v-if="source=='WECHAT'">
  94. <view class="right-head">
  95. <view class="tit">本月通行</view>
  96. <view class="more" @click="goTrajectory()">
  97. <text class="more-text">查看通行轨迹</text>
  98. <image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
  99. </view>
  100. </view>
  101. <view class="pass">
  102. <view class="total m-top">
  103. <text>通行消费</text>
  104. <text>总金额</text>
  105. </view>
  106. <view class="amount m-top">
  107. <text>¥
  108. {{state.monthFlowingVo.flowingNum }}</text>
  109. <text>¥
  110. {{state.monthFlowingVo.money }}</text>
  111. </view>
  112. <view class="line m-top">
  113. <view class="line1"
  114. :style="{width: (state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0)*100/state.monthFlowingVo.money+'%'}">
  115. </view>
  116. <view class="line2"></view>
  117. </view>
  118. <view class="mileage">
  119. <view class="box-items" :style="{'--bgimg':`url(${$imgUrl}myImage/tongxing1.png)`}">
  120. <view class="t-name">
  121. <image :src="`${$imgUrl}myImage/licheng-icon.png`" class="tongxing-icon"></image>
  122. <text class="tit">通行里程</text>
  123. </view>
  124. <view class="b-info">
  125. <text class="val">{{state.monthFlowingVo.mileage}}</text>
  126. <text class="unit">km</text>
  127. </view>
  128. </view>
  129. <view class="box-items" :style="{'--bgimg':`url(${$imgUrl}myImage/tongxing2.png)`}">
  130. <view class="t-name">
  131. <image :src="`${$imgUrl}myImage/shichang-icon.png`" class="tongxing-icon"></image>
  132. <text class="tit">通行时长</text>
  133. </view>
  134. <view class="b-info">
  135. <text class="val">{{state.monthFlowingVo.duration}}</text>
  136. <!-- <text class="unit">km</text> -->
  137. </view>
  138. </view>
  139. <view class="box-items" :style="{'--bgimg':`url(${$imgUrl}myImage/tongxing3.png)`}">
  140. <view class="t-name">
  141. <image :src="`${$imgUrl}myImage/cishu-icon.png`" class="tongxing-icon"></image>
  142. <text class="tit">通行次数</text>
  143. </view>
  144. <view class="b-info">
  145. <text class="val">{{state.monthFlowingVo.num}}</text>
  146. <text class="unit">次</text>
  147. </view>
  148. </view>
  149. </view>
  150. </view>
  151. </view>
  152. <view class="cars box">
  153. <view class="right-head">
  154. <view class="tit">我的车辆</view>
  155. <!-- <view class="more" @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)"> -->
  156. <view class="more" @click="$util.navTo(`/subpackage/after-sale/activation-once-again/select-car?type=38`, true)">
  157. <text class="more-text">查看全部</text>
  158. <image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
  159. </view>
  160. </view>
  161. <view class="car-item" v-for="(item,index) in state.list">
  162. <image @click="carDetails(item.vehicleId)" :src="`${$imgUrl}myImage/car.png`" class="car-pic" mode="widthFix">
  163. </image>
  164. <view class="car-info" @click="carDetails(item.vehicleId)">
  165. <view class="car-no">
  166. <text class="no">{{item.vehiclePlate}}</text>
  167. <text class="color" :style="{ background: item.showColor}">{{item.color}}</text>
  168. </view>
  169. <view class="card-no" v-if="item.cardId">卡号:{{item.cardId}}</view>
  170. <view class="card-no" v-if="item.obuId">签号:{{item.obuId}}</view>
  171. </view>
  172. <view class="btn-unbind" @click="del(item.id)">解除绑定</view>
  173. </view>
  174. <view @click="$util.navTo('/subpackage/after-sale/blacklist-query/addCar', true)"
  175. class='add-related' :style="{'--bgimg':`url(${$imgUrl}myImage/guanlianbg.png)`}">
  176. <image :src="`${$imgUrl}myImage/guanlian.png`" class="add-img" mode="widthFix">
  177. </image>
  178. <text>增加未关联车辆</text>
  179. </view>
  180. </view>
  181. </view>
  182. </view>
  183. </view>
  184. </filter>
  185. </template>
  186. <!-- <view @click="$util.navTo('/subpackage/personal-center/setting/car-information/car-create', true)" -->
  187. <script lang="ts" setup>
  188. import { reactive } from "vue";
  189. import { msg, navTo } from "@/utils/utils";
  190. import { onMounted, ref } from "vue";
  191. import { getItem, StorageKeys } from "@/utils/storage";
  192. import navBar from "../../components/nav-bar/nav-bar2.vue";
  193. import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
  194. import {
  195. userInfoIndex, queryVehicleBind, vehicleUnBind, showEquityListApi,orderinfosumquery
  196. } from "@/utils/network/api.js";
  197. import {
  198. request,requestNew
  199. } from "@/utils/network/request.js";
  200. import filter from '@/components/filter/filter.vue';
  201. import { source } from "@/utils/network/difference";
  202. import { vehiclePlateColor, vehiclePlateColorPai, getVehiclePlateColorPaiShow } from "@/datas/vehiclePlateColor.js";
  203. const height = ref(null);
  204. const top = ref(null);
  205. const margin = ref(null);
  206. const mobile = ref(null);
  207. const scrollTop = ref(0);
  208. const isBack = ref(false);
  209. const state = reactive({
  210. data: {
  211. opId: "",
  212. },
  213. accountInfoVo: {
  214. nickName: '',
  215. mobile: '',
  216. userName:''
  217. },
  218. monthFlowingVo: {
  219. duration: 0,
  220. mileage: 0,
  221. flowingNum: 0,
  222. num: 0,
  223. parkingLotMoney: 0,
  224. parkingLotNum: 0,
  225. money: 0,
  226. },
  227. list: '', //车辆信息
  228. carNumber: '',//车辆数量
  229. userVehicleInfoSumQueryVo: {
  230. vehicleSum: 0,
  231. orderStatus0: 0
  232. },//车数量 ,代办数量
  233. isTrajectory: false, //是否有轨迹
  234. equityNumber: 0,
  235. orderInfoSumQueryVo: {
  236. orderStep8: "0",//待发货
  237. orderStep9: "0",//待收货
  238. orderStep10: "0",//待激活
  239. orderStep12: "0",//换货/退货
  240. }
  241. });
  242. onMounted(() => {
  243. const res = uni.getMenuButtonBoundingClientRect();
  244. height.value = res.height + "px";
  245. top.value = res.top + "px";
  246. margin.value = res.height + res.top;
  247. });
  248. onLoad((option : any) => {
  249. state.data.opId = getItem(StorageKeys.OpenId);
  250. console.log("state.data.opId",state.data.opId)
  251. mobile.value = getItem("mobile");
  252. });
  253. const carDetails = (vehicleId) => {
  254. uni.navigateTo({
  255. url: `/subpackage/personal-center/vehicle-change/car-details?vehicleId=${vehicleId}`
  256. })
  257. }
  258. const goTrajectory = () => {
  259. if (state.isTrajectory) {
  260. uni.navigateTo({
  261. url: "/subpackage/personal-center/trajectory/trajectory"
  262. })
  263. } else {
  264. msg("暂无轨迹")
  265. }
  266. }
  267. //监听页面滚动
  268. onPageScroll((e) => {
  269. scrollTop.value = e.scrollTop;
  270. });
  271. onShow((option : any) => {
  272. state.data.opId = getItem(StorageKeys.OpenId);
  273. console.log("state.data.opId", state.data.opId)
  274. if (state.data.opId) {
  275. getUserInfo();
  276. } else {
  277. state.userVehicleInfoSumQueryVo = {
  278. vehicleSum: 0,
  279. orderStatus0: 0
  280. }
  281. state.monthFlowingVo = {
  282. duration: 0,
  283. mileage: 0,
  284. flowingNum: 0,
  285. num: 0,
  286. parkingLotMoney: 0,
  287. parkingLotNum: 0,
  288. money: 0,
  289. }
  290. state.orderInfoSumQueryVo = {
  291. orderStep8: "0",//待发货
  292. orderStep9: "0",//待收货
  293. orderStep10: "0",//待激活
  294. orderStep12: "0",//换货/退货
  295. }
  296. state.list = []
  297. state.carNumber = 0
  298. }
  299. });
  300. // 查询车辆信息
  301. const queryCarMsg = () => {
  302. const options = {
  303. type: 2,
  304. data: {},
  305. method: "POST",
  306. showLoading: true,
  307. };
  308. //调用方式
  309. requestNew(queryVehicleBind, options).then((res) => {
  310. const data = res.result;
  311. for (var i = 0; i < data.length; i++) {
  312. for (var j = 0; j < vehiclePlateColorPai.length; j++) {
  313. if (data[i].vehiclePlateColor == vehiclePlateColorPai[j]['id']) {
  314. data[i].color = vehiclePlateColorPai[j]['color']
  315. data[i].showColor = vehiclePlateColorPai[j]['showColor']
  316. }
  317. }
  318. }
  319. state.carNumber = data.length
  320. state.list = data.slice(0, 5);
  321. console.log("state.list", state.list)
  322. })
  323. .catch((err) => {
  324. console.log('输出内容', err)
  325. });
  326. }
  327. const getUserInfo = () => {
  328. const options = {
  329. type: 2,
  330. data: {
  331. openId: state.data.opId
  332. },
  333. method: "POST",
  334. showLoading: true,
  335. };
  336. //调用方式
  337. requestNew(userInfoIndex, options)
  338. .then((res) => {
  339. console.log('用户信息', res)
  340. let data =res
  341. state.accountInfoVo =data.accountInfoVo;
  342. console.log('用户信息1', state.accountInfoVo,state.accountInfoVo.mobile)
  343. if (data.monthFlowingVo && data.monthFlowingVo != "{}") {
  344. state.monthFlowingVo = data.monthFlowingVo;
  345. state.isTrajectory = true;
  346. }
  347. console.log("获取用户信息", data);
  348. queryCarMsg();
  349. // 个人订单信息数据查询(待发货,待收货,待激活,退换货)
  350. orderinfosumqueryQ()
  351. })
  352. .catch((err) => {
  353. console.log(err);
  354. });
  355. }
  356. const del = (id) => {
  357. uni.showModal({
  358. title: '提示',
  359. content: '是否删除该条车辆信息',
  360. success: function (res) {
  361. if (res.confirm) {
  362. console.log('用户点击确定');
  363. const options = {
  364. type: 2,
  365. data: {
  366. id
  367. },
  368. method: "POST",
  369. showLoading: true,
  370. };
  371. requestNew(vehicleUnBind, options).then((res) => {
  372. const data = res;
  373. console.log(data)
  374. uni.showToast({
  375. title: "删除成功",
  376. icon: "none"
  377. })
  378. queryCarMsg();
  379. });
  380. } else if (res.cancel) {
  381. console.log('用户点击取消');
  382. }
  383. }
  384. });
  385. }
  386. const goOrder = (index) => {
  387. navTo(`../order/order?index=${index}`)
  388. }
  389. const goLogin = () => {
  390. if (!getItem('openId')) {
  391. uni.navigateTo({
  392. url: "/login/login"
  393. })
  394. }
  395. }
  396. const goEquity = () => {
  397. navTo('/subpackage/service/equityList/equityList')
  398. }
  399. const orderinfosumqueryQ = () => {
  400. const options = {
  401. type: 2,
  402. data: {},
  403. method: "POST",
  404. showLoading: true,
  405. };
  406. //调用方式
  407. requestNew(orderinfosumquery, options).then((res) => {
  408. console.log("orderinfosumquery", res)
  409. state.orderInfoSumQueryVo=res
  410. })
  411. .catch((err) => {
  412. console.log('输出内容', err)
  413. });
  414. }
  415. </script>
  416. <style>
  417. page {
  418. background: #eef7f7;
  419. }
  420. </style>
  421. <style scoped lang='scss'>
  422. .unlogin {
  423. filter: grayscale(100%);
  424. opacity: 0.7;
  425. }
  426. .bgVar {
  427. background-image: var(--bgimg);
  428. background-repeat: no-repeat;
  429. background-size: 100% 100%;
  430. }
  431. .wrapper {
  432. position: relative;
  433. background-color: #f6f9fc;
  434. }
  435. .bar {
  436. width: 100%;
  437. position: fixed;
  438. text-align: center;
  439. font-size: 32rpx;
  440. font-weight: bold;
  441. }
  442. .bg-head {
  443. width: 100%;
  444. position: absolute;
  445. z-index: 1;
  446. top: 0;
  447. left: 0;
  448. }
  449. .content {
  450. position: relative;
  451. display: flex;
  452. flex-direction: column;
  453. width: 100%;
  454. z-index: 2;
  455. }
  456. .head {
  457. display: flex;
  458. justify-content: space-between;
  459. align-items: center;
  460. width: 100%;
  461. box-sizing: border-box;
  462. padding: 40rpx 0 46rpx;
  463. }
  464. .head .avatar {
  465. display: flex;
  466. align-items: center;
  467. justify-content: space-between;
  468. }
  469. .head .avatar image {
  470. width: 141rpx;
  471. height: 141rpx;
  472. /* border-radius: 80rpx; */
  473. margin: 0 20rpx 0 30rpx;
  474. }
  475. .head .setting {
  476. display: flex;
  477. align-items: center;
  478. background: rgba(0, 179, 139, .1);
  479. border: 1px solid #fff;
  480. height: 60rpx;
  481. border-radius: 30rpx;
  482. padding: 0 34rpx;
  483. color: #fff;
  484. font-size: 28rpx;
  485. margin-right: 30rpx;
  486. }
  487. .head .setting image {
  488. width: 40rpx;
  489. height: 40rpx;
  490. margin-right: 6rpx;
  491. }
  492. .head .r-setting {
  493. width: 80rpx;
  494. height: 80rpx;
  495. background: #345061;
  496. display: flex;
  497. align-items: center;
  498. justify-content: center;
  499. border-radius: 50%;
  500. margin-right: 50rpx;
  501. .img {
  502. width: 40rpx;
  503. height: 39rpx;
  504. }
  505. }
  506. .head .nickname {
  507. font-size: 36rpx;
  508. color: #fff;
  509. }
  510. .head .user-id {
  511. font-size: 26rpx;
  512. color: #fff;
  513. padding-top: 20rpx;
  514. display: flex;
  515. align-items: center;
  516. }
  517. .head .btn-change {
  518. font-size: 22rpx;
  519. height: 40rpx;
  520. padding: 0 20rpx;
  521. border: 1px solid #fff;
  522. color: #fff;
  523. box-sizing: border-box;
  524. border-radius: 20rpx;
  525. margin-left: 16rpx;
  526. background: rgba(0, 179, 139, .1);
  527. }
  528. .my-equity {
  529. position: relative;
  530. z-index: 20;
  531. margin: 0 50rpx;
  532. background-image: var(--bgimg);
  533. background-repeat: no-repeat;
  534. background-size: 100% 100%;
  535. width: 650rpx;
  536. height: 94rpx;
  537. display: flex;
  538. align-items: center;
  539. justify-content: space-between;
  540. .l-con {
  541. margin-left: 30rpx;
  542. display: flex;
  543. align-items: center;
  544. .equity-icon {
  545. width: 54rpx;
  546. height: 54rpx;
  547. }
  548. .txt {
  549. font-family: NotoSansHans, NotoSansHans;
  550. font-size: 28rpx;
  551. color: #01253C;
  552. margin-left: 19rpx;
  553. }
  554. }
  555. .r-icon {
  556. margin-right: 30rpx;
  557. width: 32rpx;
  558. height: 32rpx;
  559. .r-img {
  560. width: 32rpx;
  561. height: 32rpx;
  562. }
  563. }
  564. }
  565. .info-content {
  566. transform: translateY(-10rpx);
  567. }
  568. .box .arrow {
  569. width: 10rpx;
  570. height: 18rpx;
  571. }
  572. .box {
  573. background: #ffffff;
  574. margin: 0 30rpx 30rpx;
  575. padding: 30rpx 20rpx;
  576. border-radius: 20rpx;
  577. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.9);
  578. }
  579. .box .more {
  580. display: flex;
  581. align-items: center;
  582. font-family: NotoSansHans, NotoSansHans;
  583. font-size: 24rpx;
  584. color: #004576;
  585. }
  586. .box .more .more-text {
  587. padding-right: 12rpx;
  588. }
  589. .box .right-head {
  590. display: flex;
  591. justify-content: space-between;
  592. }
  593. .box .right-head .tit {
  594. font-size: 32rpx;
  595. font-family: MicrosoftYaHei;
  596. }
  597. .rights .rights-items {
  598. display: flex;
  599. justify-content: space-evenly;
  600. padding: 30rpx 0;
  601. }
  602. .rights .item {
  603. display: flex;
  604. flex-direction: column;
  605. align-items: center;
  606. justify-content: center;
  607. }
  608. .rights .item .tit {
  609. font-size: 26rpx;
  610. color: #333;
  611. padding: 20rpx 0 10rpx 0;
  612. }
  613. .rights .item .sub-tit {
  614. font-size: 22rpx;
  615. color: #999;
  616. }
  617. .order .order-items {
  618. display: flex;
  619. justify-content: space-around;
  620. padding: 30rpx 0 10rpx;
  621. .rtop-badge {
  622. position: absolute;
  623. right: 0;
  624. width: 34rpx;
  625. height: 34rpx;
  626. top: 0;
  627. transform: translate(50%, -50%);
  628. line-height: 34rpx;
  629. text-align: center;
  630. font-family: SourceHanSansSC, SourceHanSansSC;
  631. font-weight: 400;
  632. font-size: 20rpx;
  633. color: #FFFFFF;
  634. }
  635. }
  636. .order .item {
  637. display: flex;
  638. flex-direction: column;
  639. align-items: center;
  640. justify-content: center;
  641. }
  642. .order .item .tit {
  643. font-size: 26rpx;
  644. color: #333;
  645. padding: 20rpx 0 10rpx 0;
  646. }
  647. .box .icon {
  648. width: 50rpx;
  649. height: 50rpx;
  650. }
  651. .go-through .pass {
  652. display: flex;
  653. flex-direction: column;
  654. }
  655. .go-through .total {
  656. display: flex;
  657. justify-content: space-between;
  658. font-size: 26rpx;
  659. color: #666;
  660. }
  661. .go-through .amount {
  662. display: flex;
  663. justify-content: space-between;
  664. align-items: center;
  665. font-family: NotoSansHans, NotoSansHans;
  666. font-size: 32rpx;
  667. color: #333333;
  668. font-weight: 400;
  669. }
  670. .go-through .line {
  671. display: flex;
  672. }
  673. .go-through .line1 {
  674. height: 14rpx;
  675. background: #005B9C;
  676. border-radius: 7rpx;
  677. }
  678. .go-through .line2 {
  679. height: 14rpx;
  680. background: #E5ECEF;
  681. border-radius: 7rpx;
  682. flex: 1;
  683. }
  684. .go-through .mileage {
  685. display: flex;
  686. justify-content: space-around;
  687. align-items: center;
  688. text-align: center;
  689. margin: 32rpx 0;
  690. .box-items {
  691. background-image: var(--bgimg);
  692. background-repeat: no-repeat;
  693. background-size: 100% 100%;
  694. padding: 20rpx 30rpx;
  695. .t-name {
  696. display: flex;
  697. .tongxing-icon {
  698. width: 29rpx;
  699. height: 29rpx;
  700. }
  701. .tit {
  702. font-size: 26rpx;
  703. color: #666666;
  704. line-height: 29rpx;
  705. margin-left: 5rpx;
  706. }
  707. }
  708. .b-info {
  709. padding-top: 20rpx;
  710. .val {
  711. font-size: 32rpx;
  712. color: #333333;
  713. }
  714. .unit {
  715. font-size: 24rpx;
  716. color: #666666;
  717. margin-left: 5rpx;
  718. }
  719. }
  720. }
  721. }
  722. .go-through .mileage .txt {
  723. display: flex;
  724. flex-direction: column;
  725. }
  726. .go-through .mileage .tit {
  727. font-size: 26rpx;
  728. color: #999;
  729. }
  730. .go-through .mileage .val {
  731. font-size: 28rpx;
  732. color: #333;
  733. margin-top: 16rpx;
  734. }
  735. .go-through .m-top {
  736. margin-top: 16rpx;
  737. }
  738. .go-through .detail {
  739. width: 100%;
  740. text-align: center;
  741. color: #00B38B;
  742. font-size: 24rpx;
  743. border-top: 1px solid #DCDCDC;
  744. padding-top: 24rpx;
  745. }
  746. .cars .car-item {
  747. display: flex;
  748. align-items: center;
  749. padding-top: 36rpx;
  750. }
  751. .cars .car-item .btn-unbind {
  752. font-weight: 400;
  753. border-radius: 30rpx;
  754. font-family: NotoSansHans, NotoSansHans;
  755. line-height:60rpx;
  756. text-align: center;
  757. font-size: 24rpx;
  758. width: 130rpx;
  759. height: 60rpx;
  760. background: #004372;
  761. color: #fff;
  762. margin-bottom: 10rpx;
  763. }
  764. .cars .car-pic {
  765. width: 120rpx;
  766. height: 110rpx;
  767. margin-right: 20rpx;
  768. }
  769. .cars .car-info {
  770. display: flex;
  771. flex-direction: column;
  772. color: #999;
  773. font-size: 22rpx;
  774. width: 56%;
  775. }
  776. .cars .car-no {
  777. font-size: 30rpx;
  778. color: #333;
  779. }
  780. .cars .card-no {
  781. margin-top: 10rpx;
  782. font-size: 22rpx;
  783. color: #999999;
  784. }
  785. .cars .add-related {
  786. background-image: var(--bgimg);
  787. background-repeat: no-repeat;
  788. background-size: 100% 100%;
  789. height: 80rpx;
  790. display: flex;
  791. align-items: center;
  792. justify-content: center;
  793. font-family: NotoSansHans, NotoSansHans;
  794. font-weight: 400;
  795. font-size: 26rpx;
  796. color: #CCB375;
  797. margin-top: 30rpx;
  798. .add-img {
  799. margin-right: 10rpx;
  800. width: 36rpx;
  801. height: 36rpx;
  802. }
  803. }
  804. .color {
  805. padding: 4rpx 8rpx;
  806. border-radius: 10rpx;
  807. color: white;
  808. display: inline-block;
  809. margin-left: 20rpx;
  810. font-size: 24rpx;
  811. }
  812. .loading-more {
  813. text-align: center;
  814. font-size: 28rpx;
  815. margin-bottom: 20rpx;
  816. color: #999;
  817. }
  818. </style>
  819. <style>
  820. page {
  821. background-color: #f6f9fc;
  822. }
  823. </style>