You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
12 KiB
431 lines
12 KiB
<template>
|
|
<view class="container safe-area-inset-bottom">
|
|
<image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>
|
|
|
|
<view class="wrap">
|
|
<view class="card">
|
|
<u-form label-width="auto">
|
|
<u-form-item label="头像">
|
|
<button style="margin-left: auto;width: 120rpx;height: 120rpx;" class="btn-normal" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image :src="form.headimgurl || vuex_default_icon" mode="aspectFit"></image>
|
|
</button>
|
|
</u-form-item>
|
|
<u-form-item label="昵称">
|
|
<input placeholder="点击获取昵称" style="text-align: right;" type="nickname" v-model="form.nickname" @change="nicknameChange"></input>
|
|
</u-form-item>
|
|
<u-form-item label="手机号">
|
|
<view style="margin-left: auto;display: flex;align-items: center;">
|
|
<u-input style="flex: 1;" v-model="form.mobile" input-align="right" placeholder="请输入手机号"></u-input>
|
|
<u-button size="mini" type="primary" class="btn-normal" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
|
|
点击获取
|
|
</u-button>
|
|
</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="card">
|
|
<u-form :model="form" ref="uForm" label-width="auto">
|
|
<u-form-item label="学生姓名" prop="name">
|
|
<u-input v-model="form.name" placeholder="请输入" input-align="right" />
|
|
</u-form-item>
|
|
<u-form-item label="性别" prop="sex">
|
|
<u-input type="select" v-model="form.sex" placeholder="请选择" input-align="right" @click="isShowSex = true"/>
|
|
</u-form-item>
|
|
<u-form-item label="年级" required prop="grade">
|
|
<u-input v-model="form.grade" placeholder="请输入" input-align="right" />
|
|
</u-form-item>
|
|
<u-form-item label="中考年份" required prop="middle_exam_year">
|
|
<u-input type="select" v-model="form.middle_exam_year" placeholder="请选择" input-align="right" @click="isShowYear = true" />
|
|
</u-form-item>
|
|
<u-form-item label="民族" prop="nationality">
|
|
<u-input v-model="form.nationality" placeholder="请输入" input-align="right" />
|
|
</u-form-item>
|
|
<u-form-item label="所在城市" required prop="city">
|
|
<u-input type="select" v-model="form.city" placeholder="请选择" input-align="right" @click="regionType = 'city',isShowRegion = true" />
|
|
</u-form-item>
|
|
<u-form-item label="所在县区" required prop="area">
|
|
<u-input type="select" v-model="form.area" placeholder="请选择" input-align="right" @click="regionType = 'area',isShowRegion = true" />
|
|
</u-form-item>
|
|
<u-form-item label="所在学校" required prop="school">
|
|
<u-input v-model="form.school" placeholder="请输入" input-align="right" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<view class="card__title">成绩</view>
|
|
|
|
<view class="score">
|
|
<view class="score-row">
|
|
<view class="score-row__text">初始成绩</view>
|
|
<u-input v-model="form.user_scores[0].score" placeholder="输入分数" placeholder-style="text-align: center;" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
<u-input v-model="form.user_scores[0].rank" style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
</view>
|
|
<view class="score-row">
|
|
<view class="score-row__text">一模成绩</view>
|
|
<u-input v-model="form.user_scores[1].score" placeholder="输入分数" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
<u-input v-model="form.user_scores[1].rank" style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
</view>
|
|
<view class="score-row">
|
|
<view class="score-row__text">估分成绩</view>
|
|
<u-input v-model="form.user_scores[2].score" placeholder="输入分数" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
<u-input v-model="form.user_scores[2].rank" style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
</view>
|
|
<view class="score-row">
|
|
<view class="score-row__text">精准成绩</view>
|
|
<u-input v-model="form.user_scores[3].score" placeholder="输入分数" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
<u-input v-model="form.user_scores[3].rank" style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-button
|
|
shape="circle"
|
|
:custom-style="{
|
|
background: 'linear-gradient(to right, #2e63ef, #4186f2)',
|
|
height: '76rpx',
|
|
'line-height': '76rpx',
|
|
'color': '#fff',
|
|
'font-size': '33rpx',
|
|
'letter-spacing': '5rpx',
|
|
'width': '450rpx',
|
|
'margin': '130rpx auto 0'
|
|
}"
|
|
@click="submit">保存</u-button>
|
|
</view>
|
|
|
|
<u-select v-model="isShowSex" :list="sexList" @confirm="e => form.sex = e[0].value"></u-select>
|
|
<u-picker
|
|
mode="time"
|
|
v-model="isShowYear"
|
|
:params="{
|
|
year: true,
|
|
month: false,
|
|
day: false,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
}"
|
|
@confirm="e => form.middle_exam_year = e.year"></u-picker>
|
|
<u-picker
|
|
mode="region"
|
|
v-model="isShowRegion"
|
|
:default-region="defaultRegion"
|
|
:params="regionParams"
|
|
@confirm="regionPick"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ROOTPATH } from "@/common/config";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
regionType: 'city',
|
|
isShowRegion: false,
|
|
isShowYear: false,
|
|
isShowSex: false,
|
|
sexList: [
|
|
{
|
|
value: '男',
|
|
label: '男'
|
|
},
|
|
{
|
|
value: '女',
|
|
label: '女'
|
|
},
|
|
{
|
|
value: '保密',
|
|
label: '保密'
|
|
}
|
|
],
|
|
form: {
|
|
sex: '',
|
|
nickname: '',
|
|
mobile: '',
|
|
country: '',
|
|
province: '',
|
|
city: '',
|
|
headimgurl: '',
|
|
grade: '',
|
|
middle_exam_year: '',
|
|
nationality: '',
|
|
area: '',
|
|
school: '',
|
|
name: '',
|
|
user_scores: [
|
|
{
|
|
name: '初始成绩',
|
|
score: '',
|
|
rank: ''
|
|
},
|
|
{
|
|
name: '一模成绩',
|
|
score: '',
|
|
rank: ''
|
|
},
|
|
{
|
|
name: '估分成绩',
|
|
score: '',
|
|
rank: ''
|
|
},
|
|
{
|
|
name: '精准成绩',
|
|
score: '',
|
|
rank: ''
|
|
}
|
|
]
|
|
},
|
|
rules: {
|
|
grade: [
|
|
{
|
|
required: true,
|
|
message: '请输入年级'
|
|
}
|
|
],
|
|
middle_exam_year: [
|
|
{
|
|
required: true,
|
|
message: '请选择中考年份'
|
|
}
|
|
],
|
|
city: [
|
|
{
|
|
required: true,
|
|
message: '请选择城市'
|
|
}
|
|
],
|
|
area: [
|
|
{
|
|
required: true,
|
|
message: '请选择县区'
|
|
}
|
|
],
|
|
school: [
|
|
{
|
|
required: true,
|
|
message: '请输入学校'
|
|
}
|
|
]
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
async getInfo() {
|
|
try {
|
|
const { user } = await this.$u.api.getUserInfo()
|
|
for (let key in this.form) {
|
|
if (user.hasOwnProperty(key) && key !== 'user_scores') {
|
|
this.form[key] = user[key]
|
|
} else if (key === 'user_scores') {
|
|
this.form['user_scores'].forEach(item => {
|
|
if (user['user_scores'].find(j => j.name === item.name)) {
|
|
item.score = user['user_scores'].find(j => j.name === item.name).score
|
|
item.rank = user['user_scores'].find(j => j.name === item.name).rank
|
|
}
|
|
})
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
async onGetPhoneNumber(e) {
|
|
try {
|
|
if (e.detail.code) {
|
|
const res = await this.$u.api.mobile({
|
|
code: e.detail.code
|
|
})
|
|
if (res.mobile) {
|
|
this.form.mobile = res.mobile
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
nicknameChange(e) {
|
|
this.form.nickname = e.target.value
|
|
},
|
|
onChooseAvatar(e) {
|
|
uni.uploadFile({
|
|
url: ROOTPATH + "/api/mobile/upload-file",
|
|
filePath: e.detail.avatarUrl,
|
|
name: 'file',
|
|
header: {
|
|
['Authorization']: `Bearer ${this.vuex_token}`
|
|
},
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: '上传成功',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
})
|
|
let data = JSON.parse(res.data)
|
|
this.form.headimgurl = data.url
|
|
}
|
|
})
|
|
},
|
|
|
|
regionPick(e) {
|
|
if (e.hasOwnProperty('province')) {
|
|
this.form.province = e.province?.label
|
|
}
|
|
if (e.hasOwnProperty('city')) {
|
|
this.form.city = e.city?.label
|
|
}
|
|
if (e.hasOwnProperty('area')) {
|
|
this.form.area = e.area?.label
|
|
}
|
|
},
|
|
|
|
submit() {
|
|
this.$refs['uForm'].validate(valid => {
|
|
if (valid) {
|
|
try {
|
|
this.$u.api.updateUser(this.form).then(async res => {
|
|
console.log(res)
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'none'
|
|
})
|
|
const { user } = await this.$u.api.getUserInfo()
|
|
this.$u.vuex('vuex_user', user)
|
|
})
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
regionParams() {
|
|
return this.regionType === 'city' ? {
|
|
province: true,
|
|
city: true,
|
|
area: false,
|
|
} : {
|
|
province: false,
|
|
city: false,
|
|
area: true,
|
|
}
|
|
},
|
|
defaultRegion() {
|
|
if (this.regionType === 'area') {
|
|
return [this.form.province,this.form.city]
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules)
|
|
this.getInfo()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-input__right-icon {
|
|
margin-left: 32rpx;
|
|
}
|
|
.u-form-item--left__content--required {
|
|
color: #e77817;
|
|
padding: 0 20rpx 0 18rpx;
|
|
}
|
|
.u-form-item--left__content__label {
|
|
margin-left: 56rpx;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
width: 100vw;
|
|
background: #eaf8fe;
|
|
}
|
|
.bkg {
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.wrap {
|
|
padding: 60rpx 0;
|
|
.card {
|
|
margin: 20rpx 24rpx 0;
|
|
border-radius: 20rpx;
|
|
filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
|
|
background-color: #ffffff;
|
|
padding: 32rpx 36rpx 40rpx 40rpx;
|
|
|
|
&__title {
|
|
display: inline-block;
|
|
font-size: 30rpx;
|
|
text-transform: uppercase;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
padding: 0 10rpx;
|
|
z-index: 3;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
background: linear-gradient(to right, #2e63ef, #4187f2);
|
|
height: 6rpx;
|
|
border-radius: 4rpx;
|
|
z-index: 0;
|
|
position: absolute;
|
|
bottom: 4rpx;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.score {
|
|
margin-top: 42rpx;
|
|
|
|
&-row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__text {
|
|
word-break: keep-all;
|
|
padding: 0 40rpx 0 20rpx;
|
|
font-size: 28rpx;
|
|
text-transform: uppercase;
|
|
color: #333333;
|
|
}
|
|
}
|
|
&-row + &-row {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.btn-normal {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: normal;
|
|
background: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
border: none;
|
|
font-size: unset;
|
|
text-align: unset;
|
|
overflow: visible;
|
|
color: inherit;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 100%;
|
|
border: 2px solid #fff;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
|
|
.btn-normal::after {
|
|
border: none
|
|
}
|
|
</style>
|