index.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. <template>
  2. <view class="wrap">
  3. <!-- 非H5撑高元素 -->
  4. <!-- <view class="status_bar"></view> -->
  5. <!-- 头部背景 -->
  6. <view class="user"></view>
  7. <!-- 账户信息 -->
  8. <view class="account">
  9. <view class="flex account-ava">
  10. <image :src="avatar" mode="aspectFill" v-if="loginState"></image>
  11. <view class="no-ava" v-else @click="toLogin"></view>
  12. <view class="account-ava-name" v-if="loginState">{{ userInfo.nickName }}</view>
  13. <view class="account-ava-no" @click="toLogin" v-else>登录</view>
  14. </view>
  15. <view class="flex account-info" v-if="loginState">
  16. <navigator url="/packagePrize/prize/index" class="flex account-info-item" hover-class="navigator-hover">
  17. <view>{{ initData.prizeNum }}</view>
  18. <view>我的仓库</view>
  19. </navigator>
  20. <navigator url="/packagePrize/ticket/index" class="flex account-info-item" hover-class="navigator-hover">
  21. <view>{{ initData.ticketNum }}</view>
  22. <view>我的盲票</view>
  23. </navigator>
  24. <navigator url="/packagePrize/bean/index" class="flex account-info-item" hover-class="navigator-hover">
  25. <view>{{ initData.coinNum }}</view>
  26. <view>我的盲豆</view>
  27. </navigator>
  28. </view>
  29. <view class="flex account-info" v-else @click="notLogin">
  30. <view class="flex account-info-item">
  31. <view>-</view>
  32. <view>我的仓库</view>
  33. </view>
  34. <view class="flex account-info-item">
  35. <view>-</view>
  36. <view>我的盲票</view>
  37. </view>
  38. <view class="flex account-info-item">
  39. <view>-</view>
  40. <view>我的盲豆</view>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- 操作项 -->
  45. <view class="action">
  46. <!-- <u-cell-group :border="false">
  47. <u-cell icon="order" title="我的订单" :isLink="true" @click="toOrder" />
  48. <u-cell icon="map" title="我的地址" :isLink="true" @click="toAddress" />
  49. <u-cell icon="kefu-ermai" title="联系我们" :isLink="true" @click="contactService" />
  50. <u-cell icon="info-circle" title="关于我们" :border="false" :isLink="true" :url="'/packageOther/about/index'" />
  51. </u-cell-group> -->
  52. <view class="action-item flex" @click="toOrder">
  53. <view class="action-item-left flex">
  54. <image src="../../static/user/user_order.png" mode="scaleToFill"></image>
  55. <view class="title">我的订单</view>
  56. </view>
  57. <u-icon name="arrow-right" color="#666" size="16"></u-icon>
  58. </view>
  59. <view class="action-item flex" @click="toAddress">
  60. <view class="action-item-left flex">
  61. <image src="../../static/user/user_addr.png" mode="scaleToFill"></image>
  62. <view class="title">我的地址</view>
  63. </view>
  64. <u-icon name="arrow-right" color="#666" size="16"></u-icon>
  65. </view>
  66. <!-- #ifdef MP-WEIXIN -->
  67. <view class="action-item flex" @click="contactService">
  68. <view class="action-item-left flex">
  69. <image src="../../static/user/user_kefu.png" mode="scaleToFill"></image>
  70. <view class="title">联系客服</view>
  71. </view>
  72. <u-icon name="arrow-right" color="#666" size="16"></u-icon>
  73. </view>
  74. <!-- #endif -->
  75. <view class="action-item flex" @click="toAbout">
  76. <view class="action-item-left flex">
  77. <image src="../../static/user/user_about.png" mode="scaleToFill"></image>
  78. <view class="title">关于我们</view>
  79. </view>
  80. <u-icon name="arrow-right" color="#666" size="16"></u-icon>
  81. </view>
  82. </view>
  83. <view class="action">
  84. <!-- <u-cell icon="close-circle" title="退出登录" :isLink="true" :border="false" @click="logout" /> -->
  85. <view class="action-item flex" @click="logout">
  86. <view class="action-item-left flex">
  87. <image class="close" src="../../static/user/user_close.png" mode="scaleToFill"></image>
  88. <view class="title">退出登录</view>
  89. </view>
  90. <u-icon name="arrow-right" color="#666" size="16"></u-icon>
  91. </view>
  92. </view>
  93. <custom-tab-bar :activeValue="'user'" />
  94. </view>
  95. </template>
  96. <script>
  97. import env from '../../config/env.js'
  98. import $http from '@/utils/request.js'
  99. import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
  100. import Auth from '../../components/auth/auth.vue'
  101. export default {
  102. components: {
  103. CustomTabBar,
  104. Auth,
  105. },
  106. data() {
  107. return {
  108. loginState: false, // 判断是否登录
  109. authState: false,
  110. userInfo: {}, //
  111. avatar: '',
  112. certifyStatus: {},
  113. info: {},
  114. authShow: false,
  115. initData: {},
  116. userInfo: '',
  117. };
  118. },
  119. onShow() {
  120. this.loginState = uni.getStorageSync('token') ? true : false
  121. if (this.loginState) {
  122. this.getInit()
  123. this.getBaseInfo()
  124. }
  125. },
  126. methods: {
  127. // 我的数据
  128. getInit() {
  129. uni.showLoading({
  130. title: '加载中'
  131. });
  132. $http.post('/api/v1/mp/user/mine/init', {}).then(res => {
  133. uni.hideLoading();
  134. if (res.code == 0) {
  135. this.initData = res.data
  136. }
  137. }).catch(() => {
  138. uni.hideLoading();
  139. })
  140. },
  141. getBaseInfo() {
  142. $http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
  143. if (res.code == 0) {
  144. this.userInfo = res.data
  145. this.avatar = env.filePublic + res.data.avatar
  146. }
  147. }).catch(() => {
  148. })
  149. },
  150. // 跳转登录
  151. toLogin() {
  152. uni.navigateTo({
  153. url: "/pages/login/index"
  154. })
  155. },
  156. // 我的订单
  157. toOrder() {
  158. if (!this.loginState) {
  159. uni.$u.toast('请登录');
  160. return
  161. }
  162. uni.navigateTo({
  163. url: '/packageGoods/order/index'
  164. })
  165. },
  166. // 我的地址
  167. toAddress() {
  168. if (!this.loginState) {
  169. uni.$u.toast('请登录');
  170. return
  171. }
  172. uni.navigateTo({
  173. url: '/packageOperate/address/index'
  174. })
  175. },
  176. // 关于我们
  177. toAbout() {
  178. uni.navigateTo({
  179. url: '/packageOther/about/index'
  180. })
  181. },
  182. // 没有登录
  183. notLogin() {
  184. uni.$u.toast('请登录');
  185. },
  186. // 注销登录
  187. logout() {
  188. let _this = this
  189. if (!this.loginState) {
  190. uni.$u.toast('已退出登录');
  191. return
  192. }
  193. uni.showModal({
  194. title: '退出登录',
  195. content: '确定要退出登录吗?',
  196. success(res) {
  197. if (res.confirm) {
  198. uni.clearStorage()
  199. _this.loginState = false
  200. _this.authState = false
  201. }
  202. }
  203. })
  204. },
  205. // 联系客服
  206. contactService() {
  207. // #ifdef MP-WEIXIN
  208. wx.openCustomerServiceChat({
  209. extInfo: {
  210. url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
  211. },
  212. corpId: 'ww02da63d80c66284b',
  213. })
  214. // #endif
  215. },
  216. },
  217. //分享好友
  218. onShareAppMessage(res) {
  219. return {
  220. title: '盲票,玩的就是有趣',
  221. path: '/pages/index/index'
  222. }
  223. },
  224. //分享朋友圈
  225. onShareTimeline() {
  226. return {
  227. title: '盲票,玩的就是有趣',
  228. // query: { userId: this.userInfo.userId,
  229. // type: 1, },
  230. query: `userId=${ this.userInfo.userId?this.userInfo.userId:'' }&type=1`
  231. }
  232. }
  233. }
  234. </script>
  235. <style lang="scss" scoped>
  236. ::v-deep .u-cell__body {
  237. padding: 20rpx 0;
  238. }
  239. .status_bar {
  240. width: 100%;
  241. height: var(--status-bar-height);
  242. }
  243. </style>
  244. <style lang="scss" scoped>
  245. .wrap {
  246. padding-bottom: 200rpx;
  247. }
  248. .user {
  249. display: flex;
  250. align-items: center;
  251. height: 560rpx;
  252. background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/mine_bkg.png) center center no-repeat;
  253. background-size: 100vw 560rpx;
  254. }
  255. .account {
  256. margin-top: -350rpx;
  257. margin-bottom: 34rpx;
  258. // 头像
  259. &-ava {
  260. justify-content: flex-start;
  261. margin-bottom: 34rpx;
  262. padding: 0 30rpx;
  263. image {
  264. width: 170rpx;
  265. height: 170rpx;
  266. border-radius: 50%;
  267. border: 2px solid #FFFFFF;
  268. overflow: hidden;
  269. }
  270. .no-ava {
  271. width: 170rpx;
  272. height: 170rpx;
  273. border-radius: 50%;
  274. overflow: hidden;
  275. background: #fff;
  276. }
  277. &-name {
  278. margin-left: 20rpx;
  279. font-size: 34rpx;
  280. color: #FFFFFF;
  281. }
  282. &-no {
  283. margin-left: 20rpx;
  284. color: #FFFFFF;
  285. font-size: 34rpx;
  286. }
  287. }
  288. // 信息
  289. &-info {
  290. height: 216rpx;
  291. justify-content: space-around;
  292. background-color: #FFFFFF;
  293. border-radius: 18rpx;
  294. &-item {
  295. flex-direction: column;
  296. font-size: 34rpx;
  297. view {
  298. line-height: 52rpx;
  299. }
  300. view:first-child {
  301. color: #FD7B24;
  302. line-height: 60rpx;
  303. font-size: 52rpx;
  304. }
  305. }
  306. }
  307. }
  308. .action {
  309. margin: 0 34rpx;
  310. padding: 0 34rpx;
  311. background-color: #FFFFFF;
  312. border-radius: 18rpx;
  313. margin-bottom: 34rpx;
  314. &-item {
  315. justify-content: space-between;
  316. padding: 36rpx 0;
  317. border-bottom: 1px solid #eee;
  318. &-left {
  319. color: #666;
  320. image {
  321. width: 52rpx;
  322. height: 52rpx;
  323. margin-right: 20rpx;
  324. }
  325. .title {
  326. font-size: 30rpx;
  327. line-height: 30rpx;
  328. }
  329. .close {
  330. width: 62rpx;
  331. height: 62rpx;
  332. }
  333. }
  334. }
  335. &-item:last-child {
  336. border-bottom: none;
  337. }
  338. }
  339. </style>