quanyawei
2023-11-06 1e61215b48e59e94c1ed98e4ef956227d689d6bc
pages/login/login.vue
New file
@@ -0,0 +1,212 @@
<template>
   <view class="page">
      <view class="tit">
         <view class="imageContent">
            <image src="/static/logo.png" style="width: 67.31rpx; height: 100rpx" />
         </view>
         <view class="">
            <text>七星瓢虫环境科技</text>
         </view>
      </view>
      <view class="formConten">
         <view>
            <u-form ref="uForm" label-position="left" :model="form" :labelStyle="labelStyle">
               <u-form-item label="账号:" prop="account">
                  <u-input v-model="form.account" color='#fff' placeholder="请输入账号" />
               </u-form-item>
               <u-form-item label="密码:" prop="password">
                  <u-input v-model="form.password" :password-icon="passwordIcon" color='#fff' placeholder="请输入密码"
                     type="password" />
               </u-form-item>
            </u-form>
         </view>
         <view class="loginContent">
            <!-- <p>
               <navigator style="display: inline-block;" url="/pages/login/register/register">
                  <text style="text-decoration: underline">立即注册</text>
               </navigator>
            </p> -->
            <u-button @click="submit">登录</u-button>
         </view>
      </view>
      <ws-wx-privacy id="privacy-popup" enableAutoProtocol></ws-wx-privacy>
   </view>
</template>
<script>
   import {
      login,
      getDic
   } from '@/utils/login.js' // 配置文件
   import {
      httpPost,
      httpGet
   } from '@/utils/http.js'
   import store from '@/store/index.js'
   import {
      subScribeMsg
   } from '@/utils/subscribe.js'
   export default {
      data() {
         return {
            titlePrivacy: '用户隐私保护提示',
            labelStyle: {
               color: '#fff'
            },
            title: '设置头像',
            passwordIcon: false,
            form: {
               account: '',
               password: '',
            },
            rules: {
               account: [{
                  required: true,
                  message: '请输入账号',
                  // 可以单个或者同时写两个触发验证方式
                  trigger: ['change', 'blur'],
               }, ],
               password: [{
                  required: true,
                  message: '请输入密码',
                  trigger: ['change', 'blur'],
               }, ],
            },
         }
      },
      onReady() {
         //onReady 为uni-app支持的生命周期之一
         this.$refs.uForm.setRules(this.rules)
      },
      async onLoad(option) {
         //等待登录成功
         await this.$onLaunched
         // 后续业务逻辑
      },
      async onShow() {
         uni.hideHomeButton()
      },
      methods: {
         // 点击时触发订阅信息
         async aClick() {
            let data = await subScribeMsg()
            console.log('data', data)
            if (data['YNqUZ1MgMvwY3G-NENVbcmIBR5dUotSdnwcz96CWrho'] === 'accept') { // 用户点击确定后
            } else {
               console.log('拒绝')
            }
         },
         doRequire() {
            uni.requirePrivacyAuthorize({
               success: () => {
                  console.log('同意')
                  // 用户同意授权
                  // 继续小程序逻辑
                  this.getlogin()
               },
               fail: () => {
                  console.log('拒绝')
               }, // 用户拒绝授权
               complete: () => {}
            })
         },
         submit() {
            this.$refs.uForm.validate().then(res => {
               this.doRequire()
            }).catch(errors => {})
         },
         //登录
         getlogin() {
            const value = uni.getStorageSync('openId')
            console.log('openId', value)
            if (value) {
               this.aClick()
               this.logining(value)
            }
         },
         logining(openId) {
            login({
               ...this.form,
               openId
            }).then(response => {
               uni.setStorageSync('userInfor', JSON.stringify(response.data))
               uni.setStorageSync('tonken', response.data.token)
               getDic()
               uni.hideLoading()
               uni.navigateTo({
                  url: '/pages/index/index',
               })
            }).catch(errors => {
               uni.showToast({
                  title: errors,
                  icon: 'none',
               })
            })
         }
      },
   }
</script>
<style scoped lang="scss">
   uni-page-body {
      height: 100%;
   }
   .page {
      color: #ffffff;
      background: #3875c5;
      height: 100%;
   }
   .tit {
      padding-top: 307.69rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 53.85rpx;
   }
   .formConten {
      padding: 0 76.92rpx;
      color: #ffffff;
   }
   .u-form-item {
      color: #ffffff;
      font-size: 28.85rpx;
      font-weight: 700;
   }
   // /deep/.uni-input-wrapper {
   //   background: #fff;
   //   border-radius: 5px;
   // }
   // /deep/.uni-input-placeholder {
   //   padding-left: 10px;
   // }
   /deep/.u-form-item__body__left__content__label {
      color: #fff;
   }
   // /deep/.uni-input-input {
   //   padding-left: 10px;
   // }
   .loginContent {
      margin-top: 38.46rpx;
      p {
         text-align: right;
         margin-bottom: 20px;
         a {
            color: #fff;
         }
      }
      .u-btn--default {
         width: 80%;
      }
   }
   uni-navigator {
      display: inline-block;
   }
</style>