info.vue
5.04 KB
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
133
134
135
136
137
138
139
140
<template lang="html">
<div style="background-color: #FFFFFF;">
<!-- 维护我的介绍信息；讲师首页显示我的介绍；
可以更改自己的登录密码；
可以更改手机号码；
<br/>
"培训机构维护机构的介绍信息；
培训机构详情页显示的介绍详情；" -->
<mu-tabs :value.sync="tab_active" inverse color="#2196f3" indicator-color="#2196f3" full-width>
<mu-tab>基本信息</mu-tab>
<mu-tab>我的简介</mu-tab>
<mu-tab>账户安全</mu-tab>
<mu-tab>实名认证</mu-tab>
<mu-tab>邀请注册</mu-tab>
</mu-tabs>
<mu-container style="padding: 15px 24px 24px;">
<div v-if="tab_active === 0">
<mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
<mu-form-item label="登录账号">
<p>u934567893</p>
</mu-form-item>
<mu-form-item prop="name" label="姓名" :rules="usernameRules">
<mu-text-field v-model="form.name"></mu-text-field>
</mu-form-item>
<mu-form-item prop="gender" label="性别" help-text="必填">
<mu-radio v-model="form.gender" value="male" label="男"></mu-radio>
<mu-radio v-model="form.gender" value="female" label="女"></mu-radio>
</mu-form-item>
<mu-form-item prop="age" label="出生年">
<mu-text-field v-model="form.age"></mu-text-field>
</mu-form-item>
<mu-form-item prop="address" label="居住地">
<mu-text-field v-model="form.address"></mu-text-field>
</mu-form-item>
<!-- <mu-row align-items="center">
<div style="color: rgba(0,0,0,.54); width: 85px;">
<div class="mu-form-item-label" style="width: 100px;">出生年</div>
</div>
<mu-col span="6">
<mu-date-input icon="today" v-model="form.age" label="选择年份" type="year" label-float></mu-date-input>
</mu-col>
</mu-row> -->
</mu-form>
<mu-flex>
<p style="font-size: 0.9rem;">讲师本人联系信息</p>
</mu-flex>
<mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="concacts" label="手机" help-text="必填">
<mu-text-field v-model="form.concacts"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="tel" label="微信" help-text="必填">
<mu-text-field v-model="form.tel"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="wexin" label="QQ" help-text="必填">
<mu-text-field v-model="form.wexin"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="qq" label="讲师邮箱" help-text="必填">
<mu-text-field v-model="form.qq"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
</mu-form>
<mu-flex>
<p style="font-size: 0.9rem;">对外公开联系人信息</p>
</mu-flex>
<mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="concacts" label="联系人">
<mu-text-field v-model="form.concacts"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="tel" label="手机">
<mu-text-field v-model="form.tel"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="wexin" label="微信">
<mu-text-field v-model="form.wexin"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="qq" label="QQ">
<mu-text-field v-model="form.qq"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
</mu-form>
</div>
<div v-if="tab_active === 1">
111
</div>
</mu-container>
</div>
</template>
<script>
import util from 'assets/js/util';
export default {
mounted () {
},
data () {
return {
tab_active: 0,
label_position: util.versions().mobile ? 'top' : 'right',
usernameRules: [
{ validate: (val) => !!val, message: '必须填写用户名' },
{ validate: (val) => val.length >= 3, message: '用户名长度大于3' }
],
form: {
name: '',
gender: '',
age: '',
address: '',
concacts: '',
tel: '',
weixin: '',
qq: ''
}
}
}
}
</script>
<style lang="css" scoped>
</style>