openMember.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942
  1. <template>
  2. <view class="conter">
  3. <view class="top">
  4. <view class="bg">
  5. <view class="bg-item">
  6. </view>
  7. </view>
  8. <view class="card">
  9. <view class="opennow">
  10. 立即开通
  11. </view>
  12. <view class="card-top flex">
  13. <view class="avtur"><image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image></view>
  14. <view class="main">
  15. <view class="name">{{ userInfo.nickname }}</view>
  16. <view class="tip" v-if="userInfo.pay_valid_time == null">尚未开通会员</view>
  17. <view class="tip" v-else>
  18. <text v-if="type">离会员到期仅剩{{ day }}天</text>
  19. <text else>会员已过期</text>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="bottom flex" style="z-index: 9; margin-top: 94rpx;">
  24. <view class="font">
  25. <view class="font-title">会员卡</view>
  26. <view class="font-tip">¥500/永久 终身付费会员</view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="vip">
  32. <view class="system-title">
  33. <view class="img" style="margin-right: 45rpx;"><image class="img" src="../../static/img/vip-left.png"></image></view>
  34. <view class="title">会员特权</view>
  35. <view class="img" style="margin-left: 45rpx;"><image class="img" src="../../static/img/vip-right.png"></image></view>
  36. </view>
  37. <view class="item-box flex">
  38. <view class="item" v-for="(item, index) in viplist" :key="index">
  39. <image :src="item.pic" mode=""></image>
  40. <view class="item-title">{{ item.title }}</view>
  41. <view class="item-tip">{{ item.tip }}</view>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="vip">
  46. <view class="system-title">
  47. <view class="img" style="margin-right: 45rpx;"><image class="img" src="../../static/img/vip-left.png"></image></view>
  48. <view class="title">会员特权</view>
  49. <view class="img" style="margin-left: 45rpx;"><image class="img" src="../../static/img/vip-right.png"></image></view>
  50. </view>
  51. <view class="money-box flex">
  52. <view class="money" v-for="(item, index) in payList" @click="changevip(item, index)" :class="{ current: index == choose }">
  53. <view class="money-name">{{item.name}}</view>
  54. <view class="now-money">
  55. <text>{{(item.money*1)}}</text>
  56. </view>
  57. <view class="bf-money">¥{{item.money*1.1}}</view>
  58. <view class="money-tip" :class="{ moneyc: index == choose }">
  59. <image src="../../static/img/good.png" mode=""></image>
  60. 专属折扣
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. <view class="" @click="chooseStore">
  66. 选择门店: {{storeInfo.name|| '请选择门店'}}
  67. </view>
  68. <view class="box-buttom">
  69. <view class="price-left">
  70. <text class="entrepreneurship">
  71. 开通前请阅读
  72. <text>《会员服务协议》</text>
  73. </text>
  74. </view>
  75. <view class="price-right" @click="submit">马上开通</view>
  76. </view>
  77. <uni-popup ref="popupPay" type="bottom">
  78. <view class="popup-box">
  79. <view class="popup-pay">
  80. <view class="paybox-top flex">
  81. <view class="type">选择支付方式</view>
  82. <view class="image" @click="close"><image src="https://zhibo.liuniu946.com/img/x.png" mode="aspectFill"></image></view>
  83. </view>
  84. <!-- #ifndef APP-PLUS -->
  85. <view class="paybox-main flex">
  86. <view class="zftype flex">
  87. <image src="https://zhibo.liuniu946.com/img/weixin.png" mode="aspectFill"></image>
  88. <view class="zf">微信支付</view>
  89. </view>
  90. <label class="radio1" @click="changePayType(1)"><radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#52C696"></radio></label>
  91. </view>
  92. <!-- #endif -->
  93. <!-- #ifdef APP-PLUS -->
  94. <view class="paybox-main flex">
  95. <view class="zftype flex">
  96. <view class="icon iconfont iconzhifubao"></view>
  97. <view class="zf">支付宝支付</view>
  98. </view>
  99. <label class="radio1" @click="changePayType(3)"><radio style="transform:scale(0.7)" value="" :checked="payType == 3" color="#52C696"></radio></label>
  100. </view>
  101. <!-- #endif -->
  102. <view class="paybox-main flex">
  103. <view class="zftype flex">
  104. <image src="https://zhibo.liuniu946.com/img/yue.png" mode="aspectFill"></image>
  105. <view class="zf">余额支付</view>
  106. </view>
  107. <label class="radio" @click="changePayType(2)">
  108. <radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2" color="#52C696"></radio>
  109. </label>
  110. </view>
  111. </view>
  112. <view class="buttom flex">
  113. <view class="heji">
  114. 合计:
  115. <text>
  116. <text class="money">{{ money }}</text>
  117. </text>
  118. </view>
  119. <view class="zhifu" @click="readyPay()">立即支付</view>
  120. </view>
  121. </view>
  122. </uni-popup>
  123. </view>
  124. </template>
  125. <script>
  126. import { mapState, mapMutations } from 'vuex';
  127. import { becomeVip, getVip, setUserRed, claseauto } from '@/api/user.js';
  128. import { getUserInfo } from '@/api/user.js';
  129. import { timeComputed } from '@/utils/rocessor.js';
  130. // // #ifdef H5
  131. // import weixinObj from '@/plugin/jweixin-module/index.js';
  132. // // #endif
  133. export default {
  134. computed: {
  135. ...mapState(['weichatObj']),
  136. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  137. },
  138. onLoad(option) {
  139. this.state = option.state;
  140. this.getVip();
  141. this.checkedAuto = +this.userInfo.red_packet == 0 ? false : true;
  142. if (this.userInfo.pay_valid_time != null) {
  143. let TimeObj = timeComputed(this.userInfo.pay_valid_time * 1000);
  144. this.type = TimeObj.type == 0 ? true : false;
  145. this.day = TimeObj.day;
  146. }
  147. },
  148. data() {
  149. return {
  150. storeInfo: {
  151. name: ''
  152. },
  153. checkedZdLoding: false, //自动拼团是否加载中
  154. checkedAutoZd: 1, //开启关闭自动拼团
  155. timeEnd: true, //判断会员是否超时
  156. viplist: [
  157. {
  158. pic: '../../static/img/yjjl.png',
  159. title: '佣金奖励',
  160. tip: '更多佣金奖励'
  161. },
  162. {
  163. pic: '../../static/img/zszk.png',
  164. title: '专属折扣',
  165. tip: '优享会员折扣'
  166. },
  167. {
  168. pic: '../../static/img/tdjl.png',
  169. title: '团队奖励',
  170. tip: '更多团队奖励'
  171. }
  172. ],
  173. state: '',
  174. // #ifndef APP-PLUS
  175. payType: 1,
  176. payName: 'weixin',
  177. // #endif
  178. // #ifdef APP-PLUS
  179. payType: 2,
  180. payName: 'yue',
  181. // #endif
  182. day: '', //会员的天数
  183. name: '',
  184. payList: [],
  185. froms: '',
  186. money: 0,
  187. explain: '',
  188. now_money: '', // 当前余额
  189. payLoding: false, //判断是否支付中
  190. choose: 0,
  191. level_id: '',
  192. checkedAuto: false, //是否开启自动领红包
  193. checkedLoding: false ,//请求自动加载设置保存中
  194. store: {
  195. name: ''
  196. }
  197. };
  198. },
  199. methods: {
  200. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  201. // 开启关闭自动拼团
  202. autoOut(e) {
  203. uni.showLoading({
  204. title: '关闭中...',
  205. mask: true
  206. });
  207. claseauto()
  208. .then(e => {
  209. uni.hideLoading();
  210. uni.showToast({
  211. title: '成功关闭!'
  212. });
  213. })
  214. .catch(e => {
  215. uni.hideLoading();
  216. });
  217. }, //自动拼团是否加载中
  218. // 获取vip等级
  219. getVip() {
  220. getVip({}).then(({ data }) => {
  221. console.log(data)
  222. this.payList = data;
  223. // 设置默认选中的对象
  224. this.level_id = data[0].id;
  225. this.money = data[0].money;
  226. console.log(this.payList);
  227. });
  228. },
  229. // 开启关闭自动加载
  230. changeAuto(e) {
  231. console.log(e);
  232. if (this.checkedLoding) {
  233. return;
  234. }
  235. this.checkedLoding = true;
  236. setUserRed({
  237. red_packet: e
  238. })
  239. .then(e => {
  240. uni.showToast({
  241. title: '设置成功!'
  242. });
  243. this.checkedLoding = false;
  244. })
  245. .catch(e => {
  246. this.checkedAuto = false;
  247. this.checkedLoding = false;
  248. });
  249. },
  250. submit() {
  251. // if (this.money == 0) {
  252. // uni.showModal({
  253. // title: '提示',
  254. // content: '请选择要开通的会员'
  255. // });
  256. // } else {
  257. // }
  258. console.log('打开支付弹窗');
  259. this.$refs.popupPay.open();
  260. },
  261. close() {
  262. this.$refs.popupPay.close();
  263. },
  264. changePayType(type) {
  265. this.payType = type;
  266. console.log('this.payType', this.payType);
  267. if (this.payType == 1) {
  268. this.payName = 'weixin';
  269. console.log('weixin', this.payName);
  270. }
  271. if (this.payType == 2) {
  272. this.payName = 'yue';
  273. console.log('yue', this.payName);
  274. }
  275. if (this.payType == 3) {
  276. this.payName = 'ali';
  277. console.log('ali', this.payName);
  278. }
  279. },
  280. readyPay() {
  281. // this.$refs.popup.open();
  282. this.pay();
  283. },
  284. changevip(item, index) {
  285. this.level_id = item.id;
  286. this.choose = index;
  287. console.log(this.level_id);
  288. this.money = item.money;
  289. },
  290. getUserInfoB() {
  291. getUserInfo({})
  292. .then(({ data }) => {
  293. this.setUserInfo(data);
  294. if (this.state == 1) {
  295. uni.navigateTo({
  296. url: '/pages/vip/success'
  297. });
  298. } else {
  299. uni.navigateBack();
  300. }
  301. })
  302. .catch(e => {
  303. console.log(e);
  304. });
  305. },
  306. // 选择门店
  307. chooseStore() {
  308. uni.navigateTo({
  309. url: '/pages/shoping/list?type=3'
  310. })
  311. },
  312. pay() {
  313. let obj = this;
  314. console.log('点击');
  315. try {
  316. let obj = this;
  317. obj.payLoding = true;
  318. // #ifdef H5
  319. // 获取当前是否为微信浏览器
  320. obj.froms = uni.getStorageSync('weichatBrowser') || '';
  321. // #endif
  322. uni.showLoading({
  323. title: '支付中',
  324. mask: true
  325. });
  326. let data = {
  327. store_id: obj.storeInfo.id,
  328. pay_type: this.payName,
  329. level_id: obj.level_id,
  330. // #ifdef H5
  331. from: obj.froms ? 'weixin' : 'H5', //来源
  332. // #endif
  333. // #ifdef MP-WEIXIN
  334. from: 'routine', //来源
  335. // #endif
  336. // #ifdef APP-PLUS
  337. from: 'app' //来源
  338. // #endif
  339. };
  340. console.log(data, '传值');
  341. becomeVip(data).then(({ data }) => {
  342. console.log('fufei', data);
  343. uni.hideLoading();
  344. if (obj.payName == 'ali') {
  345. const url = data.data;
  346. console.log(url, 'url');
  347. uni.requestPayment({
  348. provider: 'alipay',
  349. orderInfo: url,
  350. success: res => {
  351. console.log(res);
  352. uni.showToast({
  353. title: '充值成功',
  354. duration: 2000
  355. });
  356. },
  357. fail: e => {
  358. console.log(e);
  359. },
  360. complete: () => {}
  361. });
  362. obj.payLoding = false;
  363. }
  364. if (data.status == 'PAY_ERROR') {
  365. console.log(data);
  366. }
  367. if (data.status == 'SUCCESS') {
  368. obj.$refs.popupPay.close();
  369. obj.getUserInfoB();
  370. // getUserInfo({})
  371. // .then(({ data }) => {
  372. // obj.setUserInfo(data);
  373. // if (obj.state == 1) {
  374. // uni.navigateTo({
  375. // url: '/pages/vip/success'
  376. // });
  377. // } else {
  378. // uni.navigateBack();
  379. // }
  380. // })
  381. // .catch(e => {
  382. // console.log(e);
  383. // });
  384. }
  385. console.log('-----', data);
  386. let da = data.result.jsConfig;
  387. if (obj.payName == 'weixin' || obj.payName == 'routine') {
  388. // let da = data.result.jsConfig;
  389. console.log('--da--', da);
  390. let data = {
  391. // #ifdef H5
  392. timestamp: da.timestamp,
  393. // #endif
  394. // #ifdef MP
  395. timeStamp: da.timestamp,
  396. // #endif
  397. nonceStr: da.nonceStr,
  398. package: da.package,
  399. signType: da.signType,
  400. paySign: da.paySign,
  401. success: function(res) {
  402. console.log(res);
  403. obj.getUserInfoB();
  404. // getUserInfo({})
  405. // .then(({ data }) => {
  406. // obj.setUserInfo(data);
  407. // if (obj.state == 1) {
  408. // uni.navigateTo({
  409. // url: '/pages/vip/success'
  410. // });
  411. // } else {
  412. // uni.navigateBack();
  413. // }
  414. // })
  415. // .catch(e => {
  416. // console.log(e);
  417. // });
  418. },
  419. fail: e => {
  420. console.log(e);
  421. }
  422. };
  423. console.log('--data--', data);
  424. // #ifdef MP
  425. wx.requestPayment(data);
  426. // #endif
  427. // #ifdef H5
  428. if (obj.payName == 'weixin') {
  429. weichatObj.chooseWXPay(data);
  430. }
  431. // #endif
  432. }
  433. uni.hideLoading();
  434. // #ifdef H5
  435. if (data.status == 'PAY_ERROR') {
  436. console.log(data);
  437. }
  438. if (data.status == 'SUCCESS') {
  439. obj.$refs.popupPay.close();
  440. obj.getUserInfoB();
  441. // getUserInfo({})
  442. // .then(({ data }) => {
  443. // obj.setUserInfo(data);
  444. // if (obj.state == 1) {
  445. // uni.navigateTo({
  446. // url: '/pages/vip/success'
  447. // });
  448. // } else {
  449. // uni.navigateBack();
  450. // }
  451. // })
  452. // .catch(e => {
  453. // console.log(e);
  454. // });
  455. }
  456. // #endif
  457. });
  458. } catch (e) {
  459. console.log('fufiecw', e);
  460. //TODO handle the exception
  461. }
  462. }
  463. }
  464. };
  465. </script>
  466. <style lang="scss">
  467. .outBottom {
  468. width: 190rpx;
  469. height: 69rpx;
  470. background: #3a3a3b;
  471. border-radius: 35rpx;
  472. color: #ffffff;
  473. line-height: 69rpx;
  474. text-align: center;
  475. font-size: 27rpx;
  476. font-family: PingFang SC;
  477. font-weight: 500;
  478. }
  479. .top {
  480. width: 750rpx;
  481. background-color: #fff;
  482. padding-top: 45rpx;
  483. padding-bottom: 45rpx;
  484. // height: 626rpx;
  485. .bg {
  486. position: absolute;
  487. top: 0;
  488. left: 0;
  489. right: 0;
  490. width: 750rpx;
  491. height: 200rpx;
  492. overflow: hidden;
  493. .bg-item {
  494. width: 750rpx;
  495. height: 145rpx;
  496. background-color: #363533;
  497. border-radius:0 0 25% 25%;
  498. // position: absolute;
  499. // bottom: 0;
  500. // top: -2200rpx;
  501. // left: 0;
  502. // right: 0;
  503. // margin:0 auto;
  504. }
  505. }
  506. .title {
  507. position: relative;
  508. z-index: 10;
  509. width: 100%;
  510. padding-top: 20rpx;
  511. text-align: center;
  512. font-size: 34rpx;
  513. font-family: PingFang SC;
  514. font-weight: bold;
  515. color: #333333;
  516. }
  517. .card {
  518. position: relative;
  519. margin: 0 auto 0;
  520. z-index: 10;
  521. width: 655rpx;
  522. // height: 324rpx;
  523. background: linear-gradient(225deg, #ffeed2 0%, #fed591 100%);
  524. border-radius: 24rpx;
  525. padding: 28rpx 25rpx 30rpx 36rpx;
  526. .opennow {
  527. width: 190rpx;
  528. line-height: 69rpx;
  529. background: #3A3A3B;
  530. border-radius: 35rpx;
  531. position: absolute;
  532. top: 39rpx;
  533. right: 25rpx;
  534. font-size: 30rpx;
  535. font-family: PingFang SC;
  536. font-weight: 500;
  537. color: #FFFFFF;
  538. text-align: center;
  539. }
  540. .card-top {
  541. justify-content: flex-start;
  542. .avtur {
  543. width: 90rpx;
  544. height: 90rpx;
  545. border-radius: 50%;
  546. margin-right: 10rpx;
  547. image {
  548. background-color: #eee;
  549. width: 100%;
  550. height: 100%;
  551. border-radius: 50%;
  552. }
  553. }
  554. .name {
  555. font-size: 30rpx;
  556. font-family: PingFang SC;
  557. font-weight: 500;
  558. color: #333333;
  559. }
  560. .tip {
  561. font-size: 20rpx;
  562. font-family: PingFang SC;
  563. font-weight: 500;
  564. color: #333333;
  565. opacity: 0.52;
  566. }
  567. }
  568. .btn {
  569. position: absolute;
  570. top: 40rpx;
  571. right: 24rpx;
  572. width: 190rpx;
  573. height: 69rpx;
  574. background: #3a3a3b;
  575. border-radius: 35rpx;
  576. font-size: 30rpx;
  577. font-family: PingFang SC;
  578. font-weight: 500;
  579. color: #ffffff;
  580. line-height: 69rpx;
  581. text-align: center;
  582. }
  583. }
  584. .bottom {
  585. margin-top: 40rpx;
  586. .font-title {
  587. font-size: 30rpx;
  588. font-family: PingFang SC;
  589. font-weight: bold;
  590. color: #333333;
  591. }
  592. .font-tip {
  593. font-size: 22rpx;
  594. font-family: PingFang SC;
  595. font-weight: 500;
  596. color: #343434;
  597. }
  598. }
  599. .turn {
  600. width: 108rpx;
  601. height: 51rpx;
  602. background: #ffffff;
  603. border-radius: 26rpx;
  604. padding: 10rpx;
  605. font-size: 30rpx;
  606. font-family: PingFang SC;
  607. font-weight: bold;
  608. color: #333333;
  609. display: flex;
  610. align-items: center;
  611. .yuan {
  612. display: inline-block;
  613. width: 35rpx;
  614. height: 35rpx;
  615. background: linear-gradient(112deg, #ffe5bb, #fed591);
  616. border-radius: 50%;
  617. margin-right: 12rpx;
  618. }
  619. }
  620. }
  621. .vip {
  622. margin-top: 20rpx;
  623. background: #ffffff;
  624. padding-bottom: 54rpx;
  625. .system-title {
  626. display: flex;
  627. justify-content: center;
  628. align-items: center;
  629. padding-top: 40rpx;
  630. .title {
  631. font-size: 32rpx;
  632. font-family: PingFang SC;
  633. font-weight: bold;
  634. color: #1d2023;
  635. }
  636. .img {
  637. width: 170rpx;
  638. height: 2rpx;
  639. display: block;
  640. }
  641. }
  642. .item-box {
  643. margin-top: 40rpx;
  644. justify-content: center;
  645. align-items: center;
  646. .item {
  647. flex: 1;
  648. display: flex;
  649. flex-direction: column;
  650. align-items: center;
  651. image {
  652. width: 100rpx;
  653. height: 100rpx;
  654. }
  655. .item-title {
  656. margin-top: 14rpx;
  657. font-size: 24rpx;
  658. font-family: PingFang SC;
  659. font-weight: 500;
  660. color: #333333;
  661. }
  662. .item-tip {
  663. margin-top: 10rpx;
  664. font-size: 20rpx;
  665. font-family: PingFang SC;
  666. font-weight: 500;
  667. color: #999999;
  668. }
  669. }
  670. }
  671. .money-box {
  672. margin-top: 40rpx;
  673. justify-content: center;
  674. align-items: center;
  675. padding: 0 47rpx 50rpx 25rpx;
  676. .current {
  677. border: 1rpx solid #fed591 !important;
  678. background: #fff8ec !important;
  679. }
  680. .money {
  681. margin-left: 22rpx;
  682. flex: 1;
  683. display: flex;
  684. flex-direction: column;
  685. align-items: center;
  686. width: 204rpx;
  687. height: 296rpx;
  688. background: #f5f5f5;
  689. border: 1rpx solid #ffffff;
  690. border-radius: 20rpx;
  691. position: relative;
  692. .tj {
  693. position: absolute;
  694. top: 0;
  695. left: 0;
  696. width: 90rpx;
  697. height: 44rpx;
  698. text-align: center;
  699. line-height: 44rpx;
  700. font-size: 25rpx;
  701. font-family: PingFang SC;
  702. font-weight: 500;
  703. color: #ffffff;
  704. .tj-bg {
  705. width: 90rpx;
  706. height: 44rpx;
  707. }
  708. text {
  709. display: inline-block;
  710. position: relative;
  711. top: -56rpx;
  712. }
  713. }
  714. .money-name {
  715. margin-top: 58rpx;
  716. font-size: 33rpx;
  717. font-family: PingFang SC;
  718. font-weight: 500;
  719. color: #644931;
  720. }
  721. .now-money {
  722. font-size: 30rpx;
  723. font-family: FZCuHeiSongS-B-GB;
  724. font-weight: 400;
  725. color: #f7cf9c;
  726. text {
  727. font-size: 50rpx;
  728. }
  729. }
  730. .bf-money {
  731. font-size: 33rpx;
  732. font-family: PingFang SC;
  733. font-weight: 500;
  734. text-decoration: line-through;
  735. color: #9a5a12;
  736. opacity: 0.35;
  737. }
  738. .moneyc {
  739. background: #f7cf9c !important;
  740. color: #ffffff !important;
  741. }
  742. .money-tip {
  743. margin-top: 10rpx;
  744. width: 158rpx;
  745. height: 45rpx;
  746. background: #f5f5f5;
  747. border: 1px solid #f7cf9c;
  748. border-radius: 23rpx;
  749. padding: 5rpx 10rpx;
  750. font-size: 25rpx;
  751. font-family: PingFang SC;
  752. font-weight: 500;
  753. color: #f7cf9c;
  754. image {
  755. position: relative;
  756. top: 2rpx;
  757. width: 23rpx;
  758. height: 23rpx;
  759. }
  760. }
  761. }
  762. }
  763. }
  764. .box-buttom {
  765. width: 750rpx;
  766. height: 98rpx;
  767. // position: absolute;
  768. // buttom:0;
  769. position: fixed;
  770. bottom: 0;
  771. right: 0;
  772. // position: absolute;
  773. // buttom:100rpx;
  774. display: flex;
  775. align-items: center;
  776. background: #34332f;
  777. .price-left {
  778. display: flex;
  779. .entrepreneurship {
  780. font-size: 24rpx;
  781. font-weight: 500;
  782. color: #bbbbbb;
  783. margin-left: 16rpx;
  784. text {
  785. font-size: 30rpx;
  786. color: #ffffff;
  787. }
  788. }
  789. }
  790. .price-right {
  791. position: absolute;
  792. bottom: 0;
  793. right: 0;
  794. // position: fixed;
  795. // buttom: 0;
  796. // right: 0;
  797. width: 280rpx;
  798. height: 108rpx;
  799. background: #fed591;
  800. font-size: 36rpx;
  801. font-weight: bold;
  802. color: #000000;
  803. display: flex;
  804. justify-content: center;
  805. align-items: center;
  806. }
  807. .price-right1 {
  808. position: absolute;
  809. bottom: 0;
  810. right: 0;
  811. // position: fixed;
  812. // buttom: 0;
  813. // right: 0;
  814. width: 280rpx;
  815. height: 108rpx;
  816. background: #b5b5b5;
  817. font-size: 36rpx;
  818. font-weight: bold;
  819. color: #ffffff;
  820. display: flex;
  821. justify-content: center;
  822. align-items: center;
  823. }
  824. }
  825. .popup-box {
  826. width: 100%;
  827. height: 450rpx;
  828. background: #ffffff;
  829. }
  830. .popup-pay {
  831. position: relative;
  832. justify-content: space-between;
  833. padding: 0rpx 25rpx 32rpx 25rpx;
  834. .paybox-top {
  835. padding-top: 38rpx;
  836. width: 100%;
  837. .type {
  838. font-size: 28rpx;
  839. font-family: PingFang SC;
  840. font-weight: bold;
  841. color: #333333;
  842. }
  843. .image {
  844. padding-right: 24rpx;
  845. padding-bottom: 10rpx;
  846. image {
  847. width: 16rpx;
  848. height: 16rpx;
  849. }
  850. }
  851. }
  852. .paybox-main {
  853. width: 100%;
  854. margin-top: 54rpx;
  855. .zftype {
  856. padding-left: 5rpx;
  857. image {
  858. width: 38rpx;
  859. height: 40rpx;
  860. }
  861. .zf {
  862. padding-left: 18rpx;
  863. font-size: 28rpx;
  864. font-family: PingFang SC;
  865. font-weight: 400;
  866. color: #3f454b;
  867. }
  868. }
  869. }
  870. }
  871. .buttom {
  872. width: 100%;
  873. height: 113rpx;
  874. padding-top: 20rpx;
  875. align-items: center;
  876. .heji {
  877. height: 100%;
  878. width: 50%;
  879. padding-left: 23rpx;
  880. padding-top: 20rpx;
  881. font-size: 28rpx;
  882. font-family: PingFang SC;
  883. font-weight: 400;
  884. color: #3f454b;
  885. text {
  886. font-size: 24rpx;
  887. font-family: PingFang SC;
  888. font-weight: bold;
  889. color: #ff0000;
  890. .money {
  891. font-size: 36rpx;
  892. }
  893. }
  894. }
  895. .zhifu {
  896. width: 50%;
  897. height: 92rpx;
  898. background: #52C696;
  899. text-align: center;
  900. line-height: 92rpx;
  901. font-size: 32rpx;
  902. font-family: PingFang SC;
  903. font-weight: bold;
  904. color: #ffffff;
  905. }
  906. }
  907. .ling-box {
  908. position: relative;
  909. z-index: 10;
  910. width: 654rpx;
  911. height: auto;
  912. background: #fff8ec;
  913. border: 1px solid #fed591;
  914. border-radius: 24rpx;
  915. margin: 20rpx auto 0;
  916. padding: 20rpx 24rpx 15rpx 42rpx;
  917. .ling-title {
  918. font-size: 30rpx;
  919. font-family: PingFang SC;
  920. font-weight: bold;
  921. color: #644931;
  922. }
  923. .ling-tip {
  924. font-size: 22rpx;
  925. font-family: PingFang SC;
  926. font-weight: 500;
  927. color: #644931;
  928. line-height: 24px;
  929. opacity: 0.67;
  930. }
  931. }
  932. </style>