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="status == 'login'" @changeStatus="change_status"
                       @to_scan="change_status"></login_container>
      <!--      扫码窗口-->
      <scan_container v-if="status == 'scan'" @changeStatus='change_status'></scan_container>
      <!--      注册窗口-->
      <regist_container v-if="status == 'regist'" @changeStatus='change_status'
                        @change_login_status="change_login_status"
      ></regist_container>

    </div>
    <!--    登陆后 的个人首页-->
    <div class="personal_card" v-if="is_login">
      <personal_container></personal_container>
      <device_container></device_container>
    </div>
    <div class="service">
      <div class="head">
        <div>
          <div class="line"></div>
          <div class="title">功能服务</div>
        </div>
      </div>
      <div class="content">
        <img src="https://img.shuimuai.com/chongzhizhongxin.png" @click="to_recharge"></img>
        <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
        <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
        <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
      </div>
    </div>
  </div>
</template>

<script>
import banner from '@/components/banner'
import login_container from '@/components/index/login'
import scan_container from '@/components/index/scan'
import regist_container from '@/components/index/regist'
import personal_container from "@/components/index/personal";
import device_container from "@/components/device/device";


export default {
  name: "index_container",
  components: {
    banner, login_container, scan_container, regist_container, personal_container, device_container
  },
  data() {
    return {
      // 三种状态 扫码scan 注册regist 登录login
      status: "regist",
      is_login: false
    }
  },
  methods: {
    get_init_data() {
    },
    //切换到扫码
    change_status($status) {
      this.status = $status
    },
    //跳转充值中心
    to_recharge() {
      mpvue.navigateTo({
        url: "/pages/user_center/recharge/main"
      })
    },
    //修改登录状态
    change_login_status() {
      this.is_login = this.$store.getters.get_login_status
    }
  },
  mounted() {
  },
  onLoad($option) {
    //  判断存储是否登录
    let $token = wx.getStorageSync('token')
    if ($token) {
      this.$store.commit('set_token', $token);
      this.is_login = this.$store.getters.get_login_status
    }
  }
}
</script>

<style scoped>
@import "index.css";
</style>