399 lines
11 KiB
Vue
399 lines
11 KiB
Vue
<template style="position: relative;">
|
|
<view class="bjInfo">
|
|
<view class="cardss">
|
|
<view class="cardss-title">
|
|
<up-avatar :src="avatar" shape="circle" size="180rpx" ></up-avatar>
|
|
<image @click="toCropping" :src="upavatar2" style="width: 48rpx; height: 48rpx; position: absolute; left: 417rpx"></image>
|
|
</view>
|
|
</view>
|
|
<view class="cardz">
|
|
<view class="gridLine">
|
|
<span class="text1">用户昵称</span>
|
|
<view class="text2" @click="upNickInfo(1)">
|
|
<span v-if="nickName != ''">{{ nickName }}</span>
|
|
<span v-else>这个人很懒，什么都没有留下</span>
|
|
<image @click="upNickInfo(1)" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</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>介绍一下自己吧</span>
|
|
<image @click="upNickInfo(2)" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</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="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" @click="showyear = true">
|
|
<span class="text1">出生年月</span>
|
|
<view class="text2">
|
|
<span>{{ birthday }}</span>
|
|
<image @click="showyear = true" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine">
|
|
<span class="text1">地区</span>
|
|
<view class="text2">
|
|
<span>{{ area }}</span>
|
|
<image @click="showarea = true" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" style="margin-bottom: 0;">
|
|
<span class="text1">背景</span>
|
|
<view class="text2">
|
|
<image :src="getImageback()" style="width: 120rpx;height: 80rpx;border-radius: 8rpx 8rpx 8rpx 8rpx;"></image>
|
|
<image @click="show1 = true" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="cardx">
|
|
<view class="gridLine" v-if="auditInfo != 3">
|
|
<span class="text1">学生认证</span>
|
|
<view class="text3">
|
|
<span>未认证</span>
|
|
<image :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="gridLine" >
|
|
<span class="text1">学生认证</span>
|
|
<view class="text2">
|
|
<span>已认证</span>
|
|
<image :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" >
|
|
<span class="text1">学校</span>
|
|
<view class="text2">
|
|
<span>{{infoSchool}}</span>
|
|
<image :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" >
|
|
<span class="text1">系别</span>
|
|
<view class="text2">
|
|
<span>{{infoDepartment}}</span>
|
|
<image :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" >
|
|
<span class="text1">年级</span>
|
|
<view class="text2">
|
|
<span>{{infoGrade}}</span>
|
|
<image :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="gridLine" >
|
|
<up-image :src="QNDomain +infoDocument" width="686rpx" height="400rpx" ></up-image>
|
|
</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="closesex" @confirm="confirmsex" keyName="label"></up-picker>
|
|
</view>
|
|
<view v-if="showarea">
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
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 } from '@dcloudio/uni-app'
|
|
import image from 'uview-plus/libs/config/props/image';
|
|
const timeFormat = uni.$u.timeFormat;
|
|
const { proxy } = getCurrentInstance();
|
|
const newData = ref(new Date().getTime());
|
|
const dictSexInfo = ref('')
|
|
const showyear = ref(false)
|
|
const showarea = ref(false)
|
|
const QNDomain = proxy.$store.state.user.QNDomain
|
|
const isOfficial = ref(true)
|
|
const iconConfig = proxy.iconConfig;
|
|
const showsex = ref(false)
|
|
const columnssex = reactive([
|
|
[
|
|
{
|
|
label: '男',
|
|
id: "0"
|
|
},
|
|
{
|
|
label: '女',
|
|
id: "1"
|
|
}
|
|
,
|
|
{
|
|
label: '未知',
|
|
id: "2"
|
|
}
|
|
]
|
|
]);
|
|
const right3 = iconConfig.right3;
|
|
const upavatar2 = iconConfig.upavatar2;
|
|
const auditInfo = ref(proxy.$store.state.userInfo.auditInfo)//审核状态
|
|
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(uni.getStorageSync("SET_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 infoDepartment = ref(proxy.$store.state.userInfo.infoDepartment)//系别
|
|
const infoGrade = ref(proxy.$store.state.userInfo.infoGrade)//年纪
|
|
const infoName = ref(proxy.$store.state.userInfo.infoName)//名字
|
|
const infoCode = ref(proxy.$store.state.userInfo.infoCode)//学号
|
|
const infoDocument = ref(proxy.$store.state.userInfo.infoDocument)//学生证
|
|
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 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 getImageback = () => {
|
|
return QNDomain + backgroundImage.value;
|
|
}
|
|
const dictSex = (state) => {
|
|
// 查找匹配的字典项
|
|
console.log(proxy.$store.state.user.sex);
|
|
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
|
|
uni.setStorageSync("SET_SEX",form2.value.sex)
|
|
})
|
|
}
|
|
onLoad((options) => {
|
|
console.log( "ceshi:",uni.getStorageSync("SET_SEX"));
|
|
getDicts('sys_user_sex').then(e => {
|
|
dictSexInfo.value = e.data
|
|
})
|
|
getUserInfo().then(async e => {
|
|
|
|
backgroundImage.value = e.data.backgroundImage
|
|
area.value = e.data.area
|
|
})
|
|
})
|
|
const upNickInfo = (e) => {
|
|
proxy.$tab.navigateTo('/pages/mine/info/upInfo?type='+e)
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #F4F5F6;
|
|
}
|
|
|
|
.bjInfo {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 912rpx;
|
|
}
|
|
|
|
.cardss {
|
|
.cardss-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
padding-top: 48rpx;
|
|
padding-bottom: 60rpx;
|
|
}
|
|
}
|
|
|
|
.cardz {
|
|
|
|
.gridLine {
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
margin-bottom: 64rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.text1 {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
color: #666666 !important;
|
|
}
|
|
|
|
.text2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: #333333 !important;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.cardx {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
margin-top: 6rpx;
|
|
|
|
.gridLine {
|
|
padding-top: 32rpx;
|
|
padding-bottom: 32rpx;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.text1 {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
color: #666666 !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;
|
|
}
|
|
}
|
|
}
|
|
</style> |