feat:修改个人资料页
This commit is contained in:
ctw committed
1 parent
a7801d122e
commit
7df0107dbf
3 files changed
+199
-84
No files matched your search
+2
-1
@@ -2,7 +2,8 @@
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
|
||||
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
|
||||
"^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
|
||||
+166
-36
@@ -5,54 +5,202 @@
|
||||
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="save-info" @click="saveUserInfo">
|
||||
<text class="text">保存</text>
|
||||
<view class="bg-color-theme px-2 py-1 rounded-full c-black" @click="saveUserInfo">
|
||||
保存
|
||||
</view>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
|
||||
<view class="content">
|
||||
<view class="my-100rpx">
|
||||
<scroll-view scroll-y>
|
||||
<view class="section">语音签名</view>
|
||||
<view class="flex-row-center my-8">
|
||||
<s-uploader
|
||||
v-model:url="userinfo.avatar"
|
||||
fileMediatype="image"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx', borderRadius: '168rpx' }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="ml-5 mb-3">语音签名</view>
|
||||
<van-cell-group inset>
|
||||
<van-cell title="单元格" value="内容" is-link>
|
||||
<van-cell title="单元格" value="去录制" is-link>
|
||||
<template #title>
|
||||
<view class="flex items-center c-amber">
|
||||
<view class="flex items-center">
|
||||
<uni-icons type="mic" size="30" color="#ffcd32"></uni-icons>
|
||||
<text>添加语音签名，让你更受关注</text>
|
||||
<text class="truncate">添加语音签名，让你更受关注</text>
|
||||
</view>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<view class="text-red">qqq</view>
|
||||
|
||||
<view class="ml-5 my-3">基本资料</view>
|
||||
<van-cell-group inset>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
<van-cell title="昵称" value="输入">
|
||||
<template #value>
|
||||
<input type="text" :maxlength="12" :value="userinfo.nickname" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
title="生日"
|
||||
:value="userinfo.birthday || '未填写'"
|
||||
is-link
|
||||
@click="showPopupPicker('birthday')"
|
||||
/>
|
||||
<van-cell
|
||||
title="身高"
|
||||
:value="userinfo.height ? userinfo.height + 'cm' : '未填写'"
|
||||
is-link
|
||||
@click="showPopupPicker('height')"
|
||||
/>
|
||||
<van-cell
|
||||
title="体重"
|
||||
:value="userinfo.weight ? userinfo.weight + 'kg' : '未填写'"
|
||||
is-link
|
||||
@click="showPopupPicker('weight')"
|
||||
/>
|
||||
<van-cell
|
||||
title="从事职业"
|
||||
:value="userinfo.occ || '未填写'"
|
||||
is-link
|
||||
@click="showPopupPicker('occ')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<view class="ml-5 my-3">个人简介</view>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="userinfo.description"
|
||||
rows="2"
|
||||
autosize
|
||||
type="textarea"
|
||||
maxlength="50"
|
||||
placeholder="说点什么吧..."
|
||||
show-word-limit
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<view class="mx-5 my-3 flex justify-between">
|
||||
<text>个人相册</text>
|
||||
<text>{{ userinfo.photos.length }}/9</text>
|
||||
</view>
|
||||
<view class="px-4">
|
||||
<s-uploader v-model:url="userinfo.photos" fileMediatype="image" limit="9" mode="grid" />
|
||||
</view>
|
||||
<view class="h-100"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<van-popup v-model:show="showPicker" position="bottom">
|
||||
<van-date-picker
|
||||
v-if="pickerFiled === 'birthday'"
|
||||
:model-value="userinfo.birthday?.split('-') || []"
|
||||
title="生日"
|
||||
:min-date="new Date(1980, 1, 1)"
|
||||
:max-date="new Date()"
|
||||
@confirm="(e) => onConfirm(e, 'birthday')"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
<van-picker
|
||||
v-else-if="pickerFiled === 'height'"
|
||||
:model-value="[userinfo.height]"
|
||||
title="身高"
|
||||
:columns="columnsHeight"
|
||||
@confirm="(e) => onConfirm(e, 'height')"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
<van-picker
|
||||
v-else-if="pickerFiled === 'weight'"
|
||||
:model-value="[userinfo.weight]"
|
||||
title="体重"
|
||||
:columns="columnsWeight"
|
||||
@confirm="(e) => onConfirm(e, 'weight')"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
<van-picker
|
||||
v-else-if="pickerFiled === 'occ'"
|
||||
:model-value="[userinfo.occ]"
|
||||
title="选择职业"
|
||||
:columns="columnsOcc"
|
||||
@confirm="(e) => onConfirm(e, 'occ')"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</van-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// 身高选择器选项
|
||||
const columnsHeight = Array.from({ length: 100 }, (_, i) => ({
|
||||
text: i + 100 + 'cm',
|
||||
value: i + 100,
|
||||
}));
|
||||
// 体重选择器选项
|
||||
const columnsWeight = Array.from({ length: 100 }, (_, i) => ({
|
||||
text: i + 20 + 'kg',
|
||||
value: i + 20,
|
||||
}));
|
||||
// 职业选择器选项
|
||||
const columnsOcc = [
|
||||
{ text: '互联网', value: '互联网' },
|
||||
{ text: '金融', value: '金融' },
|
||||
{ text: '娱乐', value: '娱乐' },
|
||||
{ text: 'CEO', value: 'CEO' },
|
||||
{ text: '高管', value: '高管' },
|
||||
{ text: '投资人', value: '投资人' },
|
||||
{ text: '学生', value: '学生' },
|
||||
{ text: '其他', value: '其他' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
// @ts-ignore
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import sUploader from '@/sheep/components/s-uploader/s-uploader.vue';
|
||||
|
||||
onLoad(async () => {
|
||||
// 获取用户信息
|
||||
const { data } = await UserApi.getUserInfo();
|
||||
Object.assign(userinfo, data);
|
||||
Object.assign(userinfo, data, {
|
||||
birthday: data.birthday ?? '',
|
||||
height: data.height ?? '',
|
||||
weight: data.weight ?? '',
|
||||
});
|
||||
});
|
||||
|
||||
const userinfo = reactive({
|
||||
avatar: {},
|
||||
// 用户信息
|
||||
const userinfo = reactive<any>({
|
||||
avatar: [],
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
gender: '',
|
||||
birthday: '',
|
||||
address: '',
|
||||
height: '',
|
||||
weight: '',
|
||||
occ: '',
|
||||
description: '',
|
||||
|
||||
photos: [],
|
||||
});
|
||||
const showPicker = ref(false); // 选择器显隐
|
||||
const pickerFiled = ref<'' | 'birthday' | 'height' | 'weight' | 'occ'>('');
|
||||
|
||||
// 显示选择器
|
||||
const showPopupPicker = (filed: '' | 'birthday' | 'height' | 'weight' | 'occ') => {
|
||||
pickerFiled.value = filed;
|
||||
showPicker.value = true;
|
||||
};
|
||||
|
||||
// 选择器确定
|
||||
const onConfirm = ({ selectedValues }: { selectedValues: string[] }, filed: string) => {
|
||||
if (filed === 'birthday') {
|
||||
userinfo[filed] = selectedValues.join('-');
|
||||
} else {
|
||||
userinfo[filed] = selectedValues.join(',');
|
||||
}
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
function saveUserInfo() {}
|
||||
|
||||
@@ -60,21 +208,3 @@
|
||||
uni.navigateBack();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.save-info {
|
||||
background-color: $color-theme;
|
||||
border-radius: 40rpx;
|
||||
padding: 6rpx 20rpx;
|
||||
.text {
|
||||
font-size: $font-size-medium;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin: 100rpx 0;
|
||||
.section {
|
||||
margin: 0 0 20rpx 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+31
-47
@@ -37,65 +37,49 @@ export default {
|
||||
},
|
||||
rules: [
|
||||
[
|
||||
/^main-text-(\d+)$/,
|
||||
([, d]) => ({
|
||||
'font-size': `${d}rpx`,
|
||||
'font-weight': 800,
|
||||
color: '#000',
|
||||
'line-height': `1.4em`,
|
||||
}),
|
||||
'bg-color-theme',
|
||||
{
|
||||
'background-color': '#ffcd32',
|
||||
},
|
||||
],
|
||||
[
|
||||
/^sub-text-(\d+)$/,
|
||||
([, d]) => ({
|
||||
'font-size': `${d}rpx`,
|
||||
'font-weight': 500,
|
||||
color: '#333',
|
||||
'line-height': `1.4em`,
|
||||
}),
|
||||
'bg-color-theme-dark',
|
||||
{
|
||||
'background-color': 'rgba(255, 205, 49, 0.5)',
|
||||
},
|
||||
],
|
||||
[
|
||||
/^second-text-(\d+)$/,
|
||||
([, d]) => ({
|
||||
'font-size': `${d}rpx`,
|
||||
'font-weight': 500,
|
||||
color: '#999',
|
||||
'line-height': `1.4em`,
|
||||
}),
|
||||
'text-color-theme',
|
||||
{
|
||||
color: '#ffcd32',
|
||||
},
|
||||
],
|
||||
[
|
||||
'bg-color',
|
||||
{
|
||||
'background-color': '#222222',
|
||||
},
|
||||
],
|
||||
[
|
||||
'bg-color-dark',
|
||||
{
|
||||
'background-color': 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
],
|
||||
[
|
||||
'bg-color-light',
|
||||
{
|
||||
'background-color': '#333333',
|
||||
},
|
||||
],
|
||||
[
|
||||
'card',
|
||||
{
|
||||
'background-color': 'white',
|
||||
'background-color': 'rgba(0, 0, 0, 0.3)',
|
||||
'box-shadow': '0rpx 8rpx 26rpx -4rpx rgba(210,210,210,0.5)',
|
||||
'border-radius': '16rpx',
|
||||
},
|
||||
],
|
||||
[
|
||||
'shadow-main',
|
||||
{
|
||||
'box-shadow': '0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
],
|
||||
[
|
||||
/^show-line$/,
|
||||
([, d]) => ({
|
||||
overflow: 'hidden',
|
||||
'white-space': 'nowrap',
|
||||
'text-overflow': 'ellipsis',
|
||||
}),
|
||||
],
|
||||
[
|
||||
/^show-line-(\d+)$/,
|
||||
([, d]) => ({
|
||||
display: '-webkit-box !important',
|
||||
overflow: 'hidden',
|
||||
'text-overflow': 'ellipsis !important',
|
||||
'word-break': 'break-all',
|
||||
'-webkit-line-clamp': d,
|
||||
'-webkit-box-orient': 'vertical !important',
|
||||
}),
|
||||
],
|
||||
],
|
||||
|
||||
transformers: [transformerAttributify(), transformerClass()],
|
||||
|
||||
Reference in new issue
Block a user