1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
| <template>
| <view class="container">
| <view class="example">
| <uni-forms ref="form" :model="user" labelWidth="80px">
| <uni-forms-item label="用户昵称" name="nickName">
| <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
| </uni-forms-item>
| <uni-forms-item label="手机号码" name="phonenumber">
| <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
| </uni-forms-item>
| <uni-forms-item label="邮箱" name="email">
| <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
| </uni-forms-item>
| <uni-forms-item label="性别" name="sex" required>
| <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
| </uni-forms-item>
| </uni-forms>
| <button type="primary" @click="submit">提交</button>
| </view>
| </view>
| </template>
|
| <script>
| import { getUserProfile } from "@/api/system/user"
| import { updateUserProfile } from "@/api/system/user"
|
| export default {
| data() {
| return {
| user: {
| nickName: "",
| phonenumber: "",
| email: "",
| sex: ""
| },
| sexs: [{
| text: '男',
| value: "0"
| }, {
| text: '女',
| value: "1"
| }],
| rules: {
| nickName: {
| rules: [{
| required: true,
| errorMessage: '用户昵称不能为空'
| }]
| },
| phonenumber: {
| rules: [{
| required: true,
| errorMessage: '手机号码不能为空'
| }, {
| pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
| errorMessage: '请输入正确的手机号码'
| }]
| },
| email: {
| rules: [{
| required: true,
| errorMessage: '邮箱地址不能为空'
| }, {
| format: 'email',
| errorMessage: '请输入正确的邮箱地址'
| }]
| }
| }
| }
| },
| onLoad() {
| this.getUser()
| },
| onReady() {
| this.$refs.form.setRules(this.rules)
| },
| methods: {
| getUser() {
| getUserProfile().then(response => {
| this.user = response.data
| })
| },
| submit(ref) {
| this.$refs.form.validate().then(res => {
| updateUserProfile(this.user).then(response => {
| uni.showToast({
| title: '修改成功',
| mask: false,
| duration: 1000
| });
| uni.navigateBack();
| })
| })
| }
| }
| }
| </script>
|
| <style lang="scss">
| page {
| background-color: #ffffff;
| }
|
| .example {
| padding: 15px;
| background-color: #fff;
| }
|
| .segmented-control {
| margin-bottom: 15px;
| }
|
| .button-group {
| margin-top: 15px;
| display: flex;
| justify-content: space-around;
| }
|
| .form-item {
| display: flex;
| align-items: center;
| flex: 1;
| }
|
| .button {
| display: flex;
| align-items: center;
| height: 35px;
| line-height: 35px;
| margin-left: 10px;
| }
| </style>
|
|
