<template>
|
<view class="page-wrapper">
|
<div class="bg-top"></div>
|
|
<div class="content-wrapper">
|
<view class="center h-32">
|
<image :src="selectedavatarUrl" class="w-16 h-16 rounded-full" />
|
<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像</button>
|
</view>
|
<!-- 性别选择 -->
|
<view class="mb-4">
|
<text class="font-bold mb-4">性别</text>
|
<view class="h-2"></view>
|
<radio-group @change="onSexChange" :value="sex" class="mt-10">
|
<label class="mr-4">
|
<radio value="male" :checked="sex === 'male'" /> 男
|
</label>
|
<label>
|
<radio value="female" :checked="sex === 'female'" /> 女
|
</label>
|
</radio-group>
|
</view>
|
|
<!-- 姓名 -->
|
<view class="flex items-center space-x-2">
|
<label class="w-30 text-sm font-medium font-bold"><text class="font-bold">姓名/昵称：</text></label>
|
<input class="flex-1 border border-gray-300 rounded p-2 h-8 w-full" type="nickname"
|
style="font-size:42rpx;" :value="username" @input="userNameInput" @blur="userNameInput" />
|
</view>
|
<view class="h-8"></view>
|
|
<!-- 手机号码 -->
|
<view class="flex items-center space-x-2">
|
<label class="w-30 text-sm font-medium font-bold"><text class="font-bold">手机号码：</text></label>
|
<input v-model="phone" placeholder="请输入手机号码" type="number" maxlength="11"
|
class="flex-1 border border-gray-300 rounded p-2 h-8 w-full" />
|
</view>
|
|
<!-- 保存按钮 -->
|
<button class="bg-blue-500 text-white p-2 rounded w-full mt-100 w-12" @click="saveUser">
|
保存
|
</button>
|
</div>
|
<div class="bg-bottom"></div>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
onMounted
|
} from 'vue'
|
import {
|
useUserStore
|
} from '@/stores/user'
|
|
import {
|
apiService
|
} from '@/apiservice/apiService'
|
|
// store
|
const userStore = useUserStore()
|
|
// 表单数据
|
const selectedavatarUrl = ref(0)
|
const sex = ref('male')
|
const username = ref('')
|
const phone = ref('')
|
|
|
|
//获取微信昵称
|
function userNameInput(e) {
|
console.log(e.detail)
|
username.value = e.detail.value
|
}
|
//获取微信图像
|
function onChooseAvatar(e) {
|
console.log(e.detail)
|
selectedavatarUrl.value = e.detail.avatarUrl
|
}
|
|
|
|
// 性别切换
|
function onSexChange(e) {
|
sex.value = e.detail.value
|
}
|
|
// 校验规则
|
function validateForm() {
|
if (!username.value.trim()) {
|
uni.showToast({
|
title: '姓名不能为空',
|
icon: 'none'
|
})
|
return false
|
}
|
if (username.value.length > 10) {
|
uni.showToast({
|
title: '姓名不能超过10个字',
|
icon: 'none'
|
})
|
return false
|
}
|
if (phone.value) {
|
const phoneReg = /^1\d{10}$/
|
if (!phoneReg.test(phone.value)) {
|
uni.showToast({
|
title: '手机号格式不正确',
|
icon: 'none'
|
})
|
return false
|
}
|
}
|
return true
|
}
|
|
// 保存
|
async function saveUser() {
|
if (!validateForm()) return
|
|
try {
|
userStore.saveUserInfo({
|
username: username.value,
|
avatarUrl: selectedavatarUrl.value,
|
sex: sex.value,
|
phone: phone.value
|
});
|
|
if (userStore.id) {
|
apiService.touristUpdate({
|
id: userStore.id,
|
username: userStore.username,
|
avatarurl: userStore.avatarUrl,
|
sex: userStore.sex,
|
phone: userStore.phone
|
})
|
.then((res) => {
|
if (res.code === 1000) {
|
console.log('游客更新成功:');
|
uni.showToast({
|
title: '保存成功',
|
icon: 'success',
|
duration: 1500,
|
success: () => {
|
// toast 完成后跳转
|
setTimeout(() => {
|
uni.switchTab({
|
url: '/pages/index/index'
|
});
|
}, 1500);
|
}
|
});
|
} else {
|
console.warn('游客更新失败:', res.message);
|
uni.showToast({
|
title: '保存失败',
|
icon: 'none',
|
duration: 1500
|
});
|
}
|
})
|
.catch((err) => {
|
console.error('游客更新错误:', err);
|
uni.showToast({
|
title: '网络错误',
|
icon: 'none',
|
duration: 1500
|
});
|
});
|
}else{
|
uni.showToast({
|
title: '网络错误',
|
icon: 'none',
|
duration: 1500
|
});
|
}
|
|
} catch (err) {
|
console.error(err);
|
uni.showToast({
|
title: '保存失败',
|
icon: 'none'
|
});
|
}
|
}
|
|
// 初始化
|
onMounted(() => {
|
// 读取已有数据
|
if (userStore.username) {
|
username.value = userStore.username
|
}
|
if (userStore.phone) {
|
phone.value = userStore.phone
|
}
|
if (userStore.sex) {
|
sex.value = userStore.sex
|
}
|
if (userStore.avatarUrl) {
|
selectedavatarUrl.value = userStore.avatarUrl
|
}
|
})
|
</script>
|
<style>
|
/* 居中容器 */
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
/* 外层容器 padding */
|
.p-4 {
|
padding: 1rem;
|
}
|
|
/* 下边距 */
|
.mb-4 {
|
margin-bottom: 1rem;
|
}
|
|
/* 粗体文本 */
|
.font-bold {
|
font-weight: bold;
|
}
|
|
/* flex 布局 */
|
.flex {
|
display: flex;
|
}
|
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.items-center {
|
align-items: center;
|
}
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
/* 宽度控制 */
|
.w-12 {
|
width: 3rem;
|
}
|
|
.h-12 {
|
height: 3rem;
|
}
|
|
.h-2 {
|
height: 0.5rem;
|
}
|
|
.w-24 {
|
width: 6rem;
|
}
|
|
.w-30 {
|
width: 7rem;
|
}
|
|
.mt-10 {
|
margin-top: 10rpx;
|
}
|
|
.mt-100 {
|
margin-top: 100rpx;
|
}
|
|
/* 头像 */
|
.w-16 {
|
width: 4rem;
|
}
|
|
.h-16 {
|
height: 4rem;
|
}
|
|
.h-32 {
|
height: 8rem;
|
}
|
|
/* 边框 */
|
.border {
|
border-width: 1px;
|
border-style: solid;
|
}
|
|
.border-2 {
|
border-width: 2px;
|
}
|
|
.border-gray-300 {
|
border-color: #D1D5DB;
|
}
|
|
.border-blue-500 {
|
border-color: #3B82F6;
|
}
|
|
/* 圆角 */
|
.rounded {
|
border-radius: 0.25rem;
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
/* 输入框 padding 和高度 */
|
.p-2 {
|
padding: 0.5rem;
|
}
|
|
.h-8 {
|
height: 2rem;
|
}
|
|
.h-12 {
|
height: 3rem;
|
}
|
|
/* 文本颜色与背景 */
|
.text-white {
|
color: #ffffff;
|
}
|
|
.bg-blue-500 {
|
background-color: #3B82F6;
|
}
|
|
/* label 样式 */
|
.text-sm {
|
font-size: 0.875rem;
|
}
|
|
.font-medium {
|
font-weight: 500;
|
}
|
|
/* 按钮全宽 */
|
.w-full {
|
width: 100%;
|
}
|
</style>
|
<style>
|
/* 外层容器 padding */
|
.p-4 {
|
padding: 1rem;
|
}
|
|
/* 下边距 */
|
.mb-4 {
|
margin-bottom: 1rem;
|
}
|
|
/* 粗体文本 */
|
.font-bold {
|
font-weight: bold;
|
}
|
|
/* flex 布局 */
|
.flex {
|
display: flex;
|
}
|
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.items-center {
|
align-items: center;
|
}
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
/* 水平间距 */
|
.space-x-2 {
|
margin-left: 0.5rem;
|
}
|
|
/* 宽度控制 */
|
.w-12 {
|
width: 3rem;
|
}
|
|
.h-12 {
|
height: 3rem;
|
}
|
|
.w-24 {
|
width: 6rem;
|
}
|
|
/* 边框 */
|
.border {
|
border-width: 1px;
|
border-style: solid;
|
}
|
|
.border-2 {
|
border-width: 2px;
|
}
|
|
.border-gray-300 {
|
border-color: #D1D5DB;
|
}
|
|
.border-blue-500 {
|
border-color: #3B82F6;
|
}
|
|
/* 圆角 */
|
.rounded {
|
border-radius: 0.25rem;
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
/* 文本颜色与背景 */
|
.text-white {
|
color: #ffffff;
|
}
|
|
.bg-blue-500 {
|
background-color: #3B82F6;
|
}
|
|
/* label 样式 */
|
.text-sm {
|
font-size: 0.875rem;
|
}
|
|
.font-medium {
|
font-weight: 500;
|
}
|
|
/* 按钮全宽 */
|
.w-full {
|
width: 100%;
|
}
|
|
.page-wrapper {
|
position: relative;
|
min-height: 100vh;
|
/* 确保小内容时填满视口 */
|
overflow: hidden;
|
}
|
|
/* 顶部背景 */
|
.bg-top {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 底部背景 */
|
.bg-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 内容层 */
|
.content-wrapper {
|
position: relative;
|
z-index: 1;
|
padding: 2rem 1rem;
|
}
|
</style>
|
