assessment-front/pages_order/auth/infoModify.vue

<template>
  <view class="page__view">

		<navbar title="资料修改" leftClick @leftClick="$utils.navigateBack" />

    <view class="form">
      <view class="flex form-header">
        <view class="line"></view>
        <view>个人信息</view>
      </view>
      <uv-form 
        ref="form"
        :model="form"
        :rules="rules"
        errorType="toast"
      >
        <view class="form-item">
          <uv-form-item prop="headImage" :customStyle="formItemStyle">
            <button class="btn btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <view class="flex flex-column avatar-box">
                <view v-if="form.headImage" class="avatar">
                  <image class="img" :src="form.headImage" mode="aspectFill"></image>
                </view>
                <view v-else class="flex avatar">
                  <image class="img" src="@/static/image/avatar-default.png" mode="scaleToFill"></image>
                </view>
                <view>点击更换头像</view>
              </view>
            </button>
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item prop="nickName" :customStyle="formItemStyle">
            <view class="flex row">
              <view class="row-label">昵称</view>
              <view class="row-content input">
                <input 
                  v-model="form.nickName" 
                  type="nickname" 
                  placeholder="请输入"
                  placeholderStyle="color: #999999; font-size: 30rpx; font-weight: 400;"
						      style="text-align: right;"
                />
              </view>
            </view>
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item prop="phone" :customStyle="formItemStyle">
            <view class="flex row">
              <view class="row-label">手机号</view>
              <view class="row-content input">
                <input 
                  v-model="form.phone" 
                  placeholder="请输入"
                  placeholderStyle="color: #999999; font-size: 30rpx; font-weight: 400;"
						      style="text-align: right;"
                  :disabled="!!userInfo.phone"
                />
              </view>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
    </view>
  
    <view class="bottom">
      <button class="btn" @click="onSubmit">保存</button>
    </view>

  </view>
	
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		props: {
			mode: {
				type: String,
				default: null,
			}
		},
		data() {
			return {
        form: {
          nickName: null,
          phone: null,
          headImage: null,
				},
        rules: {
          'nickName': {
            type: 'string',
            required: true,
            message: '请输入昵称',
          },
          'phone': {
            type: 'string',
            required: true,
            message: '请输入手机号',
          },
          'headImage': {
            type: 'string',
            required: false,
            message: '请选择头像',
          },
        },
        formItemStyle: { padding: 0 },
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(arg) {
			this.mode = arg.mode

			this.form.nickName = this.userInfo.nickName || ''
			this.form.phone = this.userInfo.phone || ''
			this.form.headImage = this.userInfo.headImage || ''
		},
		methods: {
			onChooseAvatar(res) {
				this.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					this.form.headImage = url
				})
			},
			getPhone(e){
				this.$api('bindPhone', {
					code : e.detail.code
				}, res => {
					if(res.code == 200){
						
						if(res.success){
							this.form.phone = res.result
						}else{
							uni.showModal({
								title: res.message
							})
						}
					}
				})
			},
      async onSubmit() {
        try {
          await this.$refs.form.validate()

					const {
						nickName,
						phone,
						headImage,
					} = this.form
					
					const params = {
						nickName,
						phone,
						headImage,
					}

					await this.$fetch('updateInfo', params, false)
						
          uni.showToast({
            icon: 'success',
            title: '保存成功',
          });

          this.$store.commit('getUserInfo')

          setTimeout(uni.navigateBack, 1000, -1)

        } catch (err) {
          console.log('onSubmit err', err)
        }
      },
		},
	}
</script>

<style lang="scss" scoped>

	.form {
    padding: 34rpx 22rpx;
    
    &-header {
      justify-content: flex-start;
      padding: 0 18rpx;
      column-gap: 7rpx;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			line-height: 1.4;
			color: #000000;
			margin-bottom: 24rpx;

      .line {
        width: 9rpx;
        height: 33rpx;
        background: #014FA2;
        border-radius: 5rpx;
      }
		}

		&-item {

			& + & {
				margin-top: 34rpx;
			  border-bottom: 0.5rpx solid rgba($color: #707070, $alpha: 0.14);
			}

		}
	}

  .btn-avatar {
    margin-bottom: 27rpx;
    display: inline-block;
    width: auto;
    border: none;
  }

  .avatar-box {
    box-sizing: border-box;
    row-gap: 9rpx;
    font-size: 28rpx;
    color: rgba($color: #999999, $alpha: 0.5);
  }

	.avatar {
		position: relative;
		width: 157rpx;
		height: 157rpx;
		border-radius: 50%;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
		}
		
	}

	.row {
    padding: 12rpx 69rpx 12rpx 23rpx;
		justify-content: space-between;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 1.4;
    font-size: 30rpx;
    color: #8B8B8B;

		& + & {
			margin-top: 32rpx;
		}
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;

		width: 100vw;
		padding: 0 78rpx 231rpx 78rpx;
		box-sizing: border-box;

		.btn {
			width: 100%;
			padding: 25rpx 0;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #FFFFFF;
      background: #014FA2;
			border-radius: 41rpx;
		}
	}

</style>