user.vue 23 KB

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