openMember.vue 20 KB

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