Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui

buyer/src/api/login.js

@@ -92,3 +92,20 @@ export function resetPassword (params) {
     params
   });
 }
+
+export function getSCLoginCode(params) {
+  return request({
+    url: `/buyer/passport/member/pc_session`,
+    method: Method.POST,
+    needToken: false,
+    params
+  });
+}
+export function sCLogin(token,params) {
+  return request({
+    url: `/buyer/passport/member/session_login/`+token,
+    method: Method.POST,
+    needToken: false,
+    params
+  });
+}

buyer/src/pages/Login.vue

@@ -21,69 +21,113 @@
       <div class="form-box" @click='$refs.verify.show = false'>
         <div class="account-number">
           <div class="tab-switch">
-            <span>{{type?'账号登录':'验证码登录'}}</span>
+            <span>{{ type ? '账号登录' : '验证码登录' }}</span>
-            <span @click="type = !type">{{type?'验证码登录':'账号登录'}}</span>
+            <span @click="type = !type,scannerCodeLoginFLag=false">{{ type ? '验证码登录' : '账号登录' }}</span>
           </div>
-          <div @click="$router.push('signUp')">立即注册</div>
+          <!---->
+          <div @click="scannerCodeLoginFLag=!scannerCodeLoginFLag">{{!scannerCodeLoginFLag ? '扫码登录' : '返回'}}</div>
         </div>
-        <!-- 账号密码登录 -->
+        <!--扫码登录-->
-        <Form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
+        <div v-show="scannerCodeLoginFLag">
-          @click.self='$refs.verify.show = false'>
+          <div class="qr-container">
-          <FormItem prop="username">
+            <vue-qr
-            <i-input type="text" v-model="formData.username" clearable placeholder="用户名">
+              :text="qrCode"
-              <Icon type="md-person" slot="prepend"></Icon>
+              :margin="0"
-            </i-input>
+              colorDark="#000"
-          </FormItem>
+              colorLight="#fff"
-          <FormItem prop="password">
+              :size="150"
-            <i-input type="password" v-model="formData.password" clearable placeholder="密码">
+            ></vue-qr>
-              <Icon type="md-lock" slot="prepend"> </Icon>
+          </div>
-            </i-input>
+          <div class="drag-area">
-          </FormItem>
+          <!--    等待扫码-->
-          <FormItem>
+          <div v-if="scannerCodeLoginStatus === 0" class="pending-scan">
-            <Button type="error" @click.stop="handleSubmit('formInline')" long>登录</Button>
+            <p>打开手机App/小程序，扫码登录</p>
-          </FormItem>
+          </div>
-        </Form>
+          <!--    已经扫码-->
-        <!-- 验证码登录 -->
+          <div v-else-if="scannerCodeLoginStatus === 1" class="scanned">
-        <Form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
+            <p>扫码成功，等待确认</p>
-          @click.self='$refs.verify.show = false'>
+          </div>
-          <FormItem prop="mobile">
-            <i-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="code">
-            <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
-              <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend" />
-              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button @click.stop="verifyBtnClick" long
-              :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
-          </FormItem>
-          <FormItem>
-            <Button type="error" @click="handleSubmit('formSms')" long>登录</Button>
-          </FormItem>
-        </Form>
-        <div class="regist">
-          <span @click="$router.push('forgetPassword')">忘记密码</span>
-        </div>
-        <div class="other-login">
-          <svg t="1631154795933" class="icon" @click="handleWebLogin('QQ')" viewBox="0 0 1024 1024" version="1.1"
-            xmlns="http://www.w3.org/2000/svg" p-id="4969" width="32" height="32">
-            <path
-              d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
-              p-id="4970" fill="#1296db"></path>
-          </svg>
-          <svg t="1631154766336" class="icon" @click="handleWebLogin('WECHAT_PC')" viewBox="0 0 1024 1024" version="1.1"
-            xmlns="http://www.w3.org/2000/svg" p-id="3844" width="32" height="32">
-            <path
-              d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
-              fill="#09BB07" p-id="3845"></path>
-          </svg>
 
