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

order_payment.vue 17KB

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