openMember.vue 21 KB

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