chelvc-custom/src/pages/login/index.vue

<template>
  <view class="container">
    <view class="t-b">{{ headline }}</view>
    <view class="t-b2">欢迎使用车旅程，为你提供便捷服务</view>

    <!-- 中间登录注册按钮 -->
    <view class="login-btn-wrap">
      <u-button
        shape="circle"
        type="primary"
        :loading="loading"
        :customStyle="buttonStyleTop"
        @tap="login"
      >
        微信用户一键登录
      </u-button>
      <u-button
        shape="circle"
        :customStyle="buttonStyleButton"
        @tap="$Router.push('/pages/login/phoneLogin')"
      >
        手机号登录/注册
      </u-button>
    </view>
    <br />

    <!-- 底部协议 -->
    <view class="agree">
      <u-checkbox-group v-model="checked">
        <u-checkbox shape="circle" name="1" />
      </u-checkbox-group>
      <view>我已阅读并同意</view>
      <view @click="clickAgreement('用户协议')" class="agreement">《用户协议》</view>
      <view @click="clickAgreement('隐私政策')" class="agreement">《隐私政策》</view>
    </view>

    <!-- 第三方 -->
    <view class="t-f"><text>————— 第三方账号登录 —————</text></view>
    <view class="t-e cl">
      <view class="t-g" @click="$Router.push('/pages/login/phoneLogin')">
        <image src="@/static//icon/phone.png" />
      </view>
      <view class="t-g">
        <image src="@/static//icon/qq.png" />
      </view>
    </view>

    <!-- 用户协议 -->
    <userAgreement v-if="show" :title="title" :show="show" @handleConfirm="handleConfirm" />

    <u-modal
      @confirm="confirmTips"
      :show="showTips"
      title="确认提示"
      content="我已阅读并同意《用户协议》和 《隐私政策》"
    ></u-modal>
  </view>
</template>

<script>
import { getWxLoginCode } from '@/api/login.js';
import userAgreement from '@/components/userAgreement/userAgreement.vue';
export default {
  components: {
    userAgreement,
  },
  data() {
    return {
      showTips: false,
      isUserAgreement: false,
      loading: false,
      headline: '欢迎登录车旅程！',
      form: {
        client_id: 'chelvc_client',
        client_secret: 'qWBe6jD%GCuPPTkP',
        grant_type: 'wechat',
        token: '',
      },
      checked: [],
      title: '',
      show: false,
      showUserAgreementDialog: false,
      showPrivacyPolicyDialog: false,
      buttonStyleTop: {
        'font-size': '28rpx',
        background: '#5677fc',
        color: '#fff',
        height: '90rpx',
        'line-height': '90rpx',
        'border-radius': '50rpx',
        'box-shadow': '0 5px 7px 0 rgba(86, 119, 252, 0.2)',
        marginTop: '30rpx',
      },
      buttonStyleButton: {
        'font-size': '28rpx',
        background: '#fff',
        color: '#333',
        height: '90rpx',
        'line-height': '90rpx',
        'border-radius': '50rpx',
        'box-shadow': '0 5px 7px 0 rgba(235, 237, 245, 0.2)',
        marginTop: '30rpx',
      },
    };
  },

  methods: {
    confirmUserAgreement() {
      // 确认按钮点击事件处理
      if (!this.checked.length) {
        this.showUserAgreementDialog = true;
      } else {
        this.showPrivacyPolicyDialog = true;
      }

      // 在确认按钮点击后执行页面跳转的代码
      this.$Router.back();
    },

    //点击用户协议
    clickAgreement(title) {
      this.show = true; //打开弹框
      this.title = title; //赋值标题
    },

    //点击用户协议弹框内的确定
    handleConfirm() {
      this.show = false; //关闭弹框
    },

    confirmTips() {
      this.showTips = false;
      this.checked = ['1'];
      this.login();
    },

    //点击微信用户一键登录
    async login() {
      console.log('this.checked', this.checked);
      if (this.checked && this.checked.length == 0) {
        // uni.$u.toast('请阅读并同意《用户协议》和 《隐私政策》');
        this.showTips = true;
        return;
      }
      if (this.checked.length !== 0) {
        this.loading = true;
        this.form.token = await getWxLoginCode();
        this.$store
          .dispatch('LoginByWxCode', this.form)
          .then(() => {
            uni.setStorageSync('tabbar_type', true);
            this.$Router.pushTab('/pages/client/tabBar/home/index');
            this.loading = false;
            uni.$u.toast('登录成功');
          })
          .catch(() => {
            this.loading = false;
            uni.$u.toast('登录失败');
          });
      } else {
        this.show = !this.show;
      }
    },
    confirm() {
      if (!this.checked.length) {
        this.showUserAgreementDialog = true;
      } else {
        this.showPrivacyPolicyDialog = true;
      }
    },

    closeUserAgreementDialog() {
      this.showUserAgreementDialog = false;
    },
    closePrivacyPolicyDialog() {
      this.showPrivacyPolicyDialog = false;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  padding: 0 70rpx;
  background-color: #f2f5f9;
  .t-b {
    text-align: left;
    font-size: 46rpx;
    color: #000;
    padding: 150rpx 0 30rpx 0;
    font-weight: bold;
  }
  .t-b2 {
    text-align: left;
    font-size: 32rpx;
    color: #aaaaaa;
    padding: 0rpx 0 80rpx 0;
  }

  .login-btn-wrap {
    margin-top: 50rpx;
    width: 100%;
  }
}

.agree {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 27rpx;
  margin-top: 20rpx;
  .agreement {
    color: #3c9cff;
    cursor: pointer;
  }
}

.t-f {
  text-align: center;
  margin: 200rpx 0 0 0;
  color: #666;

  text {
    margin-left: 20rpx;
    color: #aaaaaa;
    font-size: 27rpx;
  }
}

.t-e {
  text-align: center;
  width: 250rpx;
  margin: 20rpx auto 0;
  .t-g {
    float: left;
    width: 50%;
  }

  image {
    width: 50rpx;
    height: 50rpx;
  }
}
</style>