jje_uniapp/myPages/ServiceObjectManagement/index.vue

<template>
  <view class="user-info-wrap">
    <view class="nav-bar">
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">头像</view>
            </view>
          </view>
          <view @click="uploadImg1(1)" class="arrow-right">
            <view class="head-img">
              <image v-if="userInfo.facePhotoUrl" :src="userInfo.facePhotoUrl" mode=""></image>
              <image v-else src="../../static/me/u1796.png" mode=""></image>
            </view>
            <!-- <u-icon name="arrow-right" color="#666" size="26"></u-icon> -->
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">昵称</view>
            </view>
            <input class="custom-input" v-model="userInfo.nickName" type="text" placeholder="请输入昵称">
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">性别</view>
            </view>
          </view>
          <view @click="chooseGender()" class="arrow-right">
            <view class="change-store">
              <text v-if="userInfo.sex == 0">男</text>
              <text v-else-if="userInfo.sex == 1">女</text>
              <text v-else-if="userInfo.sex == 2">未知</text>
              <text v-else>请选择性别</text>
            </view>
            <u-icon name="arrow-right" color="#666" size="16"></u-icon>
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">生日</view>
            </view>
          </view>
          <view @click="chooseServiceDate()" class="arrow-right">
            <view class="change-store">
              <text v-if="userInfo.birthday">{{ userInfo.birthday }}</text>
              <text v-else>请选择生日</text>
            </view>
            <u-icon name="arrow-right" color="#666" size="16"></u-icon>
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">是否双胞胎</view>
            </view>
          </view>
          <view class="arrow-right">
            <view class="change-store">
              <u-radio-group v-model="ranksState" size="14" @change="handleRankChange" placement="row">
                <u-radio activeColor="#eac00f" name="0" label="否"></u-radio>
                <u-radio activeColor="#eac00f" name="1" label="是"></u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
      </view>
      <view v-if="ranksState == '1'" class="custom-line"></view>
      <view v-if="ranksState == '1'" class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">排行</view>
            </view>
          </view>
          <view class="arrow-right button-group">
            <text class="button" @click="decrement">-</text>
            <input class="custom-input-ranks" v-model="userInfo.ranks" disabled="disabled" type="text">
            <text class="button" @click="increment">+</text>
          </view>
        </view>
      </view>
      <view class="custom-line"></view>

      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <text class="">关系</text>
            </view>
            <input class="custom-input" v-model="userInfo.blood" type="text" placeholder="请输入有关系(如父子)">
          </view>
<!--          <view class="arrow-right">-->
<!--          </view>-->
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">是否监护人</view>
            </view>
          </view>
          <view class="arrow-right">
            <view class="change-store">
              <u-radio-group size="14" v-model="userInfo.wardship" placement="row">
                <u-radio class="radio-item" activeColor="#eac00f" name="1" label="否"></u-radio>
                <u-radio class="radio-item" activeColor="#eac00f" name="2" label="是"></u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content">
        <view class="nav-info">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">备注</view>
            </view>
            <input   class="custom-input" v-model="userInfo.remark" type="text" placeholder="请输入备注信息">
          </view>
        </view>
      </view>
    </view>

    <view @click="saveUserInfo()" class="sure-btn">
      <view class="btn">保存</view>
    </view>


    <!-- 日期时间选择 -->
    <u-datetime-picker :show="dateShow" v-model="value1" mode="date" @confirm="sureChooseDate()"></u-datetime-picker>

    <!-- 性别选择 -->
    <u-picker :show="genderShow" keyName="gender" @confirm="sureChooseGender" :columns="genderList"></u-picker>

  </view>
</template>

<script>

