274 lines
7.3 KiB
Plaintext
274 lines
7.3 KiB
Plaintext
<template>
|
||
|
||
<view v-if="loading" class="pure-css-skeleton">
|
||
<view style=" margin: 20rpx 0; padding: 20rpx; background-color: #fff; border-radius: 10rpx;">
|
||
<!-- 头像区域骨架 -->
|
||
<view class="avatar-skeleton-wrapper"
|
||
style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||
<view class="skeleton-circle animate-pulse"></view>
|
||
<view class="skeleton-text animate-pulse" style="margin-top: 15rpx;"></view>
|
||
</view>
|
||
|
||
<!-- 表单区域骨架 -->
|
||
<view class="form-skeleton-wrapper" style="margin-top: 30rpx;">
|
||
<!-- 昵称 -->
|
||
<view class="form-item-skeleton">
|
||
<view class="form-label-skeleton animate-pulse"></view>
|
||
<view class="form-input-skeleton animate-pulse"></view>
|
||
</view>
|
||
<!-- 性别 -->
|
||
<view class="form-item-skeleton">
|
||
<view class="form-label-skeleton animate-pulse"></view>
|
||
<view class="form-radio-skeleton">
|
||
<view class="radio-item-skeleton animate-pulse"></view>
|
||
<view class="radio-item-skeleton animate-pulse"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 生日 -->
|
||
<view class="form-item-skeleton">
|
||
<view class="form-label-skeleton animate-pulse"></view>
|
||
<view class="form-input-skeleton animate-pulse"></view>
|
||
</view>
|
||
<!-- 手机号 -->
|
||
<view class="form-item-skeleton">
|
||
<view class="form-label-skeleton animate-pulse"></view>
|
||
<view class="form-input-skeleton animate-pulse"></view>
|
||
</view>
|
||
<!-- 邮箱 -->
|
||
<view class="form-item-skeleton">
|
||
<view class="form-label-skeleton animate-pulse"></view>
|
||
<view class="form-input-skeleton animate-pulse"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部空间占位 -->
|
||
<view style="width: 100%; height: 200rpx;"></view>
|
||
</view>
|
||
|
||
<!-- 底部保存按钮骨架 -->
|
||
<view class="bottom-button-skeleton animate-pulse"></view>
|
||
</view>
|
||
|
||
<view v-else style=" margin: 20rpx; padding: 20rpx;">
|
||
<view @click="uploadFImg()" class=""
|
||
style=" display: flex; flex-direction: column; justify-content: center; align-items: center; ">
|
||
<img v-if="userInfo.headImg!=''" :src="Service.GetMateUrlByImg(userInfo.headImg)"
|
||
style="width: 140rpx; height: 140rpx; border-radius: 50%; " alt="" />
|
||
<view v-else class=""
|
||
style="background-color: #EBEBEB; width: 140rpx; height: 140rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; ">
|
||
<image :src="Service.GetIconImg('/static/index/my/edit/photo.png')"
|
||
style="width: 50rpx; height: 50rpx; " alt=""> </image>
|
||
</view>
|
||
<view class="" style="margin-top: 15rpx; font-size: 26rpx; color: #999999; ">
|
||
点击更换头像
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" style=" margin-top: 30rpx; ">
|
||
<up-form labelWidth='90' labelPosition="left" :borderBottom="true" :model="userInfo" ref="form1">
|
||
<up-form-item label="昵称" prop="userInfo.name" ref="item1" :borderBottom="true">
|
||
<up-input inputAlign='right' v-model="userInfo.nick" border="none"></up-input>
|
||
</up-form-item>
|
||
|
||
<up-form-item label="性别" :borderBottom="true" style="position: relative;" prop="userInfo.sex">
|
||
<view class="" style=" position: absolute; top: 10rpx; right: 0; ">
|
||
<up-radio-group v-model="userInfo.sex" placement="row">
|
||
<up-radio v-for="(item, index) in radiolist1" activeColor='#FF6A00' :key="index"
|
||
iconPlacement="right" :label="item.name" :name="item.name">
|
||
</up-radio>
|
||
</up-radio-group>
|
||
</view>
|
||
</up-form-item>
|
||
<up-form-item label="生日" :borderBottom="true" prop="userInfo.sex" style="position: relative;">
|
||
<view @click="showDate=true" class=""
|
||
style=" position: absolute; top: 25rpx; right: 0; display: flex; align-items: center; ">
|
||
{{Service.formatDate(userInfo.date,2)}}
|
||
<u-icon name="arrow-right" size="24rpx" color="#000"></u-icon>
|
||
</view>
|
||
</up-form-item>
|
||
<up-form-item label="手机号" :borderBottom="true" prop="userInfo.sex">
|
||
<up-input inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
|
||
</up-form-item>
|
||
</up-form>
|
||
</view>
|
||
|
||
<up-datetime-picker :maxDate="nowDate" :minDate="631123200000" :show="showDate" @cancel="showDate=!showDate"
|
||
@confirm="dateConfirm" v-model="userInfo.date" mode="date"></up-datetime-picker>
|
||
<view class="" style="width: 100%; height: 200rpx;">
|
||
|
||
</view>
|
||
<view class="" style=" width: 100% ; background-color: #fff; position: fixed; bottom: 15rpx; left: 0; ">
|
||
<view class=""
|
||
style=" margin: 0 20rpx; padding: 26rpx 0; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 60rpx; background-color: var(--nav-mian);">
|
||
保存信息
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||
import { Service } from '@/Service/Service';
|
||
import { ref } from "vue";
|
||
|
||
|
||
let loading = ref(true)
|
||
|
||
let showDate = ref(false)
|
||
const userInfo = ref({
|
||
headImg: '',
|
||
age: '1',
|
||
sex: '',
|
||
phone: '1',
|
||
date: Date.now(),
|
||
nick: '大大怪将军'
|
||
})
|
||
|
||
let nowDate = ref()
|
||
|
||
const radiolist1 = ref([
|
||
{
|
||
name: '男',
|
||
disabled: false,
|
||
},
|
||
{
|
||
name: '女',
|
||
disabled: false,
|
||
}
|
||
]);
|
||
|
||
|
||
onLoad(() => {
|
||
setTimeout(() => {
|
||
loading.value = false;
|
||
}, 1500);
|
||
});
|
||
|
||
onShow(() => {
|
||
nowDate.value = new Date()
|
||
});
|
||
|
||
const dateConfirm = (e) => {
|
||
showDate.value = !showDate.value
|
||
userInfo.value.date = e.value
|
||
}
|
||
|
||
|
||
|
||
|
||
const uploadFImg = () => {
|
||
uni.chooseImage({
|
||
count: 1, // 最多选择3张图片
|
||
sizeType: ['original', 'compressed'], // 支持原图和压缩图
|
||
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
|
||
success: function (res) {
|
||
let path = res.tempFiles[0].path
|
||
userInfo.value.headImg = path
|
||
// Service.uploadH5(path, 'Avatar', data => {
|
||
// userInfo.value.headImg = data.split(',')[2].split(':')[1].split('"')[1]
|
||
// })
|
||
|
||
},
|
||
fail: function (err) {
|
||
console.error('选择失败:', err.errMsg);
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.pure-css-skeleton {
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/* 骨架屏基础样式 */
|
||
.skeleton-circle {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.skeleton-text {
|
||
width: 120rpx;
|
||
height: 26rpx;
|
||
background-color: #e0e0e0;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.form-item-skeleton {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
position: relative;
|
||
}
|
||
|
||
.form-item-skeleton:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.form-label-skeleton {
|
||
width: 90rpx;
|
||
height: 30rpx;
|
||
background-color: #e0e0e0;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.form-input-skeleton {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 50%;
|
||
height: 30rpx;
|
||
background-color: #e0e0e0;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.form-radio-skeleton {
|
||
position: absolute;
|
||
right: 0;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.radio-item-skeleton {
|
||
width: 100rpx;
|
||
height: 30rpx;
|
||
background-color: #e0e0e0;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.bottom-button-skeleton {
|
||
position: fixed;
|
||
bottom: 15rpx;
|
||
left: 20rpx;
|
||
right: 20rpx;
|
||
height: 90rpx;
|
||
background-color: #e0e0e0;
|
||
border-radius: 60rpx;
|
||
}
|
||
|
||
/* 动画效果 - 不使用组件，纯CSS实现 */
|
||
@keyframes pulse {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.animate-pulse {
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
</style> |