zx_flk_app/pages/my/set.vue

<template>
    <view class="set-page zx-container">
      <image :src="userInfo.headImg || defaultHeadImg" class="head-img" />
      <view class="list-wrap">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="item"
          @tap="routerLink(item.url)"
        >
          <view class="title">{{ item.title }}</view>
          <view :class="['text-right', item.hideArrow && 'hide-arrow']">
            {{ userInfo[item.textProp] || '' }}
          </view>
        </view>
      </view>
      <view class="zx-form-btn fix-bottom-btn logout-btn" @tap="handleQuit">退出登录</view>
    </view>
  </template>
  
  <script>
  const storage = require('@/common/storage.js')
  import { QINIU_URL, defaultHeadImg } from '@/common/constant'
  export default {
    data() {
      return {
        QINIU_URL,
        defaultHeadImg,
        userInfo: {},
        list: [
          { title: '昵称', url: '', textProp: 'nickname' },
          { title: '注册时间', textProp: 'registrationTime', hideArrow: true },
          { title: '修改密码', url: '/pages/loginRegister/changePassword' },
          { title: '关于我们', url: '/pages/aboutMy/aboutMy', textProp: 'version' },
          { title: '隐私协议', url: '/pages/contract/contract?contract_id=270' },
          { title: '用户条款', url: '/pages/contract/contract?contract_id=102' }
        ]
      }
    },
    onShow() {
      const user_token = storage.getUserToken()
      user_token && this.loadUserInfo()
    },
    methods: {
      loadUserInfo() {
        const userInfo = storage.getUserInfoData()
        console.log('userInfo', userInfo)
        this.setData({ userInfo })
      },
      routerLink(url) {
        uni.navigateTo({ url })
      },
      handleQuit() {
        uni.showModal({
          title: '提示',
          content: '您确定要退出当前账号吗？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '确定',
          success: function(res) {
            if (res.confirm) {
              storage.clearStorage()
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  @import "@/libs/css/layout.scss";
  
  .set-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 66rpx 32rpx 48rpx;
  
    .head-img {
        width: 174rpx;
        height: 174rpx;
        margin: 0 auto 40rpx;
        border-radius: 50%;
    }
  
    .list-wrap {
        width: 100%;
        background: #FFFFFF;
        border-radius: 40rpx;
        padding: 8rpx 32rpx;
  
        .item {
            padding: 40rpx 0;
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #F1F4F5;
  
            &:last-child {
                border-bottom: 0;
            }
  
            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #060809;
            }
  
            .text-right {
                font-family: Futura, Futura;
                font-weight: 500;
                font-size: 30rpx;
                color: #060809;
                display: flex;
                align-items: center;
  
                &::after {
                    content: "";
                    width: 28rpx;
                    height: 28rpx;
                    margin-left: 12rpx;
                    background: url('https://qiniu.bms16.com/FtGhNkwKlhR7hOZsaj0gmRl9KjPx');
                    background-size: 100%;
                }
  
                &.hide-arrow {
                    &::after {
                        display: none;
                    }
                }
            }
        }
    }
  
    .logout-btn {
        color: #FA2918;
        background: #E4E7EC;
    }
  }
  </style>