jje_uniapp/myPages/serviceObjectAllInfo/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 class="arrow-right">
            <view class="head-img" @click="uploadImg1(1)">
              <image v-if="userInfo.facePhotoUrl" :src="userInfo.facePhotoUrl" mode="aspectFill"></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>

          </view>
          <view class="arrow-right">
            <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 class="arrow-right">

            <!--            <picker mode="date" :value="date" :start="date" @change="bindDateChange">-->
            <!--              <view class="picker-change-store">-->
            <!--                <text v-if="userInfo.birthday">{{ userInfo.birthday }}</text>-->
            <!--                <text v-else>请选择生日</text>-->
            <!--                <u-icon name="arrow-right" color="#666" size="16"></u-icon>-->
            <!--              </view>-->
            <!--            </picker>-->

            <picker @change="bindDateChange" mode='date' :disabled="isAuthUpdate ? false : true " range-key="label">
              <view class="flex-row justify-end picker-change-store">
                <text>{{ userInfo.birthday ? userInfo.birthday.substring(0, 10) : '请选择出生日期' }}</text>
                <u-icon name="arrow-right" color="#666" size="16"></u-icon>
              </view>
            </picker>

          </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="userInfo.ranks"
                  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="userInfo.ranksState == '1'" class="custom-line"></view>
      <view v-if="userInfo.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" type="number">
            <text class="button" @click="increment">+</text>
          </view>
          <!-- <view @click="gotoRealNameAuth()" class="arrow-right">
              <view class="change-store">
                  <u-radio-group
                      v-model="userInfo.ranks"
                       size="14"
                      placement="row">
                      <u-radio activeColor="#eac00f" name="1" label="老大"></u-radio>
                      <u-radio activeColor="#eac00f" name="2" label="老二"></u-radio>
                      <u-radio activeColor="#eac00f" name="3" label="老三"></u-radio>
                      <u-radio activeColor="#eac00f" name="4" 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>
              </view>
              <view @click="gotoRealNameAuth()" class="arrow-right">
                  <view class="change-store">
                      <text>NTML0801</text>
                  </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>

          </view>
          <view class="arrow-right">
            <input class="custom-input" v-model="userInfo.blood" 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 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="2" label="否"></u-radio>
                <u-radio class="radio-item" activeColor="#eac00f" name="1" 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>

          </view>
          <view class="arrow-right">
            <input class="custom-input" v-model="userInfo.remark" type="text" placeholder="请输入备注">
          </view>
        </view>
      </view>
      <view class="custom-line"></view>
      <view class="nav-content" v-if="userInfo.minMainCardStatus">
        <view class="nav-info" style="align-items: normal">
          <view class="nav-desc">
            <view class="nav-name">
              <view class="">服务项目</view>
            </view>
          </view>
          <view class="arrow-right">
            <uni-data-checkbox mode="button" multiple v-model="userInfo.serviceProjectId"
                               :localdata="serviceProjectList"/>
          </view>
        </view>
      </view>
    </view>

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

    <view v-if="userInfo.id" @click="unbindServiceObject" class="sure-btn">
      <view class="btn1">解绑</view>
    </view>

    <!-- 性别选择 -->
    <u-picker :show="genderShow" keyName="gender" @confirm="sureChooseGender" :columns="genderList"></u-picker>
    <cropper selWidth="660rpx" selHeight="660rpx" ref="cropper" quality="0.5" @uploadImg="uploadCropImg"
             @upload="userInfo.facePhotoUrl"/>

  </view>
</template>

<script>
import cropper from '@/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue';