+          <!--    存在session，等待发送给客户端验证-->
+          <div v-if="scannerCodeLoginStatus === 2" class="scanned">
+            <p>登录成功，正在页面跳转</p>
+          </div>
+
+          <!--    已经发送登录请求-->
+          <div v-else-if="scannerCodeLoginStatus === 3" class="quick-logining">
+            <p>取消登录</p>
+          </div>
+        </div>
+        </div>
+
+        <div>
+          <div v-show="!scannerCodeLoginFLag">
+          <!-- 账号密码登录 -->
+          <Form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
+                @click.self='$refs.verify.show = false'>
+            <FormItem prop="username">
+              <i-input type="text" v-model="formData.username" clearable placeholder="用户名">
+                <Icon type="md-person" slot="prepend"></Icon>
+              </i-input>
+            </FormItem>
+            <FormItem prop="password">
+              <i-input type="password" v-model="formData.password" clearable placeholder="密码">
+                <Icon type="md-lock" slot="prepend"></Icon>
+              </i-input>
+            </FormItem>
+            <FormItem>
+              <Button type="error" @click.stop="handleSubmit('formInline')" long>登录</Button>
+            </FormItem>
+          </Form>
+          <!-- 验证码登录 -->
+          <Form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
+                @click.self='$refs.verify.show = false'>
+            <FormItem prop="mobile">
+              <i-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
+                <Icon type="md-lock" slot="prepend"></Icon>
+              </i-input>
+            </FormItem>
+            <FormItem prop="code">
+              <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
+                <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend"/>
+                <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
+              </i-input>
+            </FormItem>
+            <FormItem>
+              <Button @click.stop="verifyBtnClick" long
+                      :type="verifyStatus?'success':'default'">{{ verifyStatus ? '验证通过' : '点击完成安全验证' }}
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button type="error" @click="handleSubmit('formSms')" long>登录</Button>
+            </FormItem>
+          </Form>
+        </div>
+          <div class="other">
+            <div class="other-login">
+              <svg t="1631154795933" class="icon" @click="handleWebLogin('QQ')" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="4969" width="32" height="32">
+                <path
+                  d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
+                  p-id="4970" fill="#1296db"></path>
+              </svg>
+              <svg t="1631154766336" class="icon" @click="handleWebLogin('WECHAT_PC')" viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="3844" width="32" height="32">
+                <path
+                  d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
+                  fill="#09BB07" p-id="3845"></path>
+              </svg>
+            </div>
+            <div class="register">
+              <span style="color:red" @click="$router.push('signUp')">还没有账号？点击立即注册</span>
+              <span @click="$router.push('forgetPassword')">忘记密码</span>
+            </div>
+          </div>
         </div>
       </div>
+
+
       <!-- 拼图验证码 -->
       <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
     </div>
@@ -108,18 +152,26 @@ import * as RegExp from "@/plugins/RegExp.js";
 import { md5 } from "@/plugins/md5.js";
 import * as apiLogin from "@/api/login.js";
 import { sendSms } from "@/api/common.js";
-import { webLogin, loginCallback } from "@/api/login.js";
+import { webLogin, loginCallback,sCLogin,getSCLoginCode} from "@/api/login.js";
 import storage from "@/plugins/storage.js";
 import verify from "@/components/verify";
