user.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
  1. <template>
  2. <view class="container">
  3. <!-- #ifdef APP-PLUS -->
  4. <view class="vheigh"></view>
  5. <!-- #endif -->
  6. <!-- 用户头像设置 -->
  7. <view class="user-wrap">
  8. <view class="user-left">
  9. <image :src="userInfo.avatar" mode="" v-if="userInfo.avatar"></image>
  10. <image src="../../static/index/xhgLogo.png" mode="" v-else></image>
  11. </view>
  12. <view class="user-center">
  13. <view class="user-name clamp2">
  14. {{userInfo.nickname || '游客'}}<span style="color: #FFD700; margin-left: 15rpx;"
  15. v-if="userInfo.level!=0">V{{userInfo.level}}</span>
  16. </view>
  17. <view class="user-phone" v-if="userInfo.uid">
  18. 邀请码:{{userInfo.uid}}
  19. </view>
  20. <!-- <view class="user-phone" v-if="userInfo.uid" @click="navTo('/pages/user/wenpiao')">
  21. 文票:{{userInfo.paper_ticket || '0'}}
  22. </view> -->
  23. </view>
  24. <view class="user-right" @click="navTo('/pages/set/userinfo')">
  25. <image src="../../static/user/user-set.png" mode=""></image>
  26. </view>
  27. </view>
  28. <!-- 账户数据 -->
  29. <view class=" user-sj">
  30. <image src="../../static/user/user-bg.png" mode="" class="bg"></image>
  31. <view class="info-top">
  32. 账户
  33. </view>
  34. <view class="info-info">
  35. <view class="info-item" @click="navTo('/pages/user/whiteJf')">
  36. <view class="item-val">
  37. {{userInfo.white_integral || '0'}}
  38. </view>
  39. <view class="item-tit">
  40. 红积分
  41. </view>
  42. </view>
  43. <view class="info-item" @click="navTo('/pages/user/greenJf')">
  44. <view class="item-val">
  45. {{userInfo.green_integral || '0'}}
  46. </view>
  47. <view class="item-tit">
  48. 吉祥积分
  49. </view>
  50. </view>
  51. <view class="info-item" @click="navTo('/pages/user/purpleJf')">
  52. <view class="item-val">
  53. {{userInfo.purple_integral || '0'}}
  54. </view>
  55. <view class="item-tit">
  56. 阳光积分
  57. </view>
  58. </view>
  59. <view class="info-item" @click="navTo('/pages/user/mallJf')">
  60. <view class="item-val">
  61. {{userInfo.integral || '0'}}
  62. </view>
  63. <view class="item-tit">
  64. 商城积分
  65. </view>
  66. </view>
  67. <view class="info-item" @click="navTo('/pages/user/shopJf')">
  68. <view class="item-val">
  69. {{userInfo.business_integral || '0'}}
  70. </view>
  71. <view class="item-tit">
  72. 美好积分
  73. </view>
  74. </view>
  75. <view class="info-item" @click="navTo('/pages/user/myGreenCard')">
  76. <view class="item-val">
  77. {{greenNum || '0'}}
  78. </view>
  79. <view class="item-tit">
  80. 绿卡
  81. </view>
  82. </view>
  83. <view class="info-item" @click="navTo('/pages/user/wenpiao')">
  84. <view class="item-val">
  85. {{userInfo.paper_ticket || '0'}}
  86. </view>
  87. <view class="item-tit">
  88. 文票
  89. </view>
  90. </view>
  91. <view class="info-item" @click="navTo('/pages/money/wallet')">
  92. <view class="item-val">
  93. {{userInfo.now_money || '0'}}
  94. </view>
  95. <view class="item-tit">
  96. 余额
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <image src="../../static/img/sq-rz.png" mode="widthFix"
  102. style="width: 691rpx;display: block;margin:0rpx auto 20rpx;" @click="shenqing()"
  103. v-if="userInfo && userInfo.is_enter !=2">
  104. </image>
  105. <!-- 订单 -->
  106. <view class="item-box item-box-b">
  107. <view class="box-title flex ">
  108. <view class="title"><text>我的订单</text></view>
  109. <view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"><text
  110. class="iconfont iconenter"></text></view>
  111. </view>
  112. <view class="order-section">
  113. <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"
  114. :hover-stay-time="50">
  115. <view class=" icon position-relative">
  116. <image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image>
  117. <view class="corner" v-if="orderInfo.unpaid_count > 0">
  118. <text>{{ orderInfo.unpaid_count }}</text>
  119. </view>
  120. </view>
  121. <text>待付款</text>
  122. </view>
  123. <view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover"
  124. :hover-stay-time="50">
  125. <view class=" icon position-relative">
  126. <image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
  127. <view class="corner" v-if="orderInfo.unshipped_count > 0">
  128. <text>{{ orderInfo.unshipped_count }}</text>
  129. </view>
  130. </view>
  131. <text>待发货</text>
  132. </view>
  133. <view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover"
  134. :hover-stay-time="50">
  135. <view class="icon position-relative">
  136. <image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
  137. <view class="corner" v-if="orderInfo.received_count > 0">
  138. <text>{{ orderInfo.received_count }}</text>
  139. </view>
  140. </view>
  141. <text>待收货</text>
  142. </view>
  143. <view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover"
  144. :hover-stay-time="50">
  145. <view class="icon position-relative">
  146. <image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
  147. <!-- <view class="corner" v-if="orderInfo.complete_count > 0">
  148. <text>{{ orderInfo.complete_count }}</text>
  149. </view> -->
  150. </view>
  151. <text>已完成</text>
  152. </view>
  153. </view>
  154. </view>
  155. <uni-list class="tool-list">
  156. <uni-list-item v-if="userInfo.clerk_type == 1" title="券码核销" @click="shao()" thumb="/static/user/user1.png">
  157. </uni-list-item>
  158. <uni-list-item v-if="userInfo.clerk_type == 1" title="核销历史" @click="navTo('/pages/user/hxjl')"
  159. thumb="/static/user/user2.png"></uni-list-item>
  160. <uni-list-item title="我的推广" @click="navTo('/pages/user/team')" thumb="/static/user/user01.png">
  161. </uni-list-item>
  162. <uni-list-item title="我的客服" @click="getKe()" thumb="/static/img/kefu.png">
  163. </uni-list-item>
  164. <uni-list-item title="修改密码" @click="navTo('/pages/set/password')" thumb="/static/index/index14.png">
  165. </uni-list-item>
  166. <uni-list-item title="邀请海报" @click="navTo('/pages/user/shareQrCode')" thumb="/static/user/user02.png">
  167. </uni-list-item>
  168. <uni-list-item title="收货地址" @click="navTo('/pages/set/address')" thumb="/static/user/user03.png">
  169. </uni-list-item>
  170. <uni-list-item title="我的收藏" @click="navTo('/pages/user/favorites')" thumb="/static/user/user04.png">
  171. </uni-list-item>
  172. </uni-list>
  173. <view class="btm" style="height: 44px;"></view>
  174. <!-- 客服 -->
  175. <uni-popup ref="popupkf" type="center">
  176. <view class="popup-box">
  177. <view class="img">
  178. <image src="../../static/img/img009.png" mode=""></image>
  179. </view>
  180. <view class="mian">
  181. <view class="delivery">
  182. <view class="title">已经为您定制专属客服</view>
  183. <image src="../../static/img/img010.png" mode=""></image>
  184. </view>
  185. <view class="nocancel">客服VX:{{ text }}</view>
  186. <view class="comfirm-box">
  187. <view class="cancel" @click="kfClose()">取消</view>
  188. <view class="comfirm" @click="comfirm(text)">复制微信</view>
  189. </view>
  190. </view>
  191. </view>
  192. </uni-popup>
  193. </view>
  194. </template>
  195. <script>
  196. import {
  197. mapState,
  198. mapMutations
  199. } from 'vuex';
  200. import uniList from '@/components/uni-list/uni-list.vue';
  201. import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
  202. import {
  203. orderData,
  204. userinfo,
  205. greenList
  206. } from '@/api/user.js';
  207. import {
  208. saveUrl,
  209. interceptor
  210. } from '@/utils/loginUtils.js';
  211. import {
  212. tabbar
  213. } from '@/utils/tabbar.js';
  214. import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
  215. let startY = 0,
  216. moveY = 0,
  217. pageAtTop = true;
  218. export default {
  219. components: {
  220. uniList,
  221. uniListItem
  222. },
  223. data() {
  224. return {
  225. greenNum: 0,
  226. text: 'Mxt13142',
  227. tabbar: tabbar,
  228. current: 4,
  229. coverTransform: 'translateY(0px)',
  230. coverTransition: '0s',
  231. moving: false,
  232. userDowm: 0, //卡片升级专属高度
  233. userMaxDowm: 0 //卡片最高高度
  234. };
  235. },
  236. onShow() {
  237. // this.bdPhone()
  238. this.loadBaseData();
  239. },
  240. onReady() {
  241. // 初始化获取页面宽度
  242. uni.createSelectorQuery()
  243. .select('.container')
  244. .fields({
  245. size: true
  246. },
  247. data => {
  248. // 计算最多下拉的高度
  249. this.userDowm = Math.floor((data.width / 750) * 185);
  250. // 计算最大触发修改高度事件
  251. this.userMaxDowm = Math.floor((data.width / 750) * 250);
  252. }
  253. )
  254. .exec();
  255. },
  256. computed: {
  257. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  258. },
  259. methods: {
  260. //申请
  261. shenqing() {
  262. if (this.userInfo.is_enter == 1) {
  263. this.$api.msg('审核中')
  264. } else {
  265. uni.navigateTo({
  266. url: '/pages/user/joinShop'
  267. })
  268. }
  269. },
  270. //绑定手机号
  271. bdPhone() {
  272. console.log(this.userInfo, 'user');
  273. if (this.userInfo.phone == '') {
  274. uni.showModal({
  275. title: "提示",
  276. content: "尚未绑定手机号!请先绑定!",
  277. success() {
  278. uni.navigateTo({
  279. url: '../set/phone'
  280. })
  281. }
  282. })
  283. }
  284. },
  285. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  286. // 绿卡记录
  287. getGreenList() {
  288. greenList({
  289. }).then(res => {
  290. console.log('greenList', res)
  291. this.greenNum = res.data.count
  292. })
  293. },
  294. // 加载初始数据
  295. loadBaseData() {
  296. console.log(this.userInfo);
  297. userinfo({})
  298. .then(({
  299. data
  300. }) => {
  301. this.setUserInfo(data);
  302. // 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
  303. orderData({})
  304. .then(({
  305. data
  306. }) => {
  307. this.setOrderInfo(data);
  308. })
  309. .catch(e => {
  310. this.getGreenList()
  311. this.setOrderInfo({
  312. complete_count: 0, //完成
  313. received_count: 0, //待收货
  314. unshipped_count: 0, //待发货
  315. order_count: 0, //订单总数
  316. unpaid_count: 0 //待付款
  317. });
  318. });
  319. })
  320. .catch(e => {
  321. console.log(e);
  322. });
  323. },
  324. /**
  325. * 统一跳转接口,拦截未登录路由
  326. * navigator标签现在默认没有转场动画,所以用view
  327. */
  328. navTo(url) {
  329. if (url == '') {
  330. this.$api.msg('敬请期待')
  331. }
  332. if (!this.hasLogin) {
  333. // 保存地址
  334. saveUrl();
  335. // 登录拦截
  336. interceptor();
  337. } else {
  338. uni.navigateTo({
  339. url,
  340. fail() {
  341. uni.switchTab({
  342. url
  343. });
  344. }
  345. });
  346. }
  347. },
  348. getKe(){
  349. this.$refs.popupkf.open()
  350. },
  351. /**
  352. * 会员卡下拉和回弹
  353. * 1.关闭bounce避免ios端下拉冲突
  354. * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
  355. * transition设置0.1秒延迟,让css来过渡这段空窗期
  356. * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
  357. */
  358. coverTouchstart(e) {
  359. // console.log(e);
  360. if (pageAtTop === false) {
  361. return;
  362. }
  363. this.coverTransition = 'transform .1s linear';
  364. startY = e.touches[0].clientY;
  365. },
  366. coverTouchmove(e) {
  367. // console.log(e);
  368. moveY = e.touches[0].clientY;
  369. let moveDistance = moveY - startY;
  370. let maxDowm = this.userMaxDowm;
  371. let Dowm = this.userDowm;
  372. if (moveDistance < 0) {
  373. this.moving = false;
  374. return;
  375. }
  376. this.moving = true;
  377. if (moveDistance >= Dowm && moveDistance < maxDowm) {
  378. moveDistance = Dowm;
  379. }
  380. if (moveDistance > 0 && moveDistance <= Dowm) {
  381. this.coverTransform = `translateY(${moveDistance}px)`;
  382. }
  383. },
  384. coverTouchend() {
  385. if (this.moving === false) {
  386. return;
  387. }
  388. this.moving = false;
  389. this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
  390. this.coverTransform = 'translateY(0px)';
  391. },
  392. kfOpen() {
  393. this.$refs.popupkf.open()
  394. },
  395. kfClose() {
  396. this.$refs.popupkf.close()
  397. },
  398. comfirm(text) {
  399. console.log(text);
  400. const result = uniCopy(text);
  401. if (result === false) {
  402. uni.showToast({
  403. title: '不支持'
  404. });
  405. } else {
  406. uni.showToast({
  407. title: '复制成功',
  408. icon: 'none'
  409. });
  410. }
  411. this.$refs.popup.close();
  412. },
  413. }
  414. };
  415. </script>
  416. <style lang="scss">
  417. page {
  418. height: 100%;
  419. }
  420. %flex-center {
  421. display: flex;
  422. flex-direction: column;
  423. justify-content: center;
  424. align-items: center;
  425. }
  426. %section {
  427. display: flex;
  428. justify-content: space-around;
  429. align-content: center;
  430. background: #fff;
  431. border-radius: 10rpx;
  432. }
  433. .container {
  434. height: 100%;
  435. background-color: $page-color-base;
  436. }
  437. .content-box {
  438. height: 100%;
  439. }
  440. .vheigh {
  441. height: var(--status-bar-height);
  442. // background-color: #fff;
  443. }
  444. .user-section {
  445. height: 435rpx;
  446. padding: 15rpx 30rpx 0;
  447. position: relative;
  448. .bg {
  449. position: absolute;
  450. left: 0;
  451. top: 0;
  452. width: 100%;
  453. height: 100%;
  454. background-color: $base-color;
  455. }
  456. }
  457. .user-info-box {
  458. height: 180rpx;
  459. color: white;
  460. display: flex;
  461. align-items: center;
  462. justify-content: space-between;
  463. position: relative;
  464. z-index: 1;
  465. .detail {
  466. height: 130rpx;
  467. .portrait-box {
  468. height: 100%;
  469. .portrait {
  470. width: 130rpx;
  471. height: 100%;
  472. border: 5rpx solid #fff;
  473. border-radius: 50%;
  474. }
  475. }
  476. .info-box {
  477. margin-left: 20rpx;
  478. line-height: 1.5;
  479. .username {
  480. font-size: $font-lg + 6rpx;
  481. height: 100%;
  482. }
  483. }
  484. }
  485. .config {
  486. font-size: 48rpx;
  487. height: 130rpx;
  488. .setting {
  489. margin-right: 51rpx;
  490. }
  491. }
  492. }
  493. .vip-card-box {
  494. display: flex;
  495. flex-direction: column;
  496. color: #f7d680;
  497. height: 240rpx;
  498. background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  499. border-radius: 16rpx 16rpx 0 0;
  500. overflow: hidden;
  501. position: relative;
  502. padding: 20rpx 24rpx;
  503. .card-bg {
  504. position: absolute;
  505. top: 20rpx;
  506. right: 0;
  507. width: 380rpx;
  508. height: 260rpx;
  509. }
  510. .b-btn {
  511. position: absolute;
  512. right: 20rpx;
  513. top: 16rpx;
  514. width: 132rpx;
  515. height: 40rpx;
  516. text-align: center;
  517. line-height: 40rpx;
  518. font-size: 22rpx;
  519. color: #36343c;
  520. border-radius: 20px;
  521. background: linear-gradient(left, #f9e6af, #ffd465);
  522. z-index: 1;
  523. }
  524. .tit {
  525. font-size: $font-base + 2rpx;
  526. color: #f7d680;
  527. margin-bottom: 28rpx;
  528. .iconfont {
  529. color: #f6e5a3;
  530. margin-right: 16rpx;
  531. }
  532. }
  533. .e-b {
  534. font-size: $font-sm;
  535. color: #d8cba9;
  536. margin-top: 10rpx;
  537. }
  538. }
  539. .cover-container {
  540. background: $page-color-base;
  541. margin-top: -150rpx;
  542. padding: 0 30rpx;
  543. position: relative;
  544. background: #f5f5f5;
  545. padding-bottom: 20rpx;
  546. .arc {
  547. position: absolute;
  548. left: 0;
  549. top: -34rpx;
  550. width: 100%;
  551. height: 36rpx;
  552. }
  553. }
  554. .tj-sction {
  555. @extend %section;
  556. .tj-item {
  557. @extend %flex-center;
  558. flex-direction: column;
  559. height: 140rpx;
  560. font-size: $font-sm;
  561. color: #75787d;
  562. }
  563. .num {
  564. font-size: $font-lg;
  565. color: $font-color-dark;
  566. margin-bottom: 8rpx;
  567. }
  568. }
  569. .item-box {
  570. width: 708rpx;
  571. height: 163rpx;
  572. background: #fff;
  573. border-radius: 28rpx;
  574. background-color: white;
  575. margin: -40rpx auto 30rpx;
  576. position: relative;
  577. // margin-top: 20rpx;
  578. .box-title {
  579. line-height: 1;
  580. padding: 30rpx;
  581. .title {
  582. font-size: $font-lg;
  583. font-weight: bold;
  584. }
  585. .link {
  586. font-size: $font-base - 2rpx;
  587. color: $font-color-light;
  588. }
  589. }
  590. .order-section {
  591. @extend %section;
  592. padding: 28rpx 0;
  593. .order-item {
  594. @extend %flex-center;
  595. width: 120rpx;
  596. height: 120rpx;
  597. border-radius: 10rpx;
  598. font-size: $font-sm;
  599. color: $font-color-dark;
  600. }
  601. .iconfont {
  602. font-size: 48rpx;
  603. margin-bottom: 18rpx;
  604. color: #fa436a;
  605. }
  606. .icon-shouhoutuikuan {
  607. font-size: 44rpx;
  608. }
  609. .icon {
  610. height: 50rpx;
  611. width: 48rpx;
  612. margin-bottom: 18rpx;
  613. background-size: 100%;
  614. background-repeat: no-repeat;
  615. background-position: center;
  616. .icon-img {
  617. width: 100%;
  618. height: 100%;
  619. }
  620. }
  621. }
  622. }
  623. .history-section {
  624. // padding: 30rpx 0 0;
  625. margin-top: 20rpx;
  626. background: #fff;
  627. border-radius: 10rpx;
  628. .sec-header {
  629. display: flex;
  630. align-items: center;
  631. font-size: $font-base;
  632. color: $font-color-dark;
  633. line-height: 40rpx;
  634. margin-left: 30rpx;
  635. padding-top: 30rpx;
  636. .iconfont {
  637. font-size: 44rpx;
  638. color: $color-red;
  639. margin-right: 16rpx;
  640. line-height: 40rpx;
  641. }
  642. }
  643. .h-list {
  644. white-space: nowrap;
  645. padding: 30rpx 30rpx 0;
  646. .h-list-image {
  647. display: inline-block;
  648. width: 160rpx;
  649. height: 160rpx;
  650. margin-right: 20rpx;
  651. border-radius: 10rpx;
  652. }
  653. }
  654. }
  655. .item-box-b {
  656. width: 710rpx;
  657. height: 221rpx;
  658. background: #ffffff;
  659. margin: 20rpx auto 60rpx;
  660. }
  661. .popup-box {
  662. width: 522rpx;
  663. height: 605rpx;
  664. background-color: #ffffff;
  665. border-radius: 20rpx;
  666. position: relative;
  667. .img {
  668. position: relative;
  669. top: -56rpx;
  670. left: 0;
  671. width: 522rpx;
  672. height: 132rpx;
  673. display: flex;
  674. justify-content: center;
  675. image {
  676. border-radius: 20rpx 20rpx 0 0;
  677. width: 450rpx;
  678. height: 132rpx;
  679. }
  680. }
  681. .mian {
  682. margin-top: -44rpx;
  683. display: flex;
  684. flex-direction: column;
  685. align-items: center;
  686. // padding: 32rpx 32rpx;
  687. background-color: #ffffff;
  688. border-radius: 0 0 20rpx 20rpx;
  689. text-align: center;
  690. .delivery {
  691. font-size: 40rpx;
  692. color: #333333;
  693. display: flex;
  694. align-items: center;
  695. flex-direction: column;
  696. .title {}
  697. image {
  698. margin-top: 48rpx;
  699. width: 172rpx;
  700. height: 160rpx;
  701. }
  702. }
  703. .nocancel {
  704. font-size: 32rpx;
  705. color: #333333;
  706. margin-top: 14rpx;
  707. }
  708. .comfirm-box {
  709. margin-top: 52rpx;
  710. display: flex;
  711. // margin-bottom: 32rpx;
  712. // justify-content: space-around;
  713. .cancel {
  714. display: flex;
  715. align-items: center;
  716. justify-content: center;
  717. width: 197rpx;
  718. height: 74rpx;
  719. border: 1px solid #dcc786;
  720. border-radius: 38rpx;
  721. font-size: 32rpx;
  722. color: #605128;
  723. }
  724. .comfirm {
  725. margin-left: 32rpx;
  726. display: flex;
  727. align-items: center;
  728. justify-content: center;
  729. width: 197rpx;
  730. height: 74rpx;
  731. background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
  732. border-radius: 38px;
  733. font-size: 32rpx;
  734. color: #605128;
  735. }
  736. }
  737. }
  738. }
  739. .tool-list {
  740. width: 690rpx;
  741. margin: auto;
  742. margin-top: 20rpx;
  743. background: #ffffff;
  744. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  745. border-radius: 20rpx;
  746. }
  747. .user-sj {
  748. width: 728rpx;
  749. height: 448rpx;
  750. position: relative;
  751. margin: auto;
  752. font-size: 32rpx;
  753. font-weight: bold;
  754. color: #FFFFFF;
  755. .bg {
  756. width: 728rpx;
  757. height: 448rpx;
  758. }
  759. .info-top {
  760. position: absolute;
  761. height: 100rpx;
  762. top: 0;
  763. line-height: 120rpx;
  764. padding-left: 52rpx;
  765. }
  766. .info-info {
  767. position: absolute;
  768. top: 100rpx;
  769. width: 100%;
  770. display: flex;
  771. flex-wrap: wrap;
  772. justify-content: flex-start;
  773. height: 325rpx;
  774. padding: 0 30rpx;
  775. .info-item {
  776. width: 25%;
  777. height: 50%;
  778. text-align: center;
  779. display: flex;
  780. flex-direction: column;
  781. justify-content: center;
  782. .item-val {
  783. margin-bottom: 32rpx;
  784. }
  785. .item-tit {}
  786. }
  787. }
  788. }
  789. .user-wrap {
  790. display: flex;
  791. padding: 80rpx 35rpx 20rpx 30rpx;
  792. .user-left {
  793. overflow: hidden;
  794. flex-shrink: 0;
  795. border-radius: 50%;
  796. width: 143rpx;
  797. height: 143rpx;
  798. image {
  799. width: 143rpx;
  800. height: 143rpx;
  801. }
  802. }
  803. .user-center {
  804. flex-grow: 1;
  805. padding: 0 20rpx;
  806. display: flex;
  807. flex-direction: column;
  808. justify-content: center;
  809. .user-name {
  810. font-size: 34rpx;
  811. font-weight: bold;
  812. color: #333333;
  813. }
  814. .user-phone {
  815. font-size: 24rpx;
  816. font-weight: 500;
  817. color: #666666;
  818. }
  819. }
  820. .user-right {
  821. width: 44rpx;
  822. height: 40rpx;
  823. flex-shrink: 0;
  824. image {
  825. width: 44rpx;
  826. height: 40rpx;
  827. }
  828. }
  829. }
  830. </style>