登录

ant-design-vue-jeecg/src/views/personalCenter/SignInView.vue

@@ -0,0 +1,478 @@
+<template>
+  <div class="login d-flex">
+    <div class="left" :height="vh">
+      <span class="f_48">LOGO</span>
+      <span class="f_24">黄淮服装定制商城</span>
+    </div>
+    <div class="right">
+      <div class="mode d-flex">
+        <p>
+          <span v-if="flag">微信扫码登录</span><span v-else>账号密码登录</span>
+        </p>
+
+        <div @click="imgChange" class="d-flex">
+          <img src="./img/erweima.png" alt="" v-if="flag" />
+          <img src="./img/zhanghao.png" alt="" v-else />
+        </div>
+      </div>
+      <div class="main d-flex" v-if="flag">
+        <div class="title">
+          <p class="f_36">密码登录</p>
+          <p class="f_13">还没帐号？<a href="#">立即注册</a></p>
+        </div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-position="top"
+        >
+          <el-form-item label="请输入账号" prop="name">
+            <el-input
+              v-model="ruleForm.name"
+              placeholder="登录名/手机号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="请输入密码" prop="password">
+            <el-input
+              v-model="ruleForm.password"
+              placeholder="请输入8-16位密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="请输入验证码" required>
+            <el-row :gutter="20">
+              <el-col :span="16">
+                <el-form-item prop="yanzhengma">
+                  <el-input required
+                    v-model="ruleForm.yanzhengma"
+                    placeholder="请输入右侧验证码"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <!--<img src="./img/yanzhengma.png" alt="" style="width: 100%" />-->
+                <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
+                <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
+              </el-col>
+            </el-row>
+          </el-form-item>
+
+          <el-form-item>
+            <div class="button f_16" @click="dengLu" >登录</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="main d-flex" v-else>
+        <div class="title">
+          <p class="f_36">微信登录</p>
+        </div>
+        <div class="coin d-flex">
+          <img src="./img/erweima2.png" alt="" />
+          <p class="f_20">使用微信扫一扫登录</p>
+          <p class="f_16">
+            <a @click="flag = true">密码登录</a> ｜ <a>注册新账号</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapActions} from "vuex";
+import { getAction } from '@/api/manage'
+
+export default {
+  data() {
+    return {
+      requestCodeSuccess: false,
+      currdatetime: '',
+      randCodeImage :'',
+      vh: 0,
+      flag: true, //默认账号密码登录
+      dialogVisible: false,
+      isChecked1: false,
+      isChecked2: false,
+      ruleForm: {
+
+        name: "",
+        yanzhengma: "",
+        password: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入账号", trigger: "blur" },
+          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 18,
+            message: "长度在 6 到 18 个字符",
+            trigger: "blur",
+          },
+        ],
+        yanzhengma: [
+          { required: true, message: "验证码不能为空！", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.vh = window.screen.availHeight;
+  },
+
+  created() {
+    this.handleChangeCheckCode();
+  },
+  methods: {
+    /**
+     * 验证字段
+     * @param arr
+     * @param callback
+     */
+    validateFields(arr, callback){
+      let promiseArray = []
+      for(let item of arr){
+        let p = new Promise((resolve, reject) => {
+          this.$refs['form'].validateField(item, (err)=>{
+            if(!err){
+              resolve();
+            }else{
+              reject(err);
+            }
+          })
+        });
+        promiseArray.push(p)
+      }
+      Promise.all(promiseArray).then(()=>{
+        callback()
+      }).catch(err=>{
+        callback(err)
+      })
+    },
+    //账号密码登录
+    dengLu(rememberMe){
+      console.log("11111111111111111")
+      this.loginSuccess();
+      this.validateFields([ 'username', 'password', 'inputCode' ], (err)=>{
+        if(!err){
+          let loginParams = {
+            username: this.ruleForm.username,
+            password: this.ruleForm.password,
+            captcha: this.ruleForm.inputCode,
+            checkKey: this.currdatetime,
+            remember_me: rememberMe,
+          }
+          console.log("22222222222222222222222")
+          console.log("登录参数", loginParams)
+          this.Login(loginParams).then((res) => {
+            console.log("33333333333333333333333333")
+            this.$emit('success', res.result)
+            this.loginSuccess();
+          }).catch((err) => {
+            this.$emit('fail', err)
+          });
+
+        }else{
+          this.$emit('validateFail')
+        }
+      })
+    },
+
+
+    //登录成功
+    loginSuccess() {
+      console.log("---------------------")
+      this.$router.push({path: "/dashboard/analysis"}).catch(() => {
+        console.log('登录跳转首页出错,这个错误从哪里来的')
+      })
+      this.$notification.success({
+        message: '欢迎',
+        description: `${timeFix()}，欢迎回来`,
+      });
+    },
+
+
+    ...mapActions(['Login']),
+    /**刷新验证码*/
+    handleChangeCheckCode(){
+      this.currdatetime = new Date().getTime();
+      console.log("====================")
+      this.ruleForm.yanzhengma = ''
+      getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
+        if(res.success){
+          this.randCodeImage = res.result
+          this.requestCodeSuccess=true
+        }else{
+          this.$message.error(res.message)
+          this.requestCodeSuccess=false
+        }
+      }).catch(()=>{
+        this.requestCodeSuccess=false
+      })
+    },
+
+
+
+
+
+    imgChange() {
+      this.flag = !this.flag;
+    },
+    flagAdd(e) {
+      this.flag = this.flag + e;
+      if (this.flag >= 3) {
+        this.flag = 3;
+      }
+      if (this.flag < 1) {
+        this.flag = 1;
+      }
+      console.log(this.flag);
+    },
+    checkFn1() {
+      if (this.isChecked1) {
+        this.dialogVisible = true;
+      }
+    },
+    checkFn2() {
+      if (this.isChecked2) {
+        this.dialogVisible = true;
+      }
+    },
+    beforeClose(done) {
+      this.isChecked1 = false;
+      this.isChecked2 = false;
+      done();
+    },
+    quxiao() {
+      this.isChecked1 = false;
+      this.isChecked2 = false;
+      this.dialogVisible = false;
+    },
+    queding() {
+      this.isChecked1 = this.isChecked2;
+
+      this.dialogVisible = false;
+    },
+    /*dengLu() {},*/
+
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+.right .coin {
+  margin-top: 40px;
+  flex-direction: column;
+  align-items: center;
+}
+.coin img {
+  width: 195px;
+  height: 195px;
+  margin-bottom: 30px;
+}
+.coin .f_20 {
+  margin-bottom: 80px;
+  text-align: center;
+}
+.coin .f_16 {
+  color: rgba(51, 51, 51, 0.6);
+  text-align: center;
+  line-height: 16px;
+}
+.login {
+  height: 100%;
+}
+.left {
+  color: #fff;
+  background: url(./img/bg02.png) 100% no-repeat;
+  background-size: 100% 100%;
+  width: 66%;
+  /* height: 1080px; */
+  min-height: 900px;
+  padding-left: 90px;
+  padding-top: 50px;
+}
+.right {
+  width: 34%;
+  position: relative;
+}
+.right .main {
+  box-sizing: border-box;
+  width: 480px;
+  height: 680px;
+  flex-direction: column;
+  color: #000;
+  margin: 120px auto;
+  padding: 60px 40px;
+}
+.right .main .title {
+  margin-bottom: 40px;
+}
+.right .main .title .f_13 {
+  margin-top: 10px;
+  color: #9b9b9b;
+}
+
+.right .main .title .f_13 a {
+  color: #2e58ff;
+}
+.right .main .button {
+  background-color: rgba(238, 230, 217, 1);
+  border-radius: 25px;
+  height: 50px;
+  width: 400px;
+  text-align: center;
+  line-height: 50px;
+  color: #fff;
+  transition: all 0.5s;
+  margin-bottom: 15px;
+  /* margin: 70px 0 91px 40px; */
+}
+.right .main .button:active {
+  background-color: #333333;
+  color: rgba(238, 230, 217, 1);
+  border: 1px solid rgba(238, 230, 217, 1);
+}
+
+.right .mode {
+  position: absolute;
+  top: 2%;
+  right: 1%;
+  width: 180px;
+  justify-content: space-between;
+  align-items: center;
+}
+.right .mode span {
+  display: inline-block;
+  width: 90px;
+  font-size: 12px;
+  color: #746957;
+  border: 1px solid #746957;
+  text-align: center;
+  padding: 1px 3px;
+  border-radius: 3px;
+}
+.right .mode div {
+  width: 80px;
+  height: 80px;
+  align-items: center;
+  justify-content: center;
+}
+.right .mode img {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 0 10%);
+}
+
+
+
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.jz {
+  width: 1440px;
+  margin: 0 auto;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.f_12 {
+  font-size: 12px;
+}
+
+.f_13 {
+  font-size: 13px;
+}
+
+.f_16 {
+  font-size: 16px;
+}
+
+.f_18 {
+  font-size: 18px;
+}
+.f_20 {
+  font-size: 20px;
+}
+.f_22 {
+  font-size: 22px;
+}
+.f_24 {
+  font-size: 24px;
+}
+
+
+.f_30 {
+  font-size: 30px;
+}
+
+.f_36 {
+  font-size: 36px;
+}
+
+.f_48 {
+  font-size: 48px;
+}
+
+.mb_30 {
+  margin-bottom: 30px;
+}
+
+.mb_100 {
+  margin-bottom: 100px;
+}
+
+.fw_600 {
+  font-weight: 600;
+}
+
+.c_333 {
+  color: #333;
+}
+
+.c_999 {
+  color: #999;
+}
+
+.c_fff {
+  color: #fff;
+}
+
+.c_000 {
+  color: #000;
+}
+
+.c_9a9b9b {
+  color: #9A9B9B;
+}
+
+
+</style>

ant-design-vue-jeecg/src/views/personalCenter/SignUpView.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="login d-flex">
+    <div class="left" :height="vh">
+      <span class="f_48">LOGO</span>
+      <span class="f_24">黄淮服装定制商城</span>
+    </div>
+    <div class="right">
+      <div class="main d-flex">
+        <div class="title">
+          <p class="f_36">欢迎注册</p>
+          <p class="f_13">已有帐号？<a @click="signIn">登录</a></p>
+        </div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-position="top"
+        >
+          <div v-if="flag == 1">
+            <el-form-item label="请输入手机号" prop="number">
+              <el-input
+                v-model="ruleForm.number"
+                placeholder="可用于登录和找回密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="请输入验证码" required>
+              <el-row :gutter="20">
+                <el-col :span="16">
+                  <el-form-item prop="code1">
+                    <el-input
+                      v-model="ruleForm.code1"
+                      placeholder="请输入右侧验证码"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <img src="./img/yanzhengma.png" alt="" style="width: 100%" />
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item label="请输入手机验证码" required>
+              <el-row :gutter="20">
+                <el-col :span="16">
+                  <el-form-item prop="code2">
+                    <el-input
+                      v-model="ruleForm.code2"
+                      placeholder="请输入手机验证码"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-button @click="resetForm('ruleForm')"
+                    >获取验证码</el-button
+                  >
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </div>
+          <div v-if="flag == 2">
+            <el-form-item label="设置登录名" prop="name">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="设置后不可更改，中英文均可，最长14个英文或7个汉字"
+                placement="top-end"
+              >
+                <el-input
+                  v-model="ruleForm.name"
+                  placeholder="可用于登录的账号"
+                ></el-input
+              ></el-tooltip>
+            </el-form-item>
+            <el-form-item label="设置密码" prop="password">
+              <el-input
+                v-model="ruleForm.password"
+                placeholder="请输入8-16位密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="请输入验证码" required>
+              <el-row :gutter="20">
+                <el-col :span="16">
+                  <el-form-item prop="code3">
+                    <el-input
+                      v-model="ruleForm.code3"
+                      placeholder="请输入右侧验证码"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <img src="./img/yanzhengma.png" alt="" style="width: 100%" />
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </div>
+          <div v-if="flag == 3">
+            <el-checkbox
+              style="margin-bottom: 20px"
+              v-model="isChecked1"
+              @change="checkFn1"
+              >阅读并接受《黄淮服装定制商城用户协议》及《隐私权保护声明》</el-checkbox
+            >
+            <el-dialog
+              title="黄淮服装定制商城用户注册协议和隐私政策"
+              :visible.sync="dialogVisible"
+              :before-close="beforeClose"
+              :close-on-click-modal="true"
+            >
+              <el-form :model="form">
+                <p class="paragraph">
+                  欢迎注册成为黄淮服装定制商城用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、
+                  充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
+                </p>
+                <p class="paragraph">
+                  【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。
+                  如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意
+                  我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看《订单共享与安全》）。
+                  如您对以下协议内容有任何疑问，您可随时通过
+                  <a href="#" class="policy">《黄淮服装定制商城隐私政策》</a
+                  >中的联系方式联系我们。
+                </p>
+                <p class="paragraph">
+                  如您在使用我们的产品或服务中与其他用户发生争议的，依您与其他用户达成的协议处理。
+                </p>
+                <p class="paragraph">一、服务条款的确认与接受</p>
+                <p class="paragraph">二、服务须知</p>
+                <p class="paragraph">三、订单</p>
+                <el-form-item>
+                  <el-checkbox
+                    style="margin-bottom: 20px"
+                    v-model="isChecked2"
+                    @change="checkFn2"
+                    >阅读并接受<a href="#" class="policy"
+                      >《黄淮服装定制商城用户协议》</a
+                    >及<a href="#" class="policy"
+                      >《隐私权保护声明》</a
+                    ></el-checkbox
+                  >
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <div class="button f_16" @click="quxiao">取 消</div>
+                <div class="button f_16" @click="queding">确 定</div>
+              </div>
+            </el-dialog>
+          </div>
+          <el-form-item>
+            <div
+              class="button f_16"
+              @click="flagAdd(1, ruleForm)"
+              v-if="flag < 3"
+            >
+              下一步
+            </div>
+            <div class="button f_16" v-if="flag == 3" @click="zhuce">注册</div>
+            <div class="button f_16" @click="flagAdd(-1)" v-if="flag > 1">
+              上一步
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      vh: 0,
+      flag: 1,
+      dialogVisible: false,
+      isChecked1: false,
+      isChecked2: false,
+      ruleForm: {
+        number: "",
+        code1: "",
+        code2: "",
+        name: "",
+        password: "",
+        code3: "",
+      },
+      rules: {
+        number: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          {
+            min: 1,
+            max: 11,
+            message: "手机号长度在 1 到 11 个字符",
+            trigger: "blur",
+          },
+        ],
+        code1: [
+          { required: true, message: "验证码不能为空！", trigger: "blur" },
+          {
+            min: 1,
+            max: 4,
+            message: "手机号长度在 1 到 4 个字符",
+            trigger: "blur",
+          },
+        ],
+        code2: [
+          {
+            required: true,
+            message: "手机验证码不能为空！",
+            trigger: "blur",
+          },
+          {
+            min: 1,
+            max: 6,
+            message: "手机验证码长度在 1 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "登录名不能为空！",
+            trigger: "blur",
+          },
+          {
+            min: 1,
+            max: 7,
+            message: "最长14个英文或7个汉字",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "密码不能为空！",
+            trigger: "blur",
+          },
+          {
+            min: 8,
+            max: 16,
+            message: "手机密码长度在 8 到 16 个字符",
+            trigger: "blur",
+          },
+        ],
+        code3: [
+          {
+            required: true,
+            message: "验证码不能为空！",
+            trigger: "blur",
+          },
+          {
+            min: 1,
+            max: 4,
+            message: "验证码长度在 1 到 4 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.vh = window.screen.availHeight;
+  },
+  methods: {
+    signIn() {
+      this.$router.push("/view/Login/SignInView.vue");
+    },
+    flagAdd(e) {
+      this.$refs["ruleForm"].clearValidate();
+      this.flag = this.flag + e;
+      if (this.flag >= 3) {
+        this.flag = 3;
+      }
+      if (this.flag < 1) {
+        this.flag = 1;
+      }
+      console.log(this.flag);
+    },
+    checkFn1() {
+      if (this.isChecked1) {
+        this.dialogVisible = true;
+      }
+    },
+    checkFn2() {
+      if (this.isChecked2) {
+        this.dialogVisible = true;
+      }
+    },
+    beforeClose(done) {
+      this.isChecked1 = false;
+      this.isChecked2 = false;
+      done();
+    },
+    quxiao() {
+      this.isChecked1 = false;
+      this.isChecked2 = false;
+      this.dialogVisible = false;
+    },
+    queding() {
+      this.isChecked1 = this.isChecked2;
+
+      this.dialogVisible = false;
+    },
+    zhuce() {
+      if (!this.isChecked1) {
+        this.$alert(
+          "请先阅读并接受《黄淮服装定制商城用户协议》及《隐私权保护声明》",
+          "无法注册！",
+          {
+            confirmButtonText: "确定",
+          }
+        );
+      }
+    },
+
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.login {
+  height: 100%;
+}
+.left {
+  color: #fff;
+  background: url(./img/bg02.png) 100% no-repeat;
+  background-size: 100% 100%;
+  width: 66%;
+  /* height: 1080px; */
+  min-height: 900px;
+  padding-left: 90px;
+  padding-top: 50px;
+}
+.right {
+  width: 34%;
+}
+.right .main {
+  box-sizing: border-box;
+  width: 480px;
+  height: 680px;
+  flex-direction: column;
+  color: #000;
+  margin: 120px auto;
+  padding: 60px 40px;
+}
+.right .main .title {
+  margin-bottom: 40px;
+}
+.right .main .title .f_13 {
+  margin-top: 10px;
+  color: #9b9b9b;
+}
+
+.right .main .title .f_13 a {
+  color: #2e58ff;
+}
+.right .main .button {
+  background-color: rgba(238, 230, 217, 1);
+  border-radius: 25px;
+  height: 50px;
+  width: 400px;
+  text-align: center;
+  line-height: 50px;
+  color: #fff;
+  transition: all 0.5s;
+  margin-bottom: 15px;
+  /* margin: 70px 0 91px 40px; */
+}
+.right .main .button:active {
+  background-color: #333333;
+  color: rgba(238, 230, 217, 1);
+  border: 1px solid rgba(238, 230, 217, 1);
+}
+/* .right >>> .el-dialog {
+  width: 1000px;
+} */
+.right >>> .el-dialog {
+  width: 1000px;
+}
+.right >>> .el-dialog__header {
+  text-align: center;
+  background-color: #e9eae9;
+  height: 56px;
+  line-height: 56px;
+  font-size: 20px;
+  color: #000;
+  font-weight: 500;
+}
+.right >>> .el-dialog__body {
+  padding: 20px 50px;
+}
+.paragraph {
+  margin-bottom: 20px;
+  font-size: 16px;
+  color: #666;
+  font-weight: 500;
+  line-height: 27px;
+}
+.policy {
+  color: #409eff;
+}
+.right >>> .dialog-footer {
+  display: flex;
+  justify-content: space-around;
+}
+</style>