185 lines
7.1 KiB
Vue
185 lines
7.1 KiB
Vue
<script lang="ts" setup>
|
|
import { useUserStore } from '@/store';
|
|
import { storeToRefs } from 'pinia';
|
|
import MxUpload from "@/pages-sub/components/upload/index.vue"
|
|
import MxRadio from "@/pages-sub/components/radio/index.vue"
|
|
import { getAreaList, getGradeList, saveUserInfo } from '@/service';
|
|
|
|
const userStore = useUserStore()
|
|
const { userInfo } = storeToRefs(userStore)
|
|
definePage({
|
|
style: {
|
|
navigationBarTitleText: '个人信息',
|
|
navigationBarBackgroundColor: "#fff"
|
|
},
|
|
excludeLoginPath: true,
|
|
})
|
|
|
|
|
|
const genderClassification = [{ label: '男', value: "1" }, { label: '女', value: "2" }]
|
|
const gradeClassification = ref([])
|
|
const areaList = ref([])
|
|
|
|
const handleChange = (value: any[]) => {
|
|
userInfo.value.avatar = value[0].url
|
|
}
|
|
|
|
const handleSave = () => {
|
|
let params = {
|
|
Avatar: userInfo.value.avatar,
|
|
nickName: userInfo.value.nickName,
|
|
gradeId: userInfo.value.userExtend.gradeId,
|
|
gradeName: userInfo.value.userExtend.gradeName,
|
|
areaName: userInfo.value.userExtend.area,
|
|
schoolName: userInfo.value.userExtend.schoolName,
|
|
sex: userInfo.value.sex
|
|
}
|
|
saveUserInfo({ data: params }).then((resp) => {
|
|
if (resp.code === 200) {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
mask: true
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const navigateToSchool = () => {
|
|
uni.navigateTo({ url: `/pages-sub/wishlist/school?region=${userInfo.value.userExtend.area}` })
|
|
}
|
|
|
|
const activeType = ref("")
|
|
const visible = ref(false)
|
|
const formData = ref({
|
|
genderLabel: genderClassification.filter(item => item.value == userInfo.value.sex)[0]?.label,
|
|
})
|
|
|
|
const onOverlayClick = () => {
|
|
visible.value = false
|
|
}
|
|
|
|
const handleOpenPopup = (type: string) => {
|
|
visible.value = true
|
|
activeType.value = type
|
|
}
|
|
|
|
const getTitle = (type: string) => {
|
|
const title = { "gender": '请选择性别', "grade": '请选择年级', "examinationArea": '请选择中考所在地', }
|
|
return title[type];
|
|
}
|
|
|
|
|
|
onShow(() => {
|
|
getGradeList().then(resp => {
|
|
if (resp.code === 200) {
|
|
gradeClassification.value = resp.result
|
|
}
|
|
})
|
|
|
|
getAreaList().then(resp => {
|
|
if (resp.code === 200) {
|
|
areaList.value = resp.result
|
|
}
|
|
})
|
|
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="flex flex-col bg-[#f8f8f8] h-screen">
|
|
<view class="mx-[32rpx] bg-[#fff] rounded-[20rpx] mt-[32rpx] text-[28rpx] text-[#303030] font-bold">
|
|
<view class="flex items-center justify-between mr-[16rpx] ml-[32rpx] py-[28rpx] not-last-child">
|
|
<text class="text-[30rpx] text-[#404142] font-400">头像</text>
|
|
<MxUpload :custom-upload="true" :hiddenPreview="true" @change="handleChange" :signal="true"
|
|
:outer-file-list="[{ url: `${userInfo.avatar}` }]">
|
|
<template #default="{ fileList }">
|
|
<view class="flex items-center gap-[16rpx]">
|
|
<view class="w-[96rpx] h-[96rpx] rounded-full">
|
|
<image :src="fileList[0].url" mode="scaleToFill" class="w-[96rpx] h-[96rpx] rounded-full" />
|
|
</view>
|
|
<view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
|
|
</view>
|
|
</template>
|
|
</MxUpload>
|
|
</view>
|
|
<view class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child">
|
|
<text class="text-[30rpx] text-[#404142] font-400">学生姓名</text>
|
|
<view class="flex items-center">
|
|
<input type="text" v-model="userInfo.nickName" class="text-right">
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child">
|
|
<text class="text-[30rpx] text-[#404142] font-400">性别</text>
|
|
<view class="flex items-center" @click="handleOpenPopup('gender')">
|
|
<text>{{ formData.genderLabel }}</text>
|
|
<view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
|
|
<text class="text-[30rpx] text-[#404142] font-400">年级</text>
|
|
<view class="flex items-center" @click="handleOpenPopup('grade')">
|
|
<text>{{ userInfo.userExtend.gradeName }}</text>
|
|
<view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
|
|
<text class="text-[30rpx] text-[#404142] font-400">就读学校</text>
|
|
<view class="flex items-center" @click="navigateToSchool">
|
|
<text>{{ userInfo.userExtend.schoolName }}</text>
|
|
<view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
|
|
<text class="text-[30rpx] text-[#404142] font-400">中考所在区</text>
|
|
<view class="flex items-center" @click="handleOpenPopup('area')">
|
|
<text>{{ userInfo.userExtend.area }}</text>
|
|
<view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="text-white text-[32rpx] text-center mx-[96rpx] bg-[#1580FF] rounded-full py-[22rpx] mt-[80rpx]"
|
|
@click="handleSave">保存
|
|
</view>
|
|
|
|
<sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
|
|
<view class="bg-white rounded-[24rpx_24rpx_0_0] px-[30rpx] pb-safe pt-[30rpx] min-h-[492rpx]">
|
|
<view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
|
|
<view>{{ getTitle(activeType) }}</view>
|
|
<view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
|
|
class="w-[36rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
<MxRadio v-model:value="userInfo.sex" v-model:label="formData.genderLabel" v-if="activeType == 'gender'"
|
|
:options="genderClassification" label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-2 items-center gap-[16rpx]"
|
|
custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
|
|
active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />
|
|
|
|
<MxRadio v-model:value="userInfo.userExtend.gradeId" v-model:label="userInfo.userExtend.gradeName"
|
|
v-if="activeType == 'grade'" :options="gradeClassification" label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
|
|
custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
|
|
active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />
|
|
|
|
<MxRadio v-model:value="userInfo.userExtend.area" v-if="activeType == 'area'" :options="areaList"
|
|
label-key="label" value-key="value" custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
|
|
custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
|
|
active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />
|
|
|
|
</view>
|
|
</sar-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.not-last-child {
|
|
border-bottom: 2rpx solid #f8f8f8;
|
|
}
|
|
</style> |