export default {
  data() {
    return {
      userInfo: {
        auth: true,
        nickName: '',
        sex: '1',
        birthday: '',
        selfPhoto: '',
        memberType: '',
        facePhotos: '',
        facePhoto: '',
        ranks: 0,
        wardship: '2',
        blood: '',
        ranksState: '0',
        facePhotoUrl: '',
        name: '',
        authBook: '',
        signPhoto: ''
      },
      ranksState: '0',
      genderShow: false,
      dateShow: false,
      value1: '2023-12-12',
      // 服务时间
      genderList: [
        [{ gender: '男', id: '0' },
        { gender: '女', id: '1' },
        { gender: '未知', id: '2' }
        ],
      ],
      imgUrl1: ''
    };
  },
  mounted() {
  },
  onLoad(option) {

    // 判断Openid是否为空
    if (option.data) {
      const data = JSON.parse(option.data);
      this.userInfo = data;
      if (this.userInfo.ranks != '0') {
        this.userInfo.ranksState = '1';
      }
    }
    console.log(this.userInfo)

  },
  methods: {
    increment() {
      this.userInfo.ranks++;
    },
    decrement() {
      if (this.userInfo.ranks > 1) {
        this.userInfo.ranks--;
      }
    },
    handleRankChange(value) {
      console.log('Rank changed:', value);
      this.userInfo.ranks = value;
      // 在这里处理值改变事件的逻辑
    },
    // 选择性别
    chooseGender() {
      this.genderShow = true;
    },
    // 选择值
    sureChooseGender(e) {
      this.genderShow = false;
      this.userInfo.sex = e.value[0].id;
    },
    // 确定选择的服务日期
    sureChooseDate() {
      this.dateShow = false;
      this.userInfo.birthday = this.$formatDate(this.value1)
    },
    // 选择服务日期
    chooseServiceDate() {
      this.value1 = Date.now();
      this.dateShow = true;
    },
    // 去会员信息页
    gotoMemberInfo() {
      uni.navigateTo({
        url: '/pages/member/member-info',
      })
    },
    // 保存用户信息
    saveUserInfo() {
      if (this.$isDataEmpty(this.userInfo.nickName)) {
        uni.showToast({
          title: "请认真填写昵称"
        })
        return;
      }
      if (this.$isDataEmpty(this.userInfo.blood)) {
        uni.showToast({
          title: "请认真填写关系"
        })
        return;
      }
      if (this.$isDataEmpty(this.userInfo.birthday)) {
        uni.showToast({
          title: "请认真填写生日"
        })
        return;
      }
      this.userInfo.auth = true;
      // 保存数据
      this.$api.updateServiceObject(null, { data: this.userInfo }).then((res) => {
        console.log(res)
        // 去服务对象列表页
        uni.navigateTo({
          url: '/pages/me/service-object-mgt',
        })
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
    //头像上传
    uploadImg1(imgIndex) {
      let that = this;
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: that.$host + '/resource/oss/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              'Authorization': 'Bearer ' + that.$store.state.loginState.accessToken,
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log(res.data)
              that.imgUrl1 = res.data.url;
              that.userInfo.selfPhoto = res.data.ossId
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import './index.rpx.scss';

.user-info-wrap {
  margin-left: 24rpx;
  margin-right: 24rpx;

  /* 导航菜单 */
  .nav-bar {
    background: #fff;
    border-radius: 20rpx;
    margin-top: 24rpx;

    /* 商店信息 */
    .nav-content {
      padding-right: 12rpx;
      padding-top: 20rpx;
      padding-bottom: 12rpx;

      .nav-info {
        display: flex;
        padding-left: 20rpx;
        align-items: center;

        .logo {
          width: 12%;
          text-align: center;

          image {
            width: 48rpx;
            height: 48rpx;
          }
        }

        .nav-desc {
          width: 100%;
          display: flex;
          line-height: 60rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          align-items: center;

          .custom-input {
            font-size: 24rpx;
          }

          .nav-name {
            width: 60%;
            font-size: 28rpx;
            color: #333333;
            line-height: 44rpx;
          }

          .change-store {
            text-align: right;
            width: 40%;
            font-size:24rpx;
            color: #333333;
            line-height: 44rpx;
          }
        }

        .arrow-right {
          width: 64%;
          text-align: right;
          margin: 0 auto;
          cursor: pointer;
          padding-top: 6rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          image {
            width: 36rpx;
            height: 36rpx;
          }

          .head-img {
            text-align: center;
            padding-right: 40rpx;

            image {
              width: 48rpx;
              height: 48rpx;
            }
          }

          .change-store {
            font-size: 28rpx;
            color: #999;
            line-height: 44rpx;
          }
        }
      }
    }
  }

  .sure-btn {
    margin-top: 40rpx;
    width: 100%;

    .btn {
      text-align: center;
      height: 84rpx;
      background: #FFE05C;
      border-radius: 54rpx;
      color: #333333;
      line-height: 84rpx;
      margin-top: 24rpx;
      font-size: 24rpx;
    }
  }
}

.button-group {
  display: flex;
  align-items: center;
}

.button {
  padding: 12rpx 24rpx;
  font-size: 28rpx;
  background-color: #e6e6e6;
  border: none;
  border-radius: 8rpx;
  cursor: pointer;
}

.custom-input-ranks {
  width: 60rpx;
  font-size: 24rpx;
  text-align: center;
}

.radio-item {
  padding-right: 12rpx;
}
</style>