index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <view class="my" :style="{background:'url('+ bannerImage +')'}">
  3. <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
  4. <view class="content">
  5. <view class="news flex jcsb">
  6. <view class="info flex">
  7. <view style="width:128rpx;height:128rpx"><image class="img" :src="avatar || defaultAvatar" @tap="chooseImage"></image></view>
  8. <view class="info-text flex-column jcsa">
  9. <view class="info-top flex aic">
  10. <view class="name">{{info.name}}</view>
  11. <view class="level flex aic">
  12. <re-image imgSrc="/retail/main/ic_chuji.png" width="54" height="60"></re-image>
  13. <view class="level-text">{{info.lvName}}</view>
  14. </view>
  15. </view>
  16. <view class="phone">{{info.username}}</view>
  17. </view>
  18. </view>
  19. <view class="right" @click="logOut"><re-image imgSrc="/retail/my/ic_more.png" width="24" height="24" class="more"></re-image></view>
  20. </view>
  21. <view class="menu">
  22. <view class="menu-item item-one">
  23. <view class="item-left flex aic jcsb" @click="toAccount">
  24. <view class="flex aic">
  25. <re-image imgSrc="/retail/my/ic_jilu.png" width="48" height="48"></re-image>
  26. <text>账户充值记录</text>
  27. </view>
  28. <re-image imgSrc="/retail/my/ic_more.png" width="24" height="24"></re-image>
  29. </view>
  30. </view>
  31. <view class="menu-item">
  32. <view class="item-left flex aic jcsb">
  33. <view class="flex aic">
  34. <re-image imgSrc="/retail/my/ic_kefu.png" width="48" height="48"></re-image>
  35. <text>联系客服</text>
  36. </view>
  37. <re-image imgSrc="/retail/my/ic_more.png" width="24" height="24"></re-image>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <u-popup :show="show" @close="close" @open="open">
  43. <view class="safe-area-inset-bottom">
  44. <view class="login-out" @click="outLogin">退出登录</view>
  45. </view>
  46. </u-popup>
  47. </view>
  48. </template>
  49. <script>
  50. import { toRpx } from '@/utils/calculate.js'
  51. import defaultConfig from '@/config/default.js'
  52. import { changeAvatar } from '@/apis/main'
  53. export default {
  54. components: {},
  55. computed: {
  56. statusBarHeight() {
  57. return this.$store.state.info.systemInfo?.statusBarHeight
  58. },
  59. },
  60. data() {
  61. return {
  62. show:false,
  63. bannerImage: defaultConfig.ossImgUrl + '/retail/my/img_myBgc.png',
  64. defaultAvatar: '../../static/image/img_touxiang.png',
  65. navBarHeight: uni.getStorageSync('navBarHeight'),
  66. info: uni.getStorageSync('userInfo'),
  67. avatar: uni.getStorageSync('avatar'),
  68. }
  69. },
  70. onLoad() {
  71. },
  72. methods: {
  73. outLogin(){
  74. uni.removeStorageSync('accessToken')
  75. uni.removeStorageSync('userInfo')
  76. uni.removeStorageSync('name')
  77. uni.redirectTo({
  78. url: '/pages/login/index'
  79. })
  80. },
  81. toAccount(){
  82. uni.navigateTo({
  83. url: '/pages/accountRecharge/index'
  84. })
  85. },
  86. chooseImage() {
  87. var that = this;
  88. uni.chooseImage({
  89. count: 1, // 默认9
  90. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  91. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  92. success: function (res) {
  93. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  94. that.avatar = res.tempFilePaths[0];
  95. that.upAvatar(that.avatar)
  96. }
  97. });
  98. },
  99. // 更换头像
  100. async upAvatar(avatar) {
  101. await changeAvatar({avatar:avatar})
  102. uni.setStorageSync('avatar',avatar)
  103. uni.showToast({
  104. title:'更换成功'
  105. })
  106. },
  107. logOut(){
  108. this.show = true
  109. },
  110. open() {
  111. // console.log('open');
  112. },
  113. close() {
  114. this.show = false
  115. // console.log('close');
  116. }
  117. },
  118. mounted() {
  119. },
  120. }
  121. </script>
  122. <style lang="scss" scoped>
  123. .my {
  124. background-repeat: no-repeat !important;
  125. background-size: contain !important;
  126. // background-position: top;
  127. width: 100%;
  128. position: absolute;
  129. top: 0;
  130. bottom: 0;
  131. .content{
  132. padding: 0 32rpx;
  133. .news {
  134. .info {
  135. .img{
  136. flex-shrink: 0;
  137. width: 128rpx;
  138. height: 128rpx;
  139. border-radius: 8rpx;
  140. }
  141. .info-text {
  142. margin: 8rpx 0 20rpx 36rpx;
  143. .info-top {
  144. .name {
  145. font-weight: 500;
  146. font-size: 32rpx;
  147. color: #363531;
  148. }
  149. .level {
  150. margin-left: 12rpx;
  151. .level-text {
  152. width: 105.9rpx;
  153. height: 47rpx;
  154. padding: 0 16rpx 0 26rpx;
  155. background: linear-gradient(130deg, #FFB873 0%, #FEC287 0%, #E69349 100%);
  156. border-radius: 0rpx 18rpx 18rpx 0rpx;
  157. font-weight: 500;
  158. font-size: 24rpx;
  159. color: #FFFFFF;
  160. line-height: 47rpx;
  161. margin-left: -16rpx;
  162. // text-align: left;
  163. }
  164. }
  165. }
  166. }
  167. .phone {
  168. font-weight: 400;
  169. font-size: 28rpx;
  170. color: #363531;
  171. }
  172. }
  173. .right{
  174. flex: 1;
  175. display: flex;
  176. justify-content: flex-end;
  177. .more{
  178. margin-top: 26rpx;
  179. }
  180. }
  181. .news-total {
  182. margin-top: 44rpx;
  183. .item-num {
  184. font-weight: bold;
  185. font-size: 40rpx;
  186. color: #363531;
  187. }
  188. .orange {
  189. color: #FF6400;
  190. }
  191. .item-text {
  192. font-weight: 400;
  193. font-size: 28rpx;
  194. color: #9598A6;
  195. }
  196. }
  197. }
  198. .menu{
  199. margin-top: 32rpx;
  200. background: #fff;
  201. border-radius: 16rpx;
  202. .menu-item{
  203. padding: 32rpx 28rpx 32rpx 24rpx;
  204. .item-left{
  205. text{
  206. margin-left: 20rpx;
  207. }
  208. }
  209. }
  210. .item-one{
  211. border-bottom: 2rpx solid #F0F2F4;
  212. }
  213. }
  214. }
  215. .login-out{
  216. text-align: center;
  217. margin: 40rpx 0;
  218. }
  219. }
  220. </style>