set.vue
3.31 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
<template>
<view class="set-page">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="u-m-t-20"><text style="color:#8f9ca2">基本资料</text></view>
<view style="border: 0.1px solid #e4e4e4;margin-top: 20rpx;padding-left: 15rpx;">
<u--form labelPosition="left" :model="myInfoModel" :rules="rules" ref="myInfoFormRef">
<u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.name" borderBottom ref="item1">
<u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.name" border="none"></u--input>
</u-form-item>
<u-form-item labelWidth="80px" label="手机号码" prop="userInfo.phone" borderBottom ref="item1">
<u--input placeholder="请输入手机号码" v-model="myInfoModel.userInfo.phone" border="none"></u--input>
</u-form-item>
<u-form-item labelWidth="80px" label="用户账号 " prop="userInfo.account" borderBottom ref="item1">
<u--input placeholder="请输入用户账号 " v-model="myInfoModel.userInfo.account" border="none"></u--input>
</u-form-item>
<u-form-item labelWidth="80px" label="邮箱地址" prop="userInfo.email" borderBottom ref="item1">
<u--input placeholder="请输入邮箱地址" v-model="myInfoModel.userInfo.email" border="none"></u--input>
</u-form-item>
<u-form-item
@click="
showDate = true;
hideKeyboard();
"
labelWidth="80px"
label="有效期"
prop="userInfo.dateVal"
borderBottom
ref="item1"
>
<u--input v-model="myInfoModel.userInfo.dateVal" placeholder="请选择有效期" border="none"></u--input>
<u-datetime-picker
:formatter="formatter"
:show="showDate"
:value="datetime"
mode="dateTime"
closeOnClickOverlay
@confirm="dateConfirm"
@cancel="dateClose"
@close="dateClose"
></u-datetime-picker>
</u-form-item>
</u--form>
</view>
<view><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
<!-- #ifdef MP -->
<view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
PrimaryColor: '#0079fe', //主题色
myInfoModel: {
userInfo: {
name: '',
phone: '',
account: 'test9527',
email: '',
dateVal: ''
}
},
showDate: false,
dateTime: Number(new Date())
};
},
methods: {
onSubmitFunc() {
console.log('确认');
console.log(this.myInfoModel.userInfo);
},
dateClose() {
this.showDate = false;
},
dateConfirm(e) {
this.showDate = false;
this.myInfoModel.userInfo.dateVal = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
},
//格式化日期
formatter(type, value) {
if (type === 'year') {
return `${value}年`;
}
if (type === 'month') {
return `${value}月`;
}
if (type === 'day') {
return `${value}日`;
}
if (type === 'hour') {
return `${value}时`;
}
if (type === 'minute') {
return `${value}分`;
}
return value;
},
//隐藏输入框
hideKeyboard() {
uni.hideKeyboard();
}
}
};
</script>
<style lang="scss" scoped>
.set-page {
padding: 0rpx 30rpx;
.submit {
margin-top: 60rpx;
color: #fff;
width: 100%;
border: none;
border-radius: 40rpx;
}
}
</style>