user.vue 23 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049
  1. <template>
  2. <view class="container">
  3. <view class="vheigh"></view>
  4. <view class="top-image">
  5. <image src="../../static/icon/user-top.png" mode=""></image>
  6. </view>
  7. <view class="" style="height: 100rpx;"></view>
  8. <view class="user-box">
  9. <view class="user-info flex">
  10. <image class="avatar" :src="userInfo.avatar" mode="" v-if="userInfo.avatar"
  11. @click="navTo('/pages/set/userinfo')"></image>
  12. <image class="avatar" src="../../static/error/missing-face.png" mode="" v-else
  13. @click="navTo('/pages/set/userinfo')"></image>
  14. <view class="user-name-id">
  15. <view class="user-name clamp2">{{ userInfo.nickname || '游客'}}</view>
  16. <view class="user-id" v-if="userInfo && userInfo.uid">
  17. UID: {{userInfo.uid}}
  18. </view>
  19. <view class="user-shop flex" v-if="userInfo.uid">
  20. <view class="user-shop-item" v-if="userInfo.level> 0 " style="width: 180rpx;">
  21. <image class="user-shop-icon" :src="showLevel(userInfo.level)" mode=""
  22. style="width: 180rpx;"></image>
  23. <!-- <view class="user-shopname" style="padding-left: 70rpx;">
  24. {{userInfo.level_name}}
  25. </view> -->
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="user-money flex">
  31. <view class="user-money-item" @click="navTo('/pages/user/yue')">
  32. <view class="user-money-num">{{ userInfo.now_money*1 || 0 }}</view>
  33. <view class="user-money-font"> 我的余额</view>
  34. </view>
  35. <view class="user-xian"></view>
  36. <view class="user-money-item" @click="navTo('/pages/user/award')">
  37. <view class="user-money-num">{{ userInfo.brokerage_price*1 || 0 }}</view>
  38. <view class="user-money-font">我的佣金</view>
  39. </view>
  40. <view class="user-xian"></view>
  41. <view class="user-money-item" @click="navTo('/pages/user/jf')">
  42. <view class="user-money-num">{{ userInfo.contribute*1 || 0 }}</view>
  43. <view class="user-money-font">我的贡献值</view>
  44. </view>
  45. <template v-if="userInfo.uid && userInfo.adminid" @click="navTo('/pages/user/jf')">
  46. <!-- <template > -->
  47. <view class="user-xian"></view>
  48. <view class="user-money-item" @click="navTo('/pages/user/jhz')">
  49. <view class="user-money-num">{{ userInfo.month_performance || 0 }}</view>
  50. <view class="user-money-font">进货额</view>
  51. </view>
  52. </template>
  53. </view>
  54. </view>
  55. <!-- -->
  56. <view class="main-box">
  57. <view class="title flex" @click="navTo('/pages/order/order?state=0')">
  58. <view class="title-left">
  59. <view class="title-font">我的订单</view>
  60. </view>
  61. <image class="title-right" src="../../static/icon/back.png" mode=""></image>
  62. </view>
  63. <view class="main flex">
  64. <view class="oitem" @click="navTo('/pages/order/order?state=0')">
  65. <image class="oitem-image" src="../../static/icon/o1.png" mode=""></image>
  66. <view class="oitem-font">待付款</view>
  67. </view>
  68. <view class="oitem" @click="navTo('/pages/order/order?state=1')">
  69. <image class="oitem-image" src="../../static/icon/o2.png" mode=""></image>
  70. <view class="oitem-font">待发货</view>
  71. </view>
  72. <view class="oitem" @click="navTo('/pages/order/order?state=2')">
  73. <image class="oitem-image" src="../../static/icon/o3.png" mode=""></image>
  74. <view class="oitem-font">待收货</view>
  75. </view>
  76. <view class="oitem" @click="navTo('/pages/order/order?state=3')">
  77. <image class="oitem-image" src="../../static/icon/o4.png" mode=""></image>
  78. <view class="oitem-font">已完成</view>
  79. </view>
  80. </view>
  81. </view>
  82. <view class="user-list flex" @click="smsh" v-if="userInfo && userInfo.uid && userInfo.adminid">
  83. <image src="../../static/icon/scend.png" mode="" class="left-img"></image>
  84. <view class="">
  85. 扫码核销
  86. </view>
  87. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  88. </view>
  89. <view class="user-list flex" @click="gorz" v-if="userInfo && userInfo.uid && userInfo.is_real != 2">
  90. <image src="../../static/icon/u1.png" mode="" class="left-img"></image>
  91. <view class="">
  92. 实名认证
  93. </view>
  94. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  95. </view>
  96. <!-- <view class="user-list flex" @click="navTo('/pages/user/sqdl')">
  97. <image src="../../static/icon/u2.png" mode="" class="left-img"></image>
  98. <view class="">
  99. 银行卡绑定
  100. </view>
  101. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  102. </view> -->
  103. <view class="user-list flex" @click="navTo('/pages/user/userCard')">
  104. <image src="../../static/icon/u2.png" mode="" class="left-img"></image>
  105. <view class="">
  106. 我的卡券
  107. </view>
  108. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  109. </view>
  110. <view class="user-list flex" @click="navTo('/pages/user/sz')">
  111. <image src="../../static/icon/jf.png" mode="" class="left-img"></image>
  112. <view class="">
  113. 我的积分({{userInfo.integral || '0'}})
  114. </view>
  115. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  116. </view>
  117. <view class="user-list flex" @click="navTo('/pages/user/shareQrCode')">
  118. <image src="../../static/icon/u3.png" mode="" class="left-img"></image>
  119. <view class="">
  120. 推广海报
  121. </view>
  122. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  123. </view>
  124. <view class="user-list flex" @click="navTo('/pages/user/team')">
  125. <image src="../../static/icon/gn1.png" mode="" class="left-img"></image>
  126. <view class="">
  127. 我的推广
  128. </view>
  129. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  130. </view>
  131. <view class="user-list flex" @click="navTo('/pages/set/address')">
  132. <image src="../../static/icon/u4.png" mode="" class="left-img"></image>
  133. <view class="">
  134. 收货地址
  135. </view>
  136. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  137. </view>
  138. <view class="user-list flex" @click="openKf()">
  139. <image src="../../static/icon/u5.png" mode="" class="left-img"></image>
  140. <view class="">
  141. 客服
  142. </view>
  143. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  144. </view>
  145. <view class="user-list flex" @click="navTo('/pages/set/set')">
  146. <image src="../../static/icon/u6.png" mode="" class="left-img"></image>
  147. <view class="">
  148. 设置
  149. </view>
  150. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  151. </view>
  152. <view class="" style="height: 20rpx;">
  153. </view>
  154. <uni-popup ref="popupkf" type="center">
  155. <view class="popup-box">
  156. <view class="img">
  157. <image src="../../static/img/img009.png" mode=""></image>
  158. </view>
  159. <view class="mian">
  160. <view class="delivery">
  161. <view class="title">已经为您定制专属客服</view>
  162. <image src="../../static/img/img010.png" mode=""></image>
  163. </view>
  164. <view class="nocancel">客服VX:{{ text }}</view>
  165. <view class="comfirm-box">
  166. <view class="cancel" @click="cancel">取消</view>
  167. <view class="comfirm" @click="comfirm(text)">复制微信</view>
  168. </view>
  169. </view>
  170. </view>
  171. </uni-popup>
  172. <!-- 核销弹窗 -->
  173. <uni-popup ref="popuphx" class="agree-wrapper">
  174. <view class="hx-wrapper">
  175. <view class="hx-img">
  176. <image src="../../static/img/hxbg.png" mode=""></image>
  177. </view>
  178. <view class="hx-body">
  179. <view class="hx-title">
  180. 扫码核销
  181. </view>
  182. <input type="text" v-model="hxcode" placeholder="请输入核销码" placeholder-class="hx-placeholder" />
  183. <view class="hx-btn" @click="qhx">
  184. 立即核销
  185. </view>
  186. </view>
  187. <view class="hx-close" @click="close">
  188. <image src="../../static/icon/close.png" mode=""></image>
  189. </view>
  190. </view>
  191. </uni-popup>
  192. </view>
  193. </template>
  194. <script>
  195. import {
  196. orderVerific
  197. } from '@/api/index.js'
  198. import {
  199. toScanCode
  200. } from '@/components/scan.js'
  201. // #ifdef H5
  202. import weixinObj from "@/plugin/jweixin-module/index.js";
  203. // #endif
  204. import {
  205. mapState,
  206. mapMutations
  207. } from 'vuex';
  208. import uniList from '@/components/uni-list/uni-list.vue';
  209. import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
  210. import {
  211. orderData,
  212. getUserInfo,
  213. check,
  214. getLevelList,
  215. goHx
  216. } from '@/api/user.js';
  217. import {
  218. saveUrl,
  219. interceptor
  220. } from '@/utils/loginUtils.js';
  221. let startY = 0,
  222. moveY = 0,
  223. pageAtTop = true;
  224. export default {
  225. components: {
  226. uniList,
  227. uniListItem
  228. },
  229. data() {
  230. return {
  231. jhe: 0,//进货额
  232. listList: [], //等级列表
  233. current: 2,
  234. id: '', //是否已签到
  235. store_name: '',
  236. achievement: '',
  237. code: '',
  238. levelList: [],
  239. text: '', //客服微信
  240. hxcode: '', //核销码
  241. hxLoading: false
  242. };
  243. },
  244. onShow() {
  245. // 判断是否已经登录
  246. // if (this.hasLogin) {
  247. // this.loadBaseData();
  248. // }
  249. this.loadBaseData();
  250. },
  251. filters: {
  252. phone(e) {
  253. var subStr1 = e.substr(0, 3);
  254. var subStr2 = e.substr(e.length - 4, 4);
  255. var subStr = subStr1 + '...' + subStr2;
  256. e = subStr;
  257. return e;
  258. }
  259. },
  260. onReady() {
  261. // 初始化获取页面宽度
  262. uni.createSelectorQuery()
  263. .select('.container')
  264. .fields({
  265. size: true
  266. },
  267. data => {
  268. // 计算最多下拉的高度
  269. this.userDowm = Math.floor((data.width / 750) * 185);
  270. // 计算最大触发修改高度事件
  271. this.userMaxDowm = Math.floor((data.width / 750) * 250);
  272. }
  273. )
  274. .exec();
  275. },
  276. computed: {
  277. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  278. },
  279. methods: {
  280. ...mapMutations('user', ['setUserInfo']),
  281. getLevelList() {
  282. getLevelList().then(res => {
  283. console.log(res);
  284. this.listList = res.data.list
  285. })
  286. },
  287. showLevel(val) {
  288. let data = this.listList.find(item => item.grade == val)
  289. console.log(data);
  290. if (data) {
  291. return data.icon
  292. } else {
  293. return ''
  294. }
  295. },
  296. close() {
  297. this.hxcode = ''
  298. this.$refs.popuphx.close()
  299. },
  300. qhx() {
  301. let that = this
  302. if (that.hxLoading) {
  303. return
  304. }
  305. if (that.hxcode == '') {
  306. return that.$api.msg('请输入核销码')
  307. }
  308. that.hxLoading = true
  309. goHx({
  310. verify_code: that.hxcode,
  311. }).then(res => {
  312. uni.showToast({
  313. title: '核销成功',
  314. mask: true,
  315. duration: 1500
  316. });
  317. that.close()
  318. that.hxLoading = false
  319. }).catch(err => [
  320. that.hxLoading = false
  321. ])
  322. },
  323. // 扫码
  324. smsh() {
  325. let that = this
  326. // #ifdef H5
  327. try {
  328. weixinObj.scanQRCode({
  329. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  330. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  331. success: function(res) {
  332. that.hxcode = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
  333. that.$refs.popuphx.open()
  334. }
  335. });
  336. } catch (err) {
  337. that.$refs.popuphx.open()
  338. }
  339. // #endif
  340. // #ifndef H5
  341. uni.scanCode({
  342. success: (res) => {
  343. this.hxcode = res.result
  344. this.$refs.popuphx.open()
  345. }
  346. })
  347. // #endif
  348. },
  349. gorz() {
  350. if (!this.hasLogin) {
  351. saveUrl();
  352. interceptor();
  353. } else {
  354. // uni.navigateTo({
  355. // url
  356. // });
  357. if (this.userInfo.is_real == 0) {
  358. this.navTo('/pages/user/smrz')
  359. } else if (this.userInfo.is_real == 1) {
  360. uni.showModal({
  361. title: "提示",
  362. content: '您提交的资料正在审核中,请耐心等待审核'
  363. })
  364. }
  365. }
  366. },
  367. sqdl() {
  368. if (this.hasLogin) {
  369. if (this.userInfo.enroll_status == 1) {
  370. uni.showModal({
  371. title: "提示",
  372. content: '您提交的申请正在审核中,请耐心等待审核'
  373. })
  374. } else {
  375. this.navTo('/pages/user/sqdl')
  376. }
  377. } else {
  378. this.navTo('/pages/user/sqdl')
  379. }
  380. },
  381. sao() {
  382. let obj = this;
  383. // #ifndef H5
  384. uni.scanCode({
  385. success(e) {
  386. obj.code = e.result;
  387. obj.$refs.popuphx.open();
  388. console.log(obj.$refs.popuphx);
  389. }
  390. });
  391. // #endif
  392. },
  393. comfirm(text) {
  394. console.log(text);
  395. const result = this.uniCopy(text);
  396. if (result === false) {
  397. uni.showToast({
  398. title: '不支持'
  399. });
  400. } else {
  401. uni.showToast({
  402. title: '复制成功',
  403. icon: 'none'
  404. });
  405. }
  406. this.$refs.popupkf.close();
  407. },
  408. uniCopy(content) {
  409. /**
  410. * 小程序端 和 app端的复制逻辑
  411. */
  412. //#ifndef H5
  413. uni.setClipboardData({
  414. data: content,
  415. success: function() {
  416. console.log('success');
  417. return true;
  418. }
  419. });
  420. //#endif
  421. /**
  422. * H5端的复制逻辑
  423. */
  424. // #ifdef H5
  425. if (!document.queryCommandSupported('copy')) {
  426. //为了兼容有些浏览器 queryCommandSupported 的判断
  427. // 不支持
  428. return false;
  429. }
  430. let textarea = document.createElement('textarea');
  431. textarea.value = content;
  432. textarea.readOnly = 'readOnly';
  433. document.body.appendChild(textarea);
  434. textarea.select(); // 选择对象
  435. textarea.setSelectionRange(0, content.length); //核心
  436. let result = document.execCommand('copy'); // 执行浏览器复制命令
  437. textarea.remove();
  438. return result;
  439. // #endif
  440. },
  441. // 加载初始数据
  442. loadBaseData() {
  443. const obj = this
  444. getUserInfo({})
  445. .then(({
  446. data
  447. }) => {
  448. obj.setUserInfo(data);
  449. obj.getLevelList()
  450. })
  451. .catch(e => {
  452. console.log(e);
  453. });
  454. },
  455. /**
  456. * 统一跳转接口,拦截未登录路由
  457. * navigator标签现在默认没有转场动画,所以用view
  458. */
  459. navTo(url) {
  460. console.log(url);
  461. if (!this.hasLogin) {
  462. // 保存地址
  463. saveUrl();
  464. // 登录拦截
  465. interceptor();
  466. } else {
  467. uni.navigateTo({
  468. url
  469. });
  470. }
  471. },
  472. close() {
  473. this.$refs.popuphx.close();
  474. this.code = '';
  475. },
  476. // 打开客服
  477. openKf() {
  478. this.$refs.popupkf.open();
  479. },
  480. // 关闭客服
  481. cancel() {
  482. this.$refs.popupkf.close();
  483. },
  484. // 打开绑定
  485. open() {
  486. this.$refs.gspass.open();
  487. },
  488. cast() {
  489. set_waiter({
  490. uid: this.id
  491. })
  492. .then(e => {
  493. this.$api.msg('绑定成功');
  494. this.$refs.gspass.close();
  495. this.id = '';
  496. })
  497. .catch(err => {
  498. this.$refs.gspass.close();
  499. this.id = '';
  500. });
  501. },
  502. cancelpass() {
  503. this.$refs.gspass.close();
  504. this.id = '';
  505. }
  506. }
  507. };
  508. </script>
  509. <style lang="scss">
  510. %flex-center {
  511. display: flex;
  512. flex-direction: column;
  513. justify-content: center;
  514. align-items: center;
  515. }
  516. %section {
  517. display: flex;
  518. justify-content: space-around;
  519. align-content: center;
  520. background: #fff;
  521. border-radius: 10rpx;
  522. }
  523. .container,
  524. page {
  525. min-height: 100%;
  526. height: auto;
  527. background-color: $page-color-base;
  528. }
  529. .vheigh {
  530. height: var(--status-bar-height);
  531. background-color: $base-color;
  532. }
  533. .top-image {
  534. position: absolute;
  535. top: 0;
  536. left: 0;
  537. right: 0;
  538. height: 228rpx;
  539. image {
  540. width: 100%;
  541. height: 100%;
  542. }
  543. }
  544. .popup-box {
  545. width: 522rpx;
  546. height: 605rpx;
  547. background-color: #ffffff;
  548. border-radius: 20rpx;
  549. position: relative;
  550. .img {
  551. position: relative;
  552. top: -56rpx;
  553. left: 0;
  554. width: 522rpx;
  555. height: 132rpx;
  556. display: flex;
  557. justify-content: center;
  558. image {
  559. border-radius: 20rpx 20rpx 0 0;
  560. width: 450rpx;
  561. height: 132rpx;
  562. }
  563. }
  564. .mian {
  565. margin-top: -44rpx;
  566. display: flex;
  567. flex-direction: column;
  568. align-items: center;
  569. // padding: 32rpx 32rpx;
  570. background-color: #ffffff;
  571. border-radius: 0 0 20rpx 20rpx;
  572. text-align: center;
  573. .delivery {
  574. font-size: 40rpx;
  575. color: #333333;
  576. display: flex;
  577. align-items: center;
  578. flex-direction: column;
  579. image {
  580. margin-top: 48rpx;
  581. width: 172rpx;
  582. height: 160rpx;
  583. }
  584. }
  585. .nocancel {
  586. font-size: 32rpx;
  587. color: #333333;
  588. margin-top: 14rpx;
  589. }
  590. .comfirm-box {
  591. margin-top: 52rpx;
  592. display: flex;
  593. // margin-bottom: 32rpx;
  594. // justify-content: space-around;
  595. .cancel {
  596. display: flex;
  597. align-items: center;
  598. justify-content: center;
  599. width: 197rpx;
  600. height: 74rpx;
  601. border: 1px solid #dcc786;
  602. border-radius: 38rpx;
  603. font-size: 32rpx;
  604. color: #605128;
  605. }
  606. .comfirm {
  607. margin-left: 32rpx;
  608. display: flex;
  609. align-items: center;
  610. justify-content: center;
  611. width: 197rpx;
  612. height: 74rpx;
  613. background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
  614. border-radius: 38px;
  615. font-size: 32rpx;
  616. color: #605128;
  617. }
  618. }
  619. }
  620. }
  621. .user-box {
  622. position: relative;
  623. z-index: 2;
  624. width: 690rpx;
  625. margin: 0 auto;
  626. /* #ifdef MP-WEIXIN */
  627. margin: -100rpx auto 0;
  628. /* #endif */
  629. background: #ffffff;
  630. box-shadow: 0px 4rpx 13rpx 0px rgba(229, 229, 229, 0.46);
  631. border-radius: 20rpx;
  632. display: flex;
  633. flex-direction: column;
  634. align-items: center;
  635. padding: 54rpx 0 30rpx;
  636. line-height: 1;
  637. position: relative;
  638. .u-set {
  639. position: absolute;
  640. top: 85rpx;
  641. right: 40rpx;
  642. width: 44rpx;
  643. height: 44rpx;
  644. }
  645. .user-info {
  646. flex-direction: column;
  647. justify-content: flex-start;
  648. width: 100%;
  649. padding-left: 40rpx;
  650. .avatar {
  651. border-radius: 50%;
  652. width: 132rpx;
  653. height: 132rpx;
  654. background-color: #eee;
  655. margin-right: 18rpx;
  656. }
  657. .user-uid {
  658. padding-top: 10rpx;
  659. font-size: 24rpx;
  660. font-weight: 500;
  661. color: #666666;
  662. }
  663. }
  664. .user-name {
  665. text-align: center;
  666. width: 300rpx;
  667. margin-top: 14rpx;
  668. // font-size: 30rpx;
  669. font-size: $ltl-size-big;
  670. font-family: PingFang SC;
  671. font-weight: bold;
  672. color: #333333;
  673. }
  674. .user-id {
  675. text-align: center;
  676. font-size: 28rpx;
  677. padding: 10rpx 0;
  678. }
  679. .user-shop {
  680. margin-top: 10rpx;
  681. display: flex;
  682. justify-content: flex-start;
  683. align-items: center;
  684. .user-shop-item {
  685. position: relative;
  686. margin: 0 auto;
  687. width: 180rpx;
  688. height: 55rpx;
  689. .user-shop-icon {
  690. position: absolute;
  691. top: 0;
  692. left: 0;
  693. right: 0;
  694. width: 180rpx;
  695. height: 55rpx;
  696. }
  697. .user-shopname {
  698. padding-left: 60rpx;
  699. position: relative;
  700. z-index: 2;
  701. font-size: 30rpx;
  702. font-weight: 500;
  703. color: #977843;
  704. line-height: 55rpx;
  705. text-align: left;
  706. }
  707. }
  708. }
  709. }
  710. .main-box {
  711. margin: 20rpx auto 0;
  712. width: 710rpx;
  713. background: #ffffff;
  714. box-shadow: 0px 4rpx 14rpx 0px rgba(229, 229, 229, 0.46);
  715. border-radius: 20rpx;
  716. .title {
  717. display: flex;
  718. justify-content: space-between;
  719. align-items: center;
  720. padding: 24rpx;
  721. border-bottom: 1px solid #eeeeee;
  722. .title-left {
  723. display: flex;
  724. align-items: center;
  725. .title-icon {
  726. width: 32rpx;
  727. height: 32rpx;
  728. }
  729. .title-font {
  730. margin-left: 20rpx;
  731. font-size: 30rpx;
  732. font-family: PingFang SC;
  733. font-weight: bold;
  734. color: #333333;
  735. }
  736. }
  737. .title-right {
  738. width: 14rpx;
  739. height: 24rpx;
  740. }
  741. }
  742. .main {
  743. padding: 50rpx 0 30rpx;
  744. .jg {
  745. width: 1px;
  746. height: 100rpx;
  747. background: #eeeeee;
  748. }
  749. .item {
  750. padding-bottom: 20rpx;
  751. width: 25%;
  752. display: flex;
  753. flex-direction: column;
  754. align-items: center;
  755. .item-num {
  756. font-size: 36rpx;
  757. font-family: PingFang SC;
  758. font-weight: bold;
  759. color: #333333;
  760. }
  761. .item-font {
  762. margin-top: 18rpx;
  763. font-size: 22rpx;
  764. font-family: PingFang SC;
  765. font-weight: 500;
  766. color: #666666;
  767. }
  768. }
  769. .oitem {
  770. width: 33%;
  771. display: flex;
  772. flex-direction: column;
  773. align-items: center;
  774. .oitem-image {
  775. height: 40rpx;
  776. width: 42rpx;
  777. }
  778. .oitem-font {
  779. margin-top: 20rpx;
  780. font-size: 24rpx;
  781. font-family: PingFang SC;
  782. font-weight: 500;
  783. color: #333333;
  784. }
  785. }
  786. }
  787. }
  788. .tool-list {
  789. width: 690rpx;
  790. margin: 20rpx auto 0;
  791. background: #ffffff;
  792. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  793. border-radius: 20rpx;
  794. }
  795. .psw-wrapper {
  796. width: 548rpx;
  797. padding: 20rpx 0;
  798. background-color: #ffffff;
  799. border-radius: 15rpx 15rpx;
  800. .psw-title {
  801. width: 100%;
  802. font-size: 35rpx;
  803. padding: 0 0 40rpx;
  804. text-align: center;
  805. font-weight: 800;
  806. }
  807. .psw-content {
  808. width: 100%;
  809. font-size: 32rpx;
  810. text-align: center;
  811. }
  812. .psw-price {
  813. font-weight: bold;
  814. font-size: 68rpx;
  815. text-align: center;
  816. padding-top: 10rpx;
  817. }
  818. .psw-jg {
  819. height: 1px;
  820. width: 500rpx;
  821. background-color: #eee;
  822. margin: auto;
  823. }
  824. .psw-paytype {
  825. justify-content: space-between;
  826. padding: 10rpx 25rpx 30rpx;
  827. font-size: 26rpx;
  828. }
  829. .psw-ipt {
  830. display: block;
  831. background-color: #dce3ed;
  832. height: 90rpx;
  833. width: 464rpx;
  834. padding-left: 30rpx;
  835. margin: 0 auto;
  836. font-size: 80rpx;
  837. }
  838. .psw-btn text {
  839. display: inline-block;
  840. text-align: center;
  841. width: 50%;
  842. padding-top: 29rpx;
  843. font-size: 35rpx;
  844. }
  845. .psw-qd {
  846. color: #ff4c4c;
  847. }
  848. }
  849. .hx-wrapper {
  850. width: 536rpx;
  851. height: 630rpx;
  852. position: relative;
  853. // background-color: #fff;
  854. .hx-img {
  855. width: 536rpx;
  856. height: 281rpx;
  857. image {
  858. width: 536rpx;
  859. height: 281rpx;
  860. }
  861. }
  862. .hx-close {
  863. position: absolute;
  864. left: 243rpx;
  865. bottom: -80rpx;
  866. width: 52rpx;
  867. height: 52rpx;
  868. image {
  869. width: 52rpx;
  870. height: 52rpx;
  871. }
  872. }
  873. .hx-body {
  874. width: 536rpx;
  875. height: 349rpx;
  876. background-color: #fff;
  877. border-radius: 0 0 10rpx 10rpx;
  878. .hx-title {
  879. width: 536rpx;
  880. font-size: 36rpx;
  881. font-weight: 500;
  882. color: #333333;
  883. line-height: 1;
  884. padding-top: 42rpx;
  885. text-align: center;
  886. }
  887. input {
  888. width: 439rpx;
  889. height: 68rpx;
  890. background: #dbf3e9;
  891. border-radius: 10rpx;
  892. margin: 39rpx auto 0;
  893. padding-left: 26rpx;
  894. .hx-placeholder {
  895. font-size: 26rpx;
  896. font-weight: 500;
  897. color: #ff4c4c;
  898. }
  899. }
  900. .hx-btn {
  901. margin: 44rpx auto 0;
  902. width: 353rpx;
  903. height: 71rpx;
  904. background: $base-color;
  905. border-radius: 34rpx;
  906. font-size: 36rpx;
  907. font-weight: 500;
  908. color: #f8f9f9;
  909. line-height: 71rpx;
  910. text-align: center;
  911. }
  912. }
  913. }
  914. .user-list {
  915. width: 691rpx;
  916. height: 104rpx;
  917. background: #FFFFFF;
  918. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  919. border-radius: 28rpx;
  920. margin: 20rpx auto;
  921. padding: 0 25rpx;
  922. .left-img {
  923. width: 40rpx;
  924. height: 40rpx;
  925. }
  926. view {
  927. padding-left: 20rpx;
  928. flex-grow: 1;
  929. font-size: 29rpx;
  930. font-weight: bold;
  931. color: #5D5D5D;
  932. }
  933. .right-img {
  934. width: 13rpx;
  935. height: 23rpx;
  936. }
  937. }
  938. .sqdl {
  939. display: block;
  940. width: 689rpx;
  941. margin: 20rpx auto 20rpx;
  942. }
  943. .user-money {
  944. width: 100%;
  945. margin-top: 50rpx;
  946. justify-content: center;
  947. .user-money-item {
  948. width: 50%;
  949. display: flex;
  950. flex-direction: column;
  951. justify-content: center;
  952. align-items: center;
  953. .user-money-num {
  954. font-size: 36rpx;
  955. font-weight: bold;
  956. }
  957. .user-money-font {
  958. margin-top: 20rpx;
  959. font-size: 24rpx;
  960. font-weight: 500;
  961. }
  962. }
  963. .user-xian {
  964. width: 1px;
  965. height: 77rpx;
  966. background: #eeeeee;
  967. }
  968. }
  969. </style>