lcoco/pages/my/set.vue

<template>
  <view class="set-box">
    <en-nav title="设置" title-color="#333333" ></en-nav>
    <view class="set-list">
      <view class="set-item">
        <view class="item-text sys-height-44 sys-color-black">清理缓存</view>
        <view class="item-icon" @click="clearStorage()">
          <text class=" sys-height-44 sys-color-gray-9"> {{storageSize}}</text>
          <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
        </view>
      </view>
    </view>

    <view class="set-list">
      <view class="set-item" @click="goToUrl(setItem.url)" v-for="setItem in setList">
        <view class="item-text sys-height-44 sys-color-black">{{setItem.text}}</view>
        <view class="item-icon">
          <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
        </view>
      </view>
    </view>

    <view class="set-list">
      <view class="set-item" @click="goToUrl(sysItem.url)" v-for="sysItem in sysList">
        <view class="item-text sys-height-44 sys-color-black">{{sysItem.text}}</view>
        <view class="item-icon">
          <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
        </view>
      </view>
    </view>

    <view class="set-list">
      <view class="set-item" @click="goToUrl('./set/conversion')">
        <view class="item-text sys-height-44 sys-color-black">兑换码</view>
        <view class="item-icon">
          <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
        </view>
      </view>
    </view>

    <view class="set-id sys-color-gray-9">ID：87999890</view>
    <view class="set-quit sys-color-black">退出账号</view>


  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
export default {
  components: {EnNav},
  data() {
    return {
      storageSize:'',
      setList:[
        {'text':'实名认证(未认证)','url':'./set/autonym'},
        {'text':'修改密码','url':'./set/change-pass'},
        {'text':'修改绑定手机','url':'./set/chang-phone'},
        {'text':'更多设置','url':'./set/more-set'},
      ],
      sysList:[
        {'text':'意见与反馈','url':''},
        {'text':'关于我们','url':'./agreement/about-us'},
        {'text':'用户协议','url':'./agreement/agreement'},
        {'text':'隐私政策','url':'./agreement/privacy'},
        // {'text':'第三方信息共享清单','url':''},
        {'text':'个人信息清单','url':'./agreement/personage'},
        {'text':'相关许可证','url':'./agreement/all-permission'},
        // {'text':'ICOCO权限及用途说明','url':''},
        // {'text':'隐私中心','url':''},
      ],
    }
  },
  mounted() {
    this.getStorageSize()
  },
  methods: {
      goToUrl(url){
        if(url===''){
          return;
        }
        uni.navigateTo({
          'url':url
        })
      },
    getStorageSize:function(){
      let that = this;
      uni.getStorageInfo({
        success(res) {
          console.log(res)
          console.log(res.keys);
          console.log(res.limitSize);
          let size = res.currentSize;
          if (size < 1024) {
            that.storageSize = (size).toFixed(2) + ' B';
          } else if (size/1024>=1 && size/1024/1024<1) {
            that.storageSize = (Math.floor(size/1024*100)/100).toFixed(2) + ' KB';
          } else if (size/1024/1024>=1) {
            that.storageSize = (Math.floor(size/1024/1024*100)/100).toFixed(2) + ' M';
          }
        }
      })
    },
    clearStorage:function (){
      let that = this;
      uni.showModal({
        title:'提示',
        content:'确定清除缓存吗?',
        confirmText:'立即清除',
        success(res) {
          if(res.confirm){
            let token=uni.getStorageSync('token')
            uni.clearStorageSync();
            if(token){
              uni.setStorageSync('token',token)
            }
            //重新获取并显示清除后的缓存大小
            that.getStorageSize();
            uni.showToast({
              title:'清除成功'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.set-box{
  background-color: #F9F9F9;
  min-height: 100vh;
  padding-bottom: 50rpx;
  .set-list{
    margin: 20rpx 32rpx 0 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding:  0 32rpx;
    .set-item{
      padding: 32rpx 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #F2F2F2;
      .item-text{
        font-size: 28rpx;
      }
      .item-icon{
        .iconfont{
          font-size: 28rpx;
        }
      }
    }
    .set-item:last-child{
      border-bottom: none;
    }
  }
  .set-id{
    text-align: center;
    margin-top: 40rpx;
    font-size: 24rpx;
  }
  .set-quit{
    margin: 40rpx 32rpx;
    font-size: 32rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 16rpx;
    background: #E0E0E0;
    text-align: center;
  }
}

</style>