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" @hasShort="hasShort"></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 {
  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.$on('hasShort',this.changeShortCut);
    //今日已签到过不在弹框签到
    this.getCoustom();
  },
  onShow() {
    it.getShortCut((value) => {
      this.showShortPop = !value;
    })
  },
  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>