program/src/pages/index/index.vue

<script>
import Banner from "@/components/index/banner";
import Welcome from "@/components/index/welcome";
import Login from "@/components/index/login";
import Cards from "@/components/index/cards";
import Connection from "@/components/connection/index";
import Toast from "../../../static/vant/toast/toast";
import {setUserLogin} from "../../requests/user";
import user_store from "../../store/index";

let $this;
export default {
  name: "index_container",
  components: {
    Banner,
    Welcome,
    Login,
    Cards,
    Connection,
  },
  data() {
    return {
      // 欢迎界面0，注册1 登录2
      welcome_status: 0,
      // 登录状态
      is_login: false
    };
  },
  created() {
    $this = this;
  },
  methods: {
    /**
     * 切换 注册/登录
     * @param $status 欢迎界面0，注册1，登录2
     */
    changeWelcome($status) {
      this.welcome_status = $status;
    },
    //修改登录状态
    changeLoginStatus() {
      this.is_login = user_store.getters.get_login_status();
    },
    //跳转页面
    pageTo($page) {
      if (!this.is_login) {
        Toast.fail("请先登录");
        return false;
      }
      mpvue.navigateTo({
        url: "/pages/" + $page + "/main",
      });
    }
  },
  onLoad() {
    // if (process.env.NODE_ENV == "development") {
    //   wx.setStorageSync('token', "WxN3rgbWyVpjyBhi4uT6mZmwajZ3dFlm");
    // }
    //  判断存储是否登录
    let $token = wx.getStorageSync("token");
    if ($token) {
      user_store.setters.set_token($token);
      user_store.setters.set_login(true);
      this.is_login = user_store.getters.get_login_status();
      // 登录小程序录入
      setUserLogin();
    }
  },
  onShareAppMessage() {
    return {
      title: "欢迎进入水母星球",
      imageUrl: "http://img.shuimuai.com/sharePahe_one.jpg",
      path: "/pages/index/main",
    };
  },
};
</script>

<template>
  <div id="container">
    <!-- banner模块 -->
    <Banner></Banner>
    <!-- 未登录 登录窗口模块-->
    <div v-if="!is_login" class="login_card">
      <!-- 欢迎模块 -->
      <Welcome v-if="welcome_status===0" @signStatus="changeWelcome"></Welcome>
      <!--登录注册窗口 -->
      <Login v-else :sign="welcome_status" @welcomeStatus="changeWelcome" @loginStatus="changeLoginStatus"></Login>
    </div>
    <!-- 登陆后 个人首页-->
    <div v-if="is_login" class="personal_card">
      <Cards></Cards>
      <Connection></Connection>
    </div>
    <div class="service" :class="{'service_login_page':!is_login}">
      <view class="padding-tb">
        <text class="cuIcon-titles text-primary"></text>
        <text class="">功能服务</text>
      </view>
      <div class="content">
        <van-row>
          <van-col span="12">
            <img src="https://img.shuimuai.com/web/index_btn_chengjijilu.png" @click="pageTo('game_record')">
          </van-col>
          <van-col span="12">
            <img src="https://img.shuimuai.com/web/index_btn_gerenzhongxin.png" @click="pageTo('user_center')">
          </van-col>
        </van-row>
      </div>
    </div>
    <van-toast id="van-toast"/>
    <van-dialog id="van-dialog"/>
    <van-notify id="van-notify"/>
  </div>
</template>

<style scoped>
/*@import "index.css";*/
.login_card {
  height: 335px;
  background-color: #ffffff;
  position: relative;
  z-index: 3;
  top: -90px;
  margin: 0px 10px;
  background-image: url(https://img.shuimuai.com/shuimugongzhu.png);
  background-position: center;
  background-size: 100% 100%;
  background-color: rgba(255, 255, 255, 0);
}

/* 功能服务 */
.service {
  position: absolute;
  width: 100%;
  top: 570px;
  z-index: 1;
}

.service_login_page {
  top: 500px !important;
}

.service .content {
  width: 100%;
}

.service .content image {
  width: 186px;
  height: 89px;
}

.head .line {
  width: 4px;
  height: 14px;
  background-color: #5d4db8;
  margin-right: 7px;
}

.head view {
  display: flex;
  justify-self: start;
  align-items: center;
}

.personal_card {
  height: 300px;
  position: relative;
  z-index: 5;
}
</style>