css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/meeting/login/login.vue

@@ -1,139 +1,173 @@
<template>
   <view class="login">

      <!-- 头部背景图片 -->
      <view class="login_head"

      :style="{ height: 'calc(' + height + ' + ' + '388rpx)', backgroundImage: 'url(' + backgroundImage + ')' }"></view>

		
      <!-- 登录框 -->

      <view class="login_box">

         <view class="login_box_input">

            <input type="text" v-model="from.account" placeholder="请输入账号名称" placeholder-class="placeholder" />

         </view>

         <view class="login_box_input">

            <input type="password" v-if="!isOpen" v-model="from.password" placeholder="请输入密码" placeholder-class="placeholder" />

            <input type="text" v-else v-model="from.password" placeholder="请输入密码" placeholder-class="placeholder" />

            <u-icon name="eye-fill" color="#999999" size="20" v-if="!isOpen" @click="isOpen = true"></u-icon>

            <u-icon name="eye-off" color="#999999" size="20" v-else @click="isOpen = false"></u-icon>

         </view>

         <view class="login_box_sub" @click="login">登录</view>

      </view>

		
      <u-toast ref="uToast"></u-toast>
   </view>
</template>

<template>

  <view class="login">

    <!-- 头部背景图片 -->

    <view

      class="login_head"

      :style="{

        height: 'calc(' + height + ' + ' + '388rpx)',

        backgroundImage: 'url(' + backgroundImage + ')',

      }"

    ></view>



    <!-- 登录框 -->

    <view class="login_box">

      <view class="login_box_input">

        <input

          type="text"

          v-model="from.account"

          placeholder="请输入账号名称"

          placeholder-class="placeholder"

        />

      </view>

      <view class="login_box_input">

        <input

          type="password"

          v-if="!isOpen"

          v-model="from.password"

          placeholder="请输入密码"

          placeholder-class="placeholder"

        />

        <input

          type="text"

          v-else

          v-model="from.password"

          placeholder="请输入密码"

          placeholder-class="placeholder"

        />

        <u-icon

          name="eye-fill"

          color="#999999"

          size="20"

          v-if="!isOpen"

          @click="isOpen = true"

        ></u-icon>

        <u-icon

          name="eye-off"

          color="#999999"

          size="20"

          v-else

          @click="isOpen = false"

        ></u-icon>

      </view>

      <view class="login_box_sub" @click="login">登录</view>

    </view>



    <u-toast ref="uToast"></u-toast>

  </view>

</template>



<script>

   import { mapState, mapMutations } from 'vuex'

	
   export default {
      data() {
         return {
            backgroundImage: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png',

            from: {

               account: '',

               password: ''

            },

            isOpen: false
         };
      },

      computed: {

         ...mapState(['statusbarHeight', 'navHeight']),

			
         height() {

            return `${this.statusbarHeight + this.navHeight}px`;

         }

      },

      methods: {

         ...mapMutations(["setToken", "setUserInfo"]),

			
         login() {

            if (!this.from.account) return this.$refs.uToast.show({ message: '账号不能为空' })

            if (!this.from.password) return this.$refs.uToast.show({ message: '密码不能为空' })

            var that = this

            that.$u.api.ordinaryLogin(that.from)

               .then(res => {

                  if (res.code === 200) {

                     that.setToken(res.data.token)

                     that.setUserInfo(res.data.userResponse)

                     uni.login({

                        provider: 'MP-WEIXIN',

                        success: function (loginRes) {

                           that.$u.api.wxEmpower({ code: loginRes.code })

                              .then(resa => {

                                 uni.switchTab({

                                    url: '/pages/index/index'

                                 });

                              })

                        }

                     });

                  }

               })

         }

      }
   }
</script>
import { mapState, mapMutations } from 'vuex'



