addStudent.vue
3.82 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
141
<template>
<view class="container">
<uv-form labelPosition="left" :model="state.studentInfo" :rules="state.rules" ref="formRef" class="form-box">
<uv-form-item prop="name">
<uv-input v-model="state.studentInfo.name" shape="circle" placeholder="请输入学生真实姓名">
</uv-input>
</uv-form-item>
<uv-form-item prop="sex">
<view style="display: flex;justify-content: space-around;width: 100%;">
<view @click="state.studentInfo.sex = 0" class="select-item" :style="state.studentInfo.sex === 0 ? 'border-color:#6b75f6;' : ''">
<uv-icon name="man" color="#7175f0" size="16" style="margin-right: 10rpx;"></uv-icon>男
</view>
<view @click="state.studentInfo.sex = 1" class="select-item" :style="state.studentInfo.sex === 1 ? 'border-color:#6b75f6;' : ''">
<uv-icon name="woman" color="#ff5d5c" size="16" style="margin-right: 10rpx;"></uv-icon>女
</view>
<view @click="state.studentInfo.sex = 2" class="select-item" :style="state.studentInfo.sex === 2 ? 'border-color:#6b75f6;' : ''">
<uv-icon name="lock" color="#7175f0" size="16" style="margin-right: 10rpx;"></uv-icon>保密
</view>
</view>
</uv-form-item>
<uv-form-item prop="city">
<uv-input v-model="state.studentInfo.city" shape="circle" placeholder="请输入学生所在城市" />
</uv-form-item>
<uv-form-item prop="school">
<uv-input v-model="state.studentInfo.school" shape="circle" placeholder="请输入学生在读学校" />
</uv-form-item>
<uv-form-item prop="grade">
<uv-input v-model="state.studentInfo.grade" shape="circle" placeholder="请输入学生在读年级" />
</uv-form-item>
<uv-form-item>
<view @click="submit"
style="width: 100%;background-color: #7175f0;color: #fff;text-align: center;padding: 20rpx 0;border-radius: 9999rpx;">
确认添加
</view>
</uv-form-item>
</uv-form>
</view>
</template>
<script setup>
import {
reactive,
ref
} from "vue"
import { addStudentsApi } from "@/api/index.js"
const formRef = ref(null)
const state = reactive({
studentInfo: {
name: "",
sex: "",
city: "",
school: "",
grade: ""
},
rules: {
'name': {
type: 'string',
required: true,
message: '请输入学生真实姓名',
trigger: ['blur', 'change']
},
'sex': {
type: 'number',
required: true,
message: '请选择性别',
trigger: ['blur', 'change']
},
'city': {
type: 'string',
required: true,
message: '请输入学生所在城市',
trigger: ['blur', 'change']
},
'school': {
type: 'string',
required: true,
message: '请输入学生在读学校',
trigger: ['blur', 'change']
},
'grade': {
type: 'string',
required: true,
message: '请输入学生在读年级',
trigger: ['blur', 'change']
},
}
})
const submit = async () => {
try {
await formRef.value.validate()
uni.showLoading({
title: "提交中",
mask: true
})
const res = await addStudentsApi(state.studentInfo)
uni.hideLoading()
uni.showToast({
icon: 'success',
title: '添加成功'
})
formRef.value.resetFields()
uni.navigateBack()
} finally {
uni.hideLoading()
}
}
</script>
<style lang="scss" scoped>
.container {
background: linear-gradient(135deg, #eaecfb 10%, #f6f7fb 90%);
background-color: red;
height: calc(100vh - var(--tab-bar-height));
overflow-y: auto;
padding: 0 24rpx;
font-size: 28rpx;
}
.form-box {
margin-top: 80rpx;
background-color: #fff;
padding: 20rpx;
border-radius: 40rpx;
}
.select-item {
background-color: #e9ecfc;
width: 28%;
display: flex;
justify-content: center;
align-items: center;
padding: 10rpx 0;
border-radius: 9999rpx;
border: 3rpx solid #e8ecfd;
}
</style>