user.vue 23 KB

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