Small_goose_Vue3/pages/mine/setting.vue

<template>
  <view class="setting-container">
    <view class="setting-title">设置</view>
    <view class="setting-list">
      <view class="setting-item" v-for="item in settingList" :key="item.title" @click="onItem(item)">
        <image :src="item.icon" class="item-icon" />
        <view class="item-title">{{ item.title }}</view>
        <text class="arrow">›</text>
      </view>
      <view class="divider" v-for="(item,idx) in settingList" :key="'d'+idx" v-if="idx!==settingList.length-1"></view>
    </view>
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      settingList: [
        { title: '账号安全', icon: '/static/logo.png' },
        { title: '隐私设置', icon: '/static/2.png' },
        { title: '清除缓存', icon: '/static/login.png' },
        { title: '关于我们', icon: '/static/logo.png' }
      ]
    }
  },
  methods: {
    onItem(item) {
      if(item.title==='清除缓存'){
        uni.clearStorageSync();
        uni.showToast({ title: '缓存已清除', icon: 'success' })
      } else {
        uni.showToast({ title: item.title, icon: 'none' })
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.reLaunch({ url: '/pages/login/index' })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.setting-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}
.setting-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  padding: 48rpx 0 32rpx 0;
}
.setting-list {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  overflow: hidden;
}
.setting-item {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  height: 96rpx;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.item-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 24rpx;
}
.item-title {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.arrow {
  color: #bbb;
  font-size: 36rpx;
  margin-left: 8rpx;
}
.divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 0 32rpx;
}
.logout-btn {
  width: 80%;
  margin: 48rpx 10% 0 10%;
  background: #ff4d4f;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
}
</style>