program/src/pages/index/index.vue

<template>
  <div id="container">
    <!--    banner模块-->
    <banner></banner>
    <!--    未登录 登录窗口模块-->
    <div
      class="login_card"
      v-if="!is_login"
    >
      <!--      登录窗口-->
      <login_container
        v-if="login_status == 'login'"
        @changeStatus="change_status"
        @changeTitle="change_title"
      ></login_container>
      <!--      注册窗口-->
      <regist_container
        v-if="login_status == 'regist'"
        @changeStatus='change_status'
        @change_login_status="change_login_status"
        :title="regist_title"
      ></regist_container>

    </div>
    <!--    登陆后 的个人首页-->
    <div
      class="personal_card"
      v-if="is_login"
    >
      <personal_container @change_login_status="change_login_status"></personal_container>

      <device_container></device_container>
    </div>
    <div
      class="service"
      :class="{'service_login_page':is_login==false}"
    >
      <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/index_btn_chongzhizhongxin.png"
              @click="to_page('user_center/recharge')"
            >
          </van-col>
          <van-col span="12">
            <img
              src="https://img.shuimuai.com/web/index_btn_gerenzhongxin.png"
              @click="to_page('user_center')"
            >
          </van-col>
        </van-row>

        <van-row>
          <van-col span="12">
            <img
              src="https://img.shuimuai.com/web/index_btn_chengjijilu.png"
              @click="to_page('game_record')"
            >
          </van-col>
          <van-col span="12">
            <img
              src="https://img.shuimuai.com/index_btn_dailishang.png"
              @click="to_page('agent/index')"
            >
          </van-col>
        </van-row>
      </div>
    </div>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
    <!--     <button class="cu-btn lg cu-btn-primary text-white text-center margin-tb" @click="auth_msg">获取消息授权-->
    <!--    </button>-->
  </div>
</template>

<script>
import banner from "@/components/banner";
import login_container from "@/components/index/login";
import regist_container from "@/components/index/regist";
import personal_container from "@/components/index/personal";
import device_container from "@/components/device/device";
import Toast from "../../../static/vant/toast/toast";
import Dialog from "../../../static/vant/dialog/dialog";
import { userDetail, setUserLogin } from "../../requests/user";
import user_store from "../../store/index";
import game_store from "../../store/game";
import game_util, { post_data } from "../../utils/game";

var $this;
export default {
  name: "index_container",
  components: {
    banner,
    login_container,
    regist_container,
    personal_container,
    device_container,
  },
  data() {
    return {
      // 三种状态 扫码scan 注册regist 登录login
      login_status: "login",
      // is_login: false,
      is_login: false,
      regist_title: "",
    };
  },
  methods: {
    get_init_data() {},
    //切换到扫码
    change_status($status) {
      this.login_status = $status;
    },
    //跳转充值中心
    to_recharge() {
      mpvue.navigateTo({
        url: "/pages/user_center/recharge/main",
      });
    },
    //修改登录状态
    change_login_status() {
      this.is_login = user_store.getters.get_login_status();
    },
    // 修改界面的文字
    change_title($status) {
      if ($status == 0) {
        this.regist_title = "注册";
      } else if ($status == 1) {
        this.regist_title = "登录";
      }
    },
    //跳转页面
    to_page($page) {
      if ($page == "agent/index") {
        //店员店长不可进
        if ($this.userinfo.level == 8 || $this.userinfo.level == 9) {
          Toast.fail("店员、店长不可进");
          return false;
        }
      }
      if (!this.is_login) {
        Toast.fail("请先登录");
        return false;
      }
      mpvue.navigateTo({
        url: "/pages/" + $page + "/main",
      });
    },
    auth_msg() {
      wx.requestSubscribeMessage({
        tmplIds: [
          "NV-xb_oOPutXLVge0ZnBxct_nNxS1j1XNCMtfp2c8zw",
          "70xngszQ62NWHbbCjbggbz5-pvOu3Z8ttLbjfplJXLg",
        ],
        success(res) {
          console.log(res);
          Toast.success("授权成功");
        },
      });
    },
  },
  mounted() {
    wx.login({
      success(res) {
        console.log(res);
      },
    });
  },
  onShow() {
    wx.getStorageInfo({
      success(res) {
        console.log("当前存储的数据", res.keys);
        let $keys = res.keys;
        $keys.forEach(($val, $index) => {
          console.log($val, wx.getStorageSync($val));
        });
      },
    });
    userDetail().then((res) => {
      let $data = res.data;
      //判断如果是第一次登录就 弹出领取体验卡
      $this.userinfo = $data.data;
      user_store.setters.set_userinfo($this.userinfo);
    });
  },
  onHide() {},
  onLoad($option) {
    // if (process.env.NODE_ENV == "development") {
    //   wx.setStorageSync("token", "ZbNv-hpdpmxk895iqUrEwe4kCJjEWCJD");
    // }


    if (game_store.getters.getGameStatus() == 1) {
      Dialog.alert({
        title: "系统提示",
        message: "正在结束上一个游戏",
      }).then(() => {
        post_data(game_store.getters.getGameAttMedDatas());
      });
    }

    //  判断存储是否登录
    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();
      // wx.navigateTo({
      //   url: "/pages/payment/main",
      // });
      // 存在token时候录入
      setUserLogin().then((res) => {
        console.log("录入", res);
      });
    }
  },
  created() {
    $this = this;
  },
  onShareAppMessage() {
    return {
      title: "欢迎进入水母星球",
      imageUrl: "http://img.shuimuai.com/sharePahe_one.jpg",
      path: "/pages/index/main",
    };
  },
};
</script>

<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>