user.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
  1. <template>
  2. <view class="container">
  3. <view class="userinfo flex">
  4. <view class="avt">
  5. <image src="../../static/error/missing-face.png" mode=""></image>
  6. </view>
  7. <view class="info">
  8. <view class="name clamp">
  9. 李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹
  10. </view>
  11. <view class="id flex">
  12. <view class="xs">
  13. ID
  14. </view>
  15. <view class="val">
  16. 236322
  17. </view>
  18. <image src="../../static/icon/copy.png" mode="" class="copy"></image>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="ks flex">
  23. <image src="../../static/icon/ks.png" mode=""></image>
  24. <view class="value">
  25. <view class="val">
  26. 7772032.30
  27. </view>
  28. <view class="">
  29. 我的矿石
  30. </view>
  31. </view>
  32. <view class="btn ">
  33. 转赠
  34. </view>
  35. </view>
  36. <view class="friend">
  37. <view class="top flex">
  38. <view class="">
  39. 邀请好友
  40. </view>
  41. <image src="../../static/icon/djl.png" mode=""></image>
  42. <view class="tc">
  43. </view>
  44. <view class="xq">
  45. 详情<image src="../../static/img/back.png" mode=""></image>
  46. </view>
  47. </view>
  48. <view class="tit">
  49. 好友会为你贡献一定比例的奖励
  50. </view>
  51. <view class="val-wrap flex">
  52. <view class="item ">
  53. <view class="val">
  54. 72032.30
  55. </view>
  56. <view class="">
  57. 累计收益
  58. </view>
  59. </view>
  60. <view class="item item1">
  61. <view class="val">
  62. 203
  63. </view>
  64. <view class="">
  65. 好友数
  66. </view>
  67. </view>
  68. <view class="btn">
  69. 邀请好友
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. // import {
  77. // tabbar1
  78. // } from '@/utils/tabbar.js';
  79. import {
  80. mapState,
  81. mapMutations
  82. } from 'vuex';
  83. import uniList from '@/components/uni-list/uni-list.vue';
  84. import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
  85. import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
  86. import {
  87. orderData,
  88. getUserInfo,
  89. rate,
  90. apply_status
  91. } from '@/api/user.js';
  92. import {
  93. signList,
  94. integral,
  95. signUser
  96. } from '@/api/functionalUnit.js';
  97. import {
  98. saveUrl,
  99. interceptor
  100. } from '@/utils/loginUtils.js';
  101. // #ifdef APP-PLUS
  102. import {
  103. getUpApp
  104. } from '@/utils/upApp.js';
  105. // #endif
  106. let startY = 0,
  107. moveY = 0,
  108. pageAtTop = true;
  109. export default {
  110. components: {
  111. uniList,
  112. uniListItem
  113. },
  114. data() {
  115. return {
  116. // #ifdef APP
  117. wgtinfo: {
  118. version: '1.0.0'
  119. }, //版本信息
  120. // #endif
  121. sm: 0, //是否已实名认证
  122. money: '', //保存当前月份
  123. year: '', //保存当前年份
  124. day: '', //保存当前日期
  125. current: 4,
  126. tabbar: tabbar1,
  127. qded: false, //是否已签到
  128. text: '18967672398', //客服微信
  129. actionDay: 0, //连续签到天数
  130. sum_integral: 0, //累计获得积分
  131. today_integral: '', //签到获得的数值
  132. tom_integral: '', //明天签到获得的数值
  133. tom_type: '', //签到获得的数值单位
  134. userDowm: 0, //卡片升级专属高度
  135. userMaxDowm: 0, //卡片最高高度
  136. toolList: [
  137. // {
  138. // id: 't1',
  139. // name: '新人通道',
  140. // width: '56rpx',
  141. // heigt: '54rpx',
  142. // img: '../../static/icon/tool-1.png',
  143. // path: '/pages/user/xrtd'
  144. // },
  145. {
  146. id: 't2',
  147. name: '邀请好友',
  148. width: '56rpx',
  149. heigt: '57rpx',
  150. img: '../../static/icon/tool-2.png',
  151. path: '/pages/user/shareQrCode'
  152. },
  153. {
  154. id: 't3',
  155. name: '我的粉丝',
  156. width: '68rpx',
  157. heigt: '53rpx',
  158. img: '../../static/icon/tool-3.png',
  159. path: '/pages/user/myfans'
  160. },
  161. {
  162. id: 't4',
  163. name: '我的订单',
  164. width: '55rpx',
  165. heigt: '54rpx',
  166. img: '../../static/icon/tool-4.png',
  167. path: '/pages/order/index'
  168. },
  169. {
  170. id: 't5',
  171. name: '我的商品',
  172. width: '50rpx',
  173. heigt: '58rpx',
  174. img: '../../static/icon/tool-5.png',
  175. path: '/pages/user/myproduct'
  176. },
  177. // #ifndef APP
  178. {
  179. id: 't6',
  180. name: '馆长申请',
  181. width: '59rpx',
  182. heigt: '56rpx',
  183. img: '../../static/icon/tool-6.png',
  184. path: '/pages/user/gzsq'
  185. },
  186. // #endif
  187. {
  188. id: 't7',
  189. name: '我的金豆',
  190. width: '59rpx',
  191. heigt: '56rpx',
  192. img: '../../static/icon/jindou.png',
  193. path: '/pages/user/myyue'
  194. }
  195. ]
  196. };
  197. },
  198. onShow() {
  199. // 判断是否已经登录
  200. if (this.hasLogin) {
  201. this.loadBaseData();
  202. // this.signUser();
  203. // this.loadList();
  204. // this.getData();
  205. // this.isSm();
  206. }
  207. // #ifdef APP
  208. if (this.appversion !== this.wgtinfo.version) {
  209. getUpApp();
  210. }
  211. // #endif
  212. },
  213. onReady() {
  214. const that = this;
  215. // 初始化获取页面宽度
  216. uni.createSelectorQuery()
  217. .select('.container')
  218. .fields({
  219. size: true
  220. },
  221. data => {
  222. // 计算最多下拉的高度
  223. this.userDowm = Math.floor((data.width / 750) * 185);
  224. // 计算最大触发修改高度事件
  225. this.userMaxDowm = Math.floor((data.width / 750) * 250);
  226. }
  227. )
  228. .exec();
  229. // #ifdef APP
  230. plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
  231. that.wgtinfo = wgtinfo;
  232. });
  233. // #endif
  234. },
  235. computed: {
  236. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
  237. ...mapState(["isShowIllegality", "appversion"])
  238. },
  239. methods: {
  240. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  241. getData(current) {
  242. const date = current ? new Date(current) : new Date();
  243. this.year = date.getFullYear(); //保存当前年份
  244. this.month = date.getMonth() + 1; //保存当前月份
  245. this.day = date.getDate(); //保存当前日期
  246. },
  247. isSm() {
  248. rate({}).then(e => {
  249. if (e.data.is_auth == 2) {
  250. this.sm = 1;
  251. }
  252. });
  253. },
  254. comfirm(text) {
  255. let obj = this;
  256. let content = text; //需要复制的内容
  257. console.log('复制的内容:', content);
  258. // content = typeof content === 'string' ? content : content.toString(); // 复制内容,必须字符串,数字需要转换为字符串
  259. const result = uniCopy(content);
  260. if (result === false) {
  261. uni.showToast({
  262. title: '不支持'
  263. });
  264. } else {
  265. uni.showToast({
  266. title: '复制成功',
  267. icon: 'none'
  268. });
  269. }
  270. },
  271. // 获取签到列表
  272. loadList() {
  273. let obj = this;
  274. let present = this.day; //保存当前天数用于后续计算
  275. let actionDay = 0; //用于计算活跃天数
  276. let arr = []; //保存返回数组;
  277. signList({
  278. page: 1,
  279. limit: 31
  280. }).then(e => {
  281. arr = e.data.map((e, ind) => {
  282. let time = e.add_time.split('-');
  283. let day = parseInt(time[2].replace(/^0/i, ''));
  284. let year = time[0];
  285. let month = +time[1];
  286. if (obj.year == year && obj.month == month) {
  287. return day;
  288. }
  289. });
  290. // 判断今天是否已经签到
  291. if (arr[0] == this.day) {
  292. this.qded = true;
  293. }
  294. });
  295. },
  296. //获取签到用户信息
  297. signUser() {
  298. signUser({
  299. all: 1
  300. }).then(({
  301. data
  302. }) => {
  303. this.actionDay = data.sign_num; //连续签到天数
  304. this.sum_integral = data.sum_integral; //累计总积分
  305. });
  306. },
  307. // 加载初始数据
  308. loadBaseData() {
  309. getUserInfo({})
  310. .then(({
  311. data
  312. }) => {
  313. this.setUserInfo(data);
  314. // 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
  315. orderData({})
  316. .then(({
  317. data
  318. }) => {
  319. this.setOrderInfo(data);
  320. })
  321. .catch(e => {
  322. this.setOrderInfo({
  323. complete_count: 0, //完成
  324. received_count: 0, //待收货
  325. unshipped_count: 0, //待发货
  326. order_count: 0, //订单总数
  327. unpaid_count: 0 //待付款
  328. });
  329. });
  330. })
  331. .catch(e => {
  332. console.log(e);
  333. });
  334. },
  335. /**
  336. * 统一跳转接口,拦截未登录路由
  337. * navigator标签现在默认没有转场动画,所以用view
  338. */
  339. navTo(url) {
  340. const obj = this;
  341. if (!this.hasLogin) {
  342. // 保存地址
  343. saveUrl();
  344. // 登录拦截
  345. interceptor();
  346. } else {
  347. if (url == '/pages/user/approve') {
  348. rate({})
  349. .then(e => {
  350. console.log(e);
  351. if (e.data.is_auth == null) {
  352. uni.navigateTo({
  353. url
  354. });
  355. }
  356. if (e.data.is_auth == 0) {
  357. uni.navigateTo({
  358. url
  359. });
  360. }
  361. if (e.data.is_auth == 1) {
  362. // this.$api.msg('正在审核中请耐心等待');
  363. uni.navigateTo({
  364. url
  365. });
  366. }
  367. if (e.data.is_auth == 2) {
  368. this.$api.msg('已通过实名认证,无需再实名认证');
  369. }
  370. if (e.data.is_auth == 3) {
  371. uni.navigateTo({
  372. url
  373. });
  374. // uni.showModal({
  375. // title: '提示',
  376. // content: '申请失败,原因' + e.data.off + '是否重新申请',
  377. // success: function(res) {
  378. // if (res.confirm) {
  379. // uni.navigateTo({
  380. // url
  381. // });
  382. // } else if (res.cancel) {
  383. // console.log('用户点击取消');
  384. // }
  385. // }
  386. // });
  387. }
  388. })
  389. .catch(e => {
  390. return;
  391. });
  392. } else if (url == '/pages/user/gzsq') {
  393. apply_status({})
  394. .then(e => {
  395. if (e.data.status != 0) {
  396. if (e.data.status == 3) {
  397. uni.showModal({
  398. title: '提示',
  399. content: '申请失败是否重新申请',
  400. success: function(res) {
  401. if (res.confirm) {
  402. uni.navigateTo({
  403. url
  404. });
  405. } else if (res.cancel) {
  406. console.log('用户点击取消');
  407. }
  408. }
  409. });
  410. } else {
  411. obj.$api.msg(e.data.str);
  412. }
  413. } else {
  414. uni.navigateTo({
  415. url
  416. });
  417. }
  418. })
  419. .catch(e => {});
  420. } else {
  421. uni.navigateTo({
  422. url,
  423. fail() {
  424. uni.switchTab({
  425. url
  426. });
  427. }
  428. });
  429. }
  430. }
  431. },
  432. useTool(e) {
  433. this.navTo(e.path);
  434. },
  435. // 签到弹窗
  436. goQd() {
  437. integral({})
  438. .then(e => {
  439. this.integral = console.log(e);
  440. // 改为已签到
  441. this.qded = true;
  442. this.today_integral = e.data.integral;
  443. this.actionDay++;
  444. this.sum_integral = +this.sum_integral + +e.data.integral;
  445. this.$refs.popupqd.open();
  446. })
  447. .catch(e => {
  448. console.log(e);
  449. });
  450. },
  451. // 关闭签到弹窗
  452. closeQd() {
  453. this.$refs.popupqd.close();
  454. },
  455. // 打开客服
  456. openKf() {
  457. this.$refs.popupkf.open();
  458. },
  459. // 关闭客服
  460. cancel() {
  461. this.$refs.popupkf.close();
  462. }
  463. }
  464. };
  465. </script>
  466. <style lang="scss">
  467. .container {
  468. background-image: url('../../static/img/user-bg.png');
  469. background-size: 100% 100%;
  470. min-height: 1600rpx;
  471. }
  472. .userinfo {
  473. height: 316rpx;
  474. justify-content: flex-start;
  475. .avt {
  476. border-radius: 50%;
  477. // border-radius: 2rpx;
  478. border: 2rpx solid #fff;
  479. height: 124rpx;
  480. width: 124rpx;
  481. image {
  482. width: 120rpx;
  483. height: 120rpx;
  484. }
  485. }
  486. .info {
  487. font-weight: 800;
  488. font-size: 31rpx;
  489. color: #212121;
  490. padding-left: 23rpx;
  491. .name {
  492. width: 500rpx;
  493. }
  494. .id {
  495. width: 188rpx;
  496. height: 32rpx;
  497. border-radius: 5rpx;
  498. border: 1px solid #797E96;
  499. padding-right: 10rpx;
  500. margin-top: 20rpx;
  501. .xs {
  502. width: 40rpx;
  503. line-height:30rpx;
  504. background: linear-gradient(0deg, #384054, #707991);
  505. border-radius: 5rpx;
  506. font-size: 25rpx;
  507. color: #FFFFFF;
  508. text-align: center;
  509. }
  510. .copy {
  511. width: 24rpx;
  512. height: 24rpx;
  513. }
  514. .val {
  515. flex-grow: 1;
  516. padding-left: 6rpx;
  517. font-weight: 500;
  518. font-size: 25rpx;
  519. color: #212121;
  520. }
  521. }
  522. }
  523. }
  524. .ks {
  525. width: 709rpx;
  526. height: 162rpx;
  527. background-color: #1b2d59;
  528. margin:auto;
  529. color: #FFFFFF;
  530. position: relative;
  531. padding: 0 30rpx 0 20rpx;
  532. &::before ,&::after {
  533. content: '';
  534. width: 15rpx;
  535. height: 15rpx;
  536. position: absolute;
  537. background-color: #fff;
  538. }
  539. &::after {
  540. right: 15rpx;
  541. top: 0;
  542. }
  543. &::before {
  544. right: 0;
  545. top: 15rpx;
  546. }
  547. image {
  548. width: 107rpx;
  549. height: 84rpx;
  550. }
  551. .value {
  552. font-size: 23rpx;
  553. padding-left: 10rpx;
  554. flex-grow: 1;
  555. .val {
  556. font-size: 44rpx;
  557. }
  558. }
  559. .btn {
  560. width: 89rpx;
  561. // height: 38rpx;
  562. padding: 6rpx 0;
  563. border-radius: 19rpx;
  564. border: 1px solid #DDE1EB;
  565. font-weight: 500;
  566. font-size: 24rpx;
  567. text-align: center;
  568. }
  569. }
  570. .friend {
  571. width: 709rpx;
  572. height: 253rpx;
  573. background: #FFFFFF;
  574. border-radius: 10rpx;
  575. margin: 26rpx auto 30rpx;
  576. padding: 30rpx 20rpx;
  577. .top {
  578. font-weight: bold;
  579. font-size: 29rpx;
  580. color: #212121;
  581. justify-content: flex-start;
  582. image {
  583. width: 89rpx;
  584. height: 35rpx;
  585. }
  586. .tc {
  587. flex-grow: 1;
  588. }
  589. .xq {
  590. font-weight: 400;
  591. font-size: 26rpx;
  592. color: #8B8B8B;
  593. image {
  594. width: 10rpx;
  595. height: 20rpx;
  596. margin-left: 13rpx;
  597. }
  598. }
  599. }
  600. .tit {
  601. font-size: 24rpx;
  602. color: #8B8B8B;
  603. padding-top: 15rpx;
  604. }
  605. .val-wrap {
  606. padding-top: 30rpx;
  607. justify-content: flex-start;
  608. .item {
  609. padding:0 15rpx 0 0rpx;
  610. font-size: 24rpx;
  611. color: #8B8B8B;
  612. .val {
  613. font-size: 41rpx;
  614. color: #222222;
  615. &::after {
  616. content: '个';
  617. font-size: 24rpx;
  618. }
  619. }
  620. }
  621. .item1 {
  622. flex-grow: 1;
  623. border-left: 1px solid #ECECEC;
  624. padding-left: 30rpx;
  625. }
  626. .btn {
  627. width: 211rpx;
  628. line-height: 83rpx;
  629. background: #333333;
  630. border-radius: 8rpx;
  631. font-weight: bold;
  632. font-size: 28rpx;
  633. color: #FFFFFF;
  634. text-align: center;
  635. }
  636. }
  637. }
  638. </style>