sz-kjsxy-wx-new/pages/index/index.vue

<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <privacy-popup
      ref="privacyComponent"
      @agree-privacy="onAgreePrivacy"
      @reject-privacy="onRejectPrivacy"
    ></privacy-popup>
    <!-- #endif -->
    <view
      class="container-top"
      :style="{
        background: 'url(' + base.imgHost('index_top_bg.png') + ') no-repeat',
      }"
    >
      <u-navbar
        :is-back="false"
        :is-fixed="false"
        :height="topNavHeight"
        :background="topbg"
        title-color="#fff"
        title-size="32"
        :border-bottom="false"
        title="苏州科技商学院"
      ></u-navbar>
      <view style="height: 60rpx; margin-top: 20rpx">
        <view v-if="showWx" class="container-wx">
          <u-icon name="close" color="#fff" @click="showWx = false"></u-icon>
          <view>
            点击“<text></text><text class="container-wx-big"></text
            ><text></text>”添加到我的小程序，下次访问更快捷
          </view>
        </view>
      </view>

      <topBanner :banner_list="banner_list"></topBanner>
    </view>
    <view class="container-content">
      <image
        :src="base.imgHost('index_bg.png')"
        width="100%"
        height="100%"
      ></image>
      <view class="container-content-calendar">
        <view class="container-content-calendar-content">
          <CalendarWidget />
        </view>
      </view>
      <view class="container-content-icons">
        <view @click="tourl(2)">
          <image :src="base.imgHost('index_icon5.png')"></image>
        </view>
        <!-- <view @click="tourl(3)">
          <image :src="base.imgHost('index_icon6.png')"></image>
        </view> -->
        <view @click="tourl(1)">
          <image :src="base.imgHost('index_icon7.png')"></image>
        </view>
        <!-- <view @click="tourl(6)">
          <image :src="base.imgHost('index_icon8.png')"></image>
        </view> -->
      </view>


      <view class="container-content-info">
        <view class="container-content-info_title">
          <view>资讯</view>
          <view @click="tourl(4)">查看全部</view>
        </view>
        <view class="container-content-info_swiper">
          <swiper
            circular
            :current="info_index"
            @change="changeInfo"
            next-margin="340rpx"
          >
            <swiper-item
              v-for="(item, index) in notices_list"
              :key="index"
              @click="tourl(5, item.titleurl)"
            >
              <view class="imgwrap" :class="{ active: info_index === index }">
                <image mode="aspectFill" :src="item.titlepic"></image>
              </view>
              <view class="title">
                <view class="title-name">
                  {{ item.title }}
                </view>
                <view class="title-time">
                  {{ item.newstime }}
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <tabbar :currentPage="0"></tabbar>
    
    <!-- 生日弹窗 -->
    <view class="birthday-popup" :style="{background: 'url(' + base.imgHost('bbg.png') + ') no-repeat left top','background-size': '100% 100%'}" v-if="is_birthday && !hasShowBirthday">
      <view class="birthday-content">
        <view class="birthday-title">Happy birthday!</view>
        <view class="birthday-subtitle">亲爱的{{ vuex_user.name }}</view>
		<view class="birthday-img">
			<image :src="base.imgHost('btips.png')"></image>
		</view>
        <view class="birthday-button" @click="closeBirthdayPopup">返回首页</view>
			</view>
		</view>

    <!-- 个人信息缺失提示 -->
    <view class="profile-incomplete-popup" v-if="showProfileIncomplete">
      <view class="profile-incomplete-mask" @click="closeProfileIncomplete"></view>
      <view class="profile-incomplete-dialog">
        <view class="profile-incomplete-text">您的个人信息有缺失，请尽快补充。</view>
        <view class="profile-incomplete-btn" @click="goCompleteProfile">去完善</view>
      </view>
    </view>
    <!-- 无手机号：绑定或注册（与个人中心一致） -->
    <view class="modal">
      <u-popup v-model="showRegister" mode="bottom">
        <view>
          <view class="modal-tip-wrap">
            <view class="modal-tip">提示</view>
            <view class="modal-close" @click="showRegister = false">关闭</view>
          </view>
          <view class="modal-content">
            <view>如您已是我方校友，请先绑定账号</view>
            <view @click="goBind" class="modal-bind">去绑定</view>
            <view>如您还不是我方校友，请先注册</view>
            <view @click="toRegister" class="modal-register">去注册</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { ROOTPATH as baseUrl } from "@/common/config.js";
