accountRecharge.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944
  1. <template>
  2. <view>
  3. <u-navbar title="账户充值" title-color="#101010" :customBack="customBack">
  4. <view slot="right" class="slot" @click="gotoUrl('/pages/returnBalance/returnBalance')" >
  5. 退余额
  6. </view>
  7. </u-navbar>
  8. <view class="main">
  9. <view class="headline">
  10. <view class="title-left">
  11. <view class="icon">
  12. <image class="icon1" src="@/assets/img/PEokWS2@1x.png" mode=""></image>
  13. </view>
  14. <view class="text">
  15. 账户充值
  16. </view>
  17. </view>
  18. <view class="title-right" @click="gotoUrl('/pages/recharge/rechargeRecord')" >
  19. <view class="icon">
  20. <image class="icon2" src="@/assets/img/riLine-time-line.svg" mode=""></image>
  21. </view>
  22. <view class="text">
  23. 充值记录
  24. </view>
  25. </view>
  26. </view>
  27. <view class="content">
  28. <!-- 可用余额 -->
  29. <!-- 租户信息 -->
  30. <view class="infos" >
  31. <view class="item">
  32. <view class="item-title">
  33. 承租方
  34. </view>
  35. <view class="item-value">
  36. {{personInfo.name}}
  37. </view>
  38. </view>
  39. <view class="item" v-if="false">
  40. <view class="item-title">
  41. 户号
  42. </view>
  43. <view class="item-value">
  44. 00880088
  45. </view>
  46. </view>
  47. <view class="item" v-if="false">
  48. <view class="item-title">
  49. 联系人
  50. </view>
  51. <view class="item-value">
  52. {{personInfo.contacts}}
  53. </view>
  54. </view>
  55. <view class="item" v-if="false">
  56. <view class="item-title">
  57. 物业方
  58. </view>
  59. <view class="item-value">
  60. {{companyInfo.propertyManagement}}
  61. </view>
  62. </view>
  63. </view>
  64. <view class="balance">
  65. <!-- -->
  66. <view class="balance-img">
  67. <img src="@/assets/img/Group 911.png" class="Group911"></img>
  68. </view>
  69. <view class="balanceMain">
  70. <view class="balanceFlex2" :style="'border-color:'+averageColor"></view>
  71. <svg width="282" height="282" :style="'transform: rotate('+averageLevel+'deg);'"
  72. class="Group909"
  73. viewBox="0 0 282 282" fill="none" xmlns="http://www.w3.org/2000/svg">
  74. <path d="M157 141C157 149.837 149.837 157 141 157C132.163 157 125 149.837 125 141C141 0 141 0 141 0C141 0 141 0 157 141Z" fill="#DFDAD4"/>
  75. <path d="M141 157C132.163 157 125 149.837 125 141C141 0 141 7.08465e-05 141 7.08465e-05C141 7.08465e-05 141 96.5001 141 157Z" fill="#CAC3BA"/>
  76. <g filter="url(#filter0_d_2522_561)">
  77. <circle cx="141" cy="142" r="7" fill="#ACABA8"/>
  78. </g>
  79. <defs>
  80. <filter id="filter0_d_2522_561" x="128" y="129" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  81. <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  82. <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  83. <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2522_561"/>
  84. <feOffset/>
  85. <feGaussianBlur stdDeviation="2"/>
  86. <feComposite in2="hardAlpha" operator="out"/>
  87. <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
  88. <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_561"/>
  89. <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_561" result="shape"/>
  90. </filter>
  91. </defs>
  92. </svg>
  93. </view>
  94. <view class="balanceMain">
  95. <view class="balanceFlex">
  96. <view class="balance-right balance">
  97. {{personInfo.balance}}
  98. </view>
  99. <view class="balance-left">
  100. 可用余额(元)
  101. </view>
  102. </view>
  103. </view>
  104. </view>
  105. <!-- 缴费金额 -->
  106. <view class="payment-amount">
  107. <view class="title">
  108. 充值金额
  109. <view class="hint" v-if="personInfo.balance>0">
  110. 有余额,可提前充值
  111. </view>
  112. <!-- 提示 无余额 已欠费 -->
  113. <view class="hint hint2" v-if="personInfo.balance==0" >
  114. 已扣完,请尽快缴费
  115. </view>
  116. <view class="hint hint2" v-if="personInfo.balance<0" >
  117. 有欠费,请尽快充值
  118. </view>
  119. </view>
  120. <view class="amount-options">
  121. <view v-for="(item,i) in amountList" :key="i"
  122. class="options-item " :class="{
  123. chosen:selectNum==item
  124. }" @click="otherNum=item,selectNum=item" >
  125. {{item}}元
  126. </view>
  127. </view>
  128. </view>
  129. <!-- 输入金额 -->
  130. <view class="input-amount">
  131. <view class="symbol">
  132. </view>
  133. <input class="input" @input="ckInput" @focus="focus" type="text" v-model="otherNum" placeholder="点击输入充值金额"/>
  134. </view>
  135. <!-- 支付方式 -->
  136. <view class="payment-way">
  137. <view class="title">
  138. 支付方式
  139. </view>
  140. <view class="way">
  141. <radio-group @change="radioChange">
  142. <view class="way-item" v-if="companyInfo.paymentMethod.indexOf('2')>-1" >
  143. <view class="way-name">
  144. <view class="icon">
  145. <image class="img" src="@/assets/img/riFill-wechat-pay-fill fTAsMwS.svg" mode="">
  146. </image>
  147. </view>
  148. <view class="text">
  149. 微信支付
  150. </view>
  151. </view>
  152. <view class="way-radio">
  153. <label class="radio">
  154. <radio value="0" name="selectType" :checked="submitType === '0'" /><text></text>
  155. </label>
  156. </view>
  157. </view>
  158. <view class="way-item" v-if="companyInfo.paymentMethod.indexOf('1')>-1" >
  159. <view class="way-name">
  160. <view class="icon">
  161. <image class="img2" src="@/assets/img/antOutline-alipay-circle bQiHn7m.svg" mode="">
  162. </image>
  163. </view>
  164. <view class="text">
  165. 支付宝
  166. </view>
  167. </view>
  168. <view class="way-radio">
  169. <label class="radio">
  170. <radio value="1" name="selectType" :checked="submitType === '1'" /><text></text>
  171. </label>
  172. </view>
  173. </view>
  174. <view class="way-item" v-if="companyInfo.paymentMethod.indexOf('3')>-1" >
  175. <view class="way-name">
  176. <view class="icon">
  177. <image class="img3"
  178. src="@/assets/img/riFill-exchange-cny-fill@1x.png" mode=""></image>
  179. </view>
  180. <view class="text">
  181. 对公转账
  182. </view>
  183. </view>
  184. <view class="way-radio" >
  185. <label class="radio">
  186. <radio value="2" name="selectType" /><text></text>
  187. </label>
  188. </view>
  189. </view>
  190. </radio-group>
  191. <!-- 对公转账弹窗 -->
  192. <u-modal v-model="show" :show-cancel-button="true"
  193. @confirm="copyUrl()"
  194. :show-title="false" confirm-text="复制"
  195. cancel-text="关闭">
  196. <view class="modal-content">
  197. <view class="title-icon">
  198. <image class="img" src="@/assets/img/modalIcon.svg" mode=""></image>
  199. </view>
  200. <view class="title">
  201. 对公转账信息
  202. </view>
  203. <view class="infos-group">
  204. <view class="item" >
  205. <view class="item-title">
  206. 收款户名
  207. </view>
  208. <view class="item-value">
  209. {{transferAccountsInfo.accountName}}
  210. </view>
  211. </view>
  212. <view class="item" >
  213. <view class="item-title">
  214. 开户银行
  215. </view>
  216. <view class="item-value">
  217. {{transferAccountsInfo.bankName}}
  218. </view>
  219. </view>
  220. <view class="item" >
  221. <view class="item-title">
  222. 收款账户
  223. </view>
  224. <view class="item-value">
  225. {{transferAccountsInfo.accountNo}}
  226. </view>
  227. </view>
  228. <view class="item" >
  229. <view class="item-title">
  230. 联系电话
  231. </view>
  232. <view class="item-value">
  233. {{transferAccountsInfo.telephone}}
  234. </view>
  235. </view>
  236. </view>
  237. </view>
  238. </u-modal>
  239. </view>
  240. </view>
  241. <!-- 按钮 -->
  242. <button class="btn" @click="submit">{{submitType==2?'查看对公转账信息':'立即支付'}}</button>
  243. </view>
  244. </view>
  245. <u-divider nonetext="没有找到相关内容"
  246. border-color="#CFD2D5">已经到底了</u-divider>
  247. <img id="qrcode" style="display: none;">
  248. <u-modal v-model="showModel" :show-cancel-button="true" @confirm="homePage"
  249. confirm-text="刷新余额" title="扫码支付">
  250. <view style="
  251. text-align: center;
  252. ">
  253. <img id="qrcode2" :src="qrCodeImg">
  254. </view>
  255. <view style="
  256. text-align: center;
  257. ">请使用支付宝扫码</view>
  258. </u-modal>
  259. </view>
  260. </template>
  261. <script>
  262. import getOpenId from '@/apis/utils/init.js'
  263. import * as API from '@/apis/pagejs/wxPay.js'
  264. import * as API_index from '@/apis/pagejs/index.js'
  265. import * as API_weixin from '@/apis/weixin.js'
  266. import * as Pay from '@/apis/weixin.js'
  267. import QRCode from 'qrcodejs2'
  268. import {
  269. newDate,
  270. convertCanvasToImage,
  271. } from '@/apis/utils'
  272. import {
  273. wxPayJs
  274. } from '@/apis/utils/wxpay'
  275. export default {
  276. data() {
  277. return{
  278. amountList:[
  279. 100,200,500,1000,2000,5000
  280. ],
  281. show: false,
  282. showModel: false,
  283. qrCodeImg: "",
  284. submitType:"0",
  285. submitForm:{
  286. companyId: '',
  287. amount: '',
  288. },
  289. personInfo:{
  290. balance:0,
  291. },
  292. companyInfo:{
  293. paymentMethod:''
  294. },
  295. selectNum:'100',
  296. otherNum:'',
  297. transferAccountsInfo:{},
  298. averageLevel:0,
  299. averageColor:"#55bb81",
  300. }
  301. },
  302. onLoad() {
  303. //this.submitForm.companyId=this.carhelp.getPersonInfoPlus().companyInfo.id
  304. var openId=this.carhelp.getOpenId()
  305. //当前页面必须要OpenId
  306. if(openId){
  307. }else{
  308. getOpenId.getOpenId(true, this.carhelp.getUID())
  309. }
  310. this.submitForm.openId=openId
  311. if ('prodv4'==process.car.NODE_ENV) {
  312. this.submitForm.source="yjwg"
  313. }
  314. },
  315. onReady() {
  316. this.homePage()
  317. this.availableDuration()
  318. },
  319. onShow(){
  320. this.homePage()
  321. this.availableDuration()
  322. },
  323. methods: {
  324. customBack(){
  325. if ('prodv4'==process.car.NODE_ENV) {
  326. if(process.env.NODE_ENV === "development"){
  327. window.history.back()
  328. }else{
  329. window.location.href=process.car.BACK_URL
  330. }
  331. }else{
  332. window.history.back()
  333. }
  334. },
  335. copyUrl(){
  336. var transferAccountsInfo=this.transferAccountsInfo
  337. var textToCopy = `收款户名${transferAccountsInfo.accountName}\n开户银行${transferAccountsInfo.bankName}\n收款账户${transferAccountsInfo.accountNo}\n联系电话${transferAccountsInfo.telephone}`;
  338. uni.setClipboardData({
  339. data: textToCopy,
  340. success: function () {
  341. uni.showToast({
  342. title: "复制成功!",
  343. icon: "none"
  344. })
  345. }
  346. });
  347. },
  348. availableDuration(){
  349. API_index.availableDuration({
  350. }).then((response) => {
  351. var sz=['#C0331D','#e84325','#ef7830',
  352. '#4faf78', '#55bb81']
  353. var balance=response.data.balance;
  354. var averageAmount=response.data.averageAmount;
  355. if(averageAmount==0&&balance>0){
  356. this.averageLevel=130;
  357. this.averageColor=sz[sz.length-1]
  358. }else if(averageAmount==0){
  359. this.averageColor=sz[0]
  360. this.averageLevel=-130;
  361. } else if(balance==0){
  362. this.averageLevel=-130;
  363. this.averageColor=sz[0]
  364. }else{
  365. var day=balance/averageAmount
  366. console.log(day)
  367. if(day<1){
  368. this.averageLevel=-130;
  369. this.averageColor=sz[0]
  370. }else if(day==1){
  371. this.averageLevel=-90;
  372. this.averageColor=sz[1]
  373. }else if(day<7){
  374. this.averageColor=sz[2]
  375. var sday=day-1
  376. var kd=45-(sday)/6*45
  377. this.averageLevel=(-45-kd);
  378. }else if(day<=15){
  379. this.averageColor=sz[3]
  380. var sday=day-7
  381. var kd=45-(sday)/8*45
  382. this.averageLevel=(0-kd);
  383. }else{
  384. this.averageLevel=130;
  385. this.averageColor=sz[sz.length-1]
  386. }
  387. }
  388. console.log(this.averageLevel)
  389. }).catch(error => {
  390. //uni.hideLoading();
  391. uni.showToast({
  392. title: error,
  393. icon: "none"
  394. })
  395. })
  396. },
  397. homePage(){
  398. // uni.showLoading({
  399. // title: "加载中",
  400. // mask: true,
  401. // })
  402. API_index.homePage({
  403. }).then((response) => {
  404. //uni.hideLoading();
  405. this.submitForm.companyId=response.data.companyInfo.id;
  406. //this.carhelp.getPersonInfoPlus().companyInfo.id
  407. this.personInfo=response.data.tenantInfo;
  408. this.companyInfo=response.data.companyInfo;
  409. if(this.companyInfo.transferAccountsInfo){
  410. this.transferAccountsInfo=JSON.parse(this.companyInfo.transferAccountsInfo)
  411. }
  412. var sz=this.companyInfo.paymentMethod.split(',');
  413. if(sz.length==1){
  414. this.submitType=sz[0]
  415. }
  416. }).catch(error => {
  417. //uni.hideLoading();
  418. uni.showToast({
  419. title: error,
  420. icon: "none"
  421. })
  422. })
  423. },
  424. radioChange: function(evt) {
  425. this.submitType=evt.detail.value
  426. },
  427. ckInput(e){
  428. var text=e.detail.value
  429. if(text.indexOf('.')>0){
  430. var k =text.split(".")[1]
  431. if(k.length>=3){
  432. this.$nextTick(()=>{
  433. text=parseFloat(text).toFixed(2);
  434. this.otherNum= text
  435. })
  436. }
  437. }
  438. var t =Number(text);
  439. if(t<1){
  440. this.$nextTick(()=>{
  441. this.otherNum='';
  442. })
  443. }
  444. if(t>5000){
  445. this.$nextTick(()=>{
  446. this.otherNum=5000;
  447. })
  448. }
  449. },
  450. focus(){
  451. console.log(0)
  452. uni.pageScrollTo({
  453. scrollTop:999999,
  454. duration:0
  455. })
  456. },
  457. open() {
  458. this.show = true;
  459. },
  460. submit() {
  461. if (this.submitType == 2) {
  462. this.show = true;
  463. }else{
  464. if(!this.otherNum){
  465. this.otherNum=this.selectNum;
  466. }
  467. this.submitForm.amount=this.otherNum
  468. if(!this.otherNum){
  469. uni.showToast({
  470. title: "请输入充值金额"
  471. })
  472. return
  473. }
  474. if (this.submitType == 0) {
  475. this.wxpy()
  476. }
  477. if (this.submitType == 1) {
  478. this.alpy()
  479. }
  480. }
  481. },
  482. alpy() {
  483. uni.showLoading({
  484. title: "加载中",
  485. mask: true,
  486. })
  487. var listcanvas = document.getElementsByTagName('canvas')
  488. if (listcanvas.length > 0) {
  489. document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
  490. }
  491. Pay.alpay(this.submitForm).then((response) => {
  492. let qrcode = new QRCode('qrcode', {
  493. width: 200,
  494. height: 200,
  495. text: response.data.qr_code,
  496. correctLevel: QRCode.CorrectLevel.M,
  497. })
  498. this.outOrderNo = response.data.outOrderNo;
  499. var canvas = document.getElementsByTagName('canvas')[0];
  500. this.qrCodeImg = convertCanvasToImage(canvas);
  501. uni.hideLoading()
  502. this.showModel = true
  503. }).catch(error => {
  504. uni.showToast({
  505. title: error
  506. })
  507. })
  508. },
  509. wxpy() {
  510. Pay.wxpay(this.submitForm).then((response) => {
  511. if (!response.result) {
  512. uni.showToast({
  513. title: response.message
  514. })
  515. return
  516. }
  517. var data = response.data
  518. uni.hideLoading()
  519. //("Pay+"+new Date().getTime())
  520. wxPayJs(data);
  521. }).catch(error => {
  522. uni.showToast({
  523. title: error
  524. })
  525. })
  526. },
  527. }
  528. }
  529. </script>
  530. <style lang="scss" scoped>
  531. page {
  532. padding-bottom: 50px;
  533. }
  534. .slot {
  535. margin-right: 24rpx;
  536. color: rgba(16, 16, 16, 1);
  537. }
  538. .main {
  539. margin: 24rpx;
  540. overflow: hidden;
  541. .headline {
  542. background: linear-gradient(90deg, rgba(120, 175, 247, 1) 0%, rgba(39, 116, 226, 1) 100%);
  543. color: #fff;
  544. display: flex;
  545. justify-content: space-between;
  546. align-items: center;
  547. padding: 24rpx;
  548. border-radius: 8px;
  549. .title-left {
  550. display: flex;
  551. align-items: center;
  552. font-size: 36rpx;
  553. .icon1 {
  554. width: 56rpx;
  555. height: 56rpx;
  556. margin-right: 8rpx;
  557. vertical-align: middle;
  558. }
  559. }
  560. .title-right {
  561. display: flex;
  562. font-size: 32rpx;
  563. line-height: 32rpx;
  564. .icon2 {
  565. width: 32rpx;
  566. height: 32rpx;
  567. margin-right: 8rpx;
  568. }
  569. }
  570. }
  571. .content {
  572. border-radius: 8px 8px 0 0;
  573. margin-top: -8rpx;
  574. z-index: 999;
  575. background-color: #fff;
  576. padding: 40rpx 32rpx;
  577. // 可用余额
  578. .balance {
  579. .balance-img{
  580. padding:0 40rpx;
  581. .Group911{
  582. width: 100%;
  583. }
  584. }
  585. .balanceMain{
  586. display: flex;
  587. height: 0;
  588. justify-content: space-around;
  589. .Group909{
  590. //width: 40rpx;
  591. width: 400rpx;
  592. height: 400rpx;
  593. position: absolute;
  594. top: calc(50vw + 40rpx);
  595. z-index: 8;
  596. }
  597. .balanceFlex2{
  598. z-index: 7;
  599. content: ' ';
  600. width: 200rpx; /* 宽度 */
  601. height: 200rpx; /* 高度 */
  602. background-color: white;
  603. border: 36rpx solid blue; /* 外圈颜色及宽度 */
  604. border-radius: 50%; /* 圆形 */
  605. position: absolute;
  606. top: calc(50vw + 140rpx);
  607. }
  608. }
  609. .balanceMain{
  610. display: flex;
  611. height: 0;
  612. justify-content: space-around;
  613. .balanceFlex{
  614. display: inline-flex;
  615. flex-direction: column;
  616. /* width: 100%; */
  617. align-items: center;
  618. position: relative;
  619. top: -140rpx;
  620. }
  621. .balance-left {
  622. color: rgb(48, 48, 48);
  623. font-size: 32rpx;
  624. //line-height: 40px;
  625. }
  626. .balance-right {
  627. color: rgb(48, 48, 48);
  628. font-size: 64rpx;
  629. font-weight: bold;
  630. }
  631. }
  632. }
  633. // 提示
  634. .hint {
  635. font-size: 24rpx;
  636. color: #1677FF;
  637. margin-top: 16rpx;
  638. text-align: right;
  639. padding-bottom: 32rpx;
  640. //border-bottom: 1px solid rgba(244, 244, 244, 1);
  641. }
  642. .hint2 {
  643. color: #E60012;
  644. }
  645. // 租户信息
  646. .infos {
  647. //border-bottom: 1px solid rgba(244, 244, 244, 1);
  648. padding-bottom: 24rpx;
  649. .item {
  650. display: flex;
  651. justify-content: space-between;
  652. margin-bottom: 24rpx;
  653. .item-title {
  654. color: rgb(119, 119, 119);
  655. white-space: pre;
  656. }
  657. .item-value {
  658. color: rgb(48, 48, 48);
  659. }
  660. }
  661. }
  662. // 缴费金额
  663. .payment-amount {
  664. margin-top: 32rpx;
  665. .title {
  666. color: rgb(48, 48, 48);
  667. font-size: 36rpx;
  668. display: flex;
  669. justify-content: space-between;
  670. align-items: center;
  671. }
  672. .amount-options {
  673. margin-top: 32rpx;
  674. display: flex;
  675. flex-wrap: wrap;
  676. justify-content: space-between;
  677. .options-item {
  678. width: 200rpx;
  679. height: 80rpx;
  680. line-height: 80rpx;
  681. border-radius: 4px;
  682. text-align: center;
  683. background-color: rgba(242, 242, 242, 1);
  684. color: rgba(16, 16, 16, 1);
  685. font-size: 32rpx;
  686. margin-bottom: 20rpx;
  687. }
  688. .chosen {
  689. background-color: rgba(22, 119, 255, 1);
  690. color: rgba(255, 255, 255, 1);
  691. }
  692. }
  693. }
  694. // 输入金额
  695. .input-amount {
  696. margin-top: 24rpx;
  697. display: flex;
  698. font-size: 48rpx;
  699. height: 100rpx;
  700. line-height: 100rpx;
  701. border-bottom: 1px solid rgba(242,242,242,1);
  702. .symbol {
  703. margin-right: 32rpx;
  704. }
  705. .input {
  706. height: 100rpx;
  707. font-size: 40rpx;
  708. }
  709. ::v-deep.uni-input-placeholder {
  710. color: rgba(204, 204, 204, 1);
  711. }
  712. }
  713. // 支付方式
  714. .payment-way {
  715. margin-top: 24rpx;
  716. .title {
  717. color: rgb(48, 48, 48);
  718. font-size: 36rpx;
  719. }
  720. .way {
  721. margin-top: 24rpx;
  722. .way-item {
  723. display: flex;
  724. justify-content: space-between;
  725. align-items: center;
  726. margin-bottom: 24rpx;
  727. .way-name {
  728. display: flex;
  729. align-items: center;
  730. color: rgb(51, 51, 51);
  731. .text{
  732. font-size: 36rpx;
  733. }
  734. .img {
  735. width: 48rpx;
  736. height: 48rpx;
  737. vertical-align: middle;
  738. margin-right: 16rpx;
  739. margin-left: -3rpx;
  740. }
  741. .img2{
  742. width: 40rpx;
  743. height: 40rpx;
  744. vertical-align: middle;
  745. margin-right: 20rpx;
  746. }
  747. .img3{
  748. background-color: #1677FF;
  749. width: 40rpx;
  750. height: 40rpx;
  751. vertical-align: middle;
  752. margin-right: 20rpx;
  753. border-radius: 999px;
  754. }
  755. }
  756. ::v-deep.uni-radio-input {
  757. width: 40rpx;
  758. height: 40rpx;
  759. }
  760. }
  761. }
  762. }
  763. // 按钮
  764. .btn {
  765. height: 96rpx;
  766. border-radius: 50px;
  767. background-color: rgba(51, 133, 255, 1);
  768. color: rgba(255, 255, 255, 1);
  769. font-size: 36rpx;
  770. margin-top: 48rpx;
  771. }
  772. }
  773. }
  774. // 对公转账弹窗
  775. .modal-content {
  776. padding: 40rpx 0;
  777. .title-icon {
  778. text-align: center;
  779. }
  780. .img {
  781. width: 96rpx;
  782. height: 96rpx;
  783. }
  784. .title {
  785. text-align: center;
  786. color: rgba(16, 16, 16, 1);
  787. font-size: 36rpx;
  788. font-weight: 600;
  789. margin-top: 8rpx;
  790. }
  791. .infos-group {
  792. margin: 40rpx 32rpx 0;
  793. .item {
  794. display: flex;
  795. justify-content: space-between;
  796. margin-bottom: 16rpx;
  797. .item-title {
  798. color: rgba(119, 119, 119, 1);
  799. font-size: 32rpx;
  800. white-space: pre;
  801. }
  802. .item-value {
  803. color: rgba(51, 51, 51, 1);
  804. font-size: 32rpx;
  805. margin-left: 16rpx;
  806. }
  807. }
  808. }
  809. }
  810. </style>