shanxia2.0/miniprogram/pages/login/login.vue

<script setup>
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { DEFAULT_PLACEHOLDER_IMAGE_URL } from '@/utils/staticAsset'

const userStore = useUserStore()

const form = ref({
  username: '',
  password: ''
})

const isLoading = ref(false)
const agreeProtocol = ref(false)
const loginDisabled = computed(() => isLoading.value)
const protocolDialogVisible = ref(false)
let protocolDialogResolver = null

onShow(() => {
  userStore.checkLoginStatus()
  if (userStore.isLoggedIn) {
    userStore.navigateToHome()
  }
})

const loginPageStyle = computed(() => ({ '--theme-color': '#0a9f6d' }))

const handleSubmit = async () => {
  if (!agreeProtocol.value) {
    const shouldContinue = await new Promise((resolve) => {
      protocolDialogResolver = resolve
      protocolDialogVisible.value = true
    })
    if (!shouldContinue) return
    agreeProtocol.value = true
  }
  if (!form.value.username) {
    uni.showToast({ title: '请输入用户名', icon: 'none' })
    return
  }
  if (!form.value.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' })
    return
  }

  isLoading.value = true
  try {
    const success = await userStore.login({
      username: form.value.username,
      password: form.value.password
    })
    if (success) {
      userStore.navigateToHome()
    }
  } finally {
    isLoading.value = false
  }
}

const goUserAgreement = () => {
  uni.navigateTo({ url: '/pages/login/user-agreement' })
}

const goPrivacyPolicy = () => {
  uni.navigateTo({ url: '/pages/login/privacy-policy' })
}

const toggleProtocolAgreement = () => {
  agreeProtocol.value = !agreeProtocol.value
}

const resolveProtocolDialog = (confirmed) => {
  protocolDialogVisible.value = false
  if (protocolDialogResolver) {
    protocolDialogResolver(confirmed)
    protocolDialogResolver = null
  }
}
</script>

<template>
  <view class="login-page" :style="loginPageStyle">
    <!-- 背景装饰 -->
    <view class="login-bg">
      <view class="bg-circle circle-1"></view>
      <view class="bg-circle circle-2"></view>
      <view class="bg-circle circle-3"></view>
    </view>

    <view class="login-content">
      <view class="logo-section">
        <image class="logo-image" :src="DEFAULT_PLACEHOLDER_IMAGE_URL" mode="aspectFit" />
        <text class="app-name">山峡化工</text>
        <text class="app-slogan">一体化业务移动端</text>
      </view>

      <view class="login-form">
        <view class="form-item">
          <text class="form-label">用户名</text>
          <view class="form-input-box">
            <uni-icons class="form-input-ico" type="person" size="18" color="#c0c4cc" />
            <input
              v-model="form.username"
              class="form-input"
              type="text"
              placeholder="请输入用户名"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">密码</text>
          <view class="form-input-box">
            <uni-icons class="form-input-ico" type="locked" size="18" color="#c0c4cc" />
            <input
              v-model="form.password"
              class="form-input"
              type="password"
              placeholder="请输入密码"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>

        <view class="form-actions">
          <button class="btn-login" :disabled="loginDisabled" @click="handleSubmit">
            <text v-if="isLoading" class="btn-login-text">登录中...</text>
            <text v-else class="btn-login-text">账号密码登录</text>
          </button>
        </view>
      </view>

      <view class="login-footer">
        <view class="footer-line">
          <view class="agree-check" @tap="toggleProtocolAgreement">
            <view class="agree-check__icon" :class="{ 'agree-check__icon--checked': agreeProtocol }">
              <text class="agree-check__tick">✓</text>
            </view>
          </view>
          <text class="footer-text">登录即表示同意</text>
          <text class="link" @tap="goUserAgreement">《用户服务协议》</text>
          <text class="footer-text">和</text>
          <text class="link" @tap="goPrivacyPolicy">《隐私政策》</text>
        </view>
      </view>
    </view>

    <view v-if="protocolDialogVisible" class="protocol-dialog-mask" @tap="resolveProtocolDialog(false)">
      <view class="protocol-dialog" @tap.stop>
        <text class="protocol-dialog__title">协议确认</text>
        <text class="protocol-dialog__desc">登录前请先同意《用户服务协议》和《隐私政策》</text>
        <view class="protocol-dialog__actions">
          <view class="protocol-dialog__btn protocol-dialog__btn--cancel" @tap="resolveProtocolDialog(false)">否</view>
          <view class="protocol-dialog__btn protocol-dialog__btn--confirm" @tap="resolveProtocolDialog(true)">是，继续登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fff8 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  /* 与 placeholder 同色，供图标 mask 与 :deep(.input-placeholder) 共用 */
  --login-input-placeholder: #c0c4cc;
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.login-bg .bg-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--theme-color);
  opacity: 0.05;
}