export default {
  components: {
    cropper
  },
  data() {
    return {
      accessToken: null,
      isAuthUpdate: true,
      serviceProjectList: [],
      userInfo: {
        auth: true,
        nickName: '',
        sex: '1',
        birthday: '',
        selfPhoto: '',
        memberType: '',
        facePhotos: '',
        facePhoto: '',
        ranks: 0,
        wardship: '1',
        blood: '',
        ranksState: '0',
        facePhotoUrl: '',
        name: '',
        authBook: '',
        signPhoto: '',
        remark: '',
        serviceProjectId: []
      },
      genderShow: false,
      date: Number(new Date()),
      // 服务时间
      genderList: [
        [{gender: '男', id: '0'},
          {gender: '女', id: '1'},
          {gender: '未知', id: '2'}
        ],
      ],
      imgUrl1: '',
      requestStatus: false,
    };
  },
  mounted() {
  },
  onLoad(option) {
    this.accessToken = uni.getStorageSync("accessToken");
    this.getServiceObjectList()
    if (option.data) {
      const data = JSON.parse(option.data);
      console.log('+++++++JSON.parse(option.data)++++++', option.data)
      if (data.authServiceIds) {
        this.userInfo.serviceProjectId = data.authServiceIds.split(',');
      }
      this.userInfo.facePhotoUrl = data.facePhotoUrl;
      this.userInfo.isSelf = data.isSelf;
      this.userInfo.minMainCardStatus = data.minMainCardStatus;
      this.userInfo.facePhoto = data.facePhoto;
      this.userInfo.facePhotos = data.facePhoto;
      this.userInfo.birthday = data.birthday;
      this.userInfo.memberType = data.memberType;
      this.userInfo.ranks = data.ranks;
      this.userInfo.wardship = data.wardship;
      this.userInfo.blood = data.blood;
      this.userInfo.ranksState = data.ranksState;
      this.userInfo.name = data.name;
      this.userInfo.authBook = data.authBook;
      this.userInfo.signPhoto = data.signPhoto;
      this.userInfo.sex = data.sex;
      this.userInfo.nickName = data.nickName;
      this.userInfo.remark = data.remark;
      this.userInfo.id = data.id;
      if (this.userInfo.id && this.userInfo.isSelf != 1) {
        this.getServiceObjectPhotoRecord(this.userInfo.id)
      }
      console.log('+++++++JSON.parse(option.data)++++++', this.userInfo)
    }
  },
  methods: {

    unbindServiceObject() {
      let that = this

      uni.showModal({
        title: '温馨提示',
        content: '解绑后您将无法看到该服务对象的信息！确定解绑？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');

            that.$api.unbindServiceObject({
              id: that.userInfo.id
            }).then(res => {
              uni.showToast({
                icon: 'none',
                title: '解绑成功!'
              })
            })

          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      })


    },

    uploadCropImg(e) {
      uni.compressImage({
        src: e,
        success: res => {
          uni.uploadFile({
            url: this.$baseUrl + '/resource/oss/upload',
            filePath: res.tempFilePath,
            name: 'file',
            header: {
              'Authorization': 'Bearer ' + uni.getStorageInfo('accessToken'),
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log(res, '成功回调')
              if (res.code !== 200) {
                uni.showToast({
                  icon: 'none',
                  duration: 3000,
                  title: res.msg || '系统繁忙，请重试！'
                });
              }
              res.data.url.replace("http", "https");
              this.verifyFace(res.data)
              this.userInfo.facePhotoUrl = res.data.url.replace("http", "https");
            }
          });
        }
      })
    },

    getServiceObjectPhotoRecord(serviceObjectId) {
      this.$api.getServiceObjectPhotoRecord(
          {
            serviceObjectId: serviceObjectId
          }).then(res => {
        console.log(res)
        if (res.data.data) {
          uni.showModal({
            title: "温馨提示",
            content: "当前服务对象已授权，照片可修改",
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          })
        }

        this.isAuthUpdate = res.data.data

      })
    },

    // 验证人象
    verifyFace(data) {
      let that = this;
      uni.showLoading({
        title: '人脸识别中'
      })

      if (this.requestStatus) {
        return;
      }
      this.requestStatus = true

      // 保存原来的照片信息，用于识别失败时恢复
      const originalFacePhoto = this.userInfo.facePhoto;
      const originalFacePhotoUrl = this.userInfo.facePhotoUrl;

      this.$api.verifyFace({
        auth: true,
        facePath: data.ossId,
        businessId: ''
      }).then((res) => {
        this.requestStatus = false
        uni.hideLoading();
        console.log(this.userInfo.id, 'this.userInfo.id')
        console.log(res.data, 'res.data')

        // 情况1: code === 500，查无此人，直接通过
        if (res.data.code === 500) {
          console.log('查无此人，允许直接通过，相当于新增')
          this.userInfo.facePhoto = data.ossId
          this.userInfo.facePhotoUrl = data.url
          return;
        }

        // 情况2: 存在 id，需要判断回调中的 id 是否等于原服务对象 id
        if (res.data.data && res.data.data.id) {
          if (this.userInfo.id && res.data.data.id !== this.userInfo.id) {
            // 识别到的服务对象与当前服务对象不一致
            uni.showModal({
              title: '温馨提示',
              content: '人脸识别的服务对象与当前服务对象不一致，不允许修改照片！',
              showCancel: false,
              success: function (modalRes) {
                if (modalRes.confirm) {
                  console.log('用户点击确定');
                  // 恢复原来的照片信息，不允许保存新照片
                  that.userInfo.facePhoto = originalFacePhoto;
                  that.userInfo.facePhotoUrl = originalFacePhotoUrl;
                }
              }
            })
            return;
          }
          // id 一致或当前是新服务对象，允许修改
          this.userInfo.facePhoto = data.ossId
          this.userInfo.facePhotoUrl = data.url
        }
      }).catch((err) => {
        this.requestStatus = false
        // 识别失败时也恢复原来的照片
        this.userInfo.facePhoto = originalFacePhoto;
        this.userInfo.facePhotoUrl = originalFacePhotoUrl;
        uni.$u.toast(err.data.msg || '识别失败，请重新上传照片')
      });

    },

    //修改数组属性名
    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')
      })
    },
    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;
    },
    // 确定选择的服务日期
    bindDateChange(e) {
      console.log(e)
      this.userInfo.birthday = e.detail.value
    },


    // 保存用户信息
    saveUserInfo() {
      console.log(this.userInfo)
      if (!this.userInfo.nickName) {
        uni.showToast({
          title: "请认真填写宝贝昵称",
          icon: "none"
        })
        return;
      }
      if (!this.userInfo.blood) {
        uni.showToast({
          title: "请认真填写关系",
          icon: "none"
        })
        return;
      }
      if (!this.userInfo.birthday) {
        uni.showToast({
          title: "请认真填写宝贝生日",
          icon: "none"
        })
        return;
      }

      if (this.requestStatus) {
        return;
      }
      this.requestStatus = true

      this.userInfo.auth = true;
      this.userInfo.authServiceIds = this.userInfo.serviceProjectId.join()
      if (this.userInfo.id) {
        // 修改数据
        this.$api.updateServiceObject(this.userInfo).then((res) => {
          console.log(res)
          uni.showToast({
            title: "修改成功"
          })
          setTimeout(() => {
            this.requestStatus = false
            // uni.reLaunch({
            //     url: '/myPages/ServiceObjectManagement/index'
            // });
            uni.navigateBack({
              delta: 1
            });
          }, 2000)

        }).catch(() => {
          this.requestStatus = false
        })

      } else {

        // 保存数据
        this.$api.saveServiceObject(this.userInfo).then((res) => {
          console.log(res)
          uni.showToast({
            title: "保存成功"
          })
          setTimeout(() => {
            this.requestStatus = false
            // uni.reLaunch({
            //     url: '/myPages/ServiceObjectManagement/index'
            // });
            uni.navigateBack({
              delta: 1
            });
          }, 2000)

        }).catch(() => {
          this.requestStatus = false
        })
      }

    },
    //头像上传
    uploadImg1(imgIndex) {
      console.log(this.isAuthUpdate)
      if (!this.isAuthUpdate) {
        return //关闭头像上传
      }

      this.$refs.cropper.fSelect();

      // let that = this;
      // uni.chooseImage({
      //   count: 1,
      //   success: (chooseImageRes) => {
      //     const tempFilePaths = chooseImageRes.tempFilePaths;
      //     console.log(tempFilePaths)
      //     uni.uploadFile({
      //       url: that.$baseUrl + '/resource/oss/upload',
      //       filePath: tempFilePaths[0],
      //       name: 'file',
      //
      //       header: {
      //         // "Content-Type": "multipart/form-data",
      //         // 'X-Access-Token': uni.getStorageSync('token'),
      //         'Authorization': 'Bearer ' + this.accessToken,
      //       },
      //       success: (uploadFileRes) => {
      //         let res = JSON.parse(uploadFileRes.data)
      //         console.log(res)
      //         this.verifyFace(res.data)
      //       },
      //       fail: (err)=> {
      //         console.log(err)
      //       }
      //     });
      //   }
      // });
    }
  }
};
</script>

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

      .nav-info {
        display: flex;
        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: 64%;
          /*text-align: right;*/
          margin: 0 auto;
          padding-top: 3px;
          display: flex;
          justify-content: flex-end;
          align-items: center;

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

          .custom-input {
            font-size: 12px;
            width: 200rpx;
            /*border: 1px solid red;*/
          }

          .head-img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            text-align: center;
            padding-right: 20px;

            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;
    }

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

  }
}

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

.button {
  padding: 6px 12px;
  font-size: 14px;
  background-color: #e6e6e6;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.custom-input-ranks {
  width: 30px;
  font-size: 12px;
  text-align: center;
}


.radio-item {
  padding-right: 6px;
}

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

  display: flex;
  flex-direction: row;
}
</style>