我的页和设置页完成
This commit is contained in:
田岩
+186
-77
@@ -8,14 +8,15 @@
|
||||
<view class="title font_pf">设置</view>
|
||||
</view>
|
||||
<view class="detail-body">
|
||||
<uv-cell-group>
|
||||
|
||||
<uv-cell-group :border="false">
|
||||
<uv-cell @click="cellCLick" name="avatar" isLink title="头像">
|
||||
<template #title>
|
||||
<view class="font_pf">头像</view>
|
||||
</template>
|
||||
<template #value>
|
||||
<view style="width: 60rpx; height: 60rpx; border-radius: 100%; overflow: hidden">
|
||||
<image style="width: 100%" src="/src/static/images/test/touxiang.png" mode="widthFix"></image>
|
||||
<view style="width: 42rpx; height: 42rpx;border-radius: 100%; overflow: hidden">
|
||||
<image-preview style="width: 100%" v-if="userInfo.imageAddr" :src="userInfo.imageAddr"></image-preview>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
@@ -24,98 +25,206 @@
|
||||
<text class="font_pf">性别</text>
|
||||
</template>
|
||||
<template #value>
|
||||
<picker mode="selector" :value="index" range-key="label" style="width: 100%" :range="sexOptions" @change="sexChange">
|
||||
<view style="text-align: right">{{ sexOptions.find((item) => item.value == form.gender).label || '' }}</view>
|
||||
<picker mode="selector" :value="index" range-key="label" style="width: 100%" :range="sexOptions"
|
||||
@change="sexChange">
|
||||
<view style="text-align: right">{{showGenderText}}</view>
|
||||
</picker>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="形象" :isLink="true" :border="false"></uv-cell>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
<avatar-cropper v-if="avatarCropperStatus" mode="ratio" :imageUrl="avatarCropperUrl" :width="500" :height="500"
|
||||
:delay="150" @cancel="onCancel" @confirm="onConfirm"></avatar-cropper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import common from '@/common/common';
|
||||
const index = ref(0);
|
||||
const form = ref({
|
||||
gender: 'Y'
|
||||
});
|
||||
const sexOptions = [
|
||||
{ value: 'Y', label: '男' },
|
||||
{ value: 'M', label: '女' }
|
||||
];
|
||||
const cellCLick = (value) => {};
|
||||
const sexChange = (e) => {
|
||||
console.log(e);
|
||||
console.log(sexOptions[e.detail.value].value, 'sexOptions[e.detail.value].value');
|
||||
form.value.gender = sexOptions[e.detail.value].value;
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
computed,
|
||||
nextTick
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/api/common'
|
||||
import { queryCurrentUser} from '@/api/login.js';
|
||||
import common from '@/common/common';
|
||||
import {getUserInfo} from '@/common/common';
|
||||
import {
|
||||
GENDER
|
||||
} from '@/enum.js';
|
||||
import {
|
||||
updateDfSysUserExtandInfoGender,
|
||||
updateDfSysUserExtandInfoImageAddr
|
||||
} from "@/api/user.js"
|
||||
|
||||
const index = ref(0);
|
||||
const avatarCropperUrl = ref('');
|
||||
const aaa = ref('');
|
||||
const userInfo = ref({
|
||||
gender: '',
|
||||
imageAddr: ''
|
||||
});
|
||||
const avatarCropperStatus = ref(true)
|
||||
const sexOptions = GENDER
|
||||
const showGenderText = computed(() => {
|
||||
const item = sexOptions.find((item) => item.value == userInfo.value.gender)
|
||||
if (item) {
|
||||
return item.label
|
||||
} else {
|
||||
return '未填写'
|
||||
}
|
||||
})
|
||||
const onCancel = (value) => {
|
||||
avatarCropperStatus.value = false
|
||||
}
|
||||
const onConfirm = (file) => {
|
||||
|
||||
avatarCropperStatus.value = false
|
||||
nextTick(async() => {
|
||||
common.loading('更新头像中')
|
||||
|
||||
try{
|
||||
const data = {
|
||||
bizScen: 'S3010',
|
||||
thumbnailFlag: true,
|
||||
thumbImgSize:100
|
||||
}
|
||||
// 上传图片
|
||||
const res = await uploadFile(file.tempFilePath, data)
|
||||
// 更新个人信息
|
||||
await updateDfSysUserExtandInfoImageAddr({imageAddr : res.thumbFileId})
|
||||
// 更新个人信息
|
||||
const userData = await queryCurrentUser()
|
||||
common.msg('修改成功')
|
||||
console.log(userData);
|
||||
userInfo.value.imageAddr = getUserInfo('imageAddr')
|
||||
} catch {
|
||||
common.msg('修改失败')
|
||||
}
|
||||
common.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
console.log(form.value.gender, 'iiii');
|
||||
};
|
||||
onLoad((params) => {});
|
||||
const cellCLick = (value) => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ["compressed"],
|
||||
success: (res) => {
|
||||
|
||||
avatarCropperUrl.value = res.tempFilePaths[0];
|
||||
avatarCropperStatus.value = true
|
||||
},
|
||||
});
|
||||
};
|
||||
const sexChange = (e) => {
|
||||
userInfo.value.gender = sexOptions[e.detail.value].value;
|
||||
common.loading("修改中")
|
||||
updateDfSysUserExtandInfoGender({
|
||||
gender: userInfo.value.gender
|
||||
}).then(res => {
|
||||
common.msg('修改成功')
|
||||
}).finally(() => {
|
||||
common.hideLoading()
|
||||
})
|
||||
};
|
||||
|
||||
onLoad((params) => {
|
||||
userInfo.value = getUserInfo()
|
||||
console.log(userInfo.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
$bg-margin-left: 50rpx;
|
||||
|
||||
.detail-body {
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - (var(--status-bar-height)+50rpx));
|
||||
// padding: 29rpx 37rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0rpx;
|
||||
:deep(.uv-cell__title) {
|
||||
flex: none !important;
|
||||
}
|
||||
}
|
||||
.detail-body {
|
||||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||||
background: #ffffff;
|
||||
// background: red;
|
||||
border-radius: 15rpx;
|
||||
z-index: 101;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 34rpx;
|
||||
height: 34rpx;
|
||||
font-weight: 600;
|
||||
// margin-bottom: 30rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.fixed_search_div {
|
||||
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f6f7f8;
|
||||
.back_div {
|
||||
margin-right: 10rpx;
|
||||
.back-icon {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 为了让线缩进来24单位
|
||||
:deep(.uv-line) {
|
||||
width: calc(100% - 48rpx) !important;
|
||||
margin: 0 24rpx !important;
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
:deep(.uv-cell__body) {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #2b2c2e;
|
||||
border-left: 4rpx solid #2b2c2e;
|
||||
transform: rotate(-45deg);
|
||||
:deep(.uv-cell__title) {
|
||||
flex: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.detail-main {
|
||||
background-color: #F6F8FF;
|
||||
}
|
||||
|
||||
// .detail-body {
|
||||
// box-sizing: border-box;
|
||||
// min-height: calc(100vh - (var(--status-bar-height)+50rpx));
|
||||
// // padding: 29rpx 37rpx;
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding-top: 0rpx;
|
||||
|
||||
|
||||
// }
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 34rpx;
|
||||
height: 34rpx;
|
||||
font-weight: 600;
|
||||
// margin-bottom: 30rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.fixed_search_div {
|
||||
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f6f7f8;
|
||||
|
||||
.back_div {
|
||||
margin-right: 10rpx;
|
||||
|
||||
.back-icon {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #2b2c2e;
|
||||
border-left: 4rpx solid #2b2c2e;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user