记录代码

<template>
  <div>
    <div class="success_div" v-if="invalidflag">
      <img src="../../pc/assets/images/green_success.png" alt="" class="success_img">
      <div class="font">{{userparam.language=='zh-CN'?cn.successline1:en.successline1}}</div>
      <div class="font">{{userparam.language=='zh-CN'?cn.successline2:en.successline2}} <span
          class="sun_font">SunwaysHome</span> </div>
      <div class="setpw_font" v-if="!checkpwd">{{userparam.language=='zh-CN'?cn.successline3:en.successline3}} <span
          @click="openModal">{{userparam.language=='zh-CN'?cn.setpwdfont:en.setpwdfont}}</span> ？</div>
    </div>
    <div class="success_error" v-if="!invalidflag">
      <img src="../../pc/assets/images/red_tanhao.png" alt="" class="success_img">
      <div class="font">{{userparam.language=='zh-CN'?cn.errorline1:en.errorline1}}</div>
      <div class="font">{{userparam.language=='zh-CN'?cn.errorline2:en.errorline2}}</div>
      <div class="font">{{userparam.language=='zh-CN'?cn.errorline3:en.errorline3}} <span
          class="sun_font">SunwaysHome</span> </div>
    </div>
    <!-- 密码设置弹窗 -->
    <el-dialog :title="userparam.language=='zh-CN'?cn.dialogtitle:en.dialogtitle" :visible.sync="dialogVisible"
      class="setpw_dialog" :close-on-click-modal="false">
      <el-form :model="setpwform" :rules="setpwdRules" ref="setpwform">
        <el-form-item prop="pwd">
          <span class="require">*&nbsp;</span>
          <el-input v-model="setpwform.pwd" :placeholder="userparam.language=='zh-CN'?cn.pwd:en.pwd"
            :type="pwdeye?'text':'password'" maxlength="18"></el-input>
          <img src="../assets/images/y_close.png" alt="" class="eye" @click="openeye('pwd')" v-if="!pwdeye">
          <img src="../assets/images/y_view.png" alt="" class="eye" @click="openeye('pwd')" v-if="pwdeye">
        </el-form-item>
        <el-form-item prop="surepwd">
          <span class="require">*&nbsp;</span>
          <el-input v-model="setpwform.surepwd" :placeholder="userparam.language=='zh-CN'?cn.surepwd:en.surepwd"
            :type="surepwdeye?'text':'password'" maxlength="18">
          </el-input>
          <img src="../assets/images/y_close.png" alt="" class="eye" @click="openeye('surepwd')" v-if="!surepwdeye">
          <img src="../assets/images/y_view.png" alt="" class="eye" @click="openeye('surepwd')" v-if="surepwdeye">
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="sure">{{userparam.language=='zh-CN'?cn.save:en.save}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import * as base64 from "../utils/base64";
import request, { Method } from "@/utils/request";
import { Form, FormItem, Select, Button, Input, Dialog } from "element-ui";
Vue.use(Form)
  .use(Input)
  .use(Dialog)
  .use(FormItem)
  .use(Button);
import { mixin_order } from "../pages/member/my-order/common";
const devurl = "http://dev-api.sunways-tech.com/cms_account_boot";
const produrl = "";
const getmerge = (userId, params) => {
  return request({
    url: devurl + `/xcxUser/merge/${userId}`,
    method: Method.GET,
    params
  });
};
const checkPassword = params => {
  return request({
    url: devurl + `/xcxUser/checkPassword`,
    method: Method.GET,
    params
  });
};
const setPassword = data => {
    console.log(data)
  return request({
    url: devurl + `/xcxUser/setPassword`,
    method: Method.POST,
    headers:{
        'Content-Type': 'application/json'
    },
    data:data
  });
};
export default {
  name: "orderstatus",
  layout: "full",
  mixins: [mixin_order],
  head() {
    return {
      title: `邮箱验证`
    };
  },
  data() {
    const checkpass = value => {
        debugger
      if (value.length < 6) {
        return 0;
      }
      var ls = 0;
      if (value.match(/([a-z])+/) || value.match(/([A-Z])+/)) {
        ls++;
      }
    //   if (value.match(/([0-9])+/)) {
    //     ls++;
    //   }
      if (value.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/)) {
        ls++;
      }
      console.log(ls);
      return ls;
    };
    return {
      dialogVisible: false,
      setpwform: {
        pwd: "",
        surepwd: ""
      },
      invalidflag: false,
      checkpwd: false, //判断有没有设置密码
      userparam: {},
      pwdeye: false,
      surepwdeye: false,
      cn: {
        successline1: "邮箱验证成功",
        successline2: "感谢您选择",
        successline3: "当前尚未进行密码设置，是否立即",
        setpwdfont: "设置密码",
        errorline1: "邮箱验证链接已失效！",
        errorline2:
          "请重新在App中进行绑定操作，并在30分钟内完成验证 感谢您选择 ",
        errorline3: "感谢您选择",
        dialogtitle: "密码设置",
        pwd: "密码",
        surepwd: "请再次输入密码",
        save: "保存",
        emptypwd: "密码不能为空",
        pwderror: "请输入6-18位，包含英文大小写字母和数字！",
        pwderror2: "两次密码输入不一致",
        setsuccess:"设置成功"
      },
      en: {
        successline1: "Email verification success",
        successline2: "Thank for choosing",
        successline3: "You haven't set the password yet, whether to set it now?",
        setpwdfont: "Password reset",
        errorline1: "This email verification link has expired!",
        errorline2:
          "Please bind the email in the App again and verify it within 30min.",
        errorline3: "Thank for choosing Sunways",
        dialogtitle: "Password reset",
        pwd: "Password",
        surepwd: "Please enter the password again.",
        save: "Save",
        emptypwd: "The password cannot be empty",
        pwderror:
          "Please enter a password consists of 6 - 18 characters which include letters and numbers.",
        pwderror2: "Entered passwords differ!",
        setsuccess:'Set success'
      },
      // 校验
      setpwdRules: {
        pwd: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(
                  new Error(
                    this.userparam.language == "zh-CN"
                      ? this.cn.emptypwd
                      : this.en.emptypwd
                  )
                );
              } else if (!checkpass(value)) {
                callback(
                  new Error(
                    this.userparam.language == "zh-CN"
                      ? this.cn.pwderror
                      : this.en.pwderror
                  )
                );
              } else {
                callback();
              }
            },
            trigger: "blur",
            require: true
          }
        ],
        surepwd: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(
                  new Error(
                    this.userparam.language == "zh-CN"
                      ? this.cn.emptypwd
                      : this.en.emptypwd
                  )
                );
              } else if (value !== this.setpwform.pwd) {
                callback(
                  new Error(
                    this.userparam.language == "zh-CN"
                      ? this.cn.pwderror2
                      : this.en.pwderror2
                  )
                );
              } else {
                callback();
              }
            },
            trigger: "blur",
            require: true
          }
        ]
      }
    };
  },
  methods: {
    openModal() {
      this.dialogVisible = true;
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); // 匹配目标参数
      if (r != null) return unescape(r[2]);
      return null; // 返回参数值
    },
    openeye(type) {
      console.log(type);
      if (type == "pwd") {
        this.pwdeye = !this.pwdeye;
      }
      if (type == "surepwd") {
        this.surepwdeye = !this.surepwdeye;
      }
    },
    sure() {
      let params = {
        newPassword: this.setpwform.pwd,
        againPassword: this.setpwform.surepwd,
        xcxUserId: this.userparam.userId
      };
      console.log(params);
      this.$refs["setpwform"].validate(valid => {
        if (valid) {
          //掉接口保存密码
          var _this = this;
          setPassword(params).then(res => {
            // console.log(res.object);
            if (res.code == 1) {
              _this.dialogVisible = false;
              _this.$message.success( this.userparam.language == "zh-CN"?_this.cn.setsuccess:_this.en.setsuccess);
              _this.checkpwd=true
            }
          });
        } else {
          this.dialogVisible = true;
        }
      });
    },
    //取链接里的数据 通过base64解密
    handleMerge() {
      let params = {
        email: this.userparam.email,
        userId: this.userparam.userId,
        expire: this.userparam.expire
      };
      var _this = this;
      getmerge(this.userparam.userId, params).then(res => {
        console.log(res);
        if (res.code != 13021) {
          _this.invalidflag = true;
          //判断有没有设置密码
          checkPassword({ xcxUserId: params.userId }).then(res => {
            console.log(res.object);
             _this.checkpwd=res.object
          });
        } else {
          _this.invalidflag = false;
        }
      });
    }
  },
  mounted() {
    var param = this.getUrlParam("param");
    var decodeParam = base64.decode(param);
    this.userparam = JSON.parse(decodeParam);
    // var tempUser = this.userparam;
    // tempUser.expire = 1601350926546;
    // tempUser.language='en'
    // console.log(base64.encode(JSON.stringify(tempUser)));
    this.handleMerge();
    // console.log(JSON.parse(decodeParam));
  }
};
</script>
<style type="text/scss"  lang="scss">
.setpw_dialog .el-dialog {
  width: 520px;
  border-radius: 4px;
}
.setpw_dialog .el-dialog__header {
  border-bottom: 1px solid #efeff4;
}
.setpw_dialog .el-dialog__body {
  padding: 30px 80px;
}
.setpw_dialog .el-form-item__content {
  border-bottom: 1px solid #eaeef4;
  position: relative;
}
.setpw_dialog .el-input__inner {
  border-radius: 0px;
  border: none;
  height: 36px;
  background: #fff;
  padding: 0;
  width: 100%;
  font-size: 16px;
}
.setpw_dialog .el-input {
  width: 90%;
  color: #888;
}
.setpw_dialog .el-dialog__footer {
  text-align: center;
}
.setpw_dialog .el-dialog__footer .el-button {
  width: 360px;
  height: 44px;
  border-radius: 21px;
  background-color: #ff6b00;
  border: none;
}
.eye {
  width: 13px;
  height: 10px;
  position: absolute;
  display: block;
  right: 15px;
  top: 15px;
}
.success_img {
  width: 92px;
  height: 92px;
  display: block;
  margin: 0 auto;
  margin-top: 236px;
  margin-bottom: 37px;
}
.font {
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #2e2e2e;
  line-height: 32px;
}
.sun_font {
  color: #ff6b00;
}
.setpw_font {
  margin-top: 48px;
  text-align: center;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: #2e2e2e;
  span {
    color: #ff6b00;
  }
}
.require {
  font-size: 16px;
  color: #ff6b00;
}
</style>