tk-mini-program/pages/Setting/settingmod/changeEmail.vue

<template>
  <view class="changeEmail">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">邮箱</view>
    <view class="contentbox">
      <view class="content">
        <!--  -->
        <input
          type="email"
          class="weui-input"
          placeholder="请输入邮箱号"
          v-model="email"
        />
        <text  class="error" v-if="turnsoutemail == ''">第一次填写邮箱时请确保填写正确的邮箱地址，填写错误请联系客服</text>
        <text class="error" v-if="error">请输入正确的邮箱地址</text>
        <view v-if="turnsoutemail != ''" class="Verificationcodebox">
          <input
            type="text"
            class="weui-input"
            placeholder="验证码"
            v-model="Verificationcode"
          />
          <view class="Verificationcodebtn" @click="sendVerificationCode">获取验证码</view>
        </view>
        <text v-if="VerificationcodeSent && turnsoutemail != ''" class="VerificationcodeSent">验证码已发送至{{turnsoutemail}}邮箱，请注意查收</text>
        <!--  -->
        <view class="btn" @click="onSubmit">确认</view>

        <text class="forget" @click="onCustomerService">忘记邮箱？请联系客服</text>
        <!--  -->
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../../components/request.js";
import { goEasylogin, goEasylogout } from "../../../components/goEasyTool/tool.js";
export default {
  data() {
    return {
      title: "Hello",
      email: "",//邮箱
      Verificationcode: "",//验证码
      id: "",//用户id
      error: false,//邮箱错误
      VerificationcodeSent: false,//验证码是否已发送
      turnsoutemail:'',//修改前的邮箱
    };
  },
  onLoad(options) {
    this.turnsoutemail = this.email = options.email == "null" ? "" : options.email;
    this.id = options.id;
  },
  methods: {
    //提交验证
    onSubmit() {
      if (this.turnsoutemail == "") {
        this.setEmail()
      }else{
        this.hasEmail()
      }

    },
    //有邮箱修改
    hasEmail() {
      if (!this.validateEmail(this.email)) {
        this.error = true;
        return;
      }
      uni.showLoading({
        title: "修改中...",
        mask: true,
      });
      request({
        url: "user/updateUserMail",
        method: "POST",
        data: {
          code: this.Verificationcode,
          mailAddress: this.email,
        },
        userInfo: true,
      })
        .then((ress) => {
          console.log("修改调用返回", ress);
          if (ress.code === 200) {
            uni.hideLoading();
            uni.showToast({
              title: "修改成功,请到您的邮箱进行验证激活",
              duration: 5000,
              icon: "none",
            });
            //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 5000);
            //````````````````````````````````````````````````````````````````````
          } else {
            uni.hideLoading();
            uni.showToast({
              title: ress.msg,
              icon: "none",
            });
          }
        })
        .catch((err) => {
          console.log("修改调用失败", err);
          uni.hideLoading();
          uni.showToast({
            title: "修改失败",
            icon: "none",
          });
        });
    },
    //发送验证码
    sendVerificationCode() {
      request({
        url: "user/sendUpdateMailConfirmMail",
        method: "POST",
        data: {
          mailAddress: this.email,
        },
        userInfo: true,
      }).then((ress) => {
        this.VerificationcodeSent = true;
      });
    },
    //第一次提交
    setEmail() {
      if (!this.validateEmail(this.email)) {
        this.error = true;
        return;
      }
      uni.showLoading({
        title: "修改中...",
        mask: true,
      });
      goEasylogout(this.$goeasy);
      request({
        url: "user/updateUserInfo",
        method: "POST",
        data: {
          id: this.id,
          email: this.email,
        },
        userInfo: true,
      })
        .then((ress) => {
          console.log("修改调用返回", ress);
          if (ress.code === 200) {
            uni.hideLoading();
            uni.showToast({
              title: "修改成功,请到您的邮箱进行验证激活",
              duration: 5000,
              icon: "none",
            });
            uni.setStorageSync("userinfo", ress.data);
            goEasylogin(
              this.$goeasy,
              String(ress.data.id),
              ress.data.headerIcon,
              ress.data.nickName
            );
            //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 5000);
            //````````````````````````````````````````````````````````````````````
          } else {
            uni.hideLoading();
            uni.showToast({
              title: ress.msg,
              icon: "none",
            });
          }
        })
        .catch((err) => {
          console.log("修改调用失败", err);
          uni.hideLoading();
          uni.showToast({
            title: "修改失败",
            icon: "none",
          });
        });
    },
    //邮箱验证
    validateEmail(email) {
      const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return regex.test(email);
    },
    //联系客服
    onCustomerService() {
      uni.navigateTo({
        url: "/pages/Mine/minecomponents/contact",
      })
    },
    //返回上一页
    onBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: fixed;
  left: 35rpx;
  top: 120rpx;
  width: 46rpx;
  height: 46rpx;
  z-index: 2;
}
.title {
  position: fixed;
  top: 120rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
  z-index: 1;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.contentbox {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.weui-input {
  width: 90%;
  height: 80rpx;
  margin-top: 40rpx;
  border-bottom: 1px solid #ccc;
}
.Verificationcodebox {
  width: 90%;
  height: 80rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
}
.Verificationcodebtn {
  width: 30%;
  height: 100%;
  margin-bottom: -40rpx;
  background-color: #e6e6e6;
  color: #ffffff;
  font-size: 24rpx;
  line-height: 40rpx;
  background-color: #00afb2;
  text-align: center;
  line-height: 80rpx;
}
.VerificationcodeSent{
  color: #00afb2;
  font-size: 24rpx;
  margin-top: 40rpx;
}
.btn {
  width: 80%;
  height: 80rpx;
  margin-top: 150rpx;
  background: linear-gradient(135deg, #00afb2, #4fcacd);
  color: #fff;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  border: none;
  cursor: pointer;
}
.error {
  color: red;
  font-size: 20rpx;
}
.forget{
  font-size: 24rpx;
  color: #00afb2;
  margin-top: 50rpx;
}
</style>