SmartAssiter-Discard/pages/tabbar/my.vue

<template>
	<!-- #ifdef APP -->
		<scroll-view style="flex:1">
		<!-- #endif -->
		  <view class="my-page">
		  	  <!-- 个人卡片信息 -->
		  	<view class="card" @tap="onCardTap">
		  		<view v-if="isLogin == true">
		  			<image class="card-img" src="/static/user.png" mode="aspectFill" />
		  		</view>
		  		<view v-else>
		  			<image class="card-img" src="/static/userDefault.png" mode="aspectFill" />
		  		</view>
		  		<view class="card-body">
		  			<text class="card-title">{{userInfo}}</text>
		  		</view>
		    </view>
			<!-- 后台服务器选择 -->
			<view class="card server-card" @tap="onServerTap">
				<text class="server-label">Server</text>
				<view class="server-value">
					<text class="server-name">{{currentServerName}}</text>
					<uni-icons type="bottom" size="16" color="#3A6FA1" />
				</view>
			</view>
			<view class="verType">
				<text class="colorType">{{ "version: 1.0.1" }}</text>
			</view>
		  </view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
import { checkToken, getUserName } from '../../common/auth';
import { SERVER_LIST, getBaseUrl, setBaseUrl } from '../../api/httpInstance';

const isLogin = ref(false)
const userInfo = ref("login/register")

// 后台服务器选择
const serverNames = ref<string[]>([])
const currentServerName = ref("")

function initServerList() {
	const names: string[] = []
	SERVER_LIST.forEach((item) => {
		names.push(item.name)
	})
	serverNames.value = names
	// 恢复上次保存的选择，没有则默认第一个
	const url = getBaseUrl()
	SERVER_LIST.forEach((item) => {
		if (item.url == url) {
			currentServerName.value = item.name
		}
	})
}

function onServerTap() {
	uni.showActionSheet({
		itemList: serverNames.value,
		success: (res) => {
			const idx = res.tapIndex
			if (idx >= 0 && idx < SERVER_LIST.length) {
				// 保存用户选择（内存 + 本地存储），下次启动直接加载
				setBaseUrl(SERVER_LIST[idx].url)
				currentServerName.value = SERVER_LIST[idx].name
				uni.showToast({
					title: 'Switched to: ' + SERVER_LIST[idx].name,
					icon: 'none',
					duration: 2000
				})
			}
		}
	})
}

function refreshLoginState() {
	const name = getUserName()
	if(name != null && name.length > 0) {
		isLogin.value = true
		userInfo.value = name
	} else {
		isLogin.value = false
		userInfo.value = "login/register"
	}
}

function onCardTap () {
	// 已登录
	if(isLogin.value){
		uni.navigateTo({
			url: '/pages/displayUserInfo/displayUserInfo'
		})

	} else {  // 未登录
		uni.navigateTo({
		  url: '/pages/login/login'
		})
	}
}

// ======= 生命周期 ========
onLoad((options) => {
	if (options != null) {

	}
})

onShow(() => {
	console.log("my")
	refreshLoginState()
	initServerList()
})

onHide(() => {
})

onUnload(() => {

})

</script>

<style scoped>
.my-page {
  flex: 1;
}

/* 卡片 */
.card {
	border-radius: 36rpx;
	background-color: #ffffff;
	padding: 20rpx;
	margin-top: 20rpx;
	/* 阴影效果 */
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
	/* 横向布局：左图右文 */
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 左侧图片 */
.card-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

/* 右侧文字区域 */
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 标题 */
.card-title {
  font-size: 30rpx;
  color: #333333;
}

.verType {
	margin-top: 500rpx;
	align-items: center;
	justify-content: center;
}
.colorType{
	color: #3A6FA1;
}

/* 后台服务器选择 */
.server-card {
	justify-content: space-between;
}

.server-label {
	font-size: 28rpx;
	color: #333333;
}

.server-value {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.server-name {
	font-size: 26rpx;
	color: #3A6FA1;
	margin-right: 8rpx;
}
</style>