fix:立行立改Uniapp小程序新建项目

quanyawei

2023-10-20 d8b41fff43a2cee6a8f714ffa807623b15803786

 pages/login/login.vue

New file
@@ -0,0 +1,173 @@
<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>
   </view>
</template>
<script>
   import {
      login,
      getUserInfor,
      getDic
   } from '@/utils/login.js' // 配置文件
   import {
      httpPost,
      httpGet
   } from '@/utils/http.js'
   export default {
      data() {
         return {
            labelStyle: {
               color: '#fff'
            },
            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)
      },
      methods: {
         submit() {
            this.$refs.uForm.validate().then(res => {
               this.getlogin()
            }).catch(errors => {
               uni.$u.toast('校验失败')
            })
         },
         //登录
         getlogin() {
            let openId = this.$storage.get('openId')
            login({
               ...this.form,
               openId
            }).then(response => {
               this.$storage.set('token', response.data.token)
               getDic()
               getUserInfor(response.data.token)
               uni.hideLoading()
               uni.switchTab({
                  url: '/pages/actionChange/agencyPage/index',
               })
               // this.$storage.setJson("accountInFor", this.form);
               // console.log('this.$store', this.$store)
               // this.$store.commit('token', token)
            }).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>