mall-front-app/sheep/components/s-auth-modal/components/account-login.vue

<!-- 账号密码登录 accountLogin  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box  ss-flex-col">
      <view class="ss-flex ss-m-b-20">
        
        <view class="head-title ss-m-r-40 head-title-animation">账号登录</view>
		<view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
		  短信登录
		</view>
      </view>
      <!-- <view class="head-subtitle">如果未设置过密码，请点击忘记密码</view> -->
    </view>
	<!-- 用户协议的勾选 -->
	<view
	  v-if="['accountLogin', 'smsLogin'].includes(authType)"
	  class="agreement-box ss-flex ss-row-center"
	  :class="{ shake: currentProtocol }"
	>
	  <label class="radio ss-flex ss-col-center" @tap="onChange">
	    <radio
	      :checked="protocol"
	      color="var(--ui-BG-Main)"
	      style="transform: scale(0.8)"
	      @tap.stop="onChange"
	    />
	    <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
	      我已阅读并遵守
	      <view class="tcp-text" @tap.stop="onProtocol('用户协议')">
	        《用户协议》
	      </view>
	      <view class="agreement-text">与</view>
	      <view class="tcp-text" @tap.stop="onProtocol('隐私协议')">
	        《隐私协议》
	      </view>
	    </view>
	  </label>
	</view>
    <!-- 表单项 -->
    <uni-forms
      ref="accountLoginRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="140"
      labelAlign="center"
	  class="loginUniForm"
    >
      <uni-forms-item name="mobile" label="账号" class="loginUniFormItem">
        <uni-easyinput placeholder="请输入账号" v-model="state.model.mobile" :inputBorder="false">
          <!-- <template v-slot:right>
            <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
              忘记密码
            </button>
          </template> -->
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="password" label="密码" class="loginUniFormItem">
        <uni-easyinput
          type="password"
          placeholder="请输入密码"
          v-model="state.model.password"
          :inputBorder="false"
        >
          <!-- <template v-slot:right>
            <button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
          </template> -->
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>
	<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
		<button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
		  忘记密码
		</button>
		<button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
	</view>
  </view>
</template>

<script setup>
  import { ref, reactive, unref,computed } from 'vue';
  import sheep from '@/sheep';
  import { mobile, password } from '@/sheep/validate/form';
  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
  import AuthUtil from '@/sheep/api/member/auth';

  const accountLoginRef = ref(null);

  const emits = defineEmits(['onConfirm']);

  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  // 数据
  const state = reactive({
    model: {
      mobile: '', // 账号
      password: '', // 密码
    },
    rules: {
      mobile,
      password,
    },
  });
  
  const currentProtocol = ref(false);
  const modalStore = sheep.$store('modal');
  const authType = computed(() => modalStore.auth);
  const protocol = ref(false)
// 勾选协议
  function onChange() {
    protocol.value = !protocol.value;
	console.log(protocol.value)
  }
  // 查看协议
  function onProtocol(title) {
    closeAuthModal();
    sheep.$router.go('/pages/public/richtext', {
      title,
    });
  }
  // 点击登录 / 注册事件
  function onConfirm(e) {
    currentProtocol.value = e;
    setTimeout(() => {
      currentProtocol.value = false;
    }, 1000);
  }
  // 账号登录
  async function accountLoginSubmit() {
    // 表单验证
    const validate = await unref(accountLoginRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
	
    // 同意协议
    if (!protocol.value) {
      // emits('onConfirm', true)
	  onConfirm(true)
	  // console.log("没勾选",protocol)
      sheep.$helper.toast('请勾选同意');
      return;
    }

    // 提交数据
    const { code, data } = await AuthUtil.login(state.model);
    if (code === 0) {
      closeAuthModal();
    }
  }
</script>

<style lang="scss" scoped>
  @import '../index.scss';
  .shake {
    animation: shake 0.05s linear 4 alternate;
  }
  
  @keyframes shake {
    from {
      transform: translateX(-10rpx);
    }
    to {
      transform: translateX(10rpx);
    }
  }
  .agreement-box{
	  margin: 20rpx 0;
  }
  .login-btn-start{
	  background:rgb(14, 147, 46);
	  width:60%
	}
	.loginUniForm{
		border: 1rpx solid #d6d6d6;
		padding:10rpx 15rpx;
		border-radius: 10rpx;
	}
	.loginUniFormItem:first-child{
		border-bottom: 1rpx solid #d6d6d6;
		padding-bottom:10rpx;
	}
	.loginUniFormItem:last-child{
		// border-bottom: 1rpx solid #d6d6d6;
		padding-top:10rpx;
	}
	::v-deep .loginUniFormItem .uni-forms-item__inner{
		padding-bottom: 0;
	}
	::v-deep .loginUniFormItem  .uni-error-message{
		bottom: -20rpx;
	}
</style>