buddhism/pages/login/login.vue

<template>
  <view class="page">
    <!--    <u-navbar-->
    <!--      :background="bgc"-->
    <!--      :border-bottom="false"-->
    <!--      :is-back="false"-->
    <!--      :title="titleTxt"-->
    <!--      height="36"-->
    <!--      title-color="#000"-->
    <!--      title-size="36"-->
    <!--    >-->
    <!--    </u-navbar>-->

    <!-- 背景图 -->
    <image :src="getLoginImg" class="bj" mode="aspectFill"></image>

    <view class="imgbox">
      <image :src="getLoginImg" mode=""></image>
    </view>
    <button class="button" @click="goToLogin">授权登录</button>
    <view class="tip">
      <view class="checkbox-container" @click="toggleAgreement">
        <view :class="{ checked: hasAgreed }" class="checkbox">
          <text v-if="hasAgreed" class="checkmark">✓</text>
        </view>
      </view>
      <text>我已同意并阅读</text>
      <text class="link-text" @click="showServiceTerms">《服务条款》</text>
      <text class="link-text" @click="showPrivacyPolicy"
        >《法律条款及隐私政策》
      </text>
    </view>

    <!-- 服务条款弹窗 -->
    <u-popup
      v-model="showServiceTermsPopup"
      border-radius="20rpx"
      height="800rpx"
      mode="center"
      width="600rpx"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">服务条款</text>
          <text class="popup-close" @click="closeServiceTermsPopup">×</text>
        </view>
        <scroll-view :scroll-top="scrollTop" class="popup-body" scroll-y="true">
          <view class="terms-content">
            <rich-text :nodes="serviceTermsContent"></rich-text>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <text class="popup-tip">请仔细阅读服务条款，阅读完毕后点击同意</text>
          <button class="popup-btn" @click="agreeServiceTerms">同意</button>
        </view>
      </view>
    </u-popup>

    <!-- 隐私政策弹窗 -->
    <u-popup
      v-model="showPrivacyPolicyPopup"
      border-radius="20rpx"
      height="800rpx"
      mode="center"
      width="600rpx"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">法律条款及隐私政策</text>
          <text class="popup-close" @click="closePrivacyPolicyPopup">×</text>
        </view>
        <scroll-view :scroll-top="scrollTop" class="popup-body" scroll-y="true">
          <view class="terms-content">
            <rich-text :nodes="privacyPolicyContent"></rich-text>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <text class="popup-tip">请仔细阅读隐私政策，阅读完毕后点击同意</text>
          <button class="popup-btn" @click="agreePrivacyPolicy">同意</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { navigateToPage } from "@/utils/router.js";
import { wxLogin } from "@/api/auth/auth.js";

import { getPrivacyPolicy, getServiceTerms } from "@/api/article/article.js";

