|
|
@@ -0,0 +1,214 @@
|
|
|
+<template>
|
|
|
+ <view class="check">
|
|
|
+ <uni-forms ref="form" :model="datainfo" :rules="rules">
|
|
|
+ <view class="cbox">
|
|
|
+ <view class="chmain">
|
|
|
+ <uni-forms-item label="头像" name="phonenumber">
|
|
|
+ <view class="flexjd mt10">
|
|
|
+ <image :src="avatar?baseUrl+avatar:aphoto" class="inimg" @click="handleToAvatar"></image>
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="用户名称" name="nickName">
|
|
|
+ <view class="flexc">
|
|
|
+ <uni-easyinput v-model="datainfo.nickName" :disabled="isdisabled" :inputBorder='false' placeholder="用户名称" />
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="性别" name="sex">
|
|
|
+ <picker range-key='dictLabel' :disabled="isdisabled" :value="xbidx" :range="xbList" @change='bindDateChange'>
|
|
|
+ <view class="flexc" style="height: 70rpx;">
|
|
|
+ <view class="flex1 txr f13 co27" v-if="datainfo.sex&&!xb">{{statusFormats(datainfo.sex,xbList,'xb')}}</view>
|
|
|
+ <view class="flex1 txr f13" v-else :class="xb?'co27':'coa'">{{xb||"性别"}}</view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="手机号码" name="phonenumber">
|
|
|
+ <view class="flexc">
|
|
|
+ <uni-easyinput v-model="datainfo.phonenumber" :disabled="isdisabled" :inputBorder='false' placeholder="手机号码" />
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="邮箱" name="email">
|
|
|
+ <view class="flexc">
|
|
|
+ <uni-easyinput v-model="datainfo.email" :disabled="isdisabled" :inputBorder='false' placeholder="邮箱" />
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ <!-- <uni-forms-item label="岗位" name="postGroup">
|
|
|
+ <view class="flexc">
|
|
|
+ <uni-easyinput v-model="postGroup" :disabled="isdisabled" :inputBorder='false' placeholder="岗位" />
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="角色" name="roleGroup" style="border:none">
|
|
|
+ <view class="flexc">
|
|
|
+ <uni-easyinput v-model="roleGroup" :disabled="isdisabled" :inputBorder='false' placeholder="角色" />
|
|
|
+ </view>
|
|
|
+ </uni-forms-item> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-forms>
|
|
|
+ <view class="rhbtn mt30" @click="getEditFn" v-if="isdisabled">修改</view>
|
|
|
+ <view class="rhbtn mt30" @click="getSubmit" v-else>提交</view>
|
|
|
+
|
|
|
+ <loading></loading>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import config from '@/config'
|
|
|
+ import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
|
|
|
+ import {uploadIdentify,selectValueKey} from '@/utils/common.js'
|
|
|
+ import {getDictionaryFn,getUserProfile,updateUserProfile} from "@/api/system/user.js"
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ aphoto:require("@/static/images/mine/head.png"),
|
|
|
+ baseUrl: config.baseUrl,
|
|
|
+ checkflag:true,
|
|
|
+ isdisabled:true,
|
|
|
+ roleGroup: "",
|
|
|
+ postGroup: "",
|
|
|
+ datainfo: {},
|
|
|
+ xbList:[],
|
|
|
+ xbidx:'',
|
|
|
+ xb:"",
|
|
|
+ rules: {
|
|
|
+ nickName: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '用户昵称不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ phonenumber: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '手机号码不能为空'
|
|
|
+ }, {
|
|
|
+ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
|
+ errorMessage: '请输入正确的手机号码'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ // email: {
|
|
|
+ // rules: [{
|
|
|
+ // required: true,
|
|
|
+ // errorMessage: '邮箱地址不能为空'
|
|
|
+ // }, {
|
|
|
+ // format: 'email',
|
|
|
+ // errorMessage: '请输入正确的邮箱地址'
|
|
|
+ // }]
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ this.init()
|
|
|
+ this.getUser()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ avatar() {
|
|
|
+ return this.$store.state.user.avatar
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkPermi,
|
|
|
+ checkRole,
|
|
|
+ getEditFn(){
|
|
|
+ this.isdisabled=false;
|
|
|
+ },
|
|
|
+ handleToAvatar() {
|
|
|
+ if(this.isdisabled){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$tab.navigateTo('/pages/mine/avatar/index')
|
|
|
+ },
|
|
|
+ statusFormats(data, list,type) {
|
|
|
+ var aite=selectValueKey(list, data);
|
|
|
+ if(type=='xbidx'){
|
|
|
+ this.xbidxidx=aite.key
|
|
|
+ }
|
|
|
+ return aite.actions;
|
|
|
+ },
|
|
|
+ getUser() {
|
|
|
+ getUserProfile().then(response => {
|
|
|
+ this.datainfo = response.data
|
|
|
+ this.roleGroup = response.roleGroup
|
|
|
+ this.postGroup = response.postGroup
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ // 性别
|
|
|
+ getDictionaryFn('sys_user_sex').then(res=>{
|
|
|
+ if(res.code==200){
|
|
|
+ if(res.data){
|
|
|
+ this.xbList = res.data.map(v => {
|
|
|
+ return {
|
|
|
+ dictLabel: v.dictLabel,
|
|
|
+ dictValue: v.dictValue
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ bindDateChange(e){
|
|
|
+ var val=e.detail.value;
|
|
|
+ this.datainfo.sex=this.xbList[val].dictValue;
|
|
|
+ this.xb=this.xbList[val].dictLabel;
|
|
|
+ },
|
|
|
+ getSubmit(ref) {
|
|
|
+ this.$refs.form.validate().then(res => {
|
|
|
+ updateUserProfile(this.datainfo).then(response => {
|
|
|
+ this.$modal.msgSuccess("修改成功")
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page{background: #F3F3F0;}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
|
|
|
+// .check .cbox /deep/ .uni-forms-item:last-child{border: none;}
|
|
|
+.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
|
|
|
+.check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
|
|
|
+.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
|
|
|
+.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
|
|
|
+.check /deep/ .uni-input-input{font-size: 26rpx;}
|
|
|
+.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
|
|
|
+.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
|
|
|
+.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
|
|
|
+.check /deep/ .uni-forms-item__label text{width: 110rpx;text-align-last: justify;}
|
|
|
+.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
|
|
|
+.check{min-height: 100vh;padding: 20rpx 18rpx 24rpx;box-sizing: border-box;}
|
|
|
+.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
|
|
|
+ .chmain{
|
|
|
+ padding: 0 32rpx;
|
|
|
+ .upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 8rpx;overflow: auto;
|
|
|
+ .img{width: 100%;height: 100%;}
|
|
|
+ .addimg{width: 70rpx;height: 70rpx;margin-bottom: 16rpx;}
|
|
|
+ view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
|
|
|
+ }
|
|
|
+ .rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
|
|
|
+ image{width: 100%;height: 100%;}
|
|
|
+ }
|
|
|
+ .checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
|
|
|
+ .aphoto{padding: 0 24rpx;border-left: 2rpx solid #e6e6e6;margin-left: 26rpx;
|
|
|
+ image{width: 40rpx;height: 38rpx;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.addimgs{display: flex;align-items: center;flex-wrap: wrap;justify-content: flex-end;
|
|
|
+
|
|
|
+ .assimg{width: 128rpx;height: 128rpx;position: relative;overflow: hidden;margin: 0 0 20rpx 24rpx;
|
|
|
+ .img{width: 100%;height: 100%;}
|
|
|
+ .delimg{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
|
|
|
+ }
|
|
|
+}
|
|
|
+.addbox{width: 102rpx;height: 102rpx;background: #F0F0F0;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-left: 24rpx;margin-bottom: 20rpx;flex: 0 0 auto;
|
|
|
+ image{width: 48rpx;height: 42rpx;}
|
|
|
+ // view{font-weight: 500;font-size: 24rpx;color: #666666;}
|
|
|
+ }
|
|
|
+.inimg{width: 102rpx;height: 102rpx;border-radius: 50%;}
|
|
|
+.tips{font-weight: bold;color: #272727;font-size: 26rpx;margin-left: 8rpx;}
|
|
|
+</style>
|
zouling