talk_appAmin/pages/mine/updateInfo/newUserupInfo.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>