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.

recharge.vue 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
  1. <template>
  2. <view class="wrapper">
  3. <view class="account">
  4. <image :src="`${$imgUrl}common/bg-recharge.png`" class="head-bg"></image>
  5. <view class="account-text">
  6. <view class="balance">
  7. <text class="balance-tit">账户余额</text>
  8. <text class="balance-val">0元</text>
  9. </view>
  10. <view class="right-box">
  11. <view class="no">账户编号:000100</view>
  12. <view class="btn btn-record">账户充值记录</view>
  13. </view>
  14. </view>
  15. </view>
  16. <view class="input-box">
  17. <input v-model="state.money" placeholder="请输入金额" class="input" />
  18. <view class="tips">最低充值金额不小于10元</view>
  19. </view>
  20. <view class="tabs">
  21. <view class="tab-tit">在线充值</view>
  22. <view class="tab">
  23. <view v-for="(item,index) in state.moneryArray" @click="tableIndexAction(index)" :key="index"
  24. :class="{'item':state.moneryArray,'active':state.tableIndex===index}">{{item.name}}</view>
  25. </view>
  26. </view>
  27. <view class="btn btn-primary" @click="rechargeAction">立即充值</view>
  28. </view>
  29. </template>
  30. <script setup lang="ts">
  31. import {
  32. stringToJson
  33. } from "@/utils/network/encryption";
  34. import {
  35. onLoad,
  36. onShow
  37. } from "@dcloudio/uni-app";
  38. import {
  39. quanCheck,
  40. quanApply,
  41. quanXf,
  42. cardCzPayResultCheck,
  43. cardCzApply,
  44. cardCzPay,
  45. cardCzPayResult,
  46. cardCzXFCheck,
  47. quanConfirm,
  48. wechatAppID,
  49. wechatPayConfigId,
  50. wechatSecret,
  51. } from "@/utils/network/api.js";
  52. import {
  53. request
  54. } from "@/utils/network/request.js";
  55. import {
  56. reactive
  57. } from "vue";
  58. import {
  59. navTo
  60. } from "@/utils/utils"
  61. import {
  62. msg
  63. } from "@/utils/utils";
  64. import {
  65. getItem,
  66. StorageKeys,
  67. setItem
  68. } from "@/utils/storage";
  69. const datas = require("../../static/etcUtil/datas.js");
  70. const bluetoothUtil = require("../../static/etcUtil/index.js");
  71. const cmd = require("../../static/etcUtil/cmdConfig.js");
  72. const tools = require("../../static/etcUtil/tools.js");
  73. const state = reactive({
  74. moneryArray: [{
  75. name: '50元',
  76. value: 50
  77. }, {
  78. name: '100元',
  79. value: 100
  80. }, {
  81. name: '200元',
  82. value: 200
  83. }, {
  84. name: '300元',
  85. value: 300
  86. }, {
  87. name: '500元',
  88. value: 500
  89. }, {
  90. name: '1000元',
  91. value: 1000
  92. }],
  93. tableIndex: 0,
  94. openid: "",
  95. connectSuccess: undefined,
  96. fee: 5000,
  97. money: 50,
  98. orderNum: "",
  99. cardId: "", //卡号 需要传参
  100. mockpreBalance: 2000, //fix:模拟余额 目前没有检测状态接口,第一次会模拟圈层检测来检测状态
  101. show:false,
  102. items: [{
  103. value: '0',
  104. name: '微信',
  105. checked: 'true'
  106. },
  107. {
  108. value: '1',
  109. name: '对公账户'
  110. }
  111. ],
  112. current: 0
  113. });
  114. //读卡信息
  115. const card = reactive({
  116. cardId: "",
  117. netId: "",
  118. cardType: "",
  119. startTime: "",
  120. endTime: "",
  121. userName: "",
  122. idNum: "",
  123. vehiclePlate: "",
  124. vehiclePlateColor: "",
  125. color: "",
  126. version: "",
  127. type: "",
  128. favourable: "",
  129. money: undefined,
  130. v_userType: "",
  131. });
  132. onLoad((option) => {
  133. /*获取openId 用途:(用户支付)*/
  134. getOpenID();
  135. /*传参*/
  136. state.cardId = option.cardId;
  137. state.connectSuccess = option.connectSuccess;
  138. state.orderNum = getItem("orderNum");
  139. //跳转过来走圈存流程
  140. if (state.connectSuccess === "1") {
  141. /*读卡*/
  142. getCardId();
  143. }
  144. quanCheckAction().then((val: any) => {
  145. //如果 圈层检测正常
  146. if (val.chargeStatus === 1) {
  147. console.log(`进行充值检测`);
  148. czCheckAction().then((checkResult: any) => {
  149. //判断订单逻辑如果有订单充值 则直接拿到订单去链接蓝牙
  150. if (checkResult.orders && checkResult.orders.length > 0) {
  151. //拿到订单,存起来
  152. state.orderNum = checkResult.orders[0].orderNum;
  153. setItem("orderNum", state.orderNum);
  154. // 检测用户是否存在有半条流水
  155. go()
  156. } else {
  157. console.log('没有可修复的流水')
  158. }
  159. });
  160. } else {
  161. // 检测用户是否存在有半条流水
  162. go()
  163. }
  164. });
  165. });
  166. function go() {
  167. uni.showModal({
  168. title: '提示',
  169. content: '检测到你有一笔未充值的订单,请先进行充值!',
  170. success: () => {
  171. //走蓝牙进行修复
  172. uni.navigateTo({
  173. url: `/pages/bluetooth/bluetooth?routeType=2&&cardId=${state.cardId}`,
  174. });
  175. },
  176. fail: () => {}
  177. })
  178. }
  179. const tableIndexAction = (val: any) => {
  180. state.tableIndex = val
  181. state.money = state.moneryArray[val].value
  182. }
  183. /*点击充值按钮*/
  184. const rechargeAction = () => {
  185. state.fee = state.money * 100; //元换成分
  186. wx.showModal({
  187. title: '圈存确认',
  188. content: '您确定要充值圈存吗',
  189. success: function(res) {
  190. if (res.confirm) {
  191. /*进行圈层检测,此处检测仅为校验圈层状态来决定去哪里*/
  192. console.log("进行圈层检测");
  193. quanCheckAction().then((val: any) => {
  194. //如果 圈层检测正常
  195. if (val.chargeStatus === 1) {
  196. console.log(`进行充值检测`);
  197. czCheckAction().then((checkResult: any) => {
  198. //判断订单逻辑如果有订单充值 则直接拿到订单去链接蓝牙
  199. if (checkResult.orders && checkResult.orders.length > 0) {
  200. //拿到订单,存起来
  201. state.orderNum = checkResult.orders[0].orderNum;
  202. setItem("orderNum", state.orderNum);
  203. //链接蓝牙
  204. go()
  205. } else {
  206. cardCzApplyAction().then((applyResult: any) => {
  207. //拿到订单 存起来
  208. state.orderNum = applyResult.orderNum;
  209. setItem("orderNum", state.orderNum);
  210. //如果订单没有支付 走支付
  211. if (applyResult.orderStatus === "ORDER_NOT_PAY") {
  212. //走支付
  213. console.log("走支付");
  214. wxPayment();
  215. }
  216. });
  217. }
  218. });
  219. } else {
  220. //走蓝牙进行修复
  221. go()
  222. }
  223. });
  224. }
  225. }
  226. });
  227. };
  228. /*读卡*/
  229. const getCardId = () => {
  230. console.log("======获取卡信息======");
  231. let cmdArr = [
  232. cmd.HOME_DIRECTORY,
  233. //选择主目
  234. cmd.APPLICATION_DIRECTORY,
  235. //选择文件1001--DF01联网收费应用目录
  236. cmd.CMD_READBINARY,
  237. //15文件--卡片发行基本数据文件
  238. cmd.CMD_GETBALANCE,
  239. //钱包
  240. ];
  241. tools.showLoadingAlert("正在执行指令");
  242. bluetoothUtil.transCmd(cmdArr, "10", function(res) {
  243. tools.hideLoadingAlert();
  244. //10:写卡 20:写OBU
  245. let str = res[2].substring(res[2].length - 4, res[2].length);
  246. let str3 = res[3].substring(res[3].length - 4, res[3].length);
  247. if (str == "9000" || str3 == "9000") {
  248. if (res[2].length > 86 || res[3] >= 12) {
  249. card.cardId = res[2].substring(20, 40); //卡号
  250. card.startTime = res[2].substring(40, 48);
  251. card.endTime = res[2].substring(48, 56);
  252. card.version = res[2].substring(18, 19) >= 4 ? "4x" : "2x";
  253. card.netId = res[2].substring(20, 24);
  254. card.cardType = res[2].substring(28, 29) == 23 ? 1 : 2;
  255. card.vehiclePlateColor = parseInt(res[2].substring(82, 84), 16);
  256. (card.money = parseInt(parseInt(res[3].substring(0, 8), 16), 10)),
  257. console.log("======卡信息======", card);
  258. if (card.cardId !== state.cardId) {
  259. msg("设备卡信息与当前充值卡号不匹配,请核对卡号");
  260. return;
  261. }
  262. quanCheckActionTrue().then((val) => {
  263. checkQuanCengEvent(val);
  264. });
  265. } else {
  266. console.error("CMD_READBINARY指令长度不符" + res[2]);
  267. tools.hideLoadingAlert();
  268. }
  269. }
  270. console.error("CMD_READBINARY指令长度不符" + res[2]);
  271. tools.hideLoadingAlert();
  272. });
  273. };
  274. const checkQuanCengEvent = (val: any) => {
  275. if (val.chargeStatus === 1) {
  276. let cmdArr = val.command.split(",");
  277. uni.showLoading({
  278. title: "写入中",
  279. });
  280. bluetoothUtil.transCmd(cmdArr, "10", function(res) {
  281. let response = res.toString();
  282. var dic = {
  283. command: val.command,
  284. cosResponse: response,
  285. };
  286. uni.hideLoading();
  287. cardCzXFCheckAction().then((xfRes) => {
  288. quanApplyAction(dic).then((value) => {
  289. console.log("圈层申请完后的结果");
  290. console.log(value);
  291. //圈存初始化验证通过 , 进行圈存
  292. if (value.commandType === 2) {
  293. uanConfirmAction(value).then((confirmResult) => {
  294. navTo(
  295. `/pages/recharge/result`)
  296. });
  297. } else {
  298. msg("圈存初始化指令验证失败, 重新初始化");
  299. }
  300. });
  301. });
  302. });
  303. } else {
  304. let cmdArr = val.command.split(",");
  305. uni.showLoading({
  306. title: "写入中",
  307. });
  308. bluetoothUtil.transCmd(cmdArr, "10", function(res) {
  309. var status = res[1].substring(res[1].length - 4, res[1].length);
  310. console.log("打印状态");
  311. console.log(status);
  312. if (status === "9000") {
  313. console.log("修复指令入参");
  314. let response = res.toString();
  315. var dic = {
  316. command: val.command,
  317. cosResponse: response,
  318. rechargeId: val.rechargeId,
  319. };
  320. quanFixAction(dic).then((value) => {
  321. console.log(value);
  322. console.log("修复结果返回");
  323. var fixStatus = value.fixStatus;
  324. //圈存修复COS指令Response信息不足,重新进行修复初始化
  325. if (fixStatus === 3) {
  326. let xfcmdArr = value.command.split(",");
  327. bluetoothUtil.transCmd(xfcmdArr, "10", function(resValueData) {
  328. var status = resValueData[1].substring(
  329. resValueData[1].length - 4,
  330. resValueData[1].length
  331. );
  332. console.log("打印状态");
  333. console.log(status);
  334. if (status === "9000") {
  335. console.log(resValueData);
  336. var valueResponse = resValueData.toString();
  337. console.log(response);
  338. var applyDic = {
  339. command: value.command,
  340. cosResponse: valueResponse,
  341. rechargeId: value.rechargeId,
  342. };
  343. console.log("消费成功");
  344. quanApplyAction(applyDic).then((applyValue) => {
  345. uanConfirmAction(applyValue).then((
  346. confirmResult) => {
  347. msg("充值成功");
  348. navTo(
  349. `/pages/recharge/result`)
  350. });
  351. });
  352. }
  353. });
  354. } else if (fixStatus === 2) {
  355. uanConfirmSucessAction(value).then((confirmResult) => {
  356. msg("充值成功");
  357. navTo(`/pages/recharge/result`)
  358. });
  359. } else if (fixStatus === 1) {
  360. quanCheckActionTrue().then((val) => {
  361. checkQuanCengEvent(val);
  362. });
  363. }
  364. });
  365. uni.hideLoading();
  366. }
  367. });
  368. }
  369. };
  370. /*透传*/
  371. const transCmd = (cmd) => {
  372. bluetoothUtil.transCmd(cmd, "10", function(res) {
  373. var status = res[1].substring(res[1].length - 4, res[1].length);
  374. if (status === "9000") {
  375. return res.toString();
  376. }
  377. });
  378. };
  379. /*圈层检测 -假数据校验*/
  380. const quanCheckAction = () => {
  381. var data = {
  382. cardId: state.cardId, //卡号
  383. fee: state.fee,
  384. preBalance: state.mockpreBalance, //假余额
  385. tradeType: 14,
  386. };
  387. const options = {
  388. type: 2,
  389. data: data,
  390. method: "POST",
  391. showLoading: true,
  392. };
  393. return new Promise(async (resolve, reject) => {
  394. const res = await request(quanCheck, options);
  395. const data = stringToJson(res.bizContent);
  396. resolve(data);
  397. }).catch((error) => {
  398. reject(error);
  399. });
  400. };
  401. const quanCheckActionTrue = () => {
  402. console.log("进行真实圈层检测");
  403. var data = {
  404. cardId: card.cardId,
  405. fee: state.fee,
  406. preBalance: card.money,
  407. tradeType: 14,
  408. };
  409. const options = {
  410. type: 2,
  411. data: data,
  412. method: "POST",
  413. showLoading: true,
  414. };
  415. return new Promise(async (resolve, reject) => {
  416. const res = await request(quanCheck, options);
  417. const data = stringToJson(res.bizContent);
  418. resolve(data);
  419. }).catch((error) => {
  420. reject(error);
  421. });
  422. };
  423. /*充值消费*/
  424. const cardCzXFCheckAction = () => {
  425. var data = {
  426. cardId: card.cardId, //修复初始化的指令
  427. openId: getItem(StorageKeys.OpenId), //修复初始化结果
  428. orderNum: state.orderNum, //充值流水号
  429. };
  430. const options = {
  431. type: 2,
  432. data: data,
  433. method: "POST",
  434. showLoading: true,
  435. };
  436. return new Promise(async (resolve, reject) => {
  437. const res = await request(cardCzXFCheck, options);
  438. const data = stringToJson(res.bizContent);
  439. resolve(data);
  440. }).catch((error) => {
  441. reject(error);
  442. });
  443. };
  444. /*圈存修复*/
  445. const quanFixAction = (val) => {
  446. var data = {
  447. command: val.command, //修复初始化的指令
  448. cosResponse: val.cosResponse, //修复初始化结果
  449. rechargeId: val.rechargeId, //充值流水号
  450. };
  451. const options = {
  452. type: 2,
  453. data: data,
  454. method: "POST",
  455. showLoading: true,
  456. };
  457. return new Promise(async (resolve, reject) => {
  458. const res = await request(quanXf, options);
  459. const data = stringToJson(res.bizContent);
  460. resolve(data);
  461. }).catch((error) => {
  462. reject(error);
  463. });
  464. };
  465. /*圈层申请*/
  466. const quanApplyAction = (data) => {
  467. var form = {
  468. cardId: card.cardId,
  469. fee: state.fee,
  470. preBalance: card.money,
  471. tradeType: 14,
  472. command: data.command,
  473. cosResponse: data.cosResponse,
  474. orderId: state.orderNum,
  475. rechargeId: data.rechargeId,
  476. };
  477. const options = {
  478. type: 2,
  479. data: form,
  480. method: "POST",
  481. showLoading: true,
  482. };
  483. return new Promise(async (resolve, reject) => {
  484. const res = await request(quanApply, options);
  485. const data = stringToJson(res.bizContent);
  486. resolve(data);
  487. }).catch((error) => {
  488. reject(error);
  489. });
  490. };
  491. /*圈层确认*/
  492. const uanConfirmAction = (data) => {
  493. console.log("圈层确认进入");
  494. let cmdArr = data.command.split(",");
  495. console.log(cmdArr);
  496. bluetoothUtil.transCmd(cmdArr, "10", function(res) {
  497. console.log("圈层透传");
  498. console.log(res);
  499. var arraylenth = res.length;
  500. var status = res[arraylenth - 1].substring(
  501. res[arraylenth - 1].length - 4,
  502. res[arraylenth - 1].length
  503. );
  504. console.log("打印圈层确认指令状态");
  505. console.log(status);
  506. if (status === "9000") {
  507. var form = {
  508. command: data.command,
  509. cosResponse: res.toString(),
  510. rechargeId: data.rechargeId,
  511. paidAmount: state.fee,
  512. giftAmount: 0,
  513. };
  514. const options = {
  515. type: 2,
  516. data: form,
  517. method: "POST",
  518. showLoading: true,
  519. };
  520. return new Promise(async (resolve, reject) => {
  521. const res = await request(quanConfirm, options);
  522. const data = stringToJson(res.bizContent);
  523. resolve(data);
  524. }).catch((error) => {
  525. reject(error);
  526. });
  527. }
  528. });
  529. };
  530. const uanConfirmSucessAction = (data) => {
  531. var form = {
  532. command: data.command,
  533. cosResponse: "9000",
  534. rechargeId: data.rechargeId,
  535. paidAmount: state.fee,
  536. giftAmount: 0,
  537. };
  538. const options = {
  539. type: 2,
  540. data: form,
  541. method: "POST",
  542. showLoading: true,
  543. };
  544. return new Promise(async (resolve, reject) => {
  545. const res = await request(quanConfirm, options);
  546. const data = stringToJson(res.bizContent);
  547. resolve(data);
  548. }).catch((error) => {
  549. reject(error);
  550. });
  551. };
  552. /*充值检测*/
  553. const czCheckAction = () => {
  554. var form = {
  555. cardId: state.cardId,
  556. openId: getItem(StorageKeys.OpenId),
  557. };
  558. const options = {
  559. type: 2,
  560. data: form,
  561. method: "POST",
  562. showLoading: true,
  563. };
  564. return new Promise(async (resolve, reject) => {
  565. const res = await request(cardCzPayResultCheck, options);
  566. const data = stringToJson(res.bizContent);
  567. resolve(data);
  568. }).catch((error) => {
  569. reject(error);
  570. });
  571. };
  572. /*充值申请*/
  573. const cardCzApplyAction = () => {
  574. var data = {
  575. cardId: state.cardId,
  576. openId: getItem(StorageKeys.OpenId),
  577. rechargeMoney: state.fee,
  578. };
  579. const options = {
  580. type: 2,
  581. data: data,
  582. method: "POST",
  583. showLoading: true,
  584. };
  585. return new Promise(async (resolve, reject) => {
  586. const res = await request(cardCzApply, options);
  587. const data = stringToJson(res.bizContent);
  588. resolve(data);
  589. }).catch((error) => {
  590. reject(error);
  591. });
  592. };
  593. //获取微信小程序openid
  594. const getOpenID = () => {
  595. uni.login({
  596. provider: "weixin",
  597. success: function(e) {
  598. wx.request({
  599. url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
  600. success: (res: any) => {
  601. state.openid = res.data.openid;
  602. },
  603. });
  604. },
  605. fail: function() {
  606. msg("获取不到oppenId,请检查AppID和Secret是否争取");
  607. },
  608. });
  609. };
  610. //掉起微信支付
  611. const wxPayment = () => {
  612. // #ifdef MP-WEIXIN
  613. const options = {
  614. type: 2,
  615. data: {
  616. openId: getItem(StorageKeys.OpenId),
  617. wxOpenId: state.openid,
  618. cardId: state.cardId,
  619. orderNum: state.orderNum,
  620. payConfigId: wechatPayConfigId,
  621. body: "储值卡充值",
  622. },
  623. method: "POST",
  624. showLoading: true,
  625. };
  626. request(cardCzPay, options).then((res) => {
  627. const data = stringToJson(res.bizContent);
  628. uni.requestPayment({
  629. provider: "wxpay",
  630. orderInfo: "",
  631. timeStamp: data.timestamp,
  632. nonceStr: data.noncestr,
  633. package: data.wxPackage ?? "",
  634. signType: data.signType,
  635. paySign: data.sign,
  636. success: function() {
  637. //回调订单状态
  638. console.log("回调订单状态");
  639. checkOrder();
  640. },
  641. fail: function(err) {
  642. confirm(err, () => {}, "支付失败", false);
  643. },
  644. });
  645. });
  646. // #endif
  647. };
  648. //支付成功改变订单状态
  649. const checkOrder = () => {
  650. const options = {
  651. type: 2,
  652. data: {
  653. cardId: state.cardId,
  654. openId: getItem(StorageKeys.OpenId),
  655. orderNum: state.orderNum,
  656. },
  657. method: "POST",
  658. showLoading: true,
  659. };
  660. request(cardCzPayResult, options).then((res) => {
  661. const data = stringToJson(res.bizContent);
  662. if (data.tradeState === "SUCCESS")
  663. uni.navigateTo({
  664. url: `/pages/bluetooth/bluetooth?routeType=2&&cardId=${state.cardId}`,
  665. });
  666. console.log(data);
  667. });
  668. };
  669. </script>
  670. <style>
  671. .account {
  672. height: 224rpx;
  673. width: 690rpx;
  674. margin: 30rpx;
  675. position: relative;
  676. }
  677. .account .account-text {
  678. display: flex;
  679. justify-content: space-between;
  680. padding: 20rpx 50rpx;
  681. height: 100%;
  682. }
  683. .account .balance {
  684. display: flex;
  685. flex-direction: column;
  686. justify-content: center;
  687. align-items: flex-start;
  688. color: #ffffff;
  689. }
  690. .account .balance-tit {
  691. font-size: 26rpx;
  692. margin-bottom: 10rpx;
  693. }
  694. .account .balance-val {
  695. font-size: 56rpx;
  696. }
  697. .account .right-box {
  698. display: flex;
  699. flex-direction: column;
  700. justify-content: flex-start;
  701. align-items: flex-end;
  702. }
  703. .account .right-box .no {
  704. font-size: 26rpx;
  705. color: #ffffff;
  706. }
  707. .account .right-box .btn {
  708. font-size: 26rpx;
  709. padding: 0 20rpx;
  710. box-sizing: border-box;
  711. height: 42rpx;
  712. line-height: 42rpx;
  713. color: #28d20f;
  714. background: #ffffff;
  715. border-radius: 21rpx;
  716. display: inline-block;
  717. margin-top: 18rpx;
  718. }
  719. .account .head-bg {
  720. width: 690rpx;
  721. height: 224rpx;
  722. position: absolute;
  723. left: 0;
  724. top: 0;
  725. z-index: -99;
  726. }
  727. .input-box {
  728. display: flex;
  729. flex-direction: column;
  730. justify-content: center;
  731. align-items: center;
  732. padding: 20rpx 0;
  733. }
  734. .input-box .input {
  735. width: 430rpx;
  736. height: 98rpx;
  737. line-height: 98rpx;
  738. background: #f8f8f8;
  739. border: 1px solid #999999;
  740. border-radius: 6rpx;
  741. font-size: 30rpx;
  742. text-align: center;
  743. }
  744. .input-box .tips {
  745. color: #666666;
  746. font-size: 26rpx;
  747. margin-top: 18rpx;
  748. }
  749. .tabs {}
  750. .tabs .tab-tit {
  751. font-size: 30rpx;
  752. color: #333;
  753. padding: 45rpx 0 22rpx 30rpx;
  754. }
  755. .tabs .tab {
  756. display: flex;
  757. flex-wrap: wrap;
  758. justify-content: space-evenly;
  759. }
  760. .tabs .tab .item {
  761. width: 210rpx;
  762. height: 100rpx;
  763. background: #f6fff7;
  764. border: 1px solid #dcdde1;
  765. box-sizing: border-box;
  766. line-height: 100rpx;
  767. border-radius: 6rpx;
  768. text-align: center;
  769. margin-bottom: 24rpx;
  770. color: #333333;
  771. font-size: 32rpx;
  772. }
  773. .tabs .tab .item.active {
  774. border: 1px solid #24cc49;
  775. color: #24cc49;
  776. }
  777. .btn-primary {
  778. width: 670rpx;
  779. height: 80rpx;
  780. line-height: 80rpx;
  781. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  782. border-radius: 40rpx;
  783. font-size: 32rpx;
  784. color: #ffffff;
  785. margin: 200rpx 40rpx 0;
  786. text-align: center;
  787. }
  788. .uni-list{
  789. padding: 120rpx 10rpx 0 10rpx;
  790. font-size:34rpx;
  791. }
  792. label{
  793. display: flex;
  794. justify-content: space-between;
  795. margin-top:30rpx;
  796. }
  797. </style>