xingjinxing
/
sxz_register


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>随心装账号注册</title>
    <link rel="icon" href="https://mall4cloud-1302178016.cos.ap-guangzhou.myqcloud.com/2023/09/19/30ab7ce544c94889b292b2997b19ae62" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/element-ui.css" />
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
  </head>
  <body>
    <div id="app" v-cloak>
      <el-container>
        <el-header>
          <div class="header" :class="{mobile:isMobile}">
            <div class="logo"><img src="./img/logo.png" alt="" /></div>
            <div class="download">
              <span class="use-btn">
                <a target="downloadFile" download="随心装用户使用手册V1.0.pdf" href="./files/V1.0.pdf">使用手册</a>
              </span>
              <el-button type="primary" size="small" @click="downloadFiles('app')">立即下载</el-button>
            </div>
          </div></el-header
        >
        <el-main>
          <h3 style="text-align: center; margin: 20px auto 40px">随心装账号注册</h3>
          <div class="form-box" v-if="!success">
            <el-form ref="ruleForm" :model="ruleForm" label-width="0px" :rules="rules" ref="ruleForm" :model="ruleForm">
              <el-form-item label="" prop="phoneNum">
                <el-input maxLength="11" v-model="ruleForm.phoneNum" placeholder="请输入手机号码"> </el-input>
              </el-form-item>
              <el-form-item label="" prop="smsCode">
                <el-input placeholder="请输入验证码" v-model="ruleForm.smsCode">
                  <el-button v-if="!smsTimeOut" class="sms-box" slot="append" @click="getSmsCode">获取验证码</el-button>
                  <el-button v-else class="sms-box" style="cursor: auto" slot="append">{{smsTimeOut}}</el-button>
                </el-input>
              </el-form-item>

              <el-form-item class="invite-box" label="" prop="inviteCode">
                <el-input v-model="ruleForm.inviteCode" placeholder="请输入邀请码"></el-input>
                <div v-if="!isMobile" class="icon">
                  <p>邀请码请联系客服获取400-6698025</p>
                </div>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="设置密码"></el-input>
              </el-form-item>

              <el-form-item label="" prop="checkPassword">
                <el-input type="password" v-model="ruleForm.checkPassword" placeholder="重复密码"></el-input>
              </el-form-item>
              <div style="margin-bottom: 20px">
                <el-checkbox v-model="checked"></el-checkbox>
                <span class="text">我已阅读并同意<span style="color: #409eff" @click="dialogVisible=true">《服务条款》</span></span>
              </div>
              <el-form-item>
                <el-button style="width: 100%" :disabled="!checked" type="primary" @click="onSubmit('ruleForm')">注册</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="success-box" v-else>
            <h3>恭喜您，账号已经注册成功</h3>
            <p>您可在右上方下载《使用手册》和下载安装包</p>
            <div style="text-align: center">
              <el-button style="width: 100%" type="primary" @click="success=false">好的</el-button>
            </div>
          </div>
        </el-main>
        <el-footer :class="{mobile:isMobile}"><div data-v-b04a7deb="" class="copyright">Copyright © 2022 4DAGE Co., Ltd. All rights reserved</div></el-footer>
      </el-container>

      <el-dialog title="随心装服务条款" :visible.sync="dialogVisible" :fullscreen="isMobile" width="80%">
        <div :style="`width: 100%; height: ${isMobile? '80vh':'60vh'}`">
          <iframe style="width: 100%; height: 100%" frameborder="no" allowtransparency="yes" src="./term.html"></iframe>
        </div>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
      </el-dialog>
    </div>

    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element-ui_2.15.14.js"></script>
    <script src="./js/axios.min.js"></script>

    <script>
      var baseUrl = "http://face3d.4dage.com:28000/";
      var vm = new Vue({
        el: "#app",
        data() {
          var validatePhoneNum = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请输入手机号码"));
            } else {
              const reg = /^1\d{10}$/;
              if (reg.test(value)) {
                callback();
              } else {
                return callback(new Error("请输入正确的手机号"));
              }
            }
          };
          var validatePass = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请输入密码"));
            } else {
              if (this.ruleForm.checkPassword !== "") {
                this.$refs.ruleForm.validateField("checkPassword");
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.password) {
              callback(new Error("两次输入密码不一致!"));
            } else {
              callback();
            }
          };
          return {
            downloadUrl: "https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/domain/eHome/%E9%9A%8F%E5%BF%83%E8%A3%85%E5%8F%91%E7%89%88/HouseDesignerApi.zip",
            dialogVisible: false,
            isMobile: false,
            smsTimeOut: null,
            checked: false,
            success: false,
            ruleForm: {
              phoneNum: "",
              smsCode: "",
              inviteCode: "",
              password: "",
              checkPassword: "",
            },
            rules: {
              phoneNum: [{ required: true, validator: validatePhoneNum, trigger: "blur" }],
              smsCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
              inviteCode: [{ required: true, message: "请输入邀请码", trigger: "blur" }],
              password: [{ required: true, validator: validatePass, trigger: "blur" }],
              checkPassword: [{ required: true, validator: validatePass2, trigger: "blur" }],
            },
          };
        },
        methods: {
          downloadFiles(type) {
            if (type == "app") {
              if (this.isMobile) {
                this.$message({
                  message: "请在电脑端下载和使用随心装!",
                  type: "warning",
                });
                return;
              }
              window.open(this.downloadUrl);
            }
          },
          onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let data = JSON.parse(JSON.stringify(this.ruleForm));
                delete data.checkPassword;
                axios
                  .post(baseUrl + "mall4cloud-sxz/magic/api/promotion/signUp", data)
                  .then((res) => {
                    if (res.data.code == 0) {
                      this.$message({
                        message: "注册成功！",
                        type: "success",
                      });
                      this.success = true;
                      this.$refs[formName].resetFields();
                    } else {
                      this.$message({
                        message: res.data.msg,
                        type: "warning",
                      });
                    }
                  })
                  .catch((err) => {
                    this.$message({
                      message: "网络异常！",
                      type: "error",
                    });
                  });
              } else {
                console.log("error submit!!");
                return false;
              }
            });
          },
          getSmsCode(e) {
            this.$refs["ruleForm"].validateField(["phoneNum"], (valid) => {
              if (!valid) {
                // 校验通过后的操作;
                axios
                  .post(baseUrl + "mall4cloud-sxz/magic/api/user/getSmsCode", { phoneNum: this.ruleForm.phoneNum, type: "register" })
                  .then((res) => {
                    if (res.data.code == 0) {
                      this.$message({
                        message: "获取成功，请留意短信！",
                        type: "success",
                      });
                      this.setSmsTimeout();
                    } else {
                      this.$message({
                        message: res.data.msg,
                        type: "warning",
                      });
                    }
                  })
                  .catch((err) => {
                    this.$message({
                      message: "网络异常！",
                      type: "error",
                    });
                  });
              } else {
                // console.log("校验失败");

                return false;
              }
            });
          },
          setSmsTimeout() {
            if (!this.smsTimeOut) {
              this.smsTimeOut = 60;
              let t = setInterval(() => {
                this.smsTimeOut--;
                if (this.smsTimeOut <= 0) {
                  this.smsTimeOut = null;
                  clearInterval(t);
                  t = null;
                }
              }, 1000);
            }
          },
        },
        created() {
          var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;

          //检测是否移动设备来访
          function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
              return true;
            } else {
              return false;
            }
          }
          this.isMobile = browserRedirect();
        },
        mounted() {},

        destroyed() {},
      });
    </script>
  </body>
</html>