mine.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. <template>
  2. <view class="mine-page">
  3. <!-- 头部 -->
  4. <headContent borderBottom>
  5. <template #left>
  6. <reverse-back />
  7. </template>
  8. <template #content>
  9. <view class="haed-title">
  10. 个人中心
  11. </view>
  12. </template>
  13. <template #right>
  14. <page-style />
  15. </template>
  16. </headContent>
  17. <!-- 个人信息 -->
  18. <view class="mine-info" v-if="showMuen">
  19. <view class="mine-account">{{ userInfo.account }}</view>
  20. <!-- <view class="mine-account">{{ $showAccount(userInfo.account_number) }}</view> -->
  21. <view class="mine-UID">UID: {{ userInfo.id }}<text v-show="userInfo.id" class="mine-copy iconfont"
  22. @click.stop="setCopy(userInfo.id)">&#xe65f;</text>
  23. </view>
  24. </view>
  25. <!-- 个人信息 -->
  26. <view class="mine-info" v-else @click.stop="goLogin()">
  27. <view class="mine-account">点击登录/注册</view>
  28. <view class="mine-UID">Hi, 欢迎来到BiKing</view>
  29. </view>
  30. <gap />
  31. <!-- 个人信息 -->
  32. <view class="mine-muen">
  33. <view v-show="showMuen" class="mine-muen-item" @click.stop="openSafetySet()">
  34. <view class="muen-content">
  35. <text class="muen-icon iconfont">&#xec4d;</text>
  36. <!--
  37. <text class="muen-icon iconfont">&#xe616;</text> -->
  38. <text class="muen-text">安全设置</text>
  39. </view>
  40. <view class="muen-more">
  41. <text class="more-icon iconfont">&#xe8b5;</text>
  42. <!-- <image class="muen-more-icon" src="../../static/logo.png" mode="aspectFit" /> -->
  43. </view>
  44. </view>
  45. <view v-show="showMuen" class="mine-muen-item" @click.stop="goIdentification()">
  46. <view class="muen-content">
  47. <text class="muen-icon iconfont">&#xe616;</text>
  48. <text class="muen-text">身份验证</text>
  49. </view>
  50. <view class="muen-more">
  51. <text class="muen-more-text">{{ userInfo.is_realname == 1 ? '去认证' : '' }}</text>
  52. <text class="more-icon iconfont">&#xe8b5;</text>
  53. </view>
  54. </view>
  55. <view v-show="showMuen" class="mine-muen-item" @click.stop="getAddress()">
  56. <view class="muen-content">
  57. <text class="muen-icon iconfont">&#xe688;</text>
  58. <text class="muen-text">提现地址</text>
  59. </view>
  60. <view class="muen-more">
  61. <text class="more-icon iconfont">&#xe8b5;</text>
  62. </view>
  63. </view>
  64. <view v-show="showMuen" class="mine-muen-item">
  65. <view class="muen-content">
  66. <text class="muen-icon iconfont">&#xe784;</text>
  67. <text class="muen-text">我的红包</text>
  68. </view>
  69. <view class="muen-more">
  70. <text class="more-icon iconfont">&#xe8b5;</text>
  71. </view>
  72. </view>
  73. <view v-show="showMuen" class="mine-muen-item" @click.stop="openActivityCenter()">
  74. <view class="muen-content">
  75. <text class="muen-icon iconfont">&#xe614;</text>
  76. <text class="muen-text">活动中心</text>
  77. </view>
  78. <view class="muen-more">
  79. <text class="more-icon iconfont">&#xe8b5;</text>
  80. </view>
  81. </view>
  82. <view class="mine-muen-item" @click.stop="openShare()">
  83. <view class="muen-content">
  84. <text class="muen-icon iconfont">&#xe615;</text>
  85. <text class="muen-text">邀请链接</text>
  86. </view>
  87. <view class="muen-more">
  88. <text class="more-icon iconfont">&#xe8b5;</text>
  89. </view>
  90. </view>
  91. <view v-show="showMuen" class="mine-muen-item">
  92. <view class="muen-content">
  93. <text class="muen-icon iconfont">&#xe6e3;</text>
  94. <text class="muen-text">合约战绩</text>
  95. </view>
  96. <view class="muen-more">
  97. <text class="more-icon iconfont">&#xe8b5;</text>
  98. </view>
  99. </view>
  100. </view>
  101. <gap />
  102. <view class="mine-muen">
  103. <view class="mine-muen-item" @click.stop="openSetting()">
  104. <view class="muen-content">
  105. <text class="muen-icon iconfont">&#xe616;</text>
  106. <text class="muen-text">系统设置</text>
  107. </view>
  108. <view class="muen-more">
  109. <text class="more-icon iconfont">&#xe8b5;</text>
  110. </view>
  111. </view>
  112. </view>
  113. <gap />
  114. <view class="mine-muen">
  115. <view class="mine-muen-item">
  116. <view class="muen-content">
  117. <text class="muen-icon iconfont">&#xe823;</text>
  118. <text class="muen-text">检查更新</text>
  119. </view>
  120. <view class="muen-more">
  121. <text class="muen-more-text">当前版本 V2.4.6 62</text>
  122. <text class="more-icon iconfont">&#xe8b5;</text>
  123. </view>
  124. </view>
  125. </view>
  126. <gap />
  127. <view class="mine-muen">
  128. <view class="mine-muen-item" @click.stop="getService()">
  129. <view class="muen-content">
  130. <text class="muen-icon iconfont">&#xe621;</text>
  131. <text class="muen-text">在线客服</text>
  132. </view>
  133. <view class="muen-more">
  134. <text class="more-icon iconfont">&#xe8b5;</text>
  135. </view>
  136. </view>
  137. <view class="mine-muen-item" @click.stop="getAboutUs()">
  138. <view class="muen-content">
  139. <text class="muen-icon iconfont">&#xe609;</text>
  140. <text class="muen-text">关于我们</text>
  141. </view>
  142. <view class="muen-more">
  143. <text class="more-icon iconfont">&#xe8b5;</text>
  144. </view>
  145. </view>
  146. <view class="mine-btn" @click.stop="retreatFromLogin" v-show="showMuen">
  147. 安全退出
  148. </view>
  149. </view>
  150. <!-- 邀请 -->
  151. <sharePage ref="sharePageRef" :tabBar="false" />
  152. <!-- 确认退出 -->
  153. <confirm-popup ref="confirmPopup" @confirm="confirmOut" content="确认退出此账号"/>
  154. </view>
  155. </template>
  156. <script>
  157. import {
  158. mapGetters
  159. } from 'vuex'
  160. import reverseBack from "@/components/headModules/reverse-back.vue"
  161. import pageStyle from "@/components/headModules/style.vue"
  162. import {
  163. Way_getUserInfo
  164. } from "@/utils/common-request.js"
  165. import {
  166. refreshAccount
  167. } from "@/utils/common.js"
  168. export default {
  169. components: {
  170. pageStyle,
  171. reverseBack
  172. },
  173. data() {
  174. return {
  175. showMuen: false,
  176. userInfo: {}
  177. };
  178. },
  179. onShow() {
  180. },
  181. computed: {
  182. ...mapGetters([
  183. 'token'
  184. ]),
  185. },
  186. watch: {
  187. token: {
  188. handler(newToken) {
  189. this.showMuen = newToken ? true : false
  190. if (newToken) {
  191. this.getUserInfo()
  192. }
  193. },
  194. immediate: true
  195. }
  196. },
  197. methods: {
  198. // 获取用户信息
  199. getUserInfo() {
  200. Way_getUserInfo().then(res => {
  201. this.userInfo = res
  202. }).catch(err => {
  203. this.userInfo = {}
  204. })
  205. },
  206. // 去登陆
  207. goLogin() {
  208. uni.navigateTo({
  209. url: '/pages/login/index'
  210. });
  211. },
  212. // 打开邀请
  213. openShare() {
  214. this.$nextTick(() => {
  215. this.$refs.sharePageRef.openShare()
  216. })
  217. },
  218. // 系统设置
  219. openSetting() {
  220. uni.navigateTo({
  221. url: '/pages/content/setting'
  222. })
  223. },
  224. // 安全设置
  225. openSafetySet() {
  226. uni.navigateTo({
  227. url: '/pages/content/safety-set'
  228. })
  229. },
  230. // 在线客服
  231. getService() {
  232. uni.navigateTo({
  233. // url: '/pages/content/customer-service'
  234. url: this.$path.service
  235. })
  236. },
  237. // 关于我们
  238. getAboutUs() {
  239. this.getSinglePage(1)
  240. },
  241. // 安全退出
  242. retreatFromLogin() {
  243. this.$nextTick(() => {
  244. this.$refs.confirmPopup.open()
  245. });
  246. },
  247. // 确认 安全退出
  248. confirmOut() {
  249. refreshAccount()
  250. },
  251. // 获取地址列表
  252. getAddress() {
  253. uni.navigateTo({
  254. url: '/pages/content/address'
  255. })
  256. },
  257. // getAboutUs
  258. openActivityCenter() {
  259. this.getSinglePage(2)
  260. },
  261. getSinglePage(id) {
  262. uni.navigateTo({
  263. url: `/pages/content/h5-list?id=${id}`
  264. })
  265. },
  266. setCopy(val) {
  267. uni.setClipboardData({
  268. data: val,
  269. success: function() {
  270. uni.showToast({
  271. title: '复制成功',
  272. icon: 'none'
  273. })
  274. }
  275. });
  276. },
  277. // 去认证
  278. goIdentification(){
  279. uni.navigateTo({
  280. url:'/pages/content/identification/index'
  281. })
  282. // , {
  283. // "path": "pages/content/identification/index",
  284. // "style": {
  285. // "navigationBarTitleText": "身份验证",
  286. // "enablePullDownRefresh": false
  287. // }
  288. // }, {
  289. // "path": "pages/content/identification/select-type",
  290. // "style": {
  291. // "navigationBarTitleText": "选择验证类型",
  292. // "enablePullDownRefresh": false
  293. // }
  294. // }
  295. }
  296. }
  297. }
  298. </script>
  299. <style>
  300. page {
  301. background-color: #fff;
  302. }
  303. </style>
  304. <style lang="scss" scoped>
  305. .mine-info {
  306. width: 100%;
  307. min-height: 140rpx;
  308. background-color: $modules-box-bg;
  309. padding: 23rpx $pages-padding 30rpx;
  310. display: flex;
  311. flex-direction: column;
  312. justify-content: space-between;
  313. .mine-account {
  314. font-size: 34rpx;
  315. font-family: PingFang SC, PingFang SC-Bold;
  316. font-weight: 700;
  317. color: #1a1a1a;
  318. }
  319. .mine-UID {
  320. margin-top: 13rpx;
  321. font-size: 22rpx;
  322. font-family: PingFang SC, PingFang SC-Regular;
  323. font-weight: 400;
  324. color: #808080;
  325. display: flex;
  326. align-items: center;
  327. .copy-UID {
  328. width: 22rpx;
  329. height: 26rpx;
  330. margin-left: 12rpx;
  331. }
  332. .mine-copy {
  333. margin-left: 10rpx;
  334. font-size: 30rpx;
  335. }
  336. }
  337. }
  338. // <view class="mine-muen">
  339. // <view class="muen-content">
  340. // <image class="muen-icon" src="../../static/logo.png" mode="aspectFit" /> <text class="muen-text">安全设置</text>
  341. // </view>
  342. // <image class="muen-moey" src="../../static/logo.png" mode="aspectFit" />
  343. // </view>
  344. .mine-muen-item {
  345. width: 100%;
  346. height: 94rpx;
  347. display: flex;
  348. justify-content: space-between;
  349. align-items: center;
  350. background-color: $modules-box-bg;
  351. padding: 0 $pages-padding;
  352. border-bottom: 1rpx solid #f2f2f2;
  353. &:last-child {
  354. border-bottom: none;
  355. }
  356. .muen-content {
  357. display: flex;
  358. align-items: center;
  359. .muen-icon {
  360. width: 50rpx;
  361. // height: 28rpx;
  362. font-size: 32rpx;
  363. }
  364. .muen-text {
  365. font-size: 28rpx;
  366. font-family: PingFang SC, PingFang SC-Regular;
  367. font-weight: 400;
  368. color: #1a1a1a;
  369. line-height: 40rpx;
  370. }
  371. }
  372. .muen-more {
  373. flex-shrink: 0;
  374. display: flex;
  375. align-items: center;
  376. .muen-more-text {
  377. font-size: 28rpx;
  378. font-family: PingFang SC, PingFang SC-Regular;
  379. font-weight: 400;
  380. color: #0abd76;
  381. padding-right: 8rpx;
  382. }
  383. .more-icon {
  384. font-size: 30rpx;
  385. color: #939292;
  386. transform: rotate(-180deg);
  387. }
  388. }
  389. }
  390. .mine-btn {
  391. width: 690rpx;
  392. height: 90rpx;
  393. margin: 80rpx auto;
  394. background: #05c175;
  395. border-radius: 8rpx;
  396. font-size: 30rpx;
  397. font-family: PingFang SC, PingFang SC-Regular;
  398. font-weight: 400;
  399. text-align: center;
  400. color: #ffffff;
  401. line-height: 90rpx;
  402. letter-spacing: 0.64rpx;
  403. }
  404. </style>