Vent-App/pages/user/useredit.vue

<template>
  <view class="user-page">
    <u-navbar
      title="编辑资料"
      :safeAreaInsetTop="true"
      :fixed="true"
      :placeholder="true"
      height="50px"
      bgColor="transparent"
      titleStyle="fw600 fs-18"
      leftIconColor="#303133"
      @leftClick="goBack"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" size="20" color="#303133"></u-icon>
      </view>
    </u-navbar>

    <view class="user-page-content">
      <view class="edit-card">
        <view class="edit-row">
          <view class="edit-icon-box">
            <u-icon name="account-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="edit-label">姓名</text>
          <input
            class="edit-input"
            placeholder="请输入姓名"
            placeholder-style="color: #b9c6da;"
            name="input"
            v-model="myFormData.realname"
          />
        </view>

        <view class="edit-divider"></view>

        <view class="edit-row">
          <view class="edit-icon-box">
            <u-icon name="account" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="edit-label">用户名</text>
          <input
            class="edit-input edit-input-disabled"
            placeholder="用户名"
            placeholder-style="color: #b9c6da;"
            name="input"
            v-model="myFormData.username"
            disabled
          />
        </view>

        <view class="edit-divider"></view>

        <view class="edit-row">
          <view class="edit-icon-box">
            <u-icon name="photo-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="edit-label">头像</text>
          <view class="avatar-area">
            <view
              class="avatar-item"
              v-for="(item, index) in imgList"
              :key="index"
              @tap="ViewImage"
              :data-url="imgList[index]"
            >
              <image
                class="avatar-img"
                :src="imgList[index]"
                mode="aspectFill"
              ></image>
              <view class="avatar-del" @tap.stop="DelImg" :data-index="index">
                <u-icon name="close" size="10" color="#ffffff"></u-icon>
              </view>
            </view>
            <view
              class="avatar-add"
              @tap="ChooseImage"
              v-if="imgList.length < 1"
            >
              <u-icon name="camera-fill" size="18" color="#0065f8"></u-icon>
            </view>
          </view>
        </view>

        <view class="edit-divider"></view>

        <view class="edit-row">
          <view class="edit-icon-box">
            <u-icon
              :name="switchC ? 'man' : 'woman'"
              size="14"
              color="#ffffff"
            ></u-icon>
          </view>
          <text class="edit-label">性别</text>
          <view class="edit-control">
            <view
              class="sex-btn"
              :class="switchC ? 'action-btn-primary' : 'action-btn-outline'"
              @click="SwitchC(true)"
            >
              <text class="action-btn-text">男</text>
            </view>
            <view
              class="sex-btn"
              :class="!switchC ? 'action-btn-primary' : 'action-btn-outline'"
              @click="SwitchC(false)"
            >
              <text class="action-btn-text">女</text>
            </view>
          </view>
        </view>

        <view class="edit-divider"></view>

        <view class="edit-row">
          <view class="edit-icon-box">
            <u-icon name="phone-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="edit-label">手机号码</text>
          <input
            class="edit-input"
            placeholder="输入手机号码"
            placeholder-style="color: #b9c6da;"
            name="input"
            v-model="myFormData.phone"
          />
          <view class="edit-capsule">
            <text class="edit-capsule-code">+86</text>
            <text class="edit-capsule-region">中国大陆</text>
          </view>
        </view>

        <view class="edit-divider"></view>

        <view class="edit-row">
          <view class="edit-icon-box">
            <u-icon name="email-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="edit-label">邮箱</text>
          <input
            class="edit-input"
            placeholder="输入邮箱"
            placeholder-style="color: #b9c6da;"
            name="input"
            v-model="myFormData.email"
          />
        </view>
      </view>

      <view class="submit-area">
        <view
          class="action-btn action-btn-primary submit-btn"
          @click="onSubmit"
        >
          <text class="action-btn-text">提交</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: -1,
      switchC: true,
      imgList: [],
      uploadUrl: "/sys/common/upload",
      myFormData: {
        avatar: "",
        realname: "",
        username: "",
        sex: 1,
        birthday: "",
        orgCode: "",
        workNo: "",
        phone: "",
        email: "",
        id: "",
      },
    };
  },
  onLoad: function (option) {
    console.log("this.$Route.query", this.$Route.query);
    let query = this.$Route.query;
    if (query) {
      this.myFormData = query;
      if (this.myFormData.sex == "女") {
        this.switchC = false;
      } else if (this.myFormData.sex == "男") {
        this.switchC = true;
      }
      if (this.myFormData.avatar) {
        this.imgList = [this.myFormData.avatar];
      }
      if (!this.myFormData.birthday) {
        this.myFormData.birthday = "无";
      }
      if (this.myFormData.identity == "普通成员") {
        this.myFormData.identity = 1;
      } else if (this.myFormData.identity == "上级") {
        this.myFormData.identity = 2;
      }
      if (this.myFormData.status == "正常") {
        this.myFormData.status = 1;
      } else if (this.myFormData.status == "冻结") {
        this.myFormData.status = 2;
      }
      this.Avatar = this.myFormData.avatar;

      Object.keys(this.myFormData).map((key) => {
        if (this.myFormData[key] == "无") {
          this.myFormData[key] = "";
        }
      });
      console.log("this.myFormData", this.myFormData);
    }
  },
  methods: {
    onSubmit() {
      let myForm = this.myFormData;
      let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
      let checkEmail =
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      console.log("myForm", myForm);
      if (!myForm.phone || myForm.phone.length == 0) {
        this.$tip.alert("请输入手机号");
        return false;
      }
      if (!checkPhone.test(myForm.phone)) {
        this.$tip.alert("请输入正确的手机号");
        return false;
      }
      if (!checkEmail.test(myForm.email)) {
        this.$tip.alert("请输入正确的邮箱地址");
        return false;
      }
      this.myFormData.id = this.$store.getters.userid;
      if (this.switchC) {
        this.myFormData.sex = 1;
      } else {
        this.myFormData.sex = 2;
      }
      console.log("myform", this.myFormData);
      this.$tip.loading();
      this.$http
        .put("/sys/user/appEdit", this.myFormData)
        .then((res) => {
          console.log(res);
          this.$tip.loaded();
          if (res.data.success) {
            this.$tip.toast("提交成功");
            this.$Router.replace({ name: "userdetail" });
            /* uni.navigateTo({
							url: '/pages/user/userdetail'
						}) */
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.error("提交失败");
        });
    },
    DateChange(e) {
      this.myFormData.birthday = e.detail.value;
    },
    //左上角返回键：返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    SwitchC(value) {
      this.switchC = value;
    },
    ChooseImage() {
      var that = this;
      uni.chooseImage({
        count: 4, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          that.$http
            .upload(that.$config.apiUrl + that.uploadUrl, {
              filePath: res.tempFilePaths[0],
              name: "file",
            })
            .then((res) => {
              that.myFormData.avatar = res.data.message;
            })
            .catch((err) => {
              that.$tip.error(err.data.message);
            });
          this.imgList = res.tempFilePaths;
        },
      });
    },
    ViewImage(e) {
      uni.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url,
      });
    },
    DelImg(e) {
      uni.showModal({
        title: "召唤师",
        content: "确定要删除这段回忆吗？",
        cancelText: "再看看",
        confirmText: "再见",
        success: (res) => {
          if (res.confirm) {
            this.imgList.splice(e.currentTarget.dataset.index, 1);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #c8d8f8 0%, #eef4fd 320rpx, #f4f7fd 100%);
}

.user-page-content {
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.edit-card {
  background: #ffffff;
  border: 1rpx solid #e8effc;
  border-radius: 16rpx;
  padding: 0 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(43, 124, 255, 0.08);
}

.edit-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 112rpx;
  padding: 20rpx 0;
}

.edit-divider {
  height: 1rpx;
  background: #eef0f4;
}

.edit-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #80b4ff, #347df3);
  box-sizing: border-box;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.edit-label {
  flex-shrink: 0;
  width: 150rpx;
  font-size: 24rpx;
  color: #000;
  line-height: 1.4;
}

.edit-input {
  flex: 1;
  min-width: 0;
  height: 56rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #000;
  background: #ffffff;
  border: 1rpx solid #2572ff;
  border-radius: 8rpx;
}

.edit-input-disabled {
  color: #9aa4b2;
  background: #f5f7fb;
  border-color: #d7e0ee;
}

.edit-control {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.sex-btn {
  width: 96rpx;
  height: 56rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.sex-btn + .sex-btn {
  margin-left: 12rpx;
}

.edit-capsule {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 12rpx;
  border: 1rpx solid #0065f8;
  border-radius: 8rpx;
  overflow: hidden;
}

.edit-capsule-code {
  height: 56rpx;
  padding: 0 12rpx;
  line-height: 56rpx;
  font-size: 22rpx;
  color: #ffffff;
  background: #0065f8;
}

.edit-capsule-region {
  height: 56rpx;
  padding: 0 12rpx;
  line-height: 56rpx;
  font-size: 22rpx;
  color: #0065f8;
  background: #ffffff;
}

.avatar-area {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.avatar-item {
  position: relative;
  width: 96rpx;
  height: 96rpx;
  margin-left: 16rpx;
}

.avatar-img {
  width: 96rpx;
  height: 96rpx;
  border-radius: 12rpx;
  border: 1rpx solid #e8effc;
}

.avatar-del {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  background: #ff3b30;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-add {
  width: 96rpx;
  height: 96rpx;
  border-radius: 12rpx;
  border: 1rpx dashed #2b7cff;
  background: rgba(43, 124, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-area {
  margin-top: 32rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.action-btn-text {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 1;
}

.action-btn-primary {
  background: #0065f8;
}

.action-btn-primary .action-btn-text {
  color: #ffffff;
}

.action-btn-outline {
  background: #ffffff;
  border: 1rpx solid #0065f8;
}

.action-btn-outline .action-btn-text {
  color: #0065f8;
}

.submit-btn {
  height: 84rpx;
  border-radius: 12rpx;
}

.submit-btn .action-btn-text {
  font-size: 28rpx;
  font-weight: 600;
}
</style>