代码初始化

k94314517

2024-10-16 17efddc6a667670dca682bf36b51a43e99615e6d

 h5/pages/staffLogin/login.vue

@@ -6,66 +6,146 @@
    <view class="login_list">
      <view class="login_list_item">
        <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
        <input
          v-model="form.account"
          maxlength="18"
          placeholder="账号"
        />
        <input v-model="form.username" maxlength="18" placeholder="账号" />
      </view>
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input v-model="form.password" type="password" placeholder="密码" />
      </view>
      <view class="login_list_item">
        <image src="@/static/ic_captcha.png" mode="widthFix"></image>
        <input v-model="form.code" placeholder="验证码" type="text" />
        <image
          @click="initCaptcha"
          :src="captcha.image"
          class="captcha"
          mode="widthFix"
        />
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n" @click="onLogin">立即登录</view>
      <view class="for_psd">忘记密码</view>
      <view @click="$jump('/pages/staffLogin/forgetPsd')" class="for_psd"
        >忘记密码</view
      >
    </view>

    <view class="deal_wrap">
      <checkbox @change="dealChange" />
      <image
        @click="changeFalg"
        v-if="ProtocolFlag"
        src="@/static/checkbox_sel@2x.png"
        mode="widthFix"
        class="checked"
      ></image>
      <image
        @click="changeFalg"
        v-if="!ProtocolFlag"
        src="@/static/meeting/icon/ic_choose@2x.png"
        mode="widthFix"
        class="checked"
      ></image>
      <text>登录即同意</text>
      <text class="deal">《安泰物流用户协议》</text>
      <text class="deal" @click="showContent">《安泰物流用户协议》</text>
    </view>
    <!--  -->
    <u-popup
      :show="isShowProtocol"
      @close="isShowProtocol = false"
      :round="8"
      mode="center"
    >
      <view class="modal">
        <view v-html="htmlText"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { loginPost } from '@/api'
import { loginPost, loginCaptcha, getUserInfo, getSystemDictData } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'login',

  data() {
    return {
      form: {
        account: '',
        password: '',
      }
        username: '18056814089',
        password: '123456',
            code: 1
      },
      isShowProtocol: false,
      ProtocolFlag: true,
      captcha: {},
      htmlText: ''
    }
  },

  created() {
  onLoad() {
    this.initCaptcha()
  },

  onBackPress(options) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
    return true
  },
  methods: {
    dealChange(e) {
      console.log(e)
    ...mapMutations(["setToken", "setUserInfo"]),
    changeFalg() {
      this.ProtocolFlag = !this.ProtocolFlag
    },
    getContent() {
      getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'USER_PROTOCOL'
      }).then(res => {
        this.htmlText = res.data.code
        this.isShowProtocol = true
      })
    },
    showContent() {
      this.getContent()
    },
    initCaptcha() {
      loginCaptcha().then(res => {
        this.captcha = res.data
      })
    },

    onLogin() {
      const { form } = this
      if (!form.account) return uni.showToast({
        title: '账号后不能为空',
      const { form, ProtocolFlag } = this
      if (!ProtocolFlag) return uni.showToast({
        title: '请先阅读并同意用户协议',
        icon: 'none'
      })
      if (!form.username) return uni.showToast({
        title: '账号不能为空',
        icon: 'none'
      })
      if (!form.password) return uni.showToast({
        title: '密码不能为空',
        icon: 'none'
      })
      if (!form.code) return uni.showToast({
        title: '验证码不能为空',
        icon: 'none'
      })
      loginPost({
        ...form,
        uuid: this.captcha.uuid,
        openId: this.$store.state.openId
      }).then(res => {
        console.log('res', res);
        if (res.code === 200) {
          this.setToken(res.data)
          getUserInfo().then(ress => {
            this.setUserInfo(ress.data)
            uni.redirectTo({
              url: "/pages/staff/index"
            })
          })
        }
      })
    }
  }
@@ -77,7 +157,7 @@
  width: 100%;
  height: 100vh;
  display: flex;
  padding-top: 160rpx;
  padding-top: 130rpx;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
@@ -100,7 +180,7 @@
    font-weight: 600;
    color: #333333;
    margin-top: 40rpx;
    margin-bottom: 120rpx;
    margin-bottom: 80rpx;
  }
  .login_list {
    width: 100%;
@@ -125,6 +205,9 @@
        width: 40rpx;
        height: 40rpx;
      }
      .captcha {
        width: 200rpx;
      }
      input {
        flex: 1;
        height: 100%;
@@ -138,10 +221,9 @@
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    margin-top: 80rpx;
    margin-top: 60rpx;
    .for_psd {
      color: #279baa;
      margin-top: 40rpx;
      color: $uni-color-primary;
      width: 140rpx;
      text-align: center;
      margin: 40rpx auto;
@@ -149,12 +231,12 @@
    .login_btn_n {
      width: 100%;
      height: 98rpx;
      background: #279baa;
      background: $uni-color-primary;
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      border-radius: 50rpx;
@@ -165,10 +247,24 @@
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 108rpx;
    bottom: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .deal {
      color: #279baa;
      color: $uni-color-primary;
    }
    .checked {
      width: 48rpx;
      margin-right: 12rpx;
    }
  }
}
.modal {
  width: 690rpx;
  min-height: 920rpx;
  max-height: 720px;
  border-radius: 24rpx;
  padding: 32rpx;
}
</style>