Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

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