176 lines
4.0 KiB
Vue
176 lines
4.0 KiB
Vue
<script lang="ts" setup>
|
|
import Taro from '@tarojs/taro';
|
|
import {ref} from 'vue';
|
|
import {editPersonalInfo} from '@/api/user';
|
|
import {BASE_URL} from '@/utils/request';
|
|
|
|
// const toPage = (e: string) => {};
|
|
|
|
const userInfo = ref<any>({});
|
|
|
|
Taro.useLoad(() => {
|
|
const {data: data} = Taro.getStorageSync('userInfo');
|
|
userInfo.value = data;
|
|
});
|
|
|
|
const chooseavatar = (e: any) => {
|
|
Taro.uploadFile({
|
|
url: `${BASE_URL}/upload`,
|
|
filePath: e.detail.avatarUrl,
|
|
name: 'file',
|
|
header: {
|
|
token: Taro.getStorageSync('token'),
|
|
},
|
|
success: function (res) {
|
|
const data = JSON.parse(res.data);
|
|
userInfo.value.avatarUrl = data.data.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
const subUser = async () => {
|
|
try {
|
|
const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
|
if (!reg.test(userInfo.value.phone))
|
|
return Taro.showToast({
|
|
title: '请输入正确的手机号码',
|
|
icon: 'none',
|
|
});
|
|
const res = await editPersonalInfo(userInfo.value);
|
|
Taro.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
});
|
|
Taro.switchTab({
|
|
url: '/pages/user/index',
|
|
});
|
|
} catch (error) {
|
|
Taro.showToast({
|
|
title: error.msg,
|
|
icon: 'none',
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<nut-cell-group>
|
|
<nut-cell title="头像">
|
|
<template v-slot:link>
|
|
<nut-button
|
|
style="border: none; height: auto; padding: 0"
|
|
open-type="chooseAvatar"
|
|
@chooseavatar="chooseavatar">
|
|
<nut-avatar size="large">
|
|
<img style="border-radius: 50%" :src="userInfo.avatarUrl" />
|
|
</nut-avatar>
|
|
</nut-button> </template
|
|
></nut-cell>
|
|
<nut-cell title="昵称">
|
|
<template v-slot:link>
|
|
<nut-input
|
|
type="nickname"
|
|
v-model="userInfo.nickName"
|
|
:border="false"
|
|
input-align="right"
|
|
placeholder="请输入昵称" /> </template
|
|
></nut-cell>
|
|
<nut-cell title="手机号码">
|
|
<template v-slot:link>
|
|
<nut-input
|
|
v-model="userInfo.phone"
|
|
:border="false"
|
|
input-align="right"
|
|
disabled />
|
|
</template>
|
|
</nut-cell>
|
|
<!-- <nut-cell title="登录密码">
|
|
<template v-slot:link>
|
|
<nut-input
|
|
v-model="userInfo.password"
|
|
:border="false"
|
|
input-align="right"
|
|
placeholder="修改登录密码" />
|
|
</template>
|
|
</nut-cell> -->
|
|
<!-- <nut-cell title="交易密码" desc="创建/修改交易密码" is-link> </nut-cell> -->
|
|
<!-- <nut-cell title="注销账号" desc="账号注销后不能恢复" is-link> </nut-cell> -->
|
|
</nut-cell-group>
|
|
<view class="btn">
|
|
<nut-button
|
|
shape="square"
|
|
style="border-radius: 10px"
|
|
type="primary"
|
|
block
|
|
@click="subUser"
|
|
>保存信息</nut-button
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.user-card {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
margin: auto;
|
|
position: relative;
|
|
top: 10px;
|
|
padding: 30px;
|
|
|
|
.avatar-card {
|
|
background-color: rgba(255, 0, 0, 0.1);
|
|
margin: 20px auto;
|
|
border-radius: 20px;
|
|
border: 1px solid #ff0000;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30px;
|
|
position: relative;
|
|
|
|
.left {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
margin-left: 10px;
|
|
}
|
|
.nut-button {
|
|
margin: 0 auto;
|
|
width: 125px;
|
|
height: 125px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding: 0 40px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nut-input {
|
|
width: 400px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.nut-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.phoneBtn {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border-radius: 0 !important;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
}
|
|
</style>
|