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

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

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

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>