feat: 基于 @xiaochangbai 老哥的代码进行了一点样式优化

看到老哥有引入其他的qr插件，在项目里面本身自带了一个，稍微改了一下部分样式

https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp/pulls/3

api/login.js

@@ -91,3 +91,20 @@ export function logout () {
     needToken: true,
   })
 }
+
+export function scannerCodeLogin(params){
+	return http.request({
+	  url: '/passport/member/app_scanner',
+	  method: "POST",
+	  params,
+	  needToken: true,
+	});
+}
+export function scannerCodeLoginConfirm(params){
+	return http.request({
+	  url: '/passport/member/app_confirm',
+	  method: "POST",
+	  params,
+	  needToken: true,
+	});
+}

pages.json

@@ -244,6 +244,8 @@
 						"navigationBarTitleText": "面容登录"
 					}
 				},
+				
+				
 				{
 					"path": "set/securityCenter/editPassword",
 					"style": {
@@ -455,6 +457,14 @@
 						"navigationStyle": "custom",
 						"navigationBarTextStyle": "black"
 					}
+				},
+				{
+					"path": "scannerCodeLoginConfirm",
+					"style": {
+						"navigationBarTitleText": "扫码登录",
+						"navigationStyle": "custom",
+						"navigationBarTextStyle": "black"
+					}
 				}
 			]
 

pages/passport/scannerCodeLoginConfirm.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="container">
+    <u-navbar title="扫码登录授权"></u-navbar>
+    <view class="wx-auth-container">
+      <div class="box">
+        <!-- <div v-if="!errorMsg"> -->
+        <div>
+          <view class="small-tips flex flex-center">
+            <u-image
+              width="400rpx"
+              height="300rpx"
+              src="https://lili-system.oss-cn-beijing.aliyuncs.com/confirm.png"
+            ></u-image>
+            <div>电脑端登录确认</div>
+            <div>为确保帐号安全，请确认是您本人操作</div>
+          </view>
+
+          <view class="btns">
+            <button @click="confirmLogin()" class="btn-auth">确认登录</button>
+            <div @click="cancelLogin()" class="btn-callback">取消登录</div>
+          </view>
+        </div>
+      </div>
+    </view>
+  </view>
+</template>
+
+<script>
+import { scannerCodeLogin, scannerCodeLoginConfirm } from "@/api/login";
+export default {
+  data() {
+    return {
+      errorMsg: "",
+      token: "",
+    };
+  },
+  watch: {
+    errorMsg(val) {
+      if (val) {
+        uni.showToast({
+          title: val,
+          icon: "none",
+        });
+        // uni.navigateBack()
+      }
+    },
+  },
+  onShow() {
+    this.$options.filters.forceLogin();
+    scannerCodeLogin({ token: this.token }).then((res) => {
+      if (res.data.code == 200) {
+        let code = res.data.result;
+        switch (code) {
+          case 0:
+          case 1:
+            this.errorMsg = "";
+            break;
+          case 2:
+          case 3:
+            this.errorMsg = "请勿重复扫码";
+            break;
+          case 4:
+            this.errorMsg = "二维码已过期，重新扫码";
+            break;
+          default:
+            this.errorMsg = "状态异常";
+        }
+      } else {
+        this.errorMsg = res.data.message;
+      }
+    });
+  },
+  onLoad(params) {
+    this.token = params.token;
+    if (this.token == undefined || this.token == "") {
+      this.errorMsg = "信息异常";
+    }
+  },
+  methods: {
+    confirmLogin() {
+      this.config(1);
+    },
+    cancelLogin() {
+      this.config(0);
+    },
+    config(code) {
+      scannerCodeLoginConfirm({ token: this.token, code: code }).then((res) => {
+        let title = res.data.success ? "操作成功" : "操作失败";
+        uni.showToast({
+          title: title,
+          duration: 1500,
+          icon: "none",
+        });
+        setTimeout(function () {
+          uni.navigateBack();
+        }, 1000);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+page {
+  background: #fff;
+}
+</style>
+<style lang="scss" scoped>
+.container {
+  background-color: #fff;
+  width: 100vw;
+  height: 100vh;
+}
+.wx-auth-container {
+  width: 100%;
+  background: #fff;
+  margin-top: 20%;
+}
+text.title,
+text.shop {
+  display: inline-block;
+  font-size: 60rpx;
+  color: #333;
+}
+
+.box {
+  margin: 0 32rpx;
+}
+
+/* 文字提示*/
+.small-tips {
+  width: 100%;
+
+  padding: 20rpx;
+  font-size: 29rpx;
+  margin: 0 0 20rpx;
+  color: #999;
+}
+
+.btn-auth {
+  width: 92%;
+  background: $main-color;
+  color: #fff;
+  margin: 0 auto 40rpx;
+  border-radius: 100px;
+}
+.btn-callback {
+  text-align: center;
+  font-size: 30rpx;
+  background: #ededed;
+  height: 90rpx;
+  line-height: 90rpx;
+  border-radius: 100px;
+  width: 92%;
+  margin: 0 auto;
+}
+
+.btns {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+}
+</style>

pages/tabbar/home/views.vue

@@ -147,6 +147,18 @@ export default {
         success: function (res) {
           let path = encodeURIComponent(res.result);
           
+
+          
+          if(path!=undefined && path.indexOf("QR_CODE_LOGIN_SESSION")==0){
+            console.log(path)
+            //app扫码登录
+            uni.navigateTo({
+              url:"/pages/passport/scannerCodeLoginConfirm?token="+path
+            });
+            return;
+          }
+
+
           // WX_CODE 为小程序码
           if (res.scanType == "WX_CODE") {
             console.log(res);