export default {

  data() {

    return {

      backgroundImage: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png',

      from: {

        account: '',

        password: ''

      },

      isOpen: false

    }

  },

  computed: {

    ...mapState(['statusbarHeight', 'navHeight']),



    height() {

      return `${this.statusbarHeight + this.navHeight}px`

    }

  },

  methods: {

    ...mapMutations(["setToken", "setUserInfo"]),



    login() {

      if (!this.from.account) return this.$refs.uToast.show({ message: '账号不能为空' })

      if (!this.from.password) return this.$refs.uToast.show({ message: '密码不能为空' })

      var that = this

      that.$u.api.ordinaryLogin(that.from)

        .then(res => {

          if (res.code === 200) {

            that.setToken(res.data.token)

            that.setUserInfo(res.data.userResponse)

            uni.login({

              provider: 'MP-WEIXIN',

              success: function (loginRes) {

                that.$u.api.wxEmpower({ code: loginRes.code })

                  .then(resa => {

                    uni.switchTab({

                      url: '/pages/index/index'

                    })

                  })

              }

            })

          }

        })

    }

  }

}

</script>



<style>

   page {

      background-color: #fff !important;

   }

page {

  background-color: #fff !important;

}

</style>


<style lang="scss">


<style lang="scss">

.login {

   width: 100%;

   .login_head {

      width: 100%;

      background-repeat: no-repeat;

      background-size: 100%;

   }

   .login_box {

      width: 100%;

      position: relative;

      top: -114rpx;

      padding: 80rpx 60rpx;

      box-sizing: border-box;

      background-color: #ffffff;

      border-radius: 48rpx 48rpx 0rpx 0rpx;

      .login_box_input {

         width: 100%;

         height: 100rpx;

         display: flex;

         align-items: center;

         background: #F7F7F7;

         border-radius: 4rpx;

         margin-bottom: 40rpx;

         padding: 0 40rpx;

         box-sizing: border-box;

         .placeholder {

            font-size: 30rpx;

            font-family: PingFangSC-Regular, PingFang SC;

            font-weight: 400;

            color: #999999;

         }

         input {

            width: 100%;

            height: 100%;

            font-size: 30rpx;

            font-family: PingFangSC-Regular, PingFang SC;

            font-weight: 400;

            color: #000000;

            margin-right: 20rpx;

         }

      }

      .login_box_sub {

         width: 100%;

         height: 100rpx;

         line-height: 100rpx;

         text-align: center;

         background: #0055FF;

         border-radius: 4rpx;

         font-size: 32rpx;

         font-family: PingFangSC-Medium, PingFang SC;

         font-weight: 500;

         color: #FFFFFF;

         margin-top: 60rpx;

      }

   }

}
</style>
  width: 100%;

  .login_head {

    width: 100%;

    background-repeat: no-repeat;

    background-size: 100%;

  }

  .login_box {

    width: 100%;

    position: relative;

    top: -114rpx;

    padding: 80rpx 60rpx;

    box-sizing: border-box;

    background-color: #ffffff;

    border-radius: 48rpx 48rpx 0rpx 0rpx;

    .login_box_input {

      width: 100%;

      height: 100rpx;

      display: flex;

      align-items: center;

      background: #f7f7f7;

      border-radius: 4rpx;

      margin-bottom: 40rpx;

      padding: 0 40rpx;

      box-sizing: border-box;

      .placeholder {

        font-size: 30rpx;

        font-family: PingFangSC-Regular, PingFang SC;

        font-weight: 400;

        color: #999999;

      }

      input {

        width: 100%;

        height: 100%;

        font-size: 30rpx;

        font-family: PingFangSC-Regular, PingFang SC;

        font-weight: 400;

        color: #000000;

        margin-right: 20rpx;

      }

    }

    .login_box_sub {

      width: 100%;

      height: 100rpx;

      line-height: 100rpx;

      text-align: center;

      background: #0055ff;

      border-radius: 4rpx;

      font-size: 32rpx;

      font-family: PingFangSC-Medium, PingFang SC;

      font-weight: 600;

      color: #ffffff;

      margin-top: 60rpx;

    }

  }

}

</style>