index.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <view class="user-content">
  3. <!-- 头部 -->
  4. <view class="user-head" @click="toUserPage">
  5. <view class="user-photo">
  6. <text v-if="hasLogin"><open-data type="userAvatarUrl"></open-data></text>
  7. <u-image v-else src="/static/logo.png" width="100" height="100"></u-image>
  8. </view>
  9. <view class="user-info">
  10. <text v-if="hasLogin"><open-data type="userNickName"></open-data></text>
  11. <u-button v-else size="mini" shape="circle" @click="toLoginPage">登录</u-button>
  12. </view>
  13. <view v-if="hasLogin">
  14. <u-icon name="arrow-right" color="#fff"></u-icon>
  15. </view>
  16. </view>
  17. <view class="my-ledou" v-if="hasLogin">
  18. <view class="user-jifen">
  19. <view>我的乐豆:<text>345</text></view>
  20. <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
  21. </view>
  22. <view>
  23. <u-button size="mini" type="warning" shape="circle" @click="toLdPage">查看明细</u-button>
  24. </view>
  25. </view>
  26. <!-- 列表 -->
  27. <view class="user-list">
  28. <u-cell-group>
  29. <u-cell-item icon="order" icon-size="38" :icon-style="{color:'#ff5500'}" index="1" @click="toPage" title="我的订单"></u-cell-item>
  30. <u-cell-item icon="gift" icon-size="40" :icon-style="{color:'#00aaff'}" index="0" @click="toPage" title="投递记录"></u-cell-item>
  31. <u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="2" @click="toPage" title="服务协议"></u-cell-item>
  32. <!-- <u-cell-item icon="info-circle" icon-size="38" :icon-style="{color:'#55aa00'}" index="3" @click="toPage" title="关于我们"></u-cell-item> -->
  33. </u-cell-group>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import {logout, checkLogin } from '@/api/login.js'
  39. export default {
  40. data() {
  41. return {
  42. quitButton: {
  43. borderRadius:'100rpx',
  44. fontSize:'30rpx',
  45. background: '#01c9b2'
  46. },
  47. hasLogin: false
  48. };
  49. },
  50. onShow() {
  51. checkLogin().then(res => {
  52. console.log(res)
  53. this.hasLogin = res.status==200
  54. })
  55. },
  56. onLoad() {
  57. },
  58. methods:{
  59. // 打开对应的页面
  60. toPage(index){
  61. let pageUrl=[
  62. '/pages/userCenter/deliveryRecord',
  63. '/pages/order/order',
  64. '/pages/agreement/agreement?fromPage=usercenter',
  65. '/pages/userCenter/aboutUs'
  66. ]
  67. if(index<2&&this.hasLogin || index>=2){
  68. uni.navigateTo({
  69. url: pageUrl[index]
  70. })
  71. }else{
  72. this.toLoginPage()
  73. }
  74. },
  75. // 跳转
  76. toUserPage(){
  77. // 未登录跳转登录,已登录跳转用户信息页
  78. if(this.hasLogin){
  79. uni.navigateTo({
  80. url: '/pages/userCenter/userInfo/userInfo'
  81. })
  82. }else{
  83. this.toLoginPage()
  84. }
  85. },
  86. // 乐豆明细
  87. toLdPage(){
  88. uni.navigateTo({
  89. url: '/pages/userCenter/ldDetailed'
  90. })
  91. },
  92. bindGetUserInfo(res){
  93. console.log(res)
  94. },
  95. toLoginPage(){
  96. uni.navigateTo({
  97. url: '/pages/login/login'
  98. })
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="scss">
  104. .user-content{
  105. width: 100%;
  106. .user-head{
  107. background: #01c9b2;
  108. display: flex;
  109. align-items: center;
  110. padding: 35rpx 55rpx;
  111. .user-info{
  112. flex-grow: 1;
  113. padding: 0 20rpx;
  114. color: #FFFFFF;
  115. }
  116. .user-photo{
  117. width: 100rpx;
  118. height: 100rpx;
  119. border-radius: 50%;
  120. overflow: hidden;
  121. margin-right: 5rpx;
  122. }
  123. }
  124. .my-ledou{
  125. background: #FFFFFF;
  126. border-radius: 15upx;
  127. display: flex;
  128. align-items: center;
  129. justify-content: space-between;
  130. padding: 20upx;
  131. margin: 20upx;
  132. box-shadow: 0upx 3upx 6upx #eee;
  133. .user-jifen{
  134. display: flex;
  135. align-items: center;
  136. text{
  137. font-size: 40upx;
  138. font-weight: bold;
  139. color: red;
  140. }
  141. >view{
  142. &:first-child{
  143. display: flex;
  144. align-items: center;
  145. }
  146. }
  147. }
  148. }
  149. .user-list{
  150. border-radius: 15upx;
  151. margin: 20upx;
  152. overflow: hidden;
  153. box-shadow: 0upx 3upx 6upx #eee;
  154. }
  155. .user-btn{
  156. padding: 85rpx 200rpx;
  157. }
  158. }
  159. </style>