init project

component/authorizedMask/authorizedMask.js

@@ -0,0 +1,104 @@
+// pages/authorizedMask/authorizedMask.js
+const app = getApp();
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    isSetting: {
+      type: Boolean,
+      value: false
+    },
+    content: {
+      type: String,
+      value: '使用小程序需要您授权登录'
+    },
+    isCancel: {
+      type: Boolean,
+      value: false
+    },
+    /**
+     * Only: 只有一個
+     * TwainCance： 兩個帶取消
+     * */
+    type: {
+      type: String,
+      value: 'Only'
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    showBox: true,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    stopSlide() {
+      return;
+    },
+
+    wxTap() {
+      this.setData({
+        showBox: false
+      })
+    },
+    // 微信登录
+    wxLogin(e) {
+      if (e.detail.errMsg === 'getUserInfo:fail auth deny') {
+        this.setData({
+          showBox: true
+        })
+        return
+      }
+      this.setData({
+        showBox: false
+      })
+      let that = this;
+      wx.login({
+        success: function(res) {
+          if (res.code) {
+            app.$api.login({
+              avatar: e.detail.userInfo.avatarUrl,
+              code: res.code,
+              nickname: e.detail.userInfo.nickName,
+            }).then(res => {
+              wx.setStorageSync('access_token', res.data.accessToken);
+              wx.setStorageSync('userInfo', e.detail.userInfo);
+              that.triggerEvent('loginSuccess', {}, {});
+            })
+          } else {
+            wx.showToast({
+              title: '登录失败',
+              icon: 'none',
+            })
+          }
+        },
+        fail: function(res) {
+          wx.showToast({
+            title: '登录失败',
+            icon: 'none',
+          })
+        },
+      })
+    },
+    // 取消
+    cance() {
+      this.triggerEvent('cance', {}, {});
+    },
+
+    // 打开设置 
+    setSuccess: function (e) {
+      this.triggerEvent('setsuccess', e.detail, {});
+      // if (e.detail.authSetting["scope.userLocation"]) {//如果打开了地理位置，就会为true
+      //   this.setData({
+      //     showFlag: true
+      //   })
+      // }
+    }
+  }
+})

component/authorizedMask/authorizedMask.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

component/authorizedMask/authorizedMask.wxml

@@ -0,0 +1,17 @@
+<!--pages/authorizedMask/authorizedMask.wxml-->
+<view class='auth-bg' catchtouchmove='stopSlide'>
+  <view class='auth-box' wx:if="{{showBox}}">
+    <!-- wx:if="{{type == 'TwainCance'}}" -->
+    <view class='close' bindtap='cance' wx:if="{{isCancel}}">
+      <image src='../../images/23@3x.png'></image>
+    </view>
+    <view class='message'>{{content}}</view>
+    <view class='btn-bg' wx:if="{{type == 'Only'}}">
+      <button open-type="getUserInfo" bindgetuserinfo="wxLogin" wx:if="{{!isSetting}}">授权登录</button>
+      <button open-type="openSetting" bindopensetting="setSuccess" wx:if="{{isSetting}}" >进入授权管理</button>
+    </view>
+    <!-- <view class='btn-bg btn-tow' wx:if="{{showBox}}">
+      <button open-type="openSetting" wx:if="{{isSetting}}">进入授权管理</button>
+    </view> -->
+  </view>
+</view>

component/authorizedMask/authorizedMask.wxss

@@ -0,0 +1,67 @@
+/* pages/authorizedMask/authorizedMask.wxss */
+
+.auth-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1001;
+}
+
+.auth-box {
+  position: relative;
+  width: 70%;
+  height: 350rpx;
+  background: #252330;
+  border-radius: 10rpx;
+  color: #989898;
+}
+
+.message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 250rpx;
+  /* border-bottom: 2rpx solid #EBEEF5; */
+  font-size: 28rpx;
+}
+
+.btn-bg>button {
+  width: 60%;
+  height: 70rpx;
+  line-height: 70rpx;
+  font-size: 26rpx;
+  color: #252330;
+  border-radius: 35rpx;
+  background: #ffc129;
+}
+
+.btn-bg.btn-tow {
+  display: flex;
+}
+
+button::after {
+   border: none;
+  border-radius: 0;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60rpx;
+  height: 60rpx;
+}
+
+.close>image {
+  width: 26rpx;
+  height: 26rpx;
+}