quickapp_front/src/views/Index/index.ux

<import name="home-page" src="../Home/index.ux"></import>
<import name="category-page" src="../Category/index.ux"></import>
<import name="shelf-page" src="../Shelf/index.ux"></import>
<import name="my-page" src="../My/index.ux"></import>
 
<template>
  <stack class="stack-wrap">
    <div class="index-wrap">
      <tabs class="tab-content" onchange="tabbarChange" index="{{current}}">
        <tab-content>
          <home-page @change="pageSwitch"></home-page>
          <category-page></category-page>
          <shelf-page @change="pageSwitch"></shelf-page>
          <my-page @customer="openCustomer"></my-page>
        </tab-content>
      </tabs>
      <div class="fixed-tabbar">
        <image src="../../assets/imgs/shadow.png" class="shadow"></image>
        <div class="tabbar-item__wrap">
          <block for="tab in tabbar">
            <div class="tabbar-item " @click="tabbarChange(tab)">
              <image src="{{tab.index === current ? tab.active_icon : tab.icon}}"></image>
              <text class="{{tab.index === current ? 'tabbar-name__cur' : ''}}">{{tab.name}}</text>
            </div>
          </block>
        </div>
      </div>
    </div>
    <div class="stack-popup" @click="closeWrap" if="showPopup">
      <div class="customer-popup" @click="copyWechat">
        <text class="title">联系客服</text>
        <image src="{{$app.$def.data.cutomerQrcode}}"></image>
      </div>
    </div>
  </stack>
</template>

<script>
export default {
  private: {
    tabbar: [
      {
        name: "首页",
        title: "追书云",
        icon: "../../assets/imgs/home.png",
        active_icon: "../../assets/imgs/home_choose.png",
        index: 0
      },
      {
        name: "分类",
        title: "书城",
        icon: "../../assets/imgs/category.png",
        active_icon: "../../assets/imgs/category_choose.png",
        index: 1
      },
      {
        name: "书架",
        title: "我的书架",
        icon: "../../assets/imgs/shelf.png",
        active_icon: "../../assets/imgs/shelf_choose.png",
        index: 2
      },
      {
        name: "我的",
        title: "个人中心",
        icon: "../../assets/imgs/my.png",
        active_icon: "../../assets/imgs/my_choose.png",
        index: 3
      }
    ],
    current: 1,
    showPopup: false
  },
  onBackPress() {
    // 退出逻辑
    if (this.$app.$def.data.backClickCount === 0) {
      this.$app.$def.data.backClickCount++;
      this.$app.$def.createShortcut()
      return true;
    }
  },
  /**
   * 当用户点击菜单按钮时触发，调用app中定义的方法showMenu
   * 注意：使用加载器测试`创建桌面快捷方式`功能时，请先在`系统设置`中打开`应用加载器`的`桌面快捷方式`权限
   */
  onMenuPress() {
    this.$app.$def.showMenu();
  },
  tabbarChange(tab) {
    this.current = tab.index;
    this.$page.setTitleBar({ text: this.tabbar[tab.index].title });
  },
  pageSwitch() {
    this.current = 1;
  },
  closeWrap() {
    this.showPopup = false;
  },
  copyWechat(e) {
    e.stopPropagation();
  },
  openCustomer() {
    this.showPopup = true;
  }
}
</script>

<style lang="less">
@import "../../assets/less/index.less";
</style>