import tabbar from "@/components/tabbar/tabbar.vue";
import topBanner from "@/components/topBanner.vue";
import PrivacyPopup from "@/components/privacy-popup/privacy-popup.vue";
import CalendarWidget from "@/components/calendar-widget/calendar-widget.vue";

/** 点遮罩关闭资料缺失提示时写入，值为当天 yyyy-MM-dd，当天内不再弹出 */
const PROFILE_INCOMPLETE_DISMISSED_KEY = "stbc1_profileIncompleteDismissedDate";
/** 手机号缺失提醒：当天首次进入首页仅弹出一次（展示过即记） */
const MOBILE_MISSING_PROMPT_DATE_KEY = "stbc1_mobileMissingPromptDate";

export default {
  components: {
    tabbar,
    topBanner,
    PrivacyPopup,
    CalendarWidget,
  },
  data() {
    return {
      topNavHeight: 40,
      topbg: {
        backgroundColor: "transparent",
      },
      showWx: true,
      banner_list: [],
      notices_list: [],
      can_appointment: false,
      is_birthday: false,
      hasShowBirthday: false,
      showProfileIncomplete: false,
      showRegister: false,
      pendingProfileIncomplete: false,
      pendingMobileMissing: false,
      isFirstShow: true,
    };
  },
  onShareAppMessage() {
    return {
      title: "苏州科技商学院",
      imageUrl: "/static/share.jpg",
    };
  },
  onShareTimeline() {
    return {
      title: "苏州科技商学院",
      imageUrl: "/static/share.jpg",
    };
  },
  onLoad() {
    let menuButtonObject = uni.getMenuButtonBoundingClientRect();
    this.topNavHeight = menuButtonObject.height + 8;
    
    // 检查今天是否已经显示过生日弹窗
	this.hasShowBirthday = uni.getStorageSync("hasShowBirthday") || false;
    
    let token = uni.getStorageSync("stbc1_lifeData")
      ? uni.getStorageSync("stbc1_lifeData").vuex_token
      : "";
    if (this.base.isNull(token)) {
      this.getToken();
    } else {
      // 如果有token，直接获取用户信息
      this.getUser();
    }
    this.getNoticesList();
    this.getBannerList();
  },
  onShow() {
    if (this.isFirstShow) {
      this.isFirstShow = false;
      return;
    }
    this.showRegister = false;
    let token = uni.getStorageSync("stbc1_lifeData")
      ? uni.getStorageSync("stbc1_lifeData").vuex_token
      : "";
    if (this.base.isNull(token)) return;
    this.$u.api.user().then((res) => {
      this.$u.vuex("vuex_user", res.user);
      if (!this.isProfileIncomplete(res.user)) {
        this.showProfileIncomplete = false;
        this.pendingProfileIncomplete = false;
        this.pendingMobileMissing = false;
      }
    });
  },
  methods: {
    onAgreePrivacy() {
      // 用户同意隐私政策
      // 在这里添加您想要执行的代码
      console.log("User agreed to the privacy policy");
      // this.getToken()
    },
    onRejectPrivacy() {
      // 用户拒绝隐私政策
      // 在这里添加您想要执行的代码
      // wx.exitMiniProgram();
      console.log("User rejected the privacy policy");
    },
    /** 出生日期仅有年月、无具体日期（如 1993-01）视为未完善 */
    isBirthdayMonthOnly(birthday) {
      if (this.base.isNull(birthday)) return false;
      const s = String(birthday).trim();
      return /^\d{4}-\d{1,2}$/.test(s);
    },
    isEmptyProfileField(v) {
      if (this.base.isNull(v)) return true;
      if (typeof v === "string" && v.trim() === "") return true;
      return false;
    },
    getTodayYmd() {
      const d = new Date();
      const y = d.getFullYear();
      const m = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${y}-${m}-${day}`;
    },
    /** 当天是否已通过点遮罩关闭过资料缺失提示 */
    isProfileIncompleteDismissedToday() {
      return uni.getStorageSync(PROFILE_INCOMPLETE_DISMISSED_KEY) === this.getTodayYmd();
    },
    isMobileMissing(user) {
      return !user || this.isEmptyProfileField(user.mobile);
    },
    isMobileMissingPromptShownToday() {
      return uni.getStorageSync(MOBILE_MISSING_PROMPT_DATE_KEY) === this.getTodayYmd();
    },
    markMobileMissingPromptShownToday() {
      uni.setStorageSync(MOBILE_MISSING_PROMPT_DATE_KEY, this.getTodayYmd());
    },
    /** 已绑定手机的前提下，资料是否不完整 */
    isProfileIncomplete(user) {
      if (!user || this.isEmptyProfileField(user.mobile)) return false;
      if (this.isEmptyProfileField(user.company_name)) return true;
      if (this.isEmptyProfileField(user.company_position)) return true;
      if (this.isEmptyProfileField(user.email)) return true;
      if (this.isEmptyProfileField(user.sex)) return true;
      if (this.isEmptyProfileField(user.birthday)) return true;
      if (this.isBirthdayMonthOnly(user.birthday)) return true;
      return false;
    },
    maybeShowProfileIncomplete(user, isBirthdayFlag) {
      if (!user || !this.isProfileIncomplete(user)) {
        this.pendingProfileIncomplete = false;
        return;
      }
      if (this.isProfileIncompleteDismissedToday()) {
        this.pendingProfileIncomplete = false;
        return;
      }
      const showBirthdayLayer =
        isBirthdayFlag && !this.hasShowBirthday;
      if (showBirthdayLayer) {
        this.pendingProfileIncomplete = true;
      } else {
        this.showProfileIncomplete = true;
        this.pendingProfileIncomplete = false;
      }
    },
    maybeShowHomeReminder(user, isBirthdayFlag) {
      if (this.isMobileMissing(user) && !this.isMobileMissingPromptShownToday()) {
        const showBirthdayLayer = isBirthdayFlag && !this.hasShowBirthday;
        if (showBirthdayLayer) {
          this.pendingMobileMissing = true;
        } else {
          this.base.toast("请先绑定或注册");
          this.showRegister = true;
          this.markMobileMissingPromptShownToday();
        }
        this.pendingProfileIncomplete = false;
        return;
      }
      this.maybeShowProfileIncomplete(user, isBirthdayFlag);
    },
    /** 点遮罩或点「去完善」后，当天冷启动不再弹出资料缺失提示 */
    markProfileIncompleteDismissedToday() {
      uni.setStorageSync(PROFILE_INCOMPLETE_DISMISSED_KEY, this.getTodayYmd());
    },
    goCompleteProfile() {
      this.showProfileIncomplete = false;
      this.markProfileIncompleteDismissedToday();
      uni.navigateTo({
        url: "/packages/my/index",
      });
    },
    closeProfileIncomplete() {
      this.showProfileIncomplete = false;
      this.markProfileIncompleteDismissedToday();
    },
    goBind() {
      this.showRegister = false;
      uni.navigateTo({
        url: "/packages/register/login",
      });
    },
    toRegister() {
      this.showRegister = false;
      uni.navigateTo({
        url: "/packages/register/index",
      });
    },
    changeCurrent(e) {
      this.show_current_swiper = e.detail.current + 1;
    },
    changeInfo(e) {
      this.info_index = e.detail.current;
    },
    async getToken() {
      let that = this;
      const loginResult = await new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success: (res) => {
            resolve(res.code);
          },
          fail: (err) => {
            console.error("uni.login失败:", err);
            reject(err);
          },
        });
      });
      const tokenResult = await new Promise((resolve, reject) => {
        this.$u.api
          .login({
            code: loginResult,
          })
          .then((res1) => {
            console.log("res1", res1);
            uni.setStorageSync("stbc1_lifeData", {
              vuex_token: res1.token,
            });
            resolve(res1.token);
          })
          .catch((err) => {
            reject(err);
            console.log("login-error:", JSON.stringify(err));
          });
      });

      await uni.request({
        url: `${baseUrl}/api/mobile/user/get-user-info`,
        header: {
          Authorization: `Bearer ${tokenResult}`,
        },
        data: {},
        method: "GET",
        success: (result1) => {
          uni.setStorageSync("stbc1_lifeData", {
            vuex_token: tokenResult,
            vuex_user: result1.data.user,
          });
          this.$u.vuex("vuex_token", tokenResult);
          this.$u.vuex("vuex_user", result1.data.user);

          // 登录成功后检查用户生日
          if (result1.data.is_birthday && !this.hasShowBirthday) {
            this.is_birthday = true;
          }
          this.maybeShowHomeReminder(
            result1.data.user,
            result1.data.is_birthday
          );
        },
        fail(err) {
          console.log("uesr-error", err);
        },
      });
    },
    async getUser() {
      await this.$u.api.user().then((res) => {
        // if (res.user.appointment_total - res.user.pass_appointments > 0) {
        //   this.can_appointment = true;
        // } else {
        //   this.can_appointment = false;
        // }
        // this.door_appointments = res.door_appointments ? true : false
        this.$u.vuex("vuex_user", res.user);

        // 检查用户是否今天生日（使用接口返回的is_birthday参数）
        if (res.is_birthday && !this.hasShowBirthday) {
          this.is_birthday = true;
        }
        this.maybeShowHomeReminder(res.user, res.is_birthday);
      });
    },
    
    // 关闭生日弹窗
    closeBirthdayPopup() {
      this.is_birthday = false;
      // 标记今天已经显示过生日弹窗
      uni.setStorageSync("hasShowBirthday", true);
      this.hasShowBirthday = true;
      if (this.pendingProfileIncomplete) {
        const life = uni.getStorageSync("stbc1_lifeData") || {};
        const u = life.vuex_user || this.vuex_user || {};
        if (
          !this.isProfileIncompleteDismissedToday() &&
          this.isProfileIncomplete(u)
        ) {
          this.showProfileIncomplete = true;
        }
        this.pendingProfileIncomplete = false;
      }
      if (this.pendingMobileMissing) {
        const life = uni.getStorageSync("stbc1_lifeData") || {};
        const u = life.vuex_user || this.vuex_user || {};
        if (this.isMobileMissing(u) && !this.isMobileMissingPromptShownToday()) {
          this.base.toast("请先绑定或注册");
          this.showRegister = true;
          this.markMobileMissingPromptShownToday();
        }
        this.pendingMobileMissing = false;
      }
    },
    
    async getBannerList() {
      const res = await this.$u.api.otherBanner({
        position: 1,
      });
      if (res.length > 0) {
        this.banner_list = res.sort((a, b) => {
          a.sort - b.sort;
        });
      } else {
        this.banner_list = [{}];
      }
    },
    async getNoticesList() {
      const baseUrl = "https://www.sstbc.com";
      let that = this;
      // const res = await this.$u.api.courseNews({
      // 	page: 1,
      // 	page_size: 5,
      // })
      // this.notices_list = res.rows
      let _arr = [];
      uni.request({
        url: baseUrl + "/e/extend/news.php",
        data: {
          page: 1,
          pagesize: 5,
        },
        success(res) {
          console.log("res", res);
          if (res.statusCode === 200) {
            if (res.data.rows.length > 0) {
              res.data.rows.map((item) => {
                item.titlepic = baseUrl + item.titlepic;
              });
            }
            _arr = res.data.rows;
          }
          that.notices_list = _arr;
          console.log("this.notices_list", that.notices_list);
        },
        fail(err) {
          console.log("err", err);
        },
      });
    },
    async tourl(type, url) {
      if (type === 1) {
        // uni.navigateTo({
        // 	url: '/packages/webview/index?type=1'
        // })
        uni.navigateTo({
          url: "/packages/mycourse/index",
        });
      } else if (type === 2) {
        uni.switchTab({
          url: "/pages/course/index",
        });
      } else if (type === 3) {
        // await this.getUser()
        // if (!this.can_appointment) {
        // 	this.base.toast("您当前没有可预约次数")
        // 	return
        // }
        uni.navigateTo({
          url: "/packages/booksubmit/appointment",
        });
      } else if (type === 4) {
        uni.navigateTo({
          url: "/packages/webview/index?type=2",
        });
      } else if (type === 5) {
        // 资讯详情
        uni.navigateTo({
          url: "/packages/webview/index?type=3&url=" + url,
        });
      } else if (type === 6) {
        uni.navigateTo({
          url: "/packages/courseCalendar/index",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 80rpx;

  &-top {
    width: 100%;
    height: 570rpx;
    // background: url("https://wx.sstbc.com/wx-icon/index_top_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  &-wx {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 24rpx;
    width: 100%;
    background-color: #271f8e;
    padding: 15rpx 0;
    height: 60rpx;
    // margin-top: 20rpx;

    ::v-deep .u-icon {
      margin: 0 30rpx;
    }

    text {
      width: 10rpx;
      height: 10rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin: 0 5rpx;
      display: inline-block;
    }

    &-big {
      width: 20rpx !important;
      height: 20rpx !important;
      border-radius: 20rpx !important;
      vertical-align: middle;
    }
  }

  &-content {
    width: 100%;
    position: relative;
    position: relative;
    padding-top: 200rpx;

    & > image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -40rpx;
      left: 0;
    }
    
    &-icons {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      padding-bottom: 30rpx;
      flex-wrap: wrap;
      padding-top: 50rpx;
      & > view {
        font-size: 0;
      }
      image {
        width: 325rpx;
        height: 149rpx;
        margin: 10rpx 0;
      }
    }
    &-calendar {
      // padding: 0 30rpx;
      position: relative;
      // padding-bottom: 130rpx;
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 680rpx;
        margin: 0 auto;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 30rpx;

        view:first-child {
          font-size: 42rpx;
          color: #333;
        }
      }
    }
    &-calendar-content {
      // padding: 0 30rpx;
      // padding-bottom: 130rpx;
    }
    &-info {
      position: relative;
      padding-top: 80rpx;

      &_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 680rpx;
        margin: 0 auto;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 30rpx;

        view:first-child {
          font-size: 42rpx;
          color: #333;
        }
      }

      &_swiper {
        margin-left: 20rpx;
        height: 780rpx;

        swiper {
          height: 100%;

          swiper-item {
            .imgwrap {
              padding: 10rpx;
              border-radius: 10rpx;
              width: 390rpx;
              margin-bottom: 20rpx;

              image {
                width: 370rpx;
                height: 460rpx;
              }
            }

            .imgwrap.active {
              background-color: #fff;
            }

            .title {
              font-size: 24rpx;
              width: 390rpx;
              padding: 10rpx;

              &-name {
                line-height: 1.5;
                color: #333333;
                margin-bottom: 30rpx;
              }

              &-time {
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
}

.birthday-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .birthday-content {
    text-align: center;
    padding: 0 60rpx;
    max-width: 600rpx;
    width: 100%;
	position: absolute;
    bottom: 150rpx;
    left: 50%;
    transform: translate(-50%,0);
  }
  
  .birthday-title {
    font-size: 46rpx;
    font-weight: bold;
    color: #855413;
    margin-bottom: 20rpx;
  }
  
  .birthday-subtitle {
    font-size: 68rpx;
    color: #855413;
    // line-height: 1.5;
    margin-bottom: 70rpx;
  }
  .birthday-img{
	margin-bottom: 90rpx;
	image{
		width: 374rpx;
		height: 109rpx;
	}
  }
  .birthday-button {
    background: #c89b5b;
    color: white;
    padding: 25rpx 60rpx;
    border-radius: 50rpx;
    font-size: 32rpx;
    // font-weight: bold;
    box-shadow: 0 10rpx 30rpx #c89b5b;
    transition: all 0.3s ease;
  }
}

.profile-incomplete-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-incomplete-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
}

.profile-incomplete-dialog {
  position: relative;
  width: 620rpx;
  padding: 56rpx 44rpx 46rpx;
  background: #fff;
  border-radius: 30rpx;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
}

.profile-incomplete-text {
  font-size: 32rpx;
  color: #333;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 46rpx;
}

.profile-incomplete-btn {
  width: 70%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 30rpx;
  font-size: 30rpx;
  background: linear-gradient(to right, #5e5fbc, #0d0398);
}

.modal {
  ::v-deep .u-drawer-bottom {
    border-radius: 40rpx;
  }

  &-tip-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
  }

  &-tip {
    font-size: 32rpx;
  }

  &-close {
    color: #409eff;
    font-size: 28rpx;
  }

  &-content {
    height: 450rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    text-align: center;

    & > view {
      margin: 30rpx auto;
    }
  }

  &-bind {
    width: 45%;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    border-radius: 30rpx;
    padding: 20rpx;
    background: linear-gradient(to right, #e4cdb4, #c69c6d);
  }

  &-register {
    width: 45%;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    border-radius: 30rpx;
    padding: 20rpx;
    background: linear-gradient(to right, #5e5fbc, #0d0398);
  }
}
</style>