talk_appAmin/pages/mine/info/edit.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>