+import vueQr from "vue-qr";
 
 export default {
   name: "Login",
   components: {
     verify,
+    vueQr
   },
   data() {
     return {
-      config:require('@/config'),
+      qrCode: '',
+      qrSessionToken:'',
+      //是否是二维码登录
+      scannerCodeLoginFLag: false,
+      scannerCodeLoginStatus: 0,
+      qrCodeTimer:null,
+      config: require('@/config'),
       type: true, // true 账号登录  false 验证码登录
       formData: {
         // 登录表单
@@ -134,19 +186,19 @@ export default {
       verifyStatus: false, // 是否图片验证通过
       ruleInline: {
         // 验证规则
-        username: [{ required: true, message: "请输入用户名" }],
+        username: [{required: true, message: "请输入用户名"}],
         password: [
-          { required: true, message: "请输入密码" },
+          {required: true, message: "请输入密码"},
-          { type: "string", min: 6, message: "密码不能少于6位" },
+          {type: "string", min: 6, message: "密码不能少于6位"},
         ],
         mobile: [
-          { required: true, message: "请输入手机号码" },
+          {required: true, message: "请输入手机号码"},
           {
             pattern: RegExp.mobile,
             message: "请输入正确的手机号",
           },
         ],
-        code: [{ required: true, message: "请输入手机验证码" }],
+        code: [{required: true, message: "请输入手机验证码"}],
       },
       codeMsg: "发送验证码", // 验证码文字
       interval: null, // 定时器
@@ -154,7 +206,14 @@ export default {
       year: new Date().getFullYear(),
     };
   },
+  watch:{
+
+    scannerCodeLoginFLag(val){
+      !val ? this.clearInterval() : ''
+    }
+  },
   methods: {
+
     // 登录
     handleSubmit(name) {
       this.$refs[name].validate((valid) => {
@@ -241,24 +300,7 @@ export default {
           .login(data)
           .then((res) => {
             if (res.success) {
-              this.$Message.success("登录成功");
+              this.loginSuccess(res.result.accessToken,res.result.refreshToken);
-              storage.setItem("accessToken", res.result.accessToken);
-              storage.setItem("refreshToken", res.result.refreshToken);
-              apiLogin.getMemberMsg().then((res) => {
-                this.$Spin.hide();
-                if (res.success) {
-                  storage.setItem("userInfo", res.result);
-                  let query = this.$route.query;
-                  if (query.rePath) {
-                    this.$router.push({
-                      path: query.rePath,
-                      query: JSON.parse(query.query),
-                    });
-                  } else {
-                    this.$router.push("/");
-                  }
-                }
-              });
             } else {
               this.$Spin.hide();
               this.$Message.error(res.message);
@@ -282,6 +324,87 @@ export default {
       // 第三方登录
       webLogin(type);
     },
+    loginSuccess(accessToken,refreshToken){
+      this.$Message.success("登录成功");
+      storage.setItem("accessToken", accessToken);
+      storage.setItem("refreshToken", refreshToken);
+      apiLogin.getMemberMsg().then((res) => {
+        this.$Spin.hide();
+        if (res.success) {
+          storage.setItem("userInfo", res.result);
+          let query = this.$route.query;
+          if (query.rePath) {
+            this.$router.push({
+              path: query.rePath,
+              query: JSON.parse(query.query),
+            });
+          } else {
+            this.$router.push("/");
+          }
+        }
+      });
+    },
+
+    async createPCLoginSession() {
+      getSCLoginCode({}).then(response=>{
+        this.clearQRLoginInfo();
+        if (response.code == 200) {
+          let session = response.result;
+          this.qrSessionToken = session.token;
+          if (session.status === 0) {
+            this.qrCode = session.token;
+            this.refreshQrCode();
+          }
+          this.qrLogin();
+
+        }
+      });
+    },
+
+    async refreshQrCode() {
+      if (!this.qrCodeTimer) {
+        this.qrCodeTimer = setInterval(() => {
+          this.createPCLoginSession();
+        }, 21 * 1000);
+      }
+    },
+
+    clearQRLoginInfo(){
+      this.scannerCodeLoginStatus=0;
+      this.qrSessionToken='';
+      if (this.qrCodeTimer) {
+        clearInterval(this.qrCodeTimer)
+      }
+      this.qrCodeTimer= null;
+    },
+
+    async qrLogin() {
+      if(!this.qrSessionToken) return;
+      sCLogin(this.qrSessionToken,{beforeSessionStatus:this.scannerCodeLoginStatus}).then(response=>{
+        if (response.success) {
+          this.scannerCodeLoginStatus = response.result.status;
+          switch (response.result.status) {
+            case 0:
+            case 1:
+              this.qrLogin();break;
+            case 2:
+              this.loginSuccess(response.result.token.accessToken,response.result.token.refreshToken);
+              break;
+            case 3:
+              this.createPCLoginSession();
+              break;
+            default:
+              this.clearQRLoginInfo();
+              break
+          }
+        }  else{
+          this.clearQRLoginInfo();
+        }
+      });
+    },
+  },
+  destroyed() {
+    this.clearQRLoginInfo();
   },
   mounted() {
     let uuid = this.$route.query.state;
@@ -289,28 +412,21 @@ export default {
       storage.setItem("uuid", uuid);
       loginCallback(uuid).then((res) => {
         if (res.success) {
-          const result = res.result;
+          this.loginSuccess(result.accessToken,result.refreshToken);
-          storage.setItem("accessToken", result.accessToken);
-          storage.setItem("refreshToken", result.refreshToken);
-          apiLogin.getMemberMsg().then((res) => {
-            if (res.success) {
-              storage.setItem("userInfo", res.result);
-              let query = this.$route.query;
-              if (query.rePath) {
-                this.$router.push({
-                  path: query.rePath,
-                  query: JSON.parse(query.query),
-                });
-              } else {
-                this.$router.push("/");
-              }
-            }
-          });
         }
       });
     }
   },
   watch: {
+    scannerCodeLoginFLag(v){
+      if(v){
+        this.createPCLoginSession();
+        console.log("二维码登录");
+      }else{
+        console.log("取消二维码登录");
+        this.clearQRLoginInfo();
+      }
+    },
     type(v) {
       if (v) {
         this.$refs.formInline.resetFields();
@@ -327,10 +443,22 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+.drag-area{
+  margin: 10px 0;
+}
 .login {
   height: 100%;
   background-color: #f0f2f5;
 }
+.other{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.qr-container{
+  text-align: center;
+  margin: 20px 0;
+}
 .top-content {
   width: 100%;
   height: 80px;
@@ -347,19 +475,35 @@ export default {
     margin: 0 auto;
     display: flex;
     align-items: center;
+
     img {
       width: 150px;
       cursor: pointer;
     }
+
     div {
       font-size: 20px;
       margin-top: 10px;
     }
   }
 }
+.pending-scan{
+  text-align: center;
+  color:black;
+}
+.scanned{
+  text-align: center;
+  color:green;
+}
+.quick-logining{
+  text-align: center;
+  color:red;
+}
+
 .login-carousel {
   width: 100%;
   height: 550px;
+
   .demo-carousel {
     height: 550px;
     width: inherit;
@@ -382,15 +526,18 @@ export default {
   right: 15%;
   padding: 20px;
   background: rgba(255, 255, 255, 0.8);
+
   .account-number {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     font-weight: bold;
+
     > div:nth-child(2) {
       color: $theme_color;
       cursor: pointer;
     }
+
     .tab-switch {
       height: 40px;
       font-size: 14px;
@@ -404,6 +551,7 @@ export default {
       span:nth-child(2) {
         cursor: pointer;
         padding-left: 10px;
+
         &:hover {
           color: $theme_color;
         }
@@ -420,7 +568,7 @@ export default {
 }
 
 .other-login {
-  margin: 0 auto;
+
   > svg {
     cursor: pointer;
     width: 24px;
@@ -428,18 +576,22 @@ export default {
     height: 24px;
   }
 }
-.regist {
+
+.register {
   display: flex;
-  justify-content: flex-end;
+
   margin-top: -10px;
+
   span {
     margin-left: 10px;
+
     &:hover {
       cursor: pointer;
       color: $theme_color;
     }
   }
 }
+
 .foot {
   position: fixed;
   bottom: 4vh;
@@ -447,18 +599,22 @@ export default {
   left: calc(50% - 184px);
   color: rgba(0, 0, 0, 0.45);
   font-size: 14px;
+
   .help {
     margin: 0 auto;
     margin-bottom: 1vh;
     width: 60%;
+
     .item {
       color: rgba(0, 0, 0, 0.45);
     }
+
     :hover {
       color: rgba(0, 0, 0, 0.65);
     }
   }
 }
+
 .icon-hover {
   cursor: pointer;
 }

buyer/src/pages/home/memberCenter/Distribution.vue

@@ -244,6 +244,7 @@
     <Modal v-model="qrcodeShow" title="分销商品" width="800">
       <Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
       <div style="width: 200px; height: 200px; border: 1px solid #eee">
+        {{qrcode}}{{qrcodeData}}
         <vue-qr
           :text="qrcode"
           :callback="qrcodeData"