Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

recharge.vue 19KB

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