user.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. <template>
  2. <view class="container">
  3. <view class="top">
  4. <view class="my">我的</view>
  5. <view class="userinfo">
  6. <view class="img">
  7. <image class="image" src="../../static/error/missing-face.png" mode=""></image>
  8. </view>
  9. <view class="info">
  10. <view>
  11. <text class="infor" style="margin-left: -160rpx;">v790d7v...v469874561</text>
  12. </view>
  13. <view >
  14. <image class="in" style="margin-left: -160rpx; margin-top: 15rpx;" src="../../static/shouye/huiyuan.png" mode=""></image>
  15. </view>
  16. </view>
  17. <view class="" >
  18. <image @click="showY" class="inf" src="../../static/shouye/userinfo.png" mode=""></image>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="aaa"></view>
  23. <!-- 余额 -->
  24. <view class="body">
  25. <view v-if="show" class="yue">
  26. <view class="te">
  27. 餘額
  28. </view>
  29. <view class="tex">
  30. 12356.00
  31. </view>
  32. <view class="btn">
  33. <button class="btn1" @click="navigator"> <text>充值</text> </button>
  34. <button class="btn1" @click="navigatorT"> <text>提現</text> </button>
  35. </view>
  36. </view>
  37. <view v-else class="yue1">
  38. <view class="tj">統計表</view>
  39. <view class="ljcz">
  40. <view class="lj">累計充值</view>
  41. <view class="ljsu">0.000</view>
  42. </view>
  43. <view class="ljcz">
  44. <view class="lj1">累計提現</view>
  45. <view class="ljsu1">0.000</view>
  46. </view>
  47. <view class="ljcz">
  48. <view class="lj1">累計收益</view>
  49. <view class="ljsu1">0.000</view>
  50. </view>
  51. <view class="ljcz">
  52. <view class="lj1">個人交易總量</view>
  53. <view class="ljsu1">0.000</view>
  54. </view>
  55. <view class="ljcz">
  56. <view class="lj1">團隊交易總量</view>
  57. <view class="ljsu1">0.000</view>
  58. </view>
  59. </view>
  60. <!-- 列表 -->
  61. <view class="gj">
  62. 我的工具
  63. </view>
  64. <view class="user-list flex" @click="navTo('/pages/user/team')">
  65. <image src="../../static/shouye/yue.png" mode="" class="left-img"></image>
  66. <view class="">
  67. 餘額明細
  68. </view>
  69. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  70. </view>
  71. <!-- 额外添加 -->
  72. <view class="user-list flex" @click="navTo('/pages/user/shareQrCode')">
  73. <image src="../../static/shouye/money.png" mode="" class="left-img"></image>
  74. <view class="">
  75. 互娛記錄
  76. </view>
  77. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  78. </view>
  79. <!-- 额外添加 -->
  80. <view class="user-list flex" @click="navTo('/pages/tabulation/tabulation')">
  81. <image src="../../static/shouye/liebiao.png" mode="" class="left-img"></image>
  82. <view class="">
  83. 會員列表
  84. </view>
  85. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  86. </view>
  87. <view class="user-list flex" @click="navTo('/pages/user/favorites')">
  88. <image src="../../static/shouye/liebiao.png" mode="" class="left-img"></image>
  89. <view class="">
  90. 分享鏈接
  91. </view>
  92. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  93. </view>
  94. <view class="user-list flex" @click="openKf()">
  95. <image src="../../static/shouye/liuyan.png" mode="" class="left-img"></image>
  96. <view class="">
  97. 在線留言
  98. </view>
  99. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  100. </view>
  101. <view class="user-list flex" @click="navTo('/pages/transaction/transaction')">
  102. <image src="../../static/shouye/jiaoyi.png" mode="" class="left-img"></image>
  103. <view class="">
  104. 交易密碼
  105. </view>
  106. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  107. </view>
  108. <view class="user-list flex" @click="navTo('/pages/public/login')">
  109. <image src="../../static/shouye/tuichu.png" mode="" class="left-img"></image>
  110. <view class="">
  111. 退出登錄
  112. </view>
  113. <image src="../../static/icon/back.png" mode="" class="right-img"></image>
  114. </view>
  115. <view class="" style="height: 20rpx;">
  116. </view>
  117. </view>
  118. <view class="" style="width: 750rpx; height: 30rpx; background-color: #000;"></view>
  119. </view>
  120. </template>
  121. <script>
  122. import {
  123. mapState,
  124. mapMutations
  125. } from 'vuex';
  126. import uniList from '@/components/uni-list/uni-list.vue';
  127. import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
  128. import {
  129. orderData,
  130. getUserInfo,
  131. // check,
  132. // getLevelList
  133. } from '@/api/user.js';
  134. import {
  135. saveUrl,
  136. interceptor
  137. } from '@/utils/loginUtils.js';
  138. let startY = 0,
  139. moveY = 0,
  140. pageAtTop = true;
  141. export default {
  142. components: {
  143. uniList,
  144. uniListItem
  145. },
  146. data() {
  147. return {
  148. current: 2,
  149. store_name: '',
  150. achievement: '',
  151. code: '',
  152. levelList: [],
  153. show: true
  154. };
  155. },
  156. onShow() {
  157. // 判断是否已经登录
  158. // if (this.hasLogin) {
  159. // this.loadBaseData();
  160. // }
  161. this.loadBaseData();
  162. },
  163. filters: {
  164. phone(e) {
  165. var subStr1 = e.substr(0, 3);
  166. var subStr2 = e.substr(e.length - 4, 4);
  167. var subStr = subStr1 + '...' + subStr2;
  168. e = subStr;
  169. return e;
  170. }
  171. },
  172. onReady() {
  173. // 初始化获取页面宽度
  174. uni.createSelectorQuery()
  175. .select('.container')
  176. .fields({
  177. size: true
  178. },
  179. data => {
  180. // 计算最多下拉的高度
  181. this.userDowm = Math.floor((data.width / 750) * 185);
  182. // 计算最大触发修改高度事件
  183. this.userMaxDowm = Math.floor((data.width / 750) * 250);
  184. }
  185. )
  186. .exec();
  187. },
  188. computed: {
  189. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  190. },
  191. methods: {
  192. showY(){
  193. this.show = !this.show
  194. },
  195. navigatorT() {
  196. uni.navigateTo({
  197. url: '/pages/withdrawal/withdrawal'
  198. })
  199. },
  200. navigator() {
  201. uni.navigateTo({
  202. url: '/pages/recharge/recharge'
  203. })
  204. },
  205. // ...mapMutations('user', ['setUserInfo']),
  206. // sqdl() {
  207. // if (this.hasLogin) {
  208. // if (this.userInfo.enroll_status == 1) {
  209. // uni.showModal({
  210. // title: "提示",
  211. // content: '您提交的申请正在审核中,请耐心等待审核'
  212. // })
  213. // } else {
  214. // this.navTo('/pages/user/sqdl')
  215. // }
  216. // } else {
  217. // this.navTo('/pages/user/sqdl')
  218. // }
  219. // },
  220. // qhx() {
  221. // check({
  222. // verify_code: this.code,
  223. // is_confirm: 1 //1是核销,0是查看
  224. // })
  225. // .then(e => {
  226. // this.$api.msg('核销成功');
  227. // this.close();
  228. // })
  229. // .catch(e => {
  230. // console.log(e);
  231. // });
  232. // },
  233. // sao() {
  234. // let obj = this;
  235. // // #ifndef H5
  236. // uni.scanCode({
  237. // success(e) {
  238. // obj.code = e.result;
  239. // obj.$refs.popuphx.open();
  240. // console.log(obj.$refs.popuphx);
  241. // }
  242. // });
  243. // // #endif
  244. // },
  245. // comfirm(text) {
  246. // console.log(text);
  247. // const result = this.uniCopy(text);
  248. // if (result === false) {
  249. // uni.showToast({
  250. // title: '不支持'
  251. // });
  252. // } else {
  253. // uni.showToast({
  254. // title: '复制成功',
  255. // icon: 'none'
  256. // });
  257. // }
  258. // this.$refs.popupkf.close();
  259. // },
  260. // 加载初始数据
  261. loadBaseData() {
  262. const obj = this
  263. getUserInfo({})
  264. .then(({
  265. data
  266. }) => {
  267. obj.setUserInfo(data);
  268. })
  269. .catch(e => {
  270. console.log(e);
  271. });
  272. },
  273. /**
  274. * 统一跳转接口,拦截未登录路由
  275. * navigator标签现在默认没有转场动画,所以用view
  276. */
  277. navTo(url) {
  278. console.log(url);
  279. if (!this.hasLogin) {
  280. // 保存地址
  281. saveUrl();
  282. // 登录拦截
  283. interceptor();
  284. } else {
  285. uni.navigateTo({
  286. url
  287. });
  288. }
  289. },
  290. close() {
  291. this.$refs.popuphx.close();
  292. this.code = '';
  293. },
  294. // 打开绑定
  295. open() {
  296. this.$refs.gspass.open();
  297. },
  298. cast() {
  299. set_waiter({
  300. uid: this.id
  301. })
  302. .then(e => {
  303. this.$api.msg('绑定成功');
  304. this.$refs.gspass.close();
  305. this.id = '';
  306. })
  307. .catch(err => {
  308. this.$refs.gspass.close();
  309. this.id = '';
  310. });
  311. },
  312. // cancelpass() {
  313. // this.$refs.gspass.close();
  314. // this.id = '';
  315. // }
  316. }
  317. };
  318. </script>
  319. <style lang="scss">
  320. .container {
  321. width: 750rpx;
  322. height: 100%;
  323. }
  324. .top {
  325. width: 750rpx;
  326. height: 327rpx;
  327. background-color: #000000;
  328. }
  329. .my {
  330. margin-left: 40rpx;
  331. padding-top: 40rpx;
  332. height: 45rpx;
  333. font-size: 48rpx;
  334. font-family: PingFang SC;
  335. font-weight: 500;
  336. color: #FFFFFF;
  337. line-height: 48rpx;
  338. }
  339. .userinfo {
  340. padding-top: 80rpx;
  341. display: flex;
  342. justify-content: space-between;
  343. }
  344. .image {
  345. margin-left: 40rpx;
  346. width: 125rpx;
  347. height: 125rpx;
  348. }
  349. .infor {
  350. height: 23rpx;
  351. font-size: 30rpx;
  352. font-family: PingFang SC;
  353. font-weight: 500;
  354. color: #FFFFFF;
  355. line-height: 48rpx;
  356. }
  357. .in {
  358. width: 128rpx;
  359. height: 45rpx;
  360. }
  361. .inf {
  362. margin-top: 25rpx;
  363. width: 48rpx;
  364. height: 48rpx;
  365. }
  366. .aaa {
  367. width: 750rpx;
  368. height: 20rpx;
  369. background-color: #191a1f;
  370. }
  371. // body
  372. .body {
  373. width: 750rpx;
  374. height: 1273rpx;
  375. background-color: #191a1f;
  376. }
  377. .yue {
  378. width: 700rpx;
  379. height: 283rpx;
  380. margin-left: 24rpx;
  381. background-color: #000000;
  382. }
  383. .yue1 {
  384. width: 700rpx;
  385. height: 360rpx;
  386. margin-left: 24rpx;
  387. background-color: #000000;
  388. }
  389. .tj {
  390. height: 28rpx;
  391. font-size: 30rpx;
  392. font-family: PingFang SC;
  393. font-weight: bold;
  394. color: #FFFFFF;
  395. margin-left: 307rpx;
  396. padding-top: 35rpx;
  397. }
  398. .ljcz {
  399. display: flex;
  400. justify-content: space-between;
  401. }
  402. .lj {
  403. height: 23rpx;
  404. font-size: 24rpx;
  405. font-family: PingFang SC;
  406. font-weight: 500;
  407. color: #FFFFFF;
  408. opacity: 0.65;
  409. margin-top: 61rpx;
  410. margin-left: 31rpx;
  411. }
  412. .ljsu {
  413. height: 18rpx;
  414. font-size: 24rpx;
  415. font-family: PingFang SC;
  416. font-weight: 500;
  417. color: #FFFFFF;
  418. margin-top: 63rpx;
  419. margin-right: 33rpx;
  420. }
  421. .lj1 {
  422. height: 23rpx;
  423. font-size: 24rpx;
  424. font-family: PingFang SC;
  425. font-weight: 500;
  426. color: #FFFFFF;
  427. opacity: 0.65;
  428. margin-top: 31rpx;
  429. margin-left: 31rpx;
  430. }
  431. .ljsu1{
  432. height: 18rpx;
  433. font-size: 24rpx;
  434. font-family: PingFang SC;
  435. font-weight: 500;
  436. color: #FFFFFF;
  437. margin-top: 33rpx;
  438. margin-right: 33rpx;
  439. }
  440. .te {
  441. // margin-top: 40rpx;
  442. padding-top: 40rpx;
  443. margin-left: 325rpx;
  444. height: 25rpx;
  445. font-size: 26rpx;
  446. font-family: PingFang SC;
  447. font-weight: 500;
  448. color: #FFFFFF;
  449. }
  450. .tex {
  451. margin-left: 274rpx;
  452. padding-top: 40rpx;
  453. height: 37rpx;
  454. font-size: 48rpx;
  455. font-family: PingFang SC;
  456. font-weight: bold;
  457. color: #FFFFFF;
  458. }
  459. .btn {
  460. margin-top: 100rpx;
  461. display: flex;
  462. justify-content: space-between;
  463. }
  464. .btn1 {
  465. width: 276rpx;
  466. height: 72rpx;
  467. background: #FDB242;
  468. border-radius: 10rpx;
  469. }
  470. .gj {
  471. margin-top: 50rpx;
  472. margin-left: 20rpx;
  473. height: 34rpx;
  474. font-size: 36rpx;
  475. font-family: PingFang SC;
  476. font-weight: bold;
  477. color: #FFFFFF;
  478. line-height: 30rpx;
  479. }
  480. .user-list {
  481. width: 691rpx;
  482. height: 104rpx;
  483. background: #191a1f;
  484. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  485. border-radius: 28rpx;
  486. margin: 20rpx auto;
  487. padding: 0 25rpx;
  488. .left-img {
  489. width: 40rpx;
  490. height: 40rpx;
  491. }
  492. view {
  493. padding-left: 20rpx;
  494. flex-grow: 1;
  495. font-size: 29rpx;
  496. font-weight: bold;
  497. color: #5D5D5D;
  498. }
  499. .right-img {
  500. width: 13rpx;
  501. height: 23rpx;
  502. }
  503. }
  504. .sqdl {
  505. display: block;
  506. width: 689rpx;
  507. margin: 20rpx auto 20rpx;
  508. }
  509. </style>