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>
<import name="sign-page" src="../../components/sign/index.ux"></import>
<import name="short-page" src="../../components/short/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" tabindex="{{current}}"></home-page>
          <category-page tabindex="{{current}}"></category-page>
          <shelf-page @change="pageSwitch" tabindex='{{current}}'></shelf-page>
          <my-page @customer="openCustomer" tabindex="{{current}}"></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>
    <image src="../../assets/imgs/sign_show.png" class="sign-icon" @click="changeSignPop"> </image>
    <sign-page if="{{showSignPop}}"></sign-page>
    <short-page if="{{showShortPop}}" @addshort="shortEnd"></short-page>
    <div class="stack-popup" @click="closeWrap" if="showPopup">
      <div class="customer-popup">
        <text class="title">联系客服</text>
        <text class="desc">
          复制微信号或者保存二维码到本地至微信添加客服好友
        </text>
        <image src="{{cutomerQrcode}}" @longpress="saveImg"></image>
        <div class="duplication"><text class="duplication-text">微信号:{{cutomerName}}</text><text class="duplication-button" @click="duplication">复制</text></div>
      </div>
    </div>
  </stack>
</template>

<script>
import clipboard from '@system.clipboard';
import prompt from '@system.prompt';
import it from "../../helper/interface.js";
import { getCustomQrcode } from '../../api/index.js';
import { downImg, getStore } from '../../api/utils.js';
export default {
  protected: {
    current: 0
  },
  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: 0,
    showPopup: false,
    showSignPop: false,
    showShortPop: false,
    cutomerQrcode: '',
    cutomerName: ''
  },
  onInit() {
    this.$on('dispathEvt', this.changeSignPop);
    this.$watch('current', 'watchCurrent');
    //今日已签到过不在弹框签到
    this.getCoustom();
  },
  onShow() {
    const data = this.$app.getAppData('backfrom');
    if(data=='phone'){
      this.current = 1;
      this.$app.setAppData('backfrom','');
    }
    
    it.getShortCut((value) => {
      this.showShortPop = !value;
    })
   
  },
  shortEnd(value) {
    if (value.detail.msg) {
      prompt.showToast({ message: "用户禁止创建" });
    }
    this.showShortPop = !value.detail.installed;
  },
  watchCurrent(i) {
    console.log("watching", i);
    this.current = i;
  },
  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();
  },
  changeShortCut() {
    this.showShortPop = false;
  },
  async getCoustom() {
    let res = await getCustomQrcode();
    this.cutomerQrcode = res.url;
    this.cutomerName = res.name;
  },
  tabbarChange(tab) {
    this.current = tab.index;
    this.$page.setTitleBar({ text: this.tabbar[tab.index].title });
  },
  pageSwitch() {
    this.current = 1;
  },
  changeSignPop() {
    this.showSignPop = !this.showSignPop;
  },
  closeWrap() {
    this.showPopup = false;
  },
  //复制客服微信
  duplication() {
    clipboard.set({
      text: this.cutomerName,
      success: function (data) {
        prompt.showToast({
          message: '复制成功！'
        })
      },
    })
  },
  //长按保存图片
  saveImg() {
    downImg(this.cutomerQrcode);
  },
  openCustomer() {
    this.showPopup = true;
  }
}
</script>

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