jje_uniapp/myPages/serviceObjectInfo/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 :src="userInfo.facePhotoUrl || '/static/me/ud4.png'" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="cotent-from">
        <u--form
            labelPosition="left"
            :model="userInfo"
            :rules="rules"
            ref="form1"
        >
          <u-form-item
              label="昵称"
              prop="nickName"
              labelWidth="auto"
              labelAlign="right"
          >
            <u--input
                v-model="userInfo.nickName"
                placeholder="请输入昵称"
                border="bottom"
                maxlength="20"
                type="text"
            ></u--input>
          </u-form-item>
          <u-form-item
              labelWidth="auto"
              labelAlign="right"
              label="关系"
              prop="blood"
              width="120"
          >
            <u--input
                maxlength="20"
                v-model="userInfo.blood"
                placeholder="请输入关系"
                border="bottom"
                type="text"
            ></u--input>
          </u-form-item>
          <u-form-item
              labelWidth="auto"
              labelAlign="right"
              label="备注"
              prop="remark"
              width="120"
          >
            <u--input
                maxlength="20"
                v-model="userInfo.remark"
                placeholder="请输入备注"
                border="bottom"
                type="text"
            ></u--input>
          </u-form-item>
          <u-form-item
              v-if="userInfo.minMainCardStatus"
              labelWidth="auto"
              labelAlign="right"
              label="服务项目"
              prop="remark"
              width="120"
          >
            <uni-data-checkbox multiple v-model="userInfo.serviceProjectId"
                               :localdata="serviceProjectList"/>
          </u-form-item>
        </u--form>
      </view>
    </view>

    <view @click="saveUserInfo()" class="sure-btn">
      <view class="btn">确认</view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      serviceProjectList: [],
      requestStatus: false,
      userInfo: {
        auth: true,
        nickName: '',
        facePhoto: '',
        blood: '',
        remark: '',
        id: '',
        serviceProjectId:[],
      },
      genderShow: false,
      value1: '2023-12-12',
      imgUrl1: '',
      rules: []
    };
  },
  mounted() {
  },
  onShow() {
    if (this.userInfo.facePhoto) {
      this.getImgUrlByOssId(this.userInfo.facePhoto)
    }
  },
  onLoad(option) {
    this.getServiceObjectList()
    console.log('++++++++++++++++option+++++++++++++++', option)
    if (option.data) {
      this.userInfo = JSON.parse(option.data);
      if(this.userInfo.authServiceIds){
        this.userInfo.serviceProjectId = this.userInfo.authServiceIds.split(',');
      }
      if (this.userInfo.facePhoto) {
        this.getImgUrlByOssId(this.userInfo.facePhoto)
      }
    }
  },
  methods: {
    //修改数组属性名
    changeKey(arr, newName, oldName) {
      arr.forEach(item => {
        item[newName] = item[oldName]
        delete item[oldName]
      })
      return arr
    },
    getServiceObjectList() {
      this.$api.serviceProjectList().then(res => {
        this.serviceProjectList = res.data.data
        console.log()
        this.changeKey(this.serviceProjectList, 'value', 'id')
        this.changeKey(this.serviceProjectList, 'text', 'serviceName')
      })
    },
    getImgUrlByOssId(Id) {
      if (Id) {
        this.$api.getImage(Id).then(res => {
          this.userInfo.facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
          this.$set(this.userInfo)
        });
      }
    },

    // 保存用户信息
    saveUserInfo() {
      if (!this.userInfo.nickName) {
        uni.showToast({
          title: "请填写昵称"
        })
        return;
      }
      if (!this.userInfo.blood) {
        uni.showToast({
          title: "请填写关系"
        })
        return;
      }
      if (this.requestStatus) {
        return;
      }
      this.requestStatus = true
      this.userInfo.auth = true;
      this.userInfo.authServiceIds = this.userInfo.serviceProjectId.join()
      this.userInfo.serviceProjectId = this.userInfo.serviceProjectId
      if (this.userInfo.opType == '1') { // 绑定
        // 保存数据
        this.$api.bindServiceObject(this.userInfo).then((res) => {
          if (res.data.code === 500) {
            uni.showToast({
              title: res.data.msg
            })
          } else {
            uni.showToast({
              title: "绑定成功"
            })
          }
          // 去服务对象列表页
          setTimeout(() => {
            this.requestStatus = false
            // uni.reLaunch({
            //     url: '/myPages/ServiceObjectManagement/index',
            // })
            uni.navigateBack({
              delta: 1
            });
          }, 3000)
        }).catch(() => {
          this.requestStatus = false
        })
      } else if (this.userInfo.opType == '2') { // 修改
        // 修改数据
        this.$api.updateServiceObject(this.userInfo).then((res) => {
          uni.showToast({
            title: "修改成功"
          })
          // 去服务对象列表页
          setTimeout(() => {
            this.requestStatus = false
            // uni.redirectTo({
            //     url: '/myPages/ServiceObjectManagement/index',
            // })
            uni.navigateBack({
              delta: 1
            });
          }, 3000)
        }).catch(() => {
          this.requestStatus = false
        })
      }
    },
    //头像上传
    uploadImg1(imgIndex) {
      return //关闭头像上传
      let that = this;
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;

          uni.uploadFile({
            url: that.$baseUrl + '/resource/oss/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              'Authorization': 'Bearer ' + uni.getStorageInfo('accessToken'),
            },
            success: (uploadFileRes) => {
              console.log('uploadFileRes=>', uploadFileRes)
              let res = JSON.parse(uploadFileRes.data)
              that.userInfo.facePhotoUrl = res.data.url.replace(/^http:/, "https:");
              that.userInfo.facePhoto = res.data.ossId
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.user-info-wrap {
  margin-left: 12px;
  margin-right: 12px;
  /* 导航菜单 */
  .nav-bar {
    background: #fff;
    border-radius: 10px;
    margin-top: 12px;

    .cotent-from {
      padding-right: 12px;
      padding-left: 12px;
    }

    /* 商店信息 */
    .nav-content {
      padding-right: 6px;
      padding-top: 10px;
      padding-bottom: 6px;

      .nav-info {
        display: flex;
        justify-content: space-between;
        padding-left: 10px;
        align-items: center;

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

          image {
            width: 24px;
            height: 24px;
          }
        }

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

          .custom-input {
            font-size: 12px;
          }

          .nav-name {
            width: 60%;
            font-size: 14px;

            color: #333333;
            line-height: 22px;
          }

          .change-store {
            text-align: right;
            width: 40%;
            font-size: 12px;
            color: #333333;
            line-height: 22px;
          }
        }

        .arrow-right {
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: flex-end;

          .head-img {
            width: 50px;
            height: 50px;
            border-radius: 25px;

            image {
              width: 50px;
              height: 50px;
              border-radius: 25px;
            }
          }

          .change-store {
            font-size: 14px;
            color: #999;
            line-height: 22px;
          }
        }
      }
    }
  }

  .sure-btn {
    margin-top: 20px;
    width: 100%;

    .btn {
      text-align: center;
      height: 42px;
      background: #FFE05C;
      border-radius: 27px;
      color: #333333;
      line-height: 42px;
      margin-top: 12px;
      font-size: 14px;
    }
  }
}

</style>