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

order_payment.vue 20KB

7ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
1年前
3ヶ月前
7ヶ月前
7ヶ月前
3ヶ月前
3ヶ月前
1年前
1年前
1年前
1年前
11ヶ月前
7ヶ月前
11ヶ月前
1年前
7ヶ月前
7ヶ月前
1年前
1年前
1年前
11ヶ月前
4ヶ月前
3ヶ月前
7ヶ月前
3ヶ月前
3週間前
3ヶ月前
3ヶ月前
3ヶ月前
4ヶ月前
3ヶ月前
4ヶ月前
1年前
3ヶ月前
3週間前
3ヶ月前
4ヶ月前
3ヶ月前
4ヶ月前
1年前
4ヶ月前
3ヶ月前
3ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  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,onShow} from "@dcloudio/uni-app";
  31. import { reactive, ref } from "vue";
  32. import {
  33. PAYMENTORDERAPPLY,
  34. aliPayConfigIdTwo,
  35. obtainUserId,
  36. getOpenId, payApply, payQuery,orderQueryDetail
  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. import {
  46. OrderStatus
  47. } from "@/datas/enum";
  48. import useOrderSkip from "@/composables/order/useOrderSkip";
  49. import {
  50. setItem,getItem
  51. } from "@/utils/storage";
  52. const tools = require("../../static/etcUtil/tools.js");
  53. const { gotoActiveOrder } = useOrderSkip();
  54. let imageUrl = ""
  55. let logo
  56. const scrollTop = ref(0); //滚动距离
  57. var counter = 0;
  58. const dingwei=(func)=>{
  59. uni.getLocation({
  60. type: 'gcj02',
  61. success: function (res) {
  62. console.log("经纬福", res)
  63. state.longitude = res.longitude;
  64. state.latitude = res.latitude;
  65. func()
  66. },
  67. fail: function (res) {
  68. console.log("拒绝获取定位失败回调")
  69. // 拒绝获取定位失败回调
  70. state.isclick = true
  71. uni.showModal({
  72. title: '提示',
  73. content: '请手动开启定位权限',
  74. showCancel: false,
  75. success: () => {
  76. uni.openSetting({
  77. success: (settingdata) => {
  78. if (settingdata.authSetting['scope.userLocation']) {
  79. console.log('用户重新授权');
  80. } else {
  81. console.log('用户仍未授权');
  82. }
  83. }
  84. });
  85. }
  86. });
  87. },
  88. })
  89. }
  90. function myFunc() {
  91. counter++;
  92. console.log("====")
  93. if (counter == 2) {
  94. clearInterval(intervalId);
  95. state.isclick = true
  96. console.log("改为true");
  97. }
  98. }
  99. var intervalId = setInterval(myFunc, 2000);
  100. const savaHandle = (val) => {
  101. console.log("val", val, state.isclick)
  102. if (state.isclick) {
  103. if (val.payStatus == "SUCCESS") {
  104. return;
  105. }
  106. state.isclick = false
  107. console.log("state.isclick", state.isclick, val.payStatus)
  108. if(state.xianxia=='1'){
  109. dingwei(function (res) {
  110. payMethods(val)
  111. });
  112. }else{
  113. payMethods(val)
  114. }
  115. }
  116. };
  117. const payMethods=(val)=>{
  118. console.log("val===",val)
  119. if (val.payStatus === 'UNPAY') {
  120. myFunc()
  121. // #ifdef MP-ALIPAY
  122. my.getAuthCode({
  123. scopes: 'auth_base',
  124. success: res => {
  125. const optionsUser = {
  126. type: 2,
  127. data: {
  128. payConfigId: aliPayConfigIdTwo,
  129. code: res.authCode
  130. },
  131. method: "POST",
  132. showLoading: true,
  133. };
  134. console.log('支付宝用户编号请求:', optionsUser)
  135. requestNew(obtainUserId, optionsUser).then((res) => {
  136. console.log('支付宝用户编号返回:', res)
  137. const data = res;
  138. const optionsali = {
  139. type: 2,
  140. data: {
  141. orderId: state.orderId,
  142. wxOpenid: data.openId ? data.openId : data.alipayUserId,
  143. payType: val.payType
  144. },
  145. method: "POST",
  146. showLoading: true,
  147. };
  148. console.log('支付下单请求:', optionsali)
  149. requestNew(PAYMENTORDERAPPLY, optionsali).then((res) => {
  150. const data = res;
  151. console.log('支付下单返回:', data)
  152. my.tradePay({
  153. // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号 trade_no
  154. tradeNO: data.tranPackage,
  155. success: res => {
  156. console.log("支付成功", res);
  157. refresh();
  158. },
  159. fail: res => {
  160. console.log("支付失败", res);
  161. },
  162. });
  163. },
  164. (err) => {
  165. state.isclick = true
  166. console.log("err")
  167. }
  168. );
  169. });
  170. },
  171. fail: err => {
  172. console.log('my.getAuthCode 调用失败', err)
  173. state.isclick = true
  174. }
  175. });
  176. // #endif
  177. // #ifdef MP-WEIXIN
  178. const options = {
  179. type: 2,
  180. data: {
  181. orderId: state.orderId,
  182. wxOpenId: state.openidData.openid,
  183. payType: val.payType,
  184. longitude: state.longitude, //经度
  185. latitude: state.latitude //纬度
  186. },
  187. method: "POST",
  188. showLoading: true,
  189. };
  190. requestNew(payApply, options).then((res) => {
  191. const data = res;
  192. console.log("data======111", data)
  193. if (data) {
  194. console.log("进来了")
  195. uni.requestPayment({
  196. provider: "wxpay",
  197. orderInfo: "",
  198. timeStamp: data.timestamp,
  199. nonceStr: data.noncestr,
  200. package: data.wxPackage ? data.wxPackage : "",
  201. signType: data.signType,
  202. paySign: data.sign,
  203. success: function (e) {
  204. console.log("支付成功", res);
  205. state.payOK=true
  206. refresh();
  207. },
  208. fail: function (err) {
  209. state.isclick = true
  210. confirm(err, () => { }, "支付失败", false);
  211. },
  212. });
  213. } else {
  214. state.isclick = true
  215. console.log("state.isclick", state.isclick)
  216. }
  217. },
  218. (err) => {
  219. state.isclick = true
  220. console.log("err")
  221. }
  222. );
  223. // #endif
  224. }
  225. }
  226. const refresh = () => {
  227. state.isclick = true
  228. let source = ""
  229. // #ifdef MP-ALIPAY
  230. source = "ALI"
  231. // #endif
  232. // #ifdef MP-WEIXIN
  233. source = "WECHAT"
  234. // #endif
  235. var data = {
  236. orderId: state.orderId,
  237. wxOpenId: state.openidData.openid,
  238. };
  239. const options = {
  240. type: 2,
  241. data: data,
  242. method: "POST",
  243. showLoading: true,
  244. };
  245. console.log("输出内容", options);
  246. requestNew(payQuery, options).then((res) => {
  247. console.log("res====", res)
  248. const data = res;
  249. console.log(data);
  250. if (data.paymentStatus == 'ALLSUCCESS') {
  251. gotoEditUserOrUnitInfo()
  252. }
  253. state.dataArray = data.datas;
  254. for (let i = 0; i < state.dataArray.length; i++) {
  255. if (state.dataArray[i].payType === 'HANDLE') {
  256. state.dataArray[i].payName = '权益金'
  257. } else if (state.dataArray[i].payType === 'MARGIN') {
  258. state.dataArray[i].payName = '保证金'
  259. } else if (state.dataArray[i].payType === 'PRESTORE') {
  260. state.dataArray[i].payName = '预存金'
  261. } else if (state.dataArray[i].payType === 'EQUITY') {
  262. state.dataArray[i].payName = '权益费'
  263. } else if (state.dataArray[i].payType === 'REPAIROBU') {
  264. state.dataArray[i].payName = '增补obu'
  265. } else if (state.dataArray[i].payType === 'CHANGECARD') {
  266. state.dataArray[i].payName = '更换卡'
  267. } else if (state.dataArray[i].payType === 'CHANGEOBU') {
  268. state.dataArray[i].payName = '更换签'
  269. } else if (state.dataArray[i].payType === 'CHANGEALL') {
  270. state.dataArray[i].payName = '更换卡签'
  271. } else {
  272. state.dataArray[i].payName = '未知费'
  273. }
  274. if (state.dataArray[i].payStatus === 'SUCCESS') {
  275. state.dataArray[i].payStatusName = '已支付'
  276. } else if (state.dataArray[i].payStatus === 'PAYING') {
  277. state.dataArray[i].payStatusName = '支付中'
  278. } else if (state.dataArray[i].payStatus === 'FAILED') {
  279. state.dataArray[i].payStatusName = '支付失败'
  280. } else if (state.dataArray[i].payStatus === 'UNPAY') {
  281. state.dataArray[i].payStatusName = '未支付'
  282. } else if (state.dataArray[i].payStatus === 'CLOSED') {
  283. state.dataArray[i].payStatusName = '已关闭'
  284. } else if (state.dataArray[i].payStatus === 'CANCELED') {
  285. state.dataArray[i].payStatusName = '已撤销'
  286. } else if (state.dataArray[i].payStatus === 'REFUND') {
  287. state.dataArray[i].payStatusName = '转入退费'
  288. } else {
  289. state.dataArray[i].payStatusName = '未知'
  290. }
  291. }
  292. console.log("state.dataArray", state.dataArray)
  293. });
  294. }
  295. onShow(()=>{
  296. // 支付完跳转到广告页,回来再次查询跳转 (签约完回来也要查询)
  297. if(state.payOK){
  298. refreshFirst()
  299. }
  300. })
  301. onLoad((option : any) => {
  302. console.log("传递过来的到支付页面", option)
  303. state.orderId = option.orderId;
  304. state.isValueCard = option.isValueCard;
  305. state.vehicleId = option.vehicleId;
  306. state.orderQuery = option.orderQuery;
  307. state.qdSignUrl = option.qdSignUrl;
  308. state.qdSignAppId = option.qdSignAppId;
  309. state.qtSign = option.qtSign;
  310. state.xianxia = option.xianxia;
  311. state.cardType = option.cardType;
  312. // #ifdef MP-WEIXIN
  313. uni.login({
  314. provider: "weixin",
  315. success: function (e) {
  316. const options1 = {
  317. type: 2,
  318. data: {
  319. "jsCode": e.code
  320. },
  321. method: "POST",
  322. showLoading: true,
  323. };
  324. requestNew(getOpenId, options1).then((res) => {
  325. const result = res;
  326. state.openidData = stringToJson(result.data);
  327. refreshFirst()
  328. })
  329. },
  330. })
  331. // #endif
  332. // #ifdef MP-ALIPAY
  333. refreshFirst()
  334. // #endif
  335. });
  336. // 车辆详情
  337. const orderDetail = () => {
  338. const options = {
  339. type: 2,
  340. data: {
  341. orderNo:state.orderId
  342. },
  343. method: "POST",
  344. showLoading: true,
  345. };
  346. return new Promise(async (resolve, reject) => {
  347. const res = await requestNew(orderQueryDetail, options);
  348. setItem('orderQueryActivate', res)
  349. resolve(res);
  350. }).catch((error) => {
  351. reject(error);
  352. });
  353. }
  354. const refreshFirst = () => {
  355. let source = ""
  356. // #ifdef MP-ALIPAY
  357. imageUrl = imgURL + "applyCard/alibaba.png";
  358. source = "ALI"
  359. // #endif
  360. // #ifdef MP-WEIXIN
  361. imageUrl = imgURL + "applyCard/wechat.png";
  362. source = "WECHAT"
  363. // #endif
  364. var data = {
  365. orderId: state.orderId,
  366. wxOpenId: state.openidData.openid,
  367. };
  368. const options = {
  369. type: 2,
  370. data: data,
  371. method: "POST",
  372. showLoading: true,
  373. };
  374. console.log("输出内容", options);
  375. requestNew(payQuery, options).then((res) => {
  376. const data = res;
  377. console.log(data);
  378. if (data.paymentStatus == 'ALLSUCCESS') {
  379. // isValueCard 1 储值卡 2 记账卡
  380. if (state.orderQuery == '1') {
  381. console.log("state.qtSign",state.qtSign,state.qtSign=='0')
  382. // 记账卡
  383. if(state.cardType=='1'){
  384. // 去诺德签约
  385. if(state.qtSign=='0'){
  386. // 去签约,已经签约完,回来查订单详情,如果是激活就去激活
  387. orderDetail().then((res) => {
  388. if (res['orderStep'] == OrderStatus['待激活']) {
  389. // 已签约
  390. gotoActiveOrder(getItem('orderQueryActivate'))
  391. }else{
  392. // 未签约
  393. if(state.qdSignAppId){
  394. uni.navigateToMiniProgram({
  395. appId: state.qdSignAppId,
  396. path: state.qdSignUrl,
  397. extraData: {},
  398. envVersion:'trial',
  399. success(res) {
  400. state.payOK=true
  401. console.log(res);
  402. },
  403. complete(res) {
  404. console.log(res);
  405. },
  406. fail(res) {
  407. console.log(res);
  408. // 未成功跳转到车主小程序
  409. },
  410. });
  411. }else{
  412. const params = encodeURIComponent(JSON.stringify(state.qdSignUrl))
  413. tools.toUrl(`/subpackage/personal-center/webview?url=` + params)
  414. }
  415. }
  416. })
  417. }else{
  418. // 签约
  419. uni.redirectTo({
  420. url: `/subpackage/orders/release-products?orderId=${state.orderId}&orderQuery=${state.orderQuery}`
  421. });
  422. }
  423. }else{
  424. gotoActiveOrder(getItem('orderQueryActivate'))
  425. }
  426. }else{
  427. if (state.isValueCard == 1) {
  428. // 不签约
  429. uni.switchTab({
  430. url: "/pages/order/order"
  431. })
  432. } else {
  433. // 签约
  434. uni.redirectTo({
  435. url: `/subpackage/orders/release-products?orderId=${state.orderId}&orderQuery=${state.orderQuery}`
  436. });
  437. }
  438. }
  439. }
  440. state.dataArray = data.datas;
  441. for (let i = 0; i < state.dataArray.length; i++) {
  442. if (state.dataArray[i].payType === 'HANDLE') {
  443. state.dataArray[i].payName = '权益金'
  444. } else if (state.dataArray[i].payType === 'MARGIN') {
  445. state.dataArray[i].payName = '保证金'
  446. } else if (state.dataArray[i].payType === 'PRESTORE') {
  447. state.dataArray[i].payName = '预存金'
  448. } else if (state.dataArray[i].payType === 'EQUITY') {
  449. state.dataArray[i].payName = '权益费'
  450. } else if (state.dataArray[i].payType === 'REPAIROBU') {
  451. state.dataArray[i].payName = '增补obu'
  452. } else if (state.dataArray[i].payType === 'CHANGECARD') {
  453. state.dataArray[i].payName = '更换卡'
  454. } else if (state.dataArray[i].payType === 'CHANGEOBU') {
  455. state.dataArray[i].payName = '更换签'
  456. } else if (state.dataArray[i].payType === 'CHANGEALL') {
  457. state.dataArray[i].payName = '更换卡签'
  458. } else {
  459. state.dataArray[i].payName = '未知费'
  460. }
  461. if (state.dataArray[i].payStatus === 'SUCCESS') {
  462. state.dataArray[i].payStatusName = '已支付'
  463. } else if (state.dataArray[i].payStatus === 'PAYING') {
  464. state.dataArray[i].payStatusName = '支付中'
  465. } else if (state.dataArray[i].payStatus === 'FAILED') {
  466. state.dataArray[i].payStatusName = '支付失败'
  467. } else if (state.dataArray[i].payStatus === 'UNPAY') {
  468. state.dataArray[i].payStatusName = '未支付'
  469. } else if (state.dataArray[i].payStatus === 'CLOSED') {
  470. state.dataArray[i].payStatusName = '已关闭'
  471. } else if (state.dataArray[i].payStatus === 'CANCELED') {
  472. state.dataArray[i].payStatusName = '已撤销'
  473. } else if (state.dataArray[i].payStatus === 'REFUND') {
  474. state.dataArray[i].payStatusName = '转入退费'
  475. } else {
  476. state.dataArray[i].payStatusName = '未知'
  477. }
  478. }
  479. console.log("state.dataArray", state.dataArray)
  480. });
  481. }
  482. //解析URL获取参数
  483. const getRequest = (urlStr) => {
  484. if (typeof urlStr == "undefined") {
  485. // 获取url中"?"符后的字符串
  486. var url = decodeURI(location.search);
  487. } else {
  488. var url = "?" + urlStr.split("?")[1];
  489. }
  490. var theRequest = new Object();
  491. if (url.indexOf("?") != -1) {
  492. var str = url.substr(1);
  493. var strs = str.split("&");
  494. for (var i = 0; i < strs.length; i++) {
  495. theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
  496. }
  497. }
  498. return theRequest;
  499. };
  500. //监听页面滚动
  501. onPageScroll((e) => {
  502. scrollTop.value = e.scrollTop;
  503. });
  504. // isValueCard 1 储值卡 2 记账卡
  505. const gotoEditUserOrUnitInfo = () => {
  506. if (state.orderQuery == '1') {
  507. if(state.cardType=='1'){
  508. if(state.qtSign=='0'){
  509. if(state.qdSignAppId){
  510. // 去外边签约
  511. uni.navigateToMiniProgram({
  512. appId: state.qdSignAppId,
  513. path: state.qdSignUrl,
  514. extraData: {},
  515. envVersion:'trial',
  516. success(res) {
  517. state.payOK=true
  518. console.log(res);
  519. },
  520. complete(res) {
  521. console.log(res);
  522. },
  523. fail(res) {
  524. console.log(res);
  525. // 未成功跳转到车主小程序
  526. },
  527. });
  528. }else{
  529. const params = encodeURIComponent(JSON.stringify(state.qdSignUrl))
  530. tools.toUrl(`/subpackage/personal-center/webview?url=` + params)
  531. }
  532. }else{
  533. // 签约
  534. uni.redirectTo({
  535. url:`/subpackage/orders/release-products?orderId=${state.orderId}&orderQuery=${state.orderQuery}`
  536. });
  537. }
  538. }else{
  539. gotoActiveOrder(getItem('orderQueryActivate'))
  540. }
  541. }else{
  542. if (state.isValueCard == 1) {
  543. // 不签约
  544. uni.switchTab({
  545. url: "/pages/order/order"
  546. })
  547. } else {
  548. uni.redirectTo({
  549. url: `/subpackage/orders/release-products?orderId=${state.orderId}&orderQuery=${state.orderQuery}`
  550. });
  551. }
  552. }
  553. }
  554. const state = reactive({
  555. isValueCard: 1, //卡的类型
  556. radiolist1: [], //选择卡的数据列表
  557. choiceCardShow: false, //选择卡的弹出框
  558. isSign: '',
  559. id: "",
  560. orderId: "",
  561. userType: 1, //1 个人 2单位
  562. type: 0, //0 客车 1货车
  563. vehiclePlateColor: "",
  564. data: {
  565. show: false,
  566. src: imgURL + "applyCard/edit.png",
  567. },
  568. dataArray: [],
  569. list: [
  570. {
  571. bg: imgURL + "applyCard/product-bg.png",
  572. icon: imgURL + "applyCard/wechat.png",
  573. title: "【货车】微信车主服务",
  574. tip: "绑定微信支付,无需绑定银行卡",
  575. },
  576. ],
  577. openid: "",
  578. isclick: true,//防止重复点击
  579. vehicleId: "",
  580. orderQuery: "0",
  581. longitude: "",
  582. latitude: "",
  583. openidData: {},
  584. qdSignUrl:"",
  585. qdSignAppId:"",
  586. qtSign:"",
  587. xianxia:"",//线下订单 1
  588. payOK:false,
  589. cardType:"",
  590. });
  591. </script>
  592. <style lang="scss" scoped>
  593. ::v-deep .u-radio {
  594. display: flex !important;
  595. align-items: center !important;
  596. float: none !important;
  597. }
  598. ::v-deep .u-icon__icon {
  599. top: -4px !important;
  600. }
  601. .bottomTip {
  602. margin-top: 100rpx;
  603. text-align: center;
  604. font-size: 28rpx;
  605. font-family: Microsoft YaHei;
  606. font-weight: 400;
  607. color: #b3b3b3;
  608. }
  609. .content-value {
  610. position: absolute;
  611. top: 370rpx;
  612. width: 100%;
  613. min-height: calc(100% - 370rpx);
  614. box-sizing: border-box;
  615. padding: 0 30rpx 210rpx;
  616. .t-card {
  617. background-color: #fff;
  618. padding: 40rpx 30rpx;
  619. border-radius: 12rpx;
  620. }
  621. .img-pos {
  622. position: absolute;
  623. left: 500rpx;
  624. top: -38rpx;
  625. right: 50rpx;
  626. .img-flex {
  627. display: flex;
  628. justify-content: space-between;
  629. align-items: center;
  630. .car-img {
  631. width: 86rpx;
  632. height: 42rpx;
  633. }
  634. .flag-img {
  635. width: 30rpx;
  636. height: 35rpx;
  637. }
  638. }
  639. }
  640. }
  641. .flex {
  642. display: flex;
  643. align-items: center;
  644. }
  645. .action {
  646. margin-top: 30rpx;
  647. padding-left: 20rpx;
  648. padding-right: 20rpx;
  649. padding-bottom: 30rpx;
  650. .button {
  651. height: 80rpx;
  652. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  653. border-radius: 40rpx;
  654. font-size: 32rpx;
  655. font-weight: 400;
  656. color: #ffffff;
  657. line-height: 80rpx;
  658. }
  659. }
  660. .action-btn {
  661. margin-left: 45rpx;
  662. width: 121rpx;
  663. height: 61rpx;
  664. border: 1px solid rgba(255, 255, 255, 1);
  665. border-radius: 30rpx;
  666. background: rgba(255, 255, 255, 0.2);
  667. text-align: center;
  668. font-size: 30rpx;
  669. font-family: Microsoft YaHei;
  670. font-weight: 400;
  671. color: #ffffff;
  672. line-height: 61rpx;
  673. }
  674. .tag1 {
  675. padding: 5rpx;
  676. background: rgba(0, 179, 139, 0.5);
  677. border-radius: 6rpx;
  678. font-size: 22rpx;
  679. font-family: Microsoft YaHei;
  680. font-weight: 400;
  681. color: #ffffff;
  682. }
  683. .tag3 {
  684. padding: 5rpx;
  685. background: rgba(139, 112, 228, 0.5);
  686. border-radius: 6rpx;
  687. font-size: 22rpx;
  688. font-family: Microsoft YaHei;
  689. font-weight: 400;
  690. color: #ffffff;
  691. }
  692. .tag2 {
  693. padding: 5rpx;
  694. background: rgba(249, 97, 60, 0.5);
  695. border-radius: 6rpx;
  696. font-size: 22rpx;
  697. font-family: Microsoft YaHei;
  698. font-weight: 400;
  699. color: #ffffff;
  700. }
  701. .ul-item {
  702. display: flex;
  703. align-items: center;
  704. &:nth-child(n+2) {
  705. margin-top: 30rpx;
  706. }
  707. .item-value {
  708. padding: 20rpx;
  709. position: absolute;
  710. display: flex;
  711. align-items: center;
  712. width: 81%;
  713. box-sizing: border-box;
  714. height: 146rpx;
  715. .money {
  716. color: #fff;
  717. font-size: 46rpx;
  718. font-family: SourceHanSansCN, SourceHanSansCN;
  719. font-weight: 400;
  720. flex: 1;
  721. .unit {
  722. font-size: 29rpx;
  723. margin-right: 2rpx;
  724. }
  725. }
  726. .content {
  727. margin-left: 60rpx;
  728. flex: 2;
  729. .title {
  730. font-weight: 400;
  731. font-family: SourceHanSansCN, SourceHanSansCN;
  732. font-size: 36rpx;
  733. color: #2C3246;
  734. }
  735. }
  736. .r-btn {
  737. width: 139rpx;
  738. height: 65rpx;
  739. background: radial-gradient(at 0% 0%, #C6B077 0%, #DFCC96 100%);
  740. border-radius: 33rpx;
  741. font-family: SourceHanSansCN, SourceHanSansCN;
  742. font-weight: 400;
  743. font-size: 26rpx;
  744. color: #FFFFFF;
  745. line-height: 65rpx;
  746. text-align: center;
  747. flex: 1;
  748. }
  749. }
  750. .icon-tip {
  751. width: 100rpx;
  752. height: 100rpx;
  753. }
  754. }
  755. ::v-deep .u-mode-center-box {
  756. border-radius: 10rpx;
  757. }
  758. .squire {
  759. padding: 30rpx 30rpx 50rpx 50rpx;
  760. }
  761. .mask-close {
  762. text-align: right;
  763. }
  764. .icon-closed {
  765. width: 48rpx;
  766. height: 48rpx;
  767. }
  768. .mask-title {
  769. text-align: center;
  770. font-size: 32rpx;
  771. color: $uni-text-color-black;
  772. margin-bottom: 50rpx;
  773. }
  774. </style>