purchase.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752
  1. <template>
  2. <layout
  3. bgImgName="purchase-img"
  4. bgColor="#FDF2E3"
  5. bgHeight="188"
  6. @goBack="goBack"
  7. >
  8. <div class="purchase">
  9. <div class="purchase-privilege">
  10. <div>
  11. <img src="@/assets/image/claimCloudPhone/privilege-1.png" alt="" />
  12. 应用预装已完成
  13. </div>
  14. <div>
  15. <img src="@/assets/image/claimCloudPhone/privilege-2.png" alt="" />
  16. 任意下单
  17. </div>
  18. <div>
  19. <img src="@/assets/image/claimCloudPhone/privilege-3.png" alt="" />
  20. 立即使用云机
  21. </div>
  22. </div>
  23. <template v-for="item in packageList">
  24. <setMealItem
  25. :key="item.serialNumber"
  26. :data="item"
  27. v-if="item.mealList && item.mealList.length"
  28. :type="0"
  29. @buy="buy"
  30. />
  31. </template>
  32. <van-popup
  33. v-model="visible"
  34. position="bottom"
  35. :style="{ background: 'transparent' }"
  36. >
  37. <div class="payment-container">
  38. <div class="payment-container-title">新增云手机</div>
  39. <div class="payment-container-info">
  40. <div>
  41. <div class="payment-container-info_value">
  42. <span>¥</span>{{ currentData.actualPrice }}
  43. </div>
  44. <div class="payment-container-info_name">
  45. {{ packageType[currentData.phoneType]
  46. }}{{ currentData.day }}天卡
  47. </div>
  48. </div>
  49. </div>
  50. <div class="payment-container-num">
  51. 数量:<van-stepper button-size="18" v-model="stepper" />
  52. </div>
  53. <div class="payment-container-method">
  54. <div class="payment-container-method_title">选择支付方式</div>
  55. <div class="payment-container-method_select">
  56. <template v-for="item in paymentList">
  57. <div
  58. :key="item.key"
  59. v-if="
  60. currentData.paySupportTypeList &&
  61. currentData.paySupportTypeList.includes(item.key)
  62. "
  63. :class="{ active: active === item.key }"
  64. @click="active = item.key"
  65. >
  66. <img
  67. :src="active === item.key ? item.activeImg : item.img"
  68. alt=""
  69. />
  70. {{ item.name }}
  71. </div>
  72. </template>
  73. </div>
  74. </div>
  75. <div class="payment-container-amount">
  76. <div>
  77. 需支付金额:<span
  78. ><span>¥</span>{{ currentData.actualPrice * stepper }}
  79. </span>
  80. </div>
  81. <div @click="payment" :class="{ disabled: btnLoading }">
  82. <template v-if="btnLoading"> 正在支付中... </template>
  83. <template v-else> 确认协议并付款</template>
  84. </div>
  85. </div>
  86. <div class="payment-container-agreement">
  87. 购买前阅读<span @click="toAgreement">
  88. 《双子星云手机类型服务协议》
  89. </span>
  90. </div>
  91. </div>
  92. </van-popup>
  93. <van-dialog v-model="activityPurchaseVisible" @cancel="confirm(false)" @confirm="confirm(true)" show-cancel-button confirmButtonText="“已完成支付" confirmButtonColor="#3367d1">
  94. <div style="font-size: 18px; font-weight: bold;text-align: center;padding-top: 10px;">如果您已支付成功</div>
  95. <div style="font-size: 18px; font-weight: bold;text-align: center;padding-bottom: 10px;">请点击"已完成支付"按钮</div>
  96. </van-dialog>
  97. </div>
  98. </layout>
  99. </template>
  100. <script>
  101. import layout from './components/layout';
  102. import setMealItem from './components/setMealItem.vue';
  103. import common from './mixins/common.js';
  104. const RSA = require('@/plugins/wx_rsa.js');
  105. export default {
  106. auth: false,
  107. name: 'purchase',
  108. head: {
  109. title: '0元购机,尽情享受',
  110. },
  111. mixins: [common],
  112. data() {
  113. return {
  114. visible: false,
  115. currentData: {},
  116. packageType: {
  117. VIP: '星动',
  118. SVIP: '星耀',
  119. STARRYSKY: '星空',
  120. STAR: '唔即',
  121. STARPRO: '唔即Pro',
  122. },
  123. stepper: 1,
  124. active: '',
  125. paymentList: [
  126. {
  127. name: '微信',
  128. img: require('@/assets/image/claimCloudPhone/weChat.png'),
  129. activeImg: require('@/assets/image/claimCloudPhone/weChatActvie.png'),
  130. key: 'wxPay',
  131. },
  132. {
  133. name: '支付宝',
  134. img: require('@/assets/image/claimCloudPhone/alipay.png'),
  135. activeImg: require('@/assets/image/claimCloudPhone/alipayActive.png'),
  136. key: 'aliPay',
  137. },
  138. ],
  139. btnLoading: false,
  140. activityPurchaseVisible: false,
  141. };
  142. },
  143. mounted() {
  144. if (sessionStorage.getItem('isAgreementBool')) {
  145. this.currentData = JSON.parse(sessionStorage.getItem('currentData'));
  146. this.stepper = sessionStorage.getItem('stepper');
  147. this.active = sessionStorage.getItem('active');
  148. this.visible = true;
  149. sessionStorage.removeItem('isAgreementBool');
  150. sessionStorage.removeItem('currentData');
  151. sessionStorage.removeItem('active');
  152. sessionStorage.removeItem('stepper');
  153. }
  154. if (localStorage.getItem('activityPurchaseVisible')) {
  155. this.activityPurchaseVisible = true;
  156. localStorage.removeItem('activityPurchaseVisible');
  157. }
  158. this.getActivitySortRuleAndActivityMealList({
  159. personnelMealType: 2,
  160. });
  161. },
  162. components: { layout, setMealItem },
  163. methods: {
  164. buy(data) {
  165. console.log(data);
  166. this.stepper = 1;
  167. this.visible = true;
  168. this.currentData = JSON.parse(JSON.stringify(data));
  169. this.currentData.paySupportTypeList =
  170. this.currentData.paySupportTypeList.split(',');
  171. this.active = this.currentData.paySupportTypeList[0];
  172. },
  173. // 确认支付
  174. payment() {
  175. let params = {
  176. buyType: 1,
  177. quantity: this.stepper,
  178. id: this.currentData.id,
  179. phoneType: this.currentData.phoneType,
  180. activityId: 690009,
  181. returnUrl: location.origin + '/h5/claimCloudPhone/confirmation',
  182. };
  183. params = this.sort_ASCII(params);
  184. console.log(params);
  185. const sign = this.jiaqian(JSON.stringify(params));
  186. this.btnLoading = true;
  187. this.$axios
  188. .$post('pay/v1/order/create', params, { headers: { sign } })
  189. .then((res) => {
  190. console.log(res);
  191. const obj = {
  192. aliPay: 'pay/v1/alipay/h5/spend',
  193. wxPay: 'pay/v1/wxPay/h5/spend',
  194. };
  195. if (res.success) {
  196. localStorage.setItem('activityPurchaseMyOrderNum', res.data.myOrderNum);
  197. const data = {
  198. myOrderNum: res.data.myOrderNum,
  199. };
  200. const headers = {
  201. sign: this.jiaqian(JSON.stringify(data)),
  202. };
  203. this.$axios
  204. .$get(obj[this.active], { headers, params: data })
  205. .then((res) => {
  206. if (this.active === 'aliPay') {
  207. const div = document.createElement('div');
  208. div.innerHTML = res.data;
  209. document.body.appendChild(div);
  210. document.forms[0].submit();
  211. // 这个是为了兼容安卓支付宝没有跳转页面
  212. localStorage.setItem('activityPurchaseVisible', 1);
  213. setTimeout(() => {
  214. this.activityPurchaseVisible = true;
  215. }, 3000);
  216. div.remove();
  217. } else {
  218. window.location.replace(res.data);
  219. }
  220. })
  221. .catch((error) => {
  222. setTimeout(() => {
  223. this.$toast(error.message);
  224. });
  225. })
  226. .finally(() => {
  227. this.btnLoading = false;
  228. });
  229. }
  230. })
  231. .catch((error) => {
  232. this.$toast(error.message);
  233. this.btnLoading = false;
  234. });
  235. // function
  236. },
  237. sort_ASCII(obj) {
  238. var arr = [];
  239. var num = 0;
  240. for (const i in obj) {
  241. arr[num] = i;
  242. num++;
  243. }
  244. var sortArr = arr.sort();
  245. var sortObj = {};
  246. for (var i in sortArr) {
  247. sortObj[sortArr[i]] = obj[sortArr[i]];
  248. }
  249. return sortObj;
  250. },
  251. jiaqian(content) {
  252. console.log(content);
  253. const PrivateKey =
  254. '-----BEGIN PRIVATE KEY-----MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAKCIK/zTSJCP4XhNsb7Mc5lALog+oAja/spMjg8U6rAmVzRtKv8qhw1HK0CRbW/XV66uM+kY7fhjaYbjbbzu2PMMfs2GVpG15jCWLug9fn2hvPT1wkXfooJX61yHK7+inxAXPi4vPNi263mSQGbhZTeqbU5p7nLeRGbdFyBQXVKpAgMBAAECgYAu/475RxZAlI8rPHvkY1EYteypoMQTs6HSslUI31PSXHc9dxSWfenqHkLwdWM30jDuiDvUa6MIDHrRrfXr0XWcQ0IJ93jT7ABkFCdxcKEOG1WE8f1kZ5JyPDJjeQiI9R4jJCukpGU0DdzO7ORvRb4oTFQ15quM+3+SjnK5TtfUsQJBAOLLk03D2s7t2R0GPLZq+WL/ebowbRSy4VHP/IQi4K1bJrll0HLznov60m9UML1ATlS2ub98fBRFXEAaAwJE2O0CQQC1NDEWhrAPU5o3xjjcxIUbbYskskbhjaiX/1Vz0UzS4XfYek4SL68WBWPGWTrSbgbvXtaXj0gmcChF5jxOHtUtAkA4mPsqxfy99UdgYeUW1P1lgkH7gAhIyRdH1nK6+wU83el9DPaHKVrgrfiEBeuf3wNtSqhyK/u/B0wtRxCHKW1FAkAXfwcGdryJoDuVE9z3s3vXDKNIRN2wDaBY5UD9XZxqk9XoeiN5dDltz5EafSOFecLocxG8YVXntg9i0PHs506ZAkEAge9AKaXisZ4jCNHRn1LR2R82RtHTLb2mN3Cc6sGo+SnAKczwRwVg9RgnmaLG4Z/7kJpq0ALgEBlkOmy+9joxAw==-----END PRIVATE KEY-----';
  255. const signature = new RSA.KJUR.crypto.Signature({
  256. alg: 'SHA256withRSA',
  257. });
  258. signature.init(PrivateKey);
  259. signature.updateString(content);
  260. const signData = signature.sign();
  261. // 将内容转成base64
  262. return RSA.hex2b64(signData);
  263. },
  264. toAgreement() {
  265. sessionStorage.setItem('currentData', JSON.stringify(this.currentData));
  266. sessionStorage.setItem('active', this.active);
  267. sessionStorage.setItem('stepper', this.stepper);
  268. this.$router.push(
  269. '/claimCloudPhone/agreement?agreementCoding=XYPZYHXY2002',
  270. );
  271. },
  272. goBack() {
  273. this.$router.push('/claimCloudPhone/inviteeExits');
  274. },
  275. confirm(bool) {
  276. if(bool) return this.$router.replace('/claimCloudPhone/confirmation')
  277. this.activityPurchaseVisible = false;
  278. localStorage.removeItem('activityPurchaseVisible');
  279. }
  280. },
  281. };
  282. </script>
  283. <style lang="less" scoped>
  284. .purchase {
  285. height: 100%;
  286. box-sizing: border-box;
  287. padding-top: 188px;
  288. .purchase-privilege {
  289. padding: 16px;
  290. height: 102px;
  291. background: #ffffff;
  292. box-shadow: 0px 2px 4px 0px #f6e5d3;
  293. border-radius: 8px;
  294. display: grid;
  295. grid-gap: 8px;
  296. grid-template-columns: repeat(3, 1fr);
  297. & > div {
  298. text-align: center;
  299. font-family: PingFangSC, PingFang SC;
  300. font-weight: 400;
  301. font-size: 14px;
  302. color: #1c2023;
  303. line-height: 20px;
  304. font-style: normal;
  305. & > img {
  306. width: 42px;
  307. height: 42px;
  308. display: block;
  309. margin: 0 auto;
  310. }
  311. }
  312. }
  313. .payment-container {
  314. border-radius: 10px 10px 0 0;
  315. padding: 16px;
  316. margin: 0 16px;
  317. display: flex;
  318. flex-direction: column;
  319. background: #f4f6f8;
  320. overflow-y: auto;
  321. .payment-container-title {
  322. font-family: PingFangSC, PingFang SC;
  323. font-weight: bold;
  324. font-size: 18px;
  325. color: #0a132b;
  326. line-height: 20px;
  327. text-align: center;
  328. font-style: normal;
  329. }
  330. .payment-container-info {
  331. margin-top: 16px;
  332. height: 100px;
  333. background: #ffffff;
  334. border-radius: 16px;
  335. display: flex;
  336. justify-content: center;
  337. align-items: center;
  338. .payment-container-info_value {
  339. font-family: PingFangSC, PingFang SC;
  340. font-weight: bold;
  341. font-size: 18px;
  342. color: #0a132b;
  343. font-style: normal;
  344. span {
  345. font-size: 14px;
  346. }
  347. }
  348. .payment-container-info_name {
  349. font-family: PingFangSC, PingFang SC;
  350. font-weight: 400;
  351. font-size: 14px;
  352. color: #0a132b;
  353. font-style: normal;
  354. }
  355. }
  356. .payment-container-num {
  357. margin-top: 16px;
  358. padding: 16px;
  359. box-sizing: border-box;
  360. height: 50px;
  361. background: #ffffff;
  362. border-radius: 16px;
  363. font-family: PingFangSC, PingFang SC;
  364. font-weight: bold;
  365. font-size: 14px;
  366. color: #0a132b;
  367. line-height: 18px;
  368. text-align: left;
  369. display: flex;
  370. font-style: normal;
  371. .van-stepper {
  372. margin-left: 10px;
  373. }
  374. }
  375. .payment-container-method {
  376. .payment-container-method_title {
  377. font-family: PingFangSC, PingFang SC;
  378. font-weight: bold;
  379. font-size: 14px;
  380. color: #0a132b;
  381. line-height: 18px;
  382. text-align: left;
  383. font-style: normal;
  384. margin: 16px 0;
  385. }
  386. .payment-container-method_select {
  387. display: grid;
  388. grid-gap: 8px;
  389. grid-template-columns: repeat(2, 1fr);
  390. & > div {
  391. height: 54px;
  392. line-height: 54px;
  393. background: #edeef0;
  394. border-radius: 6px;
  395. display: flex;
  396. justify-content: center;
  397. align-items: center;
  398. padding: 0 18px;
  399. font-family: PingFangSC, PingFang SC;
  400. font-weight: bold;
  401. font-size: 14px;
  402. color: #666666;
  403. border: 1px solid transparent;
  404. line-height: 18px;
  405. font-style: normal;
  406. &.active {
  407. background: #ffffff;
  408. border-radius: 6px;
  409. border: 1px solid #3b7fff;
  410. position: relative;
  411. &::after {
  412. position: absolute;
  413. top: 0;
  414. right: 0;
  415. width: 26px;
  416. height: 15px;
  417. background: #3a86fe;
  418. border-radius: 0px 6px 0px 6px;
  419. display: block;
  420. content: '√';
  421. font-size: 10px;
  422. text-align: center;
  423. line-height: 15px;
  424. color: #ffffff;
  425. }
  426. }
  427. & > img {
  428. width: 24px;
  429. height: 24px;
  430. margin-right: 4px;
  431. }
  432. }
  433. }
  434. }
  435. .payment-container-amount {
  436. background: #ffffff;
  437. box-shadow: 0px 0px 13px 0px rgba(206, 206, 206, 0.5);
  438. border-radius: 16px;
  439. display: flex;
  440. justify-content: space-between;
  441. margin-top: 24px;
  442. & > div:first-of-type {
  443. font-family: PingFangSC, PingFang SC;
  444. font-weight: bold;
  445. font-size: 14px;
  446. color: #0a132b;
  447. line-height: 20px;
  448. text-align: left;
  449. font-style: normal;
  450. padding: 16px 0 16px 16px;
  451. & > span {
  452. font-size: 18px;
  453. color: #f04646;
  454. line-height: 20px;
  455. font-style: normal;
  456. span {
  457. font-size: 12px;
  458. }
  459. }
  460. }
  461. & > div:last-of-type {
  462. font-family: PingFangSC, PingFang SC;
  463. font-weight: 600;
  464. font-size: 16px;
  465. color: #ffffff;
  466. line-height: 55px;
  467. text-align: left;
  468. font-style: normal;
  469. width: 136px;
  470. height: 55px;
  471. text-align: center;
  472. background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
  473. border-radius: 16px;
  474. }
  475. }
  476. .payment-container-agreement {
  477. margin-top: 9px;
  478. font-family: PingFangSC, PingFang SC;
  479. font-weight: 500;
  480. font-size: 12px;
  481. color: #bbbbbb;
  482. line-height: 16px;
  483. text-align: center;
  484. font-style: normal;
  485. span {
  486. color: #3a86fe;
  487. }
  488. }
  489. }
  490. }
  491. .disabled {
  492. opacity: 0.3;
  493. }
  494. // .purchase {
  495. // height: 100%;
  496. // box-sizing: border-box;
  497. // background: #fdf2e3;
  498. // .purchase-container {
  499. // padding: 12.2666666667vw 0 16px;
  500. // height: 100%;
  501. // box-sizing: border-box;
  502. // background: url('~/assets/image/claimCloudPhone/purchase-img.png') no-repeat;
  503. // background-size: 100% 210px;
  504. // background-position: 0px 12.2666666667vw;
  505. // & > div {
  506. // padding: 224px 16px 0;
  507. // .purchase-privilege {
  508. // padding: 16px;
  509. // height: 102px;
  510. // background: #ffffff;
  511. // box-shadow: 0px 2px 4px 0px #f6e5d3;
  512. // border-radius: 8px;
  513. // display: grid;
  514. // grid-gap: 8px;
  515. // grid-template-columns: repeat(3, 1fr);
  516. // & > div {
  517. // text-align: center;
  518. // font-family: PingFangSC, PingFang SC;
  519. // font-weight: 400;
  520. // font-size: 14px;
  521. // color: #1c2023;
  522. // line-height: 20px;
  523. // font-style: normal;
  524. // & > img {
  525. // width: 42px;
  526. // height: 42px;
  527. // display: block;
  528. // margin: 0 auto;
  529. // }
  530. // }
  531. // }
  532. // }
  533. // }
  534. // .payment-container {
  535. // border-radius: 10px 10px 0 0;
  536. // padding: 16px;
  537. // height: 66vh;
  538. // display: flex;
  539. // flex-direction: column;
  540. // background: #f4f6f8;
  541. // overflow-y: auto;
  542. // .payment-container-title {
  543. // font-family: PingFangSC, PingFang SC;
  544. // font-weight: bold;
  545. // font-size: 18px;
  546. // color: #0a132b;
  547. // line-height: 20px;
  548. // text-align: center;
  549. // font-style: normal;
  550. // }
  551. // .payment-container-info {
  552. // margin-top: 16px;
  553. // height: 100px;
  554. // background: #ffffff;
  555. // border-radius: 16px;
  556. // display: flex;
  557. // justify-content: center;
  558. // align-items: center;
  559. // .payment-container-info_value {
  560. // font-family: PingFangSC, PingFang SC;
  561. // font-weight: bold;
  562. // font-size: 18px;
  563. // color: #0a132b;
  564. // font-style: normal;
  565. // span {
  566. // font-size: 14px;
  567. // }
  568. // }
  569. // .payment-container-info_name {
  570. // font-family: PingFangSC, PingFang SC;
  571. // font-weight: 400;
  572. // font-size: 14px;
  573. // color: #0a132b;
  574. // font-style: normal;
  575. // }
  576. // }
  577. // .payment-container-num {
  578. // margin-top: 16px;
  579. // padding: 16px;
  580. // box-sizing: border-box;
  581. // height: 50px;
  582. // background: #ffffff;
  583. // border-radius: 16px;
  584. // font-family: PingFangSC, PingFang SC;
  585. // font-weight: bold;
  586. // font-size: 14px;
  587. // color: #0a132b;
  588. // line-height: 18px;
  589. // text-align: left;
  590. // display: flex;
  591. // font-style: normal;
  592. // .van-stepper {
  593. // margin-left: 10px;
  594. // }
  595. // }
  596. // .payment-container-method {
  597. // .payment-container-method_title {
  598. // font-family: PingFangSC, PingFang SC;
  599. // font-weight: bold;
  600. // font-size: 14px;
  601. // color: #0a132b;
  602. // line-height: 18px;
  603. // text-align: left;
  604. // font-style: normal;
  605. // margin: 16px 0;
  606. // }
  607. // .payment-container-method_select {
  608. // display: grid;
  609. // grid-gap: 8px;
  610. // grid-template-columns: repeat(2, 1fr);
  611. // & > div {
  612. // height: 54px;
  613. // line-height: 54px;
  614. // background: #edeef0;
  615. // border-radius: 6px;
  616. // display: flex;
  617. // justify-content: center;
  618. // align-items: center;
  619. // padding: 0 18px;
  620. // font-family: PingFangSC, PingFang SC;
  621. // font-weight: bold;
  622. // font-size: 14px;
  623. // color: #666666;
  624. // border: 1px solid transparent;
  625. // line-height: 18px;
  626. // font-style: normal;
  627. // &.active {
  628. // background: #ffffff;
  629. // border-radius: 6px;
  630. // border: 1px solid #3b7fff;
  631. // position: relative;
  632. // &::after {
  633. // position: absolute;
  634. // top: 0;
  635. // right: 0;
  636. // width: 26px;
  637. // height: 15px;
  638. // background: #3a86fe;
  639. // border-radius: 0px 6px 0px 6px;
  640. // display: block;
  641. // content: '√';
  642. // font-size: 10px;
  643. // text-align: center;
  644. // line-height: 15px;
  645. // color: #ffffff;
  646. // }
  647. // }
  648. // & > img {
  649. // width: 24px;
  650. // height: 24px;
  651. // margin-right: 4px;
  652. // }
  653. // }
  654. // }
  655. // }
  656. // .payment-container-amount {
  657. // background: #ffffff;
  658. // box-shadow: 0px 0px 13px 0px rgba(206, 206, 206, 0.5);
  659. // border-radius: 16px;
  660. // display: flex;
  661. // justify-content: space-between;
  662. // margin-top: 24px;
  663. // & > div:first-of-type {
  664. // font-family: PingFangSC, PingFang SC;
  665. // font-weight: bold;
  666. // font-size: 14px;
  667. // color: #0a132b;
  668. // line-height: 20px;
  669. // text-align: left;
  670. // font-style: normal;
  671. // padding: 16px 0 16px 16px;
  672. // & > span {
  673. // font-size: 18px;
  674. // color: #f04646;
  675. // line-height: 20px;
  676. // font-style: normal;
  677. // span {
  678. // font-size: 12px;
  679. // }
  680. // }
  681. // }
  682. // & > div:last-of-type {
  683. // font-family: PingFangSC, PingFang SC;
  684. // font-weight: 600;
  685. // font-size: 16px;
  686. // color: #ffffff;
  687. // line-height: 55px;
  688. // text-align: left;
  689. // font-style: normal;
  690. // width: 136px;
  691. // height: 55px;
  692. // text-align: center;
  693. // background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
  694. // border-radius: 16px;
  695. // }
  696. // }
  697. // .payment-container-agreement {
  698. // margin-top: 9px;
  699. // font-family: PingFangSC, PingFang SC;
  700. // font-weight: 500;
  701. // font-size: 12px;
  702. // color: #bbbbbb;
  703. // line-height: 16px;
  704. // text-align: center;
  705. // font-style: normal;
  706. // span{
  707. // color: #3A86FE;
  708. // }
  709. // }
  710. // }
  711. // }
  712. // ::v-deep .van-nav-bar__arrow {
  713. // color: #000000;
  714. // font-size: 24px;
  715. // }
  716. // ::v-deep .van-nav-bar__title {
  717. // font-weight: bold !important;
  718. // font-size: 17px !important;
  719. // color: #0a132b !important;
  720. // line-height: 24px !important;
  721. // }
  722. </style>