450 lines
12 KiB
Vue
450 lines
12 KiB
Vue
<template class="content">
|
|
<view>
|
|
<!-- 顶部导航栏 -->
|
|
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor"
|
|
@leftClick="leftClick">
|
|
<template #center>
|
|
<div class="text0"><span>完善资料</span></div>
|
|
</template>
|
|
</up-navbar>
|
|
<image v-if="backgroundImage == ''" class="bg" :src="bjt" ></image>
|
|
<image class="bg" :src="imageInfo()" v-else></image>
|
|
</view>
|
|
|
|
<view class="cardss">
|
|
<view class="avatarInfo" >
|
|
<up-avatar :src="getAvatar()" size="182rpx" @click="updateAvatar"></up-avatar>
|
|
</view>
|
|
|
|
<view class="upbackInfo">
|
|
<fileUpload v-model="fileList" limit="1" @upInfo="upInfo" pwidth="46rpx" pheight="44rpx">
|
|
<template #default-image><image :src="upbackimage" style="width: 46rpx; height: 44rpx;"></image></template>
|
|
</fileUpload>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="cards">
|
|
<view class="gridLine">
|
|
<span class="text1">用户昵称</span>
|
|
<view class="text2" @click="upNickInfo(1)">
|
|
<span v-if="nickName != ''">{{ nickName }}</span>
|
|
<span v-else style="color: #999999 !important">请输入用户昵称</span>
|
|
<image @click="upNickInfo(1)" :src="right2" style="width: 18rpx; height: 32rpx; margin-left: 20rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine">
|
|
<span class="text1">个人简介</span>
|
|
<view class="text2" @click="upNickInfo(2)">
|
|
<span v-if="remark != ''">{{ remark }}</span>
|
|
<span v-else style="color: #999999 !important">介绍一下自己吧</span>
|
|
<image @click="upNickInfo(2)" :src="right2" style="width: 18rpx; height: 32rpx; margin-left: 20rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" @click="showsex = true">
|
|
<span class="text1">性别</span>
|
|
<view class="text2">
|
|
<span>{{ dictSex(sex) }}</span>
|
|
<image @click="showsex = true" :src="right2" style="width: 18rpx; height: 32rpx; margin-left: 20rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" @click="showyear = true" style="padding-bottom: 20rpx;">
|
|
<span class="text1">出生年月</span>
|
|
<view class="text2">
|
|
<span>{{ birthday }}</span>
|
|
<image @click="showyear = true" :src="right2" style="width: 18rpx; height: 32rpx; margin-left: 20rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="lineInfo"></view>
|
|
<view class="gridLine">
|
|
<span class="text1">地区</span>
|
|
<view class="text2">
|
|
<span>{{ area }}</span>
|
|
<image @click="showarea = true" :src="right2" style="width: 18rpx; height: 32rpx; margin-left: 20rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn" @click="submitto()">
|
|
<view class="textbtn">提交资料</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-if="showyear">
|
|
<up-datetime-picker hasInput :minDate="0" :show="showyear" v-model="newData" @confirm="confirmyear"
|
|
@cancel="cancelyear" mode="date"></up-datetime-picker>
|
|
|
|
</view>
|
|
<view v-if="showsex">
|
|
<up-picker :show="showsex" :columns="columnssex" @close="showsex = false" @confirm="confirmsex"
|
|
keyName="label"></up-picker>
|
|
</view>
|
|
<view v-if="showarea">
|
|
<up-picker :show="showarea" :columns="range" @close="showarea = false" @confirm="confirmarea"
|
|
keyName="label"></up-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import fileUpload from '@/pages/common/file/fileUpload/index.vue'
|
|
import { updateUserinfo } from "@/api/system/userinfo"
|
|
import { updateUserProfile } from "@/api/system/user"
|
|
import { useStore } from 'vuex'
|
|
import { getUserInfo } from "@/api/login";
|
|
import { useRouter } from 'vue-router'
|
|
import { ref, getCurrentInstance, reactive } from 'vue';
|
|
import { getDicts } from "@/api/system/dict/data";
|
|
import { onShow, onLoad ,onPullDownRefresh} from '@dcloudio/uni-app'
|
|
import image from 'uview-plus/libs/config/props/image';
|
|
import {
|
|
addressData
|
|
} from "@/pages/signln/data.js";
|
|
const bgColor = ref('rgba(170, 0, 0, 0)')
|
|
const timeFormat = uni.$u.timeFormat;
|
|
const { proxy } = getCurrentInstance();
|
|
const newData = ref(new Date().getTime());
|
|
const QNDomain = proxy.$store.state.user.QNDomain
|
|
const dictSexInfo = ref('')
|
|
const showyear = ref(false)
|
|
const showarea = ref(false)
|
|
const showsex = ref(false)
|
|
const isOfficial = ref(true)
|
|
const iconConfig = proxy.iconConfig;
|
|
const bjt = iconConfig.bjt;
|
|
const upbackimage = iconConfig.upbackimage;
|
|
const range = ref([
|
|
[]
|
|
]);
|
|
const columnssex = reactive([
|
|
[
|
|
{
|
|
label: '男',
|
|
id: "0"
|
|
},
|
|
{
|
|
label: '女',
|
|
id: "1"
|
|
}
|
|
,
|
|
{
|
|
label: '未知',
|
|
id: "2"
|
|
}
|
|
]
|
|
]);
|
|
const right2 = iconConfig.right2;
|
|
|
|
const avatar = ref(proxy.$store.state.user.avatar)
|
|
const name = ref(proxy.$store.state.user.name)
|
|
const nickName = ref(proxy.$store.state.user.nickName)
|
|
const sex = ref(proxy.$store.state.user.sex)
|
|
|
|
const infoSchool = ref(proxy.$store.state.userInfo.infoSchool)//学校
|
|
const backgroundImage = ref(proxy.$store.state.userInfo.backgroundImage)//背景
|
|
const remark = ref(proxy.$store.state.userInfo.remark)//签名
|
|
const area = ref(proxy.$store.state.userInfo.area)//地区
|
|
const birthday = ref(proxy.$store.state.userInfo.birthday)//生日
|
|
const birthdayInfo = ref('')
|
|
|
|
const fileList = ref([])
|
|
const form1 = ref({
|
|
userId: null,
|
|
doingsStatus: null,
|
|
newUser: null,
|
|
birthday: null,
|
|
infoName: null,
|
|
infoSchool: null,
|
|
infoDepartment: null,
|
|
infoGrade: null,
|
|
infoCode: null,
|
|
infoDocument: null,
|
|
codeDocument: null,
|
|
codeInfo: null,
|
|
backgroundImage: null,
|
|
auditInfo: null,
|
|
auditTime: null,
|
|
auditUserId: null,
|
|
area: null,
|
|
infoRank: null,
|
|
infoCoin: null,
|
|
infoActive: null,
|
|
infoAssist: null,
|
|
followCount: null,
|
|
fanCount: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
remark: null
|
|
})
|
|
const form2 = ref({
|
|
|
|
nickName: undefined,
|
|
sex: undefined,
|
|
})
|
|
const getAvatar = () => {
|
|
let avatarInfo = avatar.value
|
|
console.log(avatarInfo)
|
|
return avatarInfo;
|
|
}
|
|
const gotoAuthentication = () => {
|
|
proxy.$tab.navigateTo('/pages/mine/studentCard/authentication')
|
|
}
|
|
const gotoStuCardInfo = () => {
|
|
proxy.$tab.navigateTo('/pages/mine/studentCard/stuCardInfo')
|
|
}
|
|
const toCropping = () => {
|
|
proxy.$tab.navigateTo('/pages/common/avatar/index')
|
|
}
|
|
|
|
const dictSex = (state) => {
|
|
// 查找匹配的字典项
|
|
const dict = dictSexInfo.value.find((dict) => dict.dictValue == state);
|
|
return dict ? dict.dictLabel : '未知状态';
|
|
}
|
|
const cancelyear = () => {
|
|
showyear.value = false
|
|
birthdayInfo.value = ''
|
|
}
|
|
//生日选择器
|
|
const confirmyear = (e) => {
|
|
showyear.value = false
|
|
birthdayInfo.value = timeFormat(e.value, 'yyyy-mm-dd');
|
|
if (birthdayInfo.value == '') {
|
|
proxy.$modal.msgError('信息不能为空');
|
|
} else {
|
|
form1.value.birthday = birthdayInfo.value;
|
|
proxy.$modal.loading('正在提交数据，请稍候...');
|
|
upbirthday();
|
|
}
|
|
}
|
|
const upbirthday = () => {
|
|
updateUserinfo(form1.value).then(e => {
|
|
proxy.$modal.closeLoading();
|
|
proxy.$modal.msgSuccess("修改成功");
|
|
birthday.value = form1.value.birthday
|
|
proxy.$store.commit("SET_BIRTHDAY", form1.value.birthday)
|
|
})
|
|
}
|
|
//性别选择器
|
|
const closesex = () => {
|
|
showsex.value = false;
|
|
}
|
|
const confirmsex = (e) => {
|
|
form2.value.sex = e.indexs[0];
|
|
|
|
showsex.value = false;
|
|
proxy.$modal.loading('正在提交数据，请稍候...');
|
|
upsex();
|
|
|
|
}
|
|
const upsex = () => {
|
|
updateUserProfile(form2.value).then(e => {
|
|
proxy.$modal.closeLoading();
|
|
proxy.$modal.msgSuccess("修改成功");
|
|
sex.value = form2.value.sex
|
|
proxy.$store.commit("SET_SEX", form2.value.sex)
|
|
uni.setStorageSync("SET_SEX", form2.value.sex)
|
|
})
|
|
}
|
|
onLoad((options) => {
|
|
console.log("头像：",avatar.value);
|
|
initRange();
|
|
getDicts('sys_user_sex').then(e => {
|
|
dictSexInfo.value = e.data
|
|
})
|
|
|
|
|
|
})
|
|
onPullDownRefresh((options) => {
|
|
proxy.$router.go(0)
|
|
})
|
|
onShow( (e) => {
|
|
onLoad()
|
|
})
|
|
const upNickInfo = (e) => {
|
|
proxy.$tab.navigateTo('/pages/mine/info/upInfo?type=' + e)
|
|
|
|
}
|
|
const initRange = async () => {
|
|
const provinces = addressData.map(province => province.name);
|
|
range.value = [provinces];
|
|
};
|
|
|
|
const confirmarea = (e) => {
|
|
form1.value.area = e.value[0]
|
|
area.value = e.value[0]
|
|
proxy.$store.commit("SET_area", e.value[0])
|
|
updateUserinfo(form1.value).then(e => {
|
|
proxy.$modal.msgSuccess("修改成功");
|
|
area.value = e.value[0]
|
|
proxy.$store.commit("SET_area", e.value[0])
|
|
})
|
|
showarea.value = false
|
|
}
|
|
const upInfo = (e) => {
|
|
form1.value.backgroundImage = e;
|
|
updateUserinfo(form1.value).then(er => {
|
|
backgroundImage.value = e
|
|
uni.setStorageSync("SET_backgroundImage", e)
|
|
proxy.$store.commit("SET_backgroundImage", e)
|
|
proxy.$modal.msgSuccess("修改成功");
|
|
})
|
|
}
|
|
const leftClick = () => {
|
|
proxy.$tab.navigateBack(1);
|
|
};
|
|
const imageInfo = ()=> {
|
|
|
|
let info = QNDomain+ backgroundImage.value
|
|
console.log(backgroundImage.value);
|
|
return info
|
|
}
|
|
const submitto = () => {
|
|
console.log();
|
|
if(nickName.value == ""){
|
|
proxy.$modal.msgError("昵称不能为空");
|
|
return;
|
|
}else if (remark.value == ""){
|
|
proxy.$modal.msgError("简介不能为空");
|
|
return;
|
|
}
|
|
else if(area.value == ""){
|
|
proxy.$modal.msgError("地区不能为空");
|
|
return;
|
|
}
|
|
else if(sex.value == ""){
|
|
proxy.$modal.msgError("性别不能为空");
|
|
return;
|
|
}
|
|
else if(birthday.value == ""){
|
|
proxy.$modal.msgError("生日不能为空");
|
|
return;
|
|
|
|
}
|
|
proxy.$modal.msgSuccess("修改成功");
|
|
proxy.$tab.switchTab('/pages/index')
|
|
|
|
}
|
|
const updateAvatar = () => {
|
|
proxy.$tab.navigateTo('/pages/common/avatar/index')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
}
|
|
|
|
.text0 {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
|
|
.cardss {
|
|
|
|
.avatarInfo {
|
|
position: absolute;
|
|
top: 224rpx;
|
|
left: 32rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.upbackInfo {
|
|
position: absolute;
|
|
top: 388rpx;
|
|
left: 670rpx;
|
|
}
|
|
}
|
|
|
|
.cards {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
position: absolute;
|
|
top: 466rpx;
|
|
left: 0;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background: #ffffff;
|
|
padding-top: 50rpx;
|
|
}
|
|
|
|
.gridLine {
|
|
|
|
padding-bottom: 46rpx;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.text1 {
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
color: #333333 !important;
|
|
}
|
|
|
|
.text2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: #333333 !important;
|
|
}
|
|
|
|
.text3 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: right;
|
|
color: #999999 !important;
|
|
}
|
|
}
|
|
|
|
.lineInfo {
|
|
width: 750rpx;
|
|
height: 8rpx;
|
|
background: #f4f5f6;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
background: #7945a7;
|
|
margin-top: 160rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 160rpx auto;
|
|
margin-bottom: 10rpx;
|
|
.textbtn {
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF !important;
|
|
}
|
|
}
|
|
</style> |