shoot-miniprograms/src/components/Signin.vue

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import SModal from "@/components/SModal.vue";
import Avatar from "@/components/Avatar.vue";
import SButton from "@/components/SButton.vue";

import { wxLogin } from "@/util";
import {
  getMyDevicesAPI,
  loginAPI,
  getHomeData,
  getPhoneNumberAPI,
  getDeviceBatteryAPI,
} from "@/apis";

import useStore from "@/store";
const store = useStore();
const { updateUser, updateDevice, updateOnline } = store;

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  noBg: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: () => {},
  },
});
const agree = ref(false);
const phone = ref("");
const avatarUrl = ref("");
const nickName = ref("");
const loading = ref(false);
const handleAgree = () => {
  agree.value = !agree.value;
};

async function getphonenumber(e) {
  if (e.detail.code) {
    const wxResult = await wxLogin();
    const result = await getPhoneNumberAPI({
      ...e.detail,
      code: wxResult.code,
    });
    if (result.phone) phone.value = result.phone;
  }
}

function onChooseAvatar(e) {
  avatarUrl.value = e.detail.avatarUrl;
}

function onNicknameChange(e) {
  nickName.value = e.detail.value;
}

const handleLogin = async () => {
  if (loading.value) return;
  if (!phone.value) {
    return uni.showToast({
      title: "请获取手机号",
      icon: "none",
    });
  }
  if (!avatarUrl.value) {
    return uni.showToast({
      title: "请选择头像",
      icon: "none",
    });
  }
  if (!nickName.value) {
    return uni.showToast({
      title: "请输入昵称",
      icon: "none",
    });
  }
  if (!agree.value) {
    return uni.showToast({
      title: "请先同意协议",
      icon: "none",
    });
  }
  await doLogin();
};

async function doLogin() {
  loading.value = true;
  try {
    const wxResult = await wxLogin();
    const fileManager = uni.getFileSystemManager();
    const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
    const base64Url = `data:image/png;base64,${avatarBase64}`;
    await loginAPI(phone.value, nickName.value, base64Url, wxResult.code);
    const data = await getHomeData();
    if (data.user) updateUser(data.user);
    const devices = await getMyDevicesAPI();
    if (devices.bindings && devices.bindings.length) {
      updateDevice(
        devices.bindings[0].deviceId,
        devices.bindings[0].deviceName
      );
      const data = await getDeviceBatteryAPI();
      updateOnline(data.online);
    }
    props.onClose();
  } catch (error) {
    console.log("login error", error);
  } finally {
    loading.value = false;
  }
};

const openServiceLink = () => {
  uni.navigateTo({
    url:
      "/pages/webview?url=" +
      encodeURIComponent(
        "https://static.shelingxingqiu.com/shootServiceAgreement.html"
      ),
  });
};

const openPrivacyLink = () => {
  uni.navigateTo({
    url:
      "/pages/webview?url=" +
      encodeURIComponent(
        "https://static.shelingxingqiu.com/shootPrivacyPolicy.html"
      ),
  });
};

onShow(() => {
  loading.value = false;
  agree.value = false;
  phone.value = "";
  avatarUrl.value = "";
  nickName.value = "";
});
</script>

<template>
  <SModal :show="show" :onClose="onClose" :noBg="noBg">
    <view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
      <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
        <text :style="{ color: noBg ? '#666' : '#fff' }">手机:</text>
        <button
          :open-type="!phone ? 'getPhoneNumber' : ''"
          @getphonenumber="getphonenumber"
          class="login-btn"
          hover-class="none"
        >
          <text v-if="phone" :style="{ color: noBg ? '#333' : '#fff' }">{{
            phone
          }}</text>
          <text v-else :style="{ color: noBg ? '#666' : '#fff9' }"
            >点击获取</text
          >
          <image src="../static/enter.png" mode="widthFix" />
        </button>
      </view>
      <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
        <text :style="{ color: noBg ? '#666' : '#fff' }">头像:</text>
        <button
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
          class="login-btn"
          hover-class="none"
        >
          <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
          <text v-else :style="{ color: noBg ? '#666' : '#fff9' }"
            >点击获取</text
          >
          <image src="../static/enter.png" mode="widthFix" />
        </button>
      </view>
      <view
        class="nickname"
        :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }"
      >
        <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
        <input
          type="nickname"
          placeholder="请输入昵称"
          :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
          @change="onNicknameChange"
          @blur="onNicknameBlur"
          :style="{ color: noBg ? '#333' : '#fff' }"
        />
      </view>
      <SButton :rounded="20" width="80vw" :onClick="handleLogin">
        <block v-if="!loading">
          <text :style="{ color: '#000' }">手机号快捷登录</text>
        </block>
        <block v-else>
          <image
            src="../static/btn-loading.png"
            mode="widthFix"
            class="loading"
          />
        </block>
      </SButton>
      <view class="protocol" @click="handleAgree">
        <view
          v-if="!agree"
          :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }"
        />
        <image v-if="agree" src="../static/checked.png" mode="widthFix" />
        <view>
          <text>已同意并阅读</text>
          <view
            @click.stop="openServiceLink"
            :style="{ color: noBg ? '#333' : '#ffffff99' }"
            >《用户协议》</view
          >
          <text>及</text>
          <view
            @click.stop="openPrivacyLink"
            :style="{ color: noBg ? '#333' : '#ffffff99' }"
            >《隐私协议》</view
          >
          <text>内容</text>
        </view>
      </view>
    </view>
  </SModal>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}
.avatar,
.nickname {
  width: 80%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1rpx solid #ffffff1a;
}
.avatar {
  margin: 0;
}
.avatar > text,
.nickname > text {
  width: 20%;
  font-size: 14px;
  line-height: 120rpx;
}
.avatar > button > text {
  color: #fff9;
  font-size: 14px;
}
.nickname > input {
  flex: 1;
  font-size: 14px;
  line-height: 120rpx;
}
.wechat-icon {
  width: 24px;
  height: 24px;
  margin-right: 20px;
}
.protocol {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  margin: 30rpx 0;
  color: #8a8a8a;
}
.protocol > image {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.protocol > view:first-child {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #fff;
}
.protocol > view:last-child {
  display: flex;
  align-items: center;
}
.login-btn {
  line-height: 55px;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-btn > image {
  width: 28rpx;
  height: 28rpx;
}
.loading {
  width: 25px;
  height: 25px;
  background-blend-mode: darken;
  animation: rotate 1s linear infinite;
}
</style>