app-AgricultureSmart/uniapp/subpkg/setting/setting.vue

<template>
  <view class="user-info">
    <view class="avatar">
      <view class="avatar-text">头像</view>
      <view @click="chooseAvatar">
        <image :src="avatarUrl" class="avatar-img"></image>
      </view>
    </view>
    <view class="nickname">
      <view class="nickname-text">昵称</view>
      <input class="nickname-input" type="text" v-model="nickname" placeholder="请输入新昵称" />
    </view>
    <view class="intro">
      <view class="intro-text">简介</view>
      <view class="intro-value" @click="editIntro">一句话介绍自己</view>
    </view>
    <view class="birthday">
      <view class="birthday-text">生日</view>
      <view class="birthday-value" @click="editBirthday">填写生日有福利</view>
    </view>
    <view class="address">
      <view class="address-text">收货地址</view>
      <view class="address-value" @click="editAddress">修改/添加</view>
    </view>
    <view class="confirm-btn" @click="saveAndBack">确定修改</view>
  </view>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {

  data() {
    return {
      avatarUrl: '../../static/avator/1.jpg',
      nickname: 'ST [渔夺]'
    };
  },
  methods: {
    ...mapMutations('m_user', ['updateUserName','updateAvatarUrl']),

    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.avatarUrl = res.tempFilePaths[0];
        }
      });
    },
    editIntro() {
      // 处理编辑简介的逻辑
    },
    editBirthday() {
      // 处理编辑生日的逻辑
    },
    editAddress() {
      // 处理编辑收货地址的逻辑
    },
    saveAndBack() {
      // 保存数据的逻辑
      // ...
      this.updateUserName(this.nickname)
      this.updateAvatarUrl(this.avatarUrl)
      // 返回上一层页面
      uni.navigateBack();
    }
  },
}
</script>

<style lang="scss">
.user-info {
  padding: 40rpx;
  background-color: #fff;

  .avatar,
  .nickname,
  .intro,
  .birthday,
  .address {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    &-text {
      font-weight: bold;
      margin-right: 20rpx;
      color: #333;
    }

    &-value {
      flex: 1;
      text-align: right;
      color: #666;
    }
  }

  .avatar {
    .avatar-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
  }

  .nickname {
    .nickname-input {
      flex: 1;
      text-align: right;
      font-size: 36rpx;
      color: #333;
    }
  }

  .confirm-btn {
    margin-top: 40rpx;
    background-color: #07c160;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    padding: 20rpx;
    border-radius: 10rpx;
  }
}
</style>