jdt-user/src/pages/users/login/index.vue

<script setup lang="ts">
import Taro from '@tarojs/taro';
import UserModal from '@/components/UserModal.vue';
import { ref } from 'vue';
import { getPhone, login, getPersonalInfo } from '@/api/user';
// import logoImg from '../../../static/logo.jpg';
import { Left, Home } from '@nutui/icons-vue-taro';

const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
const BarHeight = ref((statusBarHeight as number) - 7);

const appName = process.env.TARO_APP_NAME;

const logoImg = require(process.env.TARO_APP_LOGO_IMG as string);
// const logoImg = process.env.TARO_APP_LOGO_IMG;

const isShow = ref(false);

const val = ref(false);

const returns = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const goHome = () => {
  Taro.switchTab({
    url: '/pages/index/index',
  });
};

const getCode = () => {
  if (!val.value)
    return Taro.showToast({
      title: '请先阅读并同意用户协议&隐私政策&积分使用规则',
      icon: 'none',
    });
  Taro.showLoading({
    title: '授权中...',
    mask: true,
  });
  Taro.login({
    success: res => {
      console.log(res);
      Taro.setStorageSync('wx_code', res.code);
      isShow.value = true;
    },
    complete: () => {
      Taro.hideLoading();
    },
  });
};

const userInfo = ref({
  phone: '',
});

const optData = ref<any>({});

Taro.useLoad(opt => {
  optData.value = opt;
});

const getPhoneNumber = async (e: any) => {
  // console.log(val.value);
  if (!val.value) {
    return Taro.showToast({
      title: '请先阅读并同意用户协议&隐私政策&积分使用规则',
      icon: 'none',
    });
  } else {
    Taro.showLoading({
      title: '授权手机号中',
      mask: true,
    });
    const { code } = e.detail;
    const res = await getPhone({
      code: code,
    });
    userInfo.value.phone = res.data.phone;
    if (!res.data.phone)
      return Taro.showToast({
        title: '手机号获取失败',
        icon: 'none',
      });
    Taro.login({
      success: async res => {
        Taro.setStorageSync('wx_code', res.code);
        const ress = await login({
          Code: Taro.getStorageSync('wx_code'),
          Phone: userInfo.value.phone,
          Referee: Taro.getStorageSync('bind_id') || '',
        });
        Taro.showToast({
          title: ress.msg,
          icon: 'success',
          duration: 2000,
        });
        Taro.setStorageSync('token', ress.data.token);
        if (optData.value.isBack !== 'undefined' && optData.value.isBack) {
          await getUserInfo();
          Taro.navigateBack({
            delta: 1,
          });
        } else {
          setTimeout(() => {
            Taro.removeStorageSync('wx_code');
            Taro.removeStorageSync('bind_id');
            Taro.switchTab({
              url: '/pages/user/index',
            });
          }, 2000);
        }
      },
      complete: () => {
        Taro.hideLoading();
      },
    });
  }
};

const getUserInfo = async () => {
  const res = await getPersonalInfo();
  const userInfo = {
    ...res.data,
    data: {
      ...res.data.data,
      permission: res.data.data.permission
        ? JSON.parse(res.data.data.permission)
        : {},
    },
  };
  Taro.setStorageSync('userInfo', userInfo);
};

const toPage = () => {
  if (!val.value)
    return Taro.showToast({
      title: '请先阅读并同意用户协议&隐私政策&积分使用规则',
      icon: 'none',
    });
  Taro.navigateTo({
    url: `/pages/users/bindPhone/index?type=1&isBack=${optData.value.isBack}`,
  });
};

const clickText = (type: number, text: string) => {
  Taro.navigateTo({
    url: `/pages/users/user_agreement/index?type=${type}&name=${text}`,
  });
};
</script>

<template>
  <view class="wrapper">
    <view class="head-wrapper" :style="{ top: BarHeight + 'px' }">
      <view class="head-menu">
        <!-- <Left class="iconfont" @click="returns" /> -->
        <Home class="iconfont" @click="goHome" />
      </view>
    </view>
    <image src="../../../static/wechat_login.jpg" />
    <view class="logo">
      <image :src="logoImg"></image>
      <view>{{ appName }}</view>
    </view>
    <view class="center">
      <nut-button
        type="primary"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        >手机号一键登录
      </nut-button>
      <nut-button style="margin-top: 15px" @click="toPage"
        >手机号登录/注册
      </nut-button>
    </view>
    <view class="checkbox">
      <nut-checkbox v-model="val"></nut-checkbox>
      <view class="text">
        阅读并同意
        <view style="color: #fa2c1a" @click.stop="clickText(1, '用户协议')">
          用户协议
        </view>
        &
        <view style="color: #fa2c1a" @click.stop="clickText(2, '隐私政策')">
          隐私政策
        </view>
        &
        <view style="color: #fa2c1a" @click.stop="clickText(3, '积分使用规则')">
          积分使用规则
        </view>
      </view>
    </view>
    <UserModal v-model:isShow="isShow" @closeEdit="isShow = false" />
  </view>
</template>

<style lang="scss">
page {
  background: #fff;
}

.wrapper {
  position: relative;

  image {
    width: 100%;
    height: 838px;
  }

  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 35px;
    line-height: 70px;

    image {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
  }

  .center {
    position: absolute;
    top: 80%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 100px;
  }
}

.checkbox {
  position: absolute;
  bottom: -15%;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;

  .nut-checkbox__label {
    margin-left: -60px;
  }

  .text {
    display: flex;
  }
}

.head-wrapper {
  z-index: 999;
  display: flex;
  align-items: center;
  position: fixed;
  left: 30px;
  top: 0;
  //height: 114px;
}

.head-menu {
  display: flex;
  align-items: center;
  height: 54px;
  width: 100px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 27px;

  .iconfont {
    flex: 1;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
  }
}
</style>