ai_uniapp_v2/pages/my/setting.vue

<template>
  <view class="wrap">
    <!-- 关于 -->
    <text class="group-title">关于</text>
    <view class="st-card">
      <view v-for="item in aboutRows" :key="item.key" class="row" @click="onRow(item)">
        <text class="row-name">{{ item.name }}</text>
        <text v-if="item.value" class="row-value">{{ item.value }}</text>
        <up-icon v-else name="arrow-right" color="#c3cddb" size="14" />
      </view>
    </view>

    <!-- 账号 -->
    <template v-if="userStore.isLogin">
      <text class="group-title">账号</text>
      <view class="st-card">
        <view class="row" @click="logout">
          <text class="row-name danger">退出登录</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/store/user.js'
import { useApp } from '@/utils/useApp.js'
import appConfig from '@/utils/config.js'

const userStore = useUserStore()
const { toast } = useApp()

// 微信端非正式版的环境名，展示给用户看更直观
const ENV_TEXT = {
  develop: '开发版',
  trial: '体验版'
}

// 协议正文由后台「内容管理」维护，key 与旧项目一致：service / privacy
const aboutRows = computed(() => [
  { key: 'service', name: '服务条款' },
  { key: 'privacy', name: '隐私政策' },
  { key: 'version', name: '当前版本', value: version.value }
])

/**
 * 版本号展示规则：
 *  - 正式版：只显示一个版本号，优先用微信侧的线上版本号（即上传代码包时填的版本），
 *    取不到再回落到 APP_VERSION。不并排显示两个版本号，避免出现「2.0.0（2.0.0）」。
 *  - 开发版 / 体验版：微信的 version 字段为空字符串，显示 APP_VERSION 并在括号里标注环境，
 *    方便一眼看出当前不是线上包。
 * APP_VERSION 在 utils/config.js 维护，与 manifest.json 的 versionName 保持一致。
 */
const version = computed(() => {
  const appVersion = appConfig.APP_VERSION || '1.0.0'
  // #ifdef MP-WEIXIN
  try {
    const mp = (uni.getAccountInfoSync() || {}).miniProgram || {}
    const envVersion = mp.envVersion
    if (envVersion && envVersion !== 'release') {
      return `${appVersion}（${ENV_TEXT[envVersion] || envVersion}）`
    }
    return mp.version || appVersion
  } catch (e) {
    // 取不到就只显示应用版本
  }
  // #endif
  return appVersion
})

function onRow(item) {
  if (item.key === 'version') return
  uni.navigateTo({ url: `/pages/agreement/agreement?key=${item.key}` })
}

function logout() {
  uni.showModal({
    title: '提示',
    content: '确定退出登录？',
    confirmText: '退出登录',
    confirmColor: '#ef4444',
    success: (res) => {
      if (!res.confirm) return
      userStore.clear()
      toast('已退出登录')
      setTimeout(() => uni.navigateBack(), 800)
    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 12rpx 28rpx 60rpx;
  background: #f3f7fb;
  box-sizing: border-box;
}

.group-title {
  display: block;
  margin: 24rpx 8rpx 14rpx;
  color: #8a95a6;
  font-size: 23rpx;
  font-weight: 800;
}

/* 类名带 st- 前缀，避开全局 .card 的 margin / box-shadow */
.st-card {
  border-radius: 24rpx;
  background: #fff;
  overflow: hidden;
}

.row {
  min-height: 100rpx;
  padding: 26rpx 28rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.row + .row { border-top: 2rpx solid #f4f7fb; }
.row-name { flex: 1; min-width: 0; color: #172033; font-size: 29rpx; }
.row-name.danger { color: #ef4444; text-align: center; }
.row-value { color: #8a95a6; font-size: 26rpx; }
</style>