export default {
  data() {
    return {
      loginImg: "",
      bgc: {
        backgroundColor: "#fff",
      },
      titleTxt: "登录",
      chooseType: true,
      usertype: "",
      login: false,
      hasAgreed: false, // 是否同意条款
      hasReadServiceTerms: false, // 是否已读服务条款
      hasReadPrivacyPolicy: false, // 是否已读隐私政策
      showServiceTermsPopup: false, // 服务条款弹窗
      showPrivacyPolicyPopup: false, // 隐私政策弹窗
      serviceTermsContent: "", // 服务条款内容
      privacyPolicyContent: "", // 隐私政策内容
      scrollTop: 0, // 滚动位置
    };
  },
  onLoad() {},
  onUnload() {},
  computed: {
    getLoginImg() {
      return uni.getStorageSync("loginImg");
    },
  },
  methods: {
    userType(num) {
      this.chooseType = false;
      this.login = true;
      if (num === 1) {
        this.usertype = "01";
      } else {
        this.usertype = "00";
      }
    },
    // 切换同意状态
    toggleAgreement() {
      this.hasAgreed = true;
    },
    // 显示服务条款
    async showServiceTerms() {
      try {
        const res = await getServiceTerms();
        if (res.code === 200 && res.data) {
          // 处理文本内容，确保正确换行和样式
          let content = res.data.content || "暂无服务条款内容";
          // 将换行符转换为HTML换行标签
          content = content.replace(/\n/g, "<br/>");
          // 添加基本样式
          content = `<div style="word-wrap: break-word; word-break: break-all; line-height: 1.6; font-size: 28rpx; color: #333;">${content}</div>`;
          this.serviceTermsContent = content;
          this.showServiceTermsPopup = true;
          // 重置滚动位置
          this.scrollTop = 0;
        } else {
          uni.showToast({
            title: "获取服务条款失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("获取服务条款失败:", error);
        uni.showToast({
          title: "获取服务条款失败",
          icon: "none",
        });
      }
    },
    // 显示隐私政策
    async showPrivacyPolicy() {
      try {
        const res = await getPrivacyPolicy();
        if (res.code === 200 && res.data) {
          // 处理文本内容，确保正确换行和样式
          let content = res.data.content || "暂无隐私政策内容";
          // 将换行符转换为HTML换行标签
          content = content.replace(/\n/g, "<br/>");
          // 添加基本样式
          content = `<div style="word-wrap: break-word; word-break: break-all; line-height: 1.6; font-size: 28rpx; color: #333;">${content}</div>`;
          this.privacyPolicyContent = content;
          this.showPrivacyPolicyPopup = true;
          // 重置滚动位置
          this.scrollTop = 0;
        } else {
          uni.showToast({
            title: "获取隐私政策失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("获取隐私政策失败:", error);
        uni.showToast({
          title: "获取隐私政策失败",
          icon: "none",
        });
      }
    },
    // 关闭服务条款弹窗
    closeServiceTermsPopup() {
      this.showServiceTermsPopup = false;
    },
    // 关闭隐私政策弹窗
    closePrivacyPolicyPopup() {
      this.showPrivacyPolicyPopup = false;
    },
    // 同意服务条款
    async agreeServiceTerms() {
      this.hasReadServiceTerms = true;
      this.closeServiceTermsPopup();
      this.checkAgreementStatus();
    },
    // 同意隐私政策
    async agreePrivacyPolicy() {
      this.hasReadPrivacyPolicy = true;
      this.closePrivacyPolicyPopup();
      this.checkAgreementStatus();
    },
    // 检查同意状态
    checkAgreementStatus() {
      if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
        // 如果都读完了，自动勾选同意
        this.hasAgreed = true;
      }
    },

    goToLogin() {
      this.$u.throttle(this.Login, 3000);
    },

    async Login() {
      if (!this.hasAgreed) {
        const confirmed = await this.showLoginConfirmation();
        if (!confirmed) return;
      }

      uni.login({
        success(res) {
          if (res.code) {
            console.log("登录！", res);
            let data = {
              loginCode: res.code,
              appId: 1,
            };

            // 显示页面loading
            if (this.pageLoading) {
              this.pageLoading.show("登录中...");
            }

            wxLogin(data)
              .then((res) => {
                // 确保清除loading
                if (this.pageLoading) {
                  this.pageLoading.hide();
                }

                if (res.code == 200) {
                  console.log(res, "resres");
                  uni.setStorageSync("token", res.token);
                  // 显示成功提示
                  uni.showToast({
                    title: "登录成功",
                    icon: "success",
                    duration: 1500,
                  });
                  // 延迟跳转，让用户看到成功提示
                  setTimeout(() => {
                    if (this.pageLoading) {
                      this.pageLoading.hide();
                    }

                    // 使用路由仓库跳转到首页
                    navigateToPage("index");
                  }, 1500);
                } else {
                  // 处理业务逻辑错误
                  uni.showToast({
                    title: res.msg || "登录失败",
                    icon: "none",
                  });
                }
              })
              .catch((error) => {
                // 确保清除loading
                if (this.pageLoading) {
                  this.pageLoading.hide();
                }

                console.error("登录失败:", error);
                uni.showToast({
                  title: "登录失败",
                  icon: "none",
                });
              });
          }
        },
        fail(err) {
          console.error("微信登录失败:", err);
          uni.showToast({
            title: "微信登录失败",
            icon: "none",
          });
        },
      });
    },

    // 显示登录确认弹窗
    showLoginConfirmation() {
      return new Promise((resolve) => {
        uni.showModal({
          title: "确认登录",
          content: "我已阅读并同意服务协议和隐私政策",
          confirmText: "确定登录",
          cancelText: "取消",
          success: (res) => {
            this.hasAgreed = res.confirm;
            resolve(res.confirm);
          },
          fail: (err) => {
            console.error("弹窗操作失败:", err);
            resolve(false);
          },
        });
      });
    },
  },
};
</script>

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

.page {
  position: relative; /* 添加相对定位 */
}

.imgbox {
  //margin: 102rpx auto;
  //width: 750rpx;
  //height: 755rpx;
  //z-index: 0;

  image {
    //width: 750rpx;
    //height: 422rpx;
  }
}

.button {
  margin-top: 1200rpx;
  width: 586rpx;
  //height: 90rpx;
  background: #522510;
  border-radius: 54rpx 54rpx 54rpx 54rpx;
  font-weight: 500;
  font-size: 40rpx;
  color: #ffffff;
}

.tip {
  margin-top: 64rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 20rpx;
  color: #979797;

  .link-text {
    color: #522510;
    text-decoration: underline;
  }
}

/* 自定义勾选按钮样式 */
.checkbox-container {
  display: flex;
  align-items: center;
  margin-right: 10rpx;
  cursor: pointer;
}

.checkbox {
  width: 26rpx;
  height: 26rpx;
  border: 2rpx solid #cccccc;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.checkbox.checked {
  background-color: #522510;
  border-color: #522510;
}

.checkmark {
  color: #ffffff;
  font-size: 16rpx;
  font-weight: bold;
  line-height: 1;
}

/* 弹窗样式 */
.popup-content {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popup-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f8f8;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
  padding: 10rpx;
}

.popup-body {
  flex: 1;
  padding: 30rpx;
  line-height: 1.6;
  font-size: 28rpx;
  color: #333;
  height: 0; /* 确保scroll-view有固定高度 */
}

.terms-content {
  word-wrap: break-word;
  word-break: break-all;
  line-height: 1.6;
  font-size: 28rpx;
  color: #333;
  padding-bottom: 20rpx; /* 底部留白 */
  padding-right: 30rpx; /* 右边距 */
}

.popup-footer {
  padding: 30rpx;
  border-top: 1rpx solid #eee;
  background: #f8f8f8;
}

.popup-tip {
  display: block;
  font-size: 24rpx;
  color: #666;
  text-align: center;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.popup-btn {
  width: 100%;
  height: 80rpx;
  background: #522510;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: 500;
}

.bj {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>