選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

order_payment.vue 15KB

6ヶ月前
6ヶ月前
6ヶ月前
1年前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
1年前
1年前
1年前
11ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
1年前
6ヶ月前
1年前
6ヶ月前
6ヶ月前
6ヶ月前
1年前
11ヶ月前
6ヶ月前
1年前
6ヶ月前
1年前
6ヶ月前
11ヶ月前
6ヶ月前
11ヶ月前
6ヶ月前
7ヶ月前
11ヶ月前
1年前
6ヶ月前
7ヶ月前
1年前
1年前
1年前
11ヶ月前
7ヶ月前
6ヶ月前
1年前
6ヶ月前
1年前
11ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
6ヶ月前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
  1. <template>
  2. <navBar title="订单支付" :scrollTop="scrollTop" :orderId="state.orderId" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
  3. <navBgCar :activeNum='5'></navBgCar>
  4. <view class="content-value">
  5. <view class="t-card">
  6. <view @click="savaHandle(item)" class="ul-item" v-for="(item, index) in state.dataArray" :key="index">
  7. <image style="width: 100%; height: 146rpx;" :src="`${$imgUrl}issuance/equity-bg.png`" mode='scaleToFill'>
  8. </image>
  9. <view class="item-value">
  10. <view class="money">
  11. <text class='unit'>¥</text>
  12. <text>{{ item.fee * 0.01 }}</text>
  13. </view>
  14. <view class="content">
  15. <view class="title">
  16. {{ item.payName }}
  17. </view>
  18. </view>
  19. <view class="r-btn">
  20. {{ item.payStatusName }}
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script setup lang="ts">
  28. import { onLoad, onPageScroll } from "@dcloudio/uni-app";
  29. import { reactive, ref } from "vue";
  30. import {
  31. PAYMENTORDERAPPLY,
  32. aliPayConfigIdTwo,
  33. obtainUserId,
  34. getOpenId, payApply, payQuery
  35. } from "@/utils/network/api.js";
  36. import { request, requestNew } from "@/utils/network/request.js";
  37. import { stringToJson } from "@/utils/network/encryption";
  38. import { fileURL } from "@/datas/fileURL.js";
  39. import navBgCar from "./components/nav-bg-car1";
  40. import navBar from "@/components/nav-bar/nav-bar2.vue";
  41. const imgURL = `${fileURL}image/`;
  42. import { confirm,navTo} from "@/utils/utils";
  43. let imageUrl = ""
  44. let logo
  45. const scrollTop = ref(0); //滚动距离
  46. var counter = 0;
  47. // var maxNum = 5;
  48. function myFunc() {
  49. counter++;
  50. console.log("====")
  51. if (counter == 2) {
  52. clearInterval(intervalId);
  53. state.isclick = true
  54. console.log("改为true");
  55. }
  56. }
  57. var intervalId = setInterval(myFunc, 2000);
  58. const savaHandle = (val) => {
  59. console.log("val", val)
  60. if (state.isclick) {
  61. if (val.payStatus == "SUCCESS") {
  62. return;
  63. }
  64. state.isclick = false
  65. console.log("state.isclick", state.isclick, val.payStatus)
  66. if (val.payStatus === 'UNPAY') {
  67. myFunc()
  68. // #ifdef MP-ALIPAY
  69. my.getAuthCode({
  70. scopes: 'auth_base',
  71. success: res => {
  72. const optionsUser = {
  73. type: 2,
  74. data: {
  75. payConfigId: aliPayConfigIdTwo,
  76. code: res.authCode
  77. },
  78. method: "POST",
  79. showLoading: true,
  80. };
  81. console.log('支付宝用户编号请求:', optionsUser)
  82. requestNew(obtainUserId, optionsUser).then((res) => {
  83. console.log('支付宝用户编号返回:', res)
  84. const data = res;
  85. const optionsali = {
  86. type: 2,
  87. data: {
  88. orderId: state.orderId,
  89. wxOpenid: data.openId ? data.openId : data.alipayUserId,
  90. payType: val.payType
  91. },
  92. method: "POST",
  93. showLoading: true,
  94. };
  95. console.log('支付下单请求:', optionsali)
  96. requestNew(PAYMENTORDERAPPLY, optionsali).then((res) => {
  97. const data = res;
  98. console.log('支付下单返回:', data)
  99. my.tradePay({
  100. // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号 trade_no
  101. tradeNO: data.tranPackage,
  102. success: res => {
  103. console.log("支付成功", res);
  104. refresh();
  105. },
  106. fail: res => {
  107. console.log("支付失败", res);
  108. },
  109. });
  110. });
  111. });
  112. },
  113. fail: err => {
  114. console.log('my.getAuthCode 调用失败', err)
  115. state.isclick = true
  116. }
  117. });
  118. // #endif
  119. // #ifdef MP-WEIXIN
  120. uni.login({
  121. provider: "weixin",
  122. success: function (e) {
  123. const options1 = {
  124. type: 2,
  125. data: {
  126. "jsCode": e.code
  127. },
  128. method: "POST",
  129. showLoading: true,
  130. };
  131. requestNew(getOpenId, options1).then((res) => {
  132. const result = res;
  133. const openidData = stringToJson(result.data);
  134. console.log("获取openId", openidData)
  135. const options = {
  136. type: 2,
  137. data: {
  138. orderId: state.orderId,
  139. wxOpenId: openidData.openid,
  140. payType: val.payType
  141. },
  142. method: "POST",
  143. showLoading: true,
  144. };
  145. requestNew(payApply, options).then((res) => {
  146. const data = res;
  147. console.log("data======111", data)
  148. if (data) {
  149. console.log("进来了")
  150. uni.requestPayment({
  151. provider: "wxpay",
  152. orderInfo: "",
  153. timeStamp: data.timestamp,
  154. nonceStr: data.noncestr,
  155. package: data.wxPackage ? data.wxPackage : "",
  156. signType: data.signType,
  157. paySign: data.sign,
  158. success: function (e) {
  159. console.log("支付成功", res);
  160. refresh();
  161. },
  162. fail: function (err) {
  163. state.isclick = true
  164. confirm(err, () => { }, "支付失败", false);
  165. },
  166. });
  167. } else {
  168. state.isclick = true
  169. console.log("state.isclick", state.isclick)
  170. }
  171. });
  172. });
  173. },
  174. });
  175. // #endif
  176. }
  177. // })
  178. }
  179. };
  180. const refresh = () => {
  181. state.isclick = true
  182. let source = ""
  183. // #ifdef MP-ALIPAY
  184. source = "ALI"
  185. // #endif
  186. // #ifdef MP-WEIXIN
  187. source = "WECHAT"
  188. // #endif
  189. var data = {
  190. orderId: state.orderId,
  191. };
  192. const options = {
  193. type: 2,
  194. data: data,
  195. method: "POST",
  196. showLoading: true,
  197. };
  198. console.log("输出内容", options);
  199. requestNew(payQuery, options).then((res) => {
  200. console.log("res====", res)
  201. const data = res;
  202. console.log(data);
  203. if (data.paymentStatus == 'ALLSUCCESS') {
  204. gotoEditUserOrUnitInfo()
  205. }
  206. state.dataArray = data.datas;
  207. for (let i = 0; i < state.dataArray.length; i++) {
  208. if (state.dataArray[i].payType === 'HANDLE') {
  209. state.dataArray[i].payName = '权益金'
  210. } else if (state.dataArray[i].payType === 'MARGIN') {
  211. state.dataArray[i].payName = '保证金'
  212. } else if (state.dataArray[i].payType === 'PRESTORE') {
  213. state.dataArray[i].payName = '预存金'
  214. } else if (state.dataArray[i].payType === 'EQUITY') {
  215. state.dataArray[i].payName = '权益费'
  216. } else if (state.dataArray[i].payType === 'REPAIROBU') {
  217. state.dataArray[i].payName = '增补obu'
  218. } else if (state.dataArray[i].payType === 'CHANGECARD') {
  219. state.dataArray[i].payName = '更换卡'
  220. } else if (state.dataArray[i].payType === 'CHANGEOBU') {
  221. state.dataArray[i].payName = '更换签'
  222. } else if (state.dataArray[i].payType === 'CHANGEALL') {
  223. state.dataArray[i].payName = '更换卡签'
  224. } else {
  225. state.dataArray[i].payName = '未知费'
  226. }
  227. if (state.dataArray[i].payStatus === 'SUCCESS') {
  228. state.dataArray[i].payStatusName = '已支付'
  229. } else if (state.dataArray[i].payStatus === 'PAYING') {
  230. state.dataArray[i].payStatusName = '支付中'
  231. } else if (state.dataArray[i].payStatus === 'FAILED') {
  232. state.dataArray[i].payStatusName = '支付失败'
  233. } else if (state.dataArray[i].payStatus === 'UNPAY') {
  234. state.dataArray[i].payStatusName = '未支付'
  235. } else if (state.dataArray[i].payStatus === 'CLOSED') {
  236. state.dataArray[i].payStatusName = '已关闭'
  237. } else if (state.dataArray[i].payStatus === 'CANCELED') {
  238. state.dataArray[i].payStatusName = '已撤销'
  239. } else if (state.dataArray[i].payStatus === 'REFUND') {
  240. state.dataArray[i].payStatusName = '转入退费'
  241. } else {
  242. state.dataArray[i].payStatusName = '未知'
  243. }
  244. }
  245. console.log("state.dataArray", state.dataArray)
  246. });
  247. }
  248. onLoad((option : any) => {
  249. console.log("传递过来的到支付页面", option)
  250. state.orderId = option.orderId;
  251. state.isValueCard = option.isValueCard;
  252. state.vehicleId = option.vehicleId;
  253. let source = ""
  254. // #ifdef MP-ALIPAY
  255. imageUrl = imgURL + "applyCard/alibaba.png";
  256. source = "ALI"
  257. // #endif
  258. // #ifdef MP-WEIXIN
  259. imageUrl = imgURL + "applyCard/wechat.png";
  260. source = "WECHAT"
  261. // #endif
  262. var data = {
  263. orderId: state.orderId,
  264. };
  265. const options = {
  266. type: 2,
  267. data: data,
  268. method: "POST",
  269. showLoading: true,
  270. };
  271. console.log("输出内容", options);
  272. requestNew(payQuery, options).then((res) => {
  273. const data = res;
  274. console.log(data);
  275. if (data.paymentStatus == 'ALLSUCCESS') {
  276. // isValueCard 1 储值卡 2 记账卡
  277. if (state.isValueCard == 1) {
  278. uni.switchTab({
  279. url: "/pages/order/order"
  280. })
  281. } else {
  282. navTo(
  283. `/subpackage/orders/release-products?orderId=${state.orderId}`,
  284. );
  285. }
  286. }
  287. state.dataArray = data.datas;
  288. for (let i = 0; i < state.dataArray.length; i++) {
  289. if (state.dataArray[i].payType === 'HANDLE') {
  290. state.dataArray[i].payName = '权益金'
  291. } else if (state.dataArray[i].payType === 'MARGIN') {
  292. state.dataArray[i].payName = '保证金'
  293. } else if (state.dataArray[i].payType === 'PRESTORE') {
  294. state.dataArray[i].payName = '预存金'
  295. } else if (state.dataArray[i].payType === 'EQUITY') {
  296. state.dataArray[i].payName = '权益费'
  297. } else if (state.dataArray[i].payType === 'REPAIROBU') {
  298. state.dataArray[i].payName = '增补obu'
  299. } else if (state.dataArray[i].payType === 'CHANGECARD') {
  300. state.dataArray[i].payName = '更换卡'
  301. } else if (state.dataArray[i].payType === 'CHANGEOBU') {
  302. state.dataArray[i].payName = '更换签'
  303. } else if (state.dataArray[i].payType === 'CHANGEALL') {
  304. state.dataArray[i].payName = '更换卡签'
  305. } else {
  306. state.dataArray[i].payName = '未知费'
  307. }
  308. if (state.dataArray[i].payStatus === 'SUCCESS') {
  309. state.dataArray[i].payStatusName = '已支付'
  310. } else if (state.dataArray[i].payStatus === 'PAYING') {
  311. state.dataArray[i].payStatusName = '支付中'
  312. } else if (state.dataArray[i].payStatus === 'FAILED') {
  313. state.dataArray[i].payStatusName = '支付失败'
  314. } else if (state.dataArray[i].payStatus === 'UNPAY') {
  315. state.dataArray[i].payStatusName = '未支付'
  316. } else if (state.dataArray[i].payStatus === 'CLOSED') {
  317. state.dataArray[i].payStatusName = '已关闭'
  318. } else if (state.dataArray[i].payStatus === 'CANCELED') {
  319. state.dataArray[i].payStatusName = '已撤销'
  320. } else if (state.dataArray[i].payStatus === 'REFUND') {
  321. state.dataArray[i].payStatusName = '转入退费'
  322. } else {
  323. state.dataArray[i].payStatusName = '未知'
  324. }
  325. }
  326. console.log("state.dataArray", state.dataArray)
  327. });
  328. });
  329. //解析URL获取参数
  330. const getRequest = (urlStr) => {
  331. if (typeof urlStr == "undefined") {
  332. // 获取url中"?"符后的字符串
  333. var url = decodeURI(location.search);
  334. } else {
  335. var url = "?" + urlStr.split("?")[1];
  336. }
  337. var theRequest = new Object();
  338. if (url.indexOf("?") != -1) {
  339. var str = url.substr(1);
  340. var strs = str.split("&");
  341. for (var i = 0; i < strs.length; i++) {
  342. theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
  343. }
  344. }
  345. return theRequest;
  346. };
  347. //监听页面滚动
  348. onPageScroll((e) => {
  349. scrollTop.value = e.scrollTop;
  350. });
  351. // isValueCard 1 储值卡 2 记账卡
  352. const gotoEditUserOrUnitInfo = () => {
  353. if (state.isValueCard == 1) {
  354. uni.switchTab({
  355. url: "/pages/index/index"
  356. })
  357. } else {
  358. navTo(
  359. `/subpackage/orders/release-products?orderId=${state.orderId}`,
  360. );
  361. }
  362. }
  363. const state = reactive({
  364. isValueCard: 1, //卡的类型
  365. radiolist1: [], //选择卡的数据列表
  366. choiceCardShow: false, //选择卡的弹出框
  367. isSign: '',
  368. id: "",
  369. orderId: "",
  370. userType: 1, //1 个人 2单位
  371. type: 0, //0 客车 1货车
  372. vehiclePlateColor: "",
  373. data: {
  374. show: false,
  375. src: imgURL + "applyCard/edit.png",
  376. },
  377. dataArray: [],
  378. list: [
  379. {
  380. bg: imgURL + "applyCard/product-bg.png",
  381. icon: imgURL + "applyCard/wechat.png",
  382. title: "【货车】微信车主服务",
  383. tip: "绑定微信支付,无需绑定银行卡",
  384. },
  385. ],
  386. openid: "",
  387. isclick: true,//防止重复点击
  388. vehicleId: ""
  389. });
  390. </script>
  391. <style lang="scss" scoped>
  392. ::v-deep .u-radio {
  393. display: flex !important;
  394. align-items: center !important;
  395. float: none !important;
  396. }
  397. ::v-deep .u-icon__icon {
  398. top: -4px !important;
  399. }
  400. .bottomTip {
  401. margin-top: 100rpx;
  402. text-align: center;
  403. font-size: 28rpx;
  404. font-family: Microsoft YaHei;
  405. font-weight: 400;
  406. color: #b3b3b3;
  407. }
  408. .content-value {
  409. position: absolute;
  410. top: 370rpx;
  411. width: 100%;
  412. min-height: calc(100% - 370rpx);
  413. box-sizing: border-box;
  414. padding: 0 30rpx 210rpx;
  415. .t-card {
  416. background-color: #fff;
  417. padding: 40rpx 30rpx;
  418. border-radius: 12rpx;
  419. }
  420. .img-pos {
  421. position: absolute;
  422. left: 500rpx;
  423. top: -38rpx;
  424. right: 50rpx;
  425. .img-flex {
  426. display: flex;
  427. justify-content: space-between;
  428. align-items: center;
  429. .car-img {
  430. width: 86rpx;
  431. height: 42rpx;
  432. }
  433. .flag-img {
  434. width: 30rpx;
  435. height: 35rpx;
  436. }
  437. }
  438. }
  439. }
  440. .flex {
  441. display: flex;
  442. align-items: center;
  443. }
  444. .action {
  445. margin-top: 30rpx;
  446. padding-left: 20rpx;
  447. padding-right: 20rpx;
  448. padding-bottom: 30rpx;
  449. .button {
  450. height: 80rpx;
  451. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  452. border-radius: 40rpx;
  453. font-size: 32rpx;
  454. font-weight: 400;
  455. color: #ffffff;
  456. line-height: 80rpx;
  457. }
  458. }
  459. .action-btn {
  460. margin-left: 45rpx;
  461. width: 121rpx;
  462. height: 61rpx;
  463. border: 1px solid rgba(255, 255, 255, 1);
  464. border-radius: 30rpx;
  465. background: rgba(255, 255, 255, 0.2);
  466. text-align: center;
  467. font-size: 30rpx;
  468. font-family: Microsoft YaHei;
  469. font-weight: 400;
  470. color: #ffffff;
  471. line-height: 61rpx;
  472. }
  473. .tag1 {
  474. padding: 5rpx;
  475. background: rgba(0, 179, 139, 0.5);
  476. border-radius: 6rpx;
  477. font-size: 22rpx;
  478. font-family: Microsoft YaHei;
  479. font-weight: 400;
  480. color: #ffffff;
  481. }
  482. .tag3 {
  483. padding: 5rpx;
  484. background: rgba(139, 112, 228, 0.5);
  485. border-radius: 6rpx;
  486. font-size: 22rpx;
  487. font-family: Microsoft YaHei;
  488. font-weight: 400;
  489. color: #ffffff;
  490. }
  491. .tag2 {
  492. padding: 5rpx;
  493. background: rgba(249, 97, 60, 0.5);
  494. border-radius: 6rpx;
  495. font-size: 22rpx;
  496. font-family: Microsoft YaHei;
  497. font-weight: 400;
  498. color: #ffffff;
  499. }
  500. .ul-item {
  501. display: flex;
  502. align-items: center;
  503. &:nth-child(n+2) {
  504. margin-top: 30rpx;
  505. }
  506. .item-value {
  507. padding: 20rpx;
  508. position: absolute;
  509. display: flex;
  510. align-items: center;
  511. width: 100%;
  512. box-sizing: border-box;
  513. height: 146rpx;
  514. .money {
  515. color: #fff;
  516. font-size: 46rpx;
  517. font-family: SourceHanSansCN, SourceHanSansCN;
  518. font-weight: 400;
  519. margin-right: 43rpx;
  520. .unit {
  521. font-size: 29rpx;
  522. margin-right: 2rpx;
  523. }
  524. }
  525. .content {
  526. margin-left: 33rpx;
  527. .title {
  528. font-weight: 400;
  529. font-family: SourceHanSansCN, SourceHanSansCN;
  530. font-size: 36rpx;
  531. color: #2C3246;
  532. }
  533. }
  534. .r-btn {
  535. margin-left: 137rpx;
  536. width: 139rpx;
  537. height: 65rpx;
  538. background: radial-gradient(at 0% 0%, #C6B077 0%, #DFCC96 100%);
  539. border-radius: 33rpx;
  540. font-family: SourceHanSansCN, SourceHanSansCN;
  541. font-weight: 400;
  542. font-size: 26rpx;
  543. color: #FFFFFF;
  544. line-height: 65rpx;
  545. text-align: center;
  546. }
  547. }
  548. .icon-tip {
  549. width: 100rpx;
  550. height: 100rpx;
  551. }
  552. }
  553. ::v-deep .u-mode-center-box {
  554. border-radius: 10rpx;
  555. }
  556. .squire {
  557. padding: 30rpx 30rpx 50rpx 50rpx;
  558. }
  559. .mask-close {
  560. text-align: right;
  561. }
  562. .icon-closed {
  563. width: 48rpx;
  564. height: 48rpx;
  565. }
  566. .mask-title {
  567. text-align: center;
  568. font-size: 32rpx;
  569. color: $uni-text-color-black;
  570. margin-bottom: 50rpx;
  571. }
  572. </style>