.login-bg .circle-1 {
  width: 400rpx;
  height: 400rpx;
  top: -100rpx;
  right: -100rpx;
}

.login-bg .circle-2 {
  width: 300rpx;
  height: 300rpx;
  top: 300rpx;
  left: -150rpx;
}

.login-bg .circle-3 {
  width: 200rpx;
  height: 200rpx;
  bottom: 100rpx;
  right: -50rpx;
}

.login-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(120rpx + var(--sq-safe-top, env(safe-area-inset-top, 0px))) 40rpx 60rpx;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.logo-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 24rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: 700;
  color: #303133;
  margin-top: 30rpx;
}

.app-slogan {
  font-size: 28rpx;
  color: #909399;
  margin-top: 12rpx;
}

.login-form {
  background: #fff;
  border-radius: 24rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 36rpx;
}

.form-item:last-of-type {
  margin-bottom: 50rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #303133;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.form-input-box {
  display: flex;
  align-items: center;
  height: 88rpx;
  background: #f5f7fa;
  border-radius: 16rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.form-input-ico {
  margin-right: 10rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 28rpx;
  color: #303133;
  line-height: 1.25;
}

.form-actions {
  width: 100%;
}

.btn-login {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
  color: #fff;
  background: linear-gradient(135deg, var(--theme-color) 0%, #07c160 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1.2;
}

.btn-login::after {
  border: none;
}

.btn-login.button-hover,
.btn-login:active {
  background: linear-gradient(135deg, var(--theme-color) 0%, #07c160 100%);
  color: #fff;
  opacity: 1;
}

.btn-login-text {
  line-height: 1.2;
  font-size: 30rpx;
}

.login-footer {
  margin-top: 60rpx;
  padding: 0 20rpx;
}

.footer-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 4rpx;
  row-gap: 8rpx;
}

.agree-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
  margin-right: 4rpx;
  flex-shrink: 0;
}

.agree-check__icon {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 2rpx solid #c0c4cc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.agree-check__tick {
  font-size: 18rpx;
  font-weight: 700;
  line-height: 1;
  color: transparent;
}

.agree-check__icon--checked {
  border-color: var(--theme-color);
  background: var(--theme-color);
}

.agree-check__icon--checked .agree-check__tick {
  color: #fff;
}

.footer-text,
.link {
  font-size: 22rpx;
  line-height: 1.6;
}

.footer-text {
  color: #909399;
}

.link {
  color: var(--theme-color);
}

.protocol-dialog-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
}

.protocol-dialog {
  width: 100%;
  max-width: 620rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 36rpx 30rpx 28rpx;
  box-sizing: border-box;
  box-shadow: 0 14rpx 48rpx rgba(0, 0, 0, 0.16);
}

.protocol-dialog__title {
  display: block;
  text-align: center;
  font-size: 34rpx;
  font-weight: 700;
  color: #303133;
}

.protocol-dialog__desc {
  display: block;
  margin-top: 16rpx;
  text-align: center;
  font-size: 26rpx;
  line-height: 1.6;
  color: #606266;
}

.protocol-dialog__actions {
  margin-top: 30rpx;
  display: flex;
  gap: 16rpx;
}

.protocol-dialog__btn {
  flex: 1;
  min-height: 78rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
}

.protocol-dialog__btn--cancel {
  background: #f4f7f6;
  color: #5b6b64;
  border: 1px solid #ddebe5;
}

.protocol-dialog__btn--confirm {
  background: linear-gradient(135deg, var(--theme-color) 0%, #07c160 100%);
  color: #fff;
}
</style>

<!-- placeholder-class 在部分真机需非 scoped 才稳定生效；颜色与 --login-input-placeholder 一致 -->
<style lang="scss">
.input-placeholder {
  color: #c0c4cc;
  font-size: 28rpx;
}
</style>