uniapp-im-shop/pages/my-index/set-up/index.vue

<script setup>
  import { useUserStore } from '@/stores/user'
  import { navigateTo } from '../../../utils/router'
  import { useUI } from '../../../utils/use-ui'
  import { getAppVersion } from '@/api'
  import { compareVersion } from '@/utils/util.js'

  const { showDialog, showToast } = useUI()

  // 基础设置
  const basicSetting = [
    {
      name: '字体大小',
      value: '',
      url: '/pages/my-index/set-up/font-settings'
    },
    // { name: '聊天背景', value: '', url: '' },
    // { name: '朋友圈设置', value: '', url: '' },
    {
      name: '消息通知',
      value: '',
      url: '/pages/my-index/set-up/message/index'
    }
    // { name: '安全设置', value: '', url: '' },
    // { name: '群发消息', value: '', url: '' },
    // { name: '登录设备', value: '', url: '' }
  ]

  // 系统设置
  const systemSetting = [
    // { name: '隐私设置', value: '', url: '' },
    { name: '清除缓存', value: '2', url: '' },
    {
      name: '意见反馈',
      value: '',
      url: '/pages/my-index/set-up/feedback'
    },
    // #ifdef APP-PLUS
    { name: '检查更新', value: '3', url: '' },
    // #endif
    { name: '关于我们', value: '', url: '/pages/discover/company' }
  ]

  const { clearUserInfo } = useUserStore()

  const onItem = item => {
    if (item.value === '2') {
      showDialog(
        '确定要清理缓存吗',
        '缓存是使用过程中的临时数据，清理缓存不会影响您正常使用软件'
      ).then(show => {
        if (show) {
          showToast('清理成功', 'success')
        }
      })
      return
    } else if (item.value === '3') {
      plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {
        getAppVersion().then(res => {
          console.log('应用版本信息', res.data)
          const lastVersion = res.data.version
          const currentVersion = widgetInfo.version
          if (compareVersion(currentVersion, lastVersion) < 0) {
            // 当前版本低于最新版本，提示用户更新
            console.log('当前版本低于最新版本，请更新应用')
            const url = res.data.updateUrl
						const isForceUpdate = res.data.forceUpdate
            uni.showModal({
              title: '更新提示',
              content: res.data.updateMessage,
              confirmText: '立即更新',
              cancelText: '稍后再说',
              showCancel: !isForceUpdate,
              success: res => {
                if (res.confirm) {
                  plus.runtime.openURL(url)
                }
              }
            })
          } else {
            showToast('当前已是最新版本', 'info')
          }
        })
      })
      return
    }
    item.url && navigateTo(item.url)
  }
</script>

<template>
  <view class="set-up-index">
    <view class="card-box">
      <view
        v-for="(item, index) in basicSetting"
        :key="index"
        class="item"
        @click="onItem(item)"
      >
        <text class="left-title">{{ item.name }}</text>
        <view class="right-box">
          <!-- <text class="name">2112</text> -->
          <uni-icons type="right" size="16" color="#999999"></uni-icons>
        </view>
      </view>
    </view>

    <view class="card-box">
      <view
        v-for="(item, index) in systemSetting"
        :key="index"
        class="item"
        @click="onItem(item)"
      >
        <text class="left-title">{{ item.name }}</text>
        <view class="right-box">
          <!-- <text class="name">2112</text> -->
          <uni-icons type="right" size="16" color="#999999"></uni-icons>
        </view>
      </view>
    </view>

    <view class="bottom-btn">
      <button @click="clearUserInfo()">退出登录</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';

  .set-up-index {
    padding: 32rpx 24rpx;

    .card-box + .card-box {
      margin-top: 16rpx;
    }

    .card-box {
      background: #fff;
      border-radius: 16rpx;
      padding: 0 32rpx;
      .item {
        padding: 20rpx 0;
        font-family:
          PingFang SC,
          PingFang SC;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
        .right-box {
          display: flex;
          align-items: center;
          .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
            margin-right: 8rpx;
          }
        }
      }
    }

    .bottom-btn {
      margin-top: 46rpx;
      button {
        height: 80rpx;
        line-height: 80rpx;
        background: #fff;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #eb1c26;
        font-style: normal;
        text-transform: none;
        border-radius: 16rpx;
        &::after {
          display: none;
        }
      }
    }
  }
</style>