openMember.vue 21 KB

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