web-base-h5/pages/login/index.vue

<template>
  <view class="main">
    <view class="title">
      {{ '会员登录' }}
    </view>
    <u-form :model="loginForm" labelWidth="auto" ref="uForm">
      <view class="view-class pa">
        <!-- <view class="account-s">

        </view> -->
        <u-form-item label="" prop="username">
          <u-input
            v-model="loginForm.username"
            clearable
            placeholder-class="place-class"
            class="border-color"
            :placeholder="'会员账号'"
          >
            <image
              class="tou"
              slot="prefix"
              src="../../static/images/login/index-icon4.png"
            ></image>
          </u-input>
        </u-form-item>
        <!-- <view class="close-s"
              v-if="loginForm.username!=''"
              @click="clearAccount">
          <image src="../../static/images/login/index-icon3.png"></image>
        </view> -->
      </view>
      <view class="view-class">
        <!-- <view class="account-s widths">
				<image src="../../static/images/login/index-icon2.png"></image>
			</view> -->
        <u-form-item label="" prop="password">
          <u-input
            placeholder-style="color:#333"
            :type="password"
            class="border-color"
            v-model="loginForm.password"
            :placeholder="'登录密码'"
          >
            <image
              class="mm"
              slot="prefix"
              src="../../static/images/login/index-icon2.png"
            ></image>
            <view slot="suffix">
              <view
                v-if="password == 'text'"
                @click="changeFlagTap('password')"
              >
                <image
                  class="eye"
                  src="../../static/images/login/icon1.png"
                ></image>
              </view>
              <view v-else @click="changeFlagTap('text')">
                <image
                  class="eye"
                  src="../../static/images/login/icon2.png"
                ></image>
              </view>
            </view>
          </u-input>
        </u-form-item>
      </view>
      <view class="view-class">
        <!-- <view class="account-s yzm">
		  	<image src="../../static/images/login/index-icon1.png"></image>
		  </view> -->
        <u-form-item label="" prop="code">
          <u-input
            v-model="loginForm.code"
            placeholder-class="place-class"
            class="border-color"
            :placeholder="'验证码'"
          >
            <image
              class="mm"
              slot="prefix"
              src="../../static/images/login/index-icon1.png"
            ></image>
            <img
              :src="codeUrl"
              slot="suffix"
              style="height: 38px"
              @click="getVerifyCode"
            />
          </u-input>
        </u-form-item>
      </view>
    </u-form>
    <u-button
      type="success"
      shape="circle"
      class="btn"
      :loading="isLoading"
      :loadingText="'登录中'"
      @click="toLogin"
      >{{ '登录' }}</u-button
    >
    <view class="paswwrod_btn" @click="submit">{{ '忘记密码' }}</view>

    <view class="beian-container">
      <div style="height: 25px"></div>
      <div class="beian-content">
        <a
          class="beian-link jicpb"
          href="https://beian.miit.gov.cn/#/Integrated/index"
          target="_blank"
          title="工信部备案查询"
        >
          京ICP备17001692号-12
        </a>
        <!-- <span class="beian-separator">|</span>
        <a
          class="beian-link jgawb"
          href="https://beian.mps.gov.cn/#/query/webSearch?code=11022902000492"
          target="_blank"
          title="公安部备案查询"
        >
          京公网安备11022902000492号
        </a> -->
      </div>
    </view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
      password: 'password',
      index: 0,
      getList: [],
      changeFlag: true,
      isLoading: false,
      loginForm: {
        username: '',
        password: '',
        code: '',
        uuid: '',
      },
      codeUrl: '',
      getLanguageList: [],
    }
  },
  onLoad() {
    this.getVerifyCode()
    this.loginForm.username = uni.getStorageSync('username') || ''
    // this.getLanguage()
  },
  methods: {
    changeFlagTap(text) {
      this.password = text
    },
    submit() {
      uni.navigateTo({
        url: '/pages/forgetPassword/index',
      })
    },
    bindPickerChange(e) {
      this.index = e.detail.value
    },
    clearAccount() {
      this.loginForm.username = ''
    },
    getVerifyCode() {
      api.captchaImage().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.loginForm.uuid = res.uuid
      })
    },
    toLogin() {
      api.login(this.loginForm).then(res => {
        this.isLoading = false
        if (!res) {
          // uni.showToast({
          //   title: res.msg,
          //   icon: 'none',
          //   duration: 1500,
          // })
          this.getVerifyCode()
        } else if (res.code == 500) {
          this.getVerifyCode()
        } else {
          uni.setStorageSync('username', this.loginForm.username)
          setToken(res.data.access_token)
          this.getUseInfo()
        }
      })
    },
    urlToBase64(url) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: url,
          method: 'GET',
          responseType: 'arraybuffer',
          success: res => {},
          fail: err => {
            reject(err)
          },
        })
      })
    },
    getUseInfo() {
      store.dispatch('GetInfo').then(res => {
        uni.switchTab({ url: '/pages/index/index' })
        // 目前强制跳首页
        // if (res.data.loginType == 1) {
        //   uni.redirectTo({ url: '/pages/specialMember/index' })
        // } else {
        //   if (res.data.registerFans == 0) {
        //     uni.redirectTo({ url: '/pages/shareArea/index?specialArea=7' })
        //   } else if (res.data.registerShare == 0) {
        //     // uni.redirectTo({ url: '/pages/shareArea/haiNdex?specialArea=21 ' })
        //     uni.switchTab({ url: '/pages/index/index' })
        //   } else {
        //     uni.switchTab({ url: '/pages/index/index' })
        //   }
        // }
      })
      // api.getInfo().then((res) => {
      //   uni.setStorage('User', res.data)

      // })
    },
  },
}
</script>

<style lang="scss" scoped>
page,
body {
  background-color: #fff !important;
}
::placeholder {
  color: #333;
}
.style-s {
  height: 68rpx;
  margin-left: 40rpx !important;
  color: #333;
  font-size: 28rpx;
  border: none !important;

  outline: none;
  -webkit-appearance: button;
  -webkit-appearance: none;
  border-radius: 0;
  background: none;
  border: none;
}
.select-text {
  display: flex;
}
.selIcon {
  width: 40rpx;
  height: 40rpx;
}
.changeLanguages {
  position: absolute;
  right: 30rpx;
  top: 0;
}
.paswwrod_btn {
  color: #666666;
  font-size: 26rpx;
  margin: 40rpx auto;
  text-align: center;
}
.btn {
  background-color: #005bac;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 36rpx;
  margin: 110rpx auto 0 auto;
}
.close-s {
  position: absolute;
  top: 35rpx;
  right: 40rpx;
  image {
    width: 25rpx;
    height: 25rpx;
  }
}
.right-s {
  position: absolute;
  top: 35rpx;
  right: 40rpx;
  image {
    width: 45rpx;
    height: 45rpx;
  }
}
.place-class {
  color: #333 !important;
}
.border-color {
  background: none;
  width: 100%;
  border: none;
  // margin-left: 30rpx;
}
.main {
  padding: 20rpx 40rpx;
}
.title {
  font-size: 52rpx;
  font-weight: bold;
  margin: 120rpx auto;
  text-align: center;
}
.view-class {
  // display: flex;
  background: #f2f2f2;
  border-radius: 46rpx;
  padding: 0 20rpx;
  // position: relative;
  margin-bottom: 30rpx;
}
.widths {
  image {
    width: 28rpx !important;
  }
}
.yzm {
  image {
    width: 26rpx !important;
    height: 30rpx !important;
  }
}
.account-s {
  display: flex;
  align-items: center;
  // line-height: 50%;
  height: 105rpx;
  position: absolute;
  // top: 38rpx;
  image {
    width: 34rpx;
    height: 34rpx;
  }
}
.tou {
  width: 34rpx;
  height: 34rpx;
}
.mm {
  width: 34rpx !important;
  height: 34rpx !important;
}
.eye {
  width: 45rpx !important;
  height: 45rpx !important;
  padding-top: 10px;
}
.pa {
  padding: 7px 20rpx;
}

/* 备案容器 */
.beian-container {
  background-color: #ffffff; /* 深色背景 */
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 20px;
  border-radius: 8px 8px 0 0;
}

/* 备案内容 */
.beian-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 备案链接 */
.beian-link {
  color: #749ae3;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-block;
}

/* 悬停效果 */
.beian-link:hover {
  color: #fff;
  background-color: rgba(116, 154, 227, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(116, 154, 227, 0.3);
}

/* 分隔符 */
.beian-separator {
  color: #749ae3;
  opacity: 0.6;
}

/* 响应式设计 */
@media screen and (max-width: 480px) {
  .beian-content {
    flex-direction: column;
    gap: 8px;
  }

  .beian-separator {
    display: none;
  }

  .beian-link {
    font-size: 11px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.beian-container {
  animation: fadeIn 0.5s ease-out;
}
</style>