|
|
@@ -0,0 +1,275 @@
|
|
|
+<!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/mall4cloud-sxz/magic/";
|
|
|
+ var baseUrl = "/";
|
|
|
+ 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>
|
