first commit
This commit is contained in:
@@ -0,0 +1,291 @@
|
||||
<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='140' labelPosition="left" :borderBottom="true" :model="userInfo" ref="form1">
|
||||
<up-form-item label="姓名" prop="userInfo.name" ref="item1" :borderBottom="true">
|
||||
<up-input readonly='true' 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" style="position: relative;" prop="userInfo.sex">
|
||||
<up-input inputAlign='right' v-model="userInfo.age" border="none"></up-input>
|
||||
</up-form-item>
|
||||
<!-- <up-form-item label="手机号" :borderBottom="true" prop="userInfo.sex">
|
||||
<up-input readonly='true' inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="紧急联系人" :borderBottom="true" prop="userInfo.sex">
|
||||
<up-input readonly='true' inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="紧急联系人电话" :borderBottom="true" prop="userInfo.sex">
|
||||
<up-input readonly='true' inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
|
||||
</up-form-item> -->
|
||||
</up-form>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="" style="width: 100%; height: 200rpx;">
|
||||
|
||||
</view>
|
||||
<view class="" style=" width: 100% ; background-color: #fff; position: fixed; bottom: 15rpx; left: 0; ">
|
||||
<view class="" @click="save()"
|
||||
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";
|
||||
import { CNRiderDataService } from "@/Service/CN/CNRiderDataService"
|
||||
|
||||
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(() => {
|
||||
getData()
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
nowDate.value = new Date()
|
||||
});
|
||||
|
||||
|
||||
const getData = () => {
|
||||
CNRiderDataService.GetRiderInfo().then(res => {
|
||||
loading.value = false
|
||||
if (res.data) {
|
||||
userInfo.value = res.data.riderInfo
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const uploadFImg = () => {
|
||||
uni.chooseImage({
|
||||
count: 1, // 最多选择3张图片
|
||||
sizeType: ['original', 'compressed'], // 支持原图和压缩图
|
||||
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
|
||||
success: function (res) {
|
||||
let path = res.tempFiles[0].path
|
||||
Service.uploadH5(path, 'Avatar', data => {
|
||||
userInfo.value.headImg = data
|
||||
})
|
||||
|
||||
},
|
||||
fail: function (err) {
|
||||
console.error('选择失败:', err.errMsg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
|
||||
if(!userInfo.value.age){
|
||||
Service.Msg('请输入年龄!')
|
||||
return
|
||||
}
|
||||
|
||||
CNRiderDataService.UpdateRiderUnit(userInfo.value.headImg,userInfo.value.sex,Number(userInfo.value.age)).then(res=>{
|
||||
if(res.data){
|
||||
Service.Msg('修改成功!')
|
||||
setTimeout(()=>{
|
||||
Service.GoPageBack()
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user