tf-business/pages/tabbar/index/index.vue

<template>
  <view class="home">
    <view class="bg-box" :style="{height:bgHeight + 'px'}"></view>
    <view id="computed-box">
      <capsule @getHeight="getCapusleHeight"></capsule>
      <view class="header-top" :style="{ height: menuButtonHeight + 'px' }">
        <view class="shop-title">{{ shopInfo.shopName }}</view>
        <view class="shop-state">
          <tui-icon
            style="margin-top: 4rpx;"
            name="circle-fill"
            :color="shopInfo.trade?'rgb(70,208,88)':'rgba(239, 83, 14, 0.63)'"
            :size="20"
          ></tui-icon>
          <text>{{ shopInfo.trade || '营业中' }}</text>
        </view>
      </view>
      <view class="main" >
        <view class="main-tool">
          <view class="tool-list">
            <view
              class="tool-item"
              v-for="item in toolList"
              :key="item.title"
              @click="scanCode(item.url)"
            >
              <view class="item-img" :style="{ background: item.background }">
                <image class="" :src="item.img" />
              </view>
              <view class="item-text">{{ item.title }}</view>
            </view>
          </view>
        </view>
        <view class="main-container">
          <view class="tube-list">
            <view
              class="tube-item"
              v-for="item in tobeList"
              :key="item.title"
              @click="tobeNavigate(item)"
            >
              <image :src="item.img" />
              <text>{{ item.title }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="header-content"></view>
		<view class="main-tool">
			<view class="tool-list">
				<view class="tool-item" v-for="item in toolList" :key="item.title" @click="scanCode(item.url)">
					<image :src="item.img" alt="" />
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view> -->
    <view class="summarize-box">
      <view class="summarize-left">经营概括</view>
      <view class="summarize-right" @click="navigateTo('/pages_module/operateData/index')">
        <text>更多</text>
        <tui-icon name="arrowright" :size="24"></tui-icon>
      </view>
    </view>
    <view class="statistics-list">
      <view
        class="statistics-item"
        v-for="(item, index) in statisticsList"
        :key="index"
      >
        <view class="statistics-trans">{{ item.title }}</view>
        <view class="statistics-price">
          <view class="price">{{ todayData[item.price] >= 0 && !Object.is(todayData[item.price], null) ? todayData[item.price] : '--' }}</view>
          <!-- <view class="text">较昨日</view> -->
        </view>
        <view class="proportion" v-if="item.state !== 2">
          <view class="proportion-box">
            <text :style="{ color: item.state == 0 ? '#42D373' : '#EF530E' }"
              >{{ item.proportion }}%</text
            >
            <image
              :src="
                item.state == 0
                  ? require('@/static/image/home/decline-icon.png')
                  : require('@/static/image/home/rise-icon.png')
              "
              alt=""
            />
          </view>
        </view>
        <view class="chart-img" v-if="todayData[item.price]">
          <template v-if="item.state == 0">
            <image
              :src="
                item.proportion <= 16
                  ? require('@/static/image/home/green.png')
                  : require('@/static/image/home/green-more.png')
              "
              alt=""
            />
          </template>
          <template v-if="item.state == 1">
            <image src="@/static/image/home/red.png" alt="" />
          </template>
        </view>
        <view class="empty" v-else>
          <view class="left"></view>
          <view class="bottom"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getShopDetail,getBusinessData } from "@/config/index.js";
import { toolList, tobeList, statisticsList } from "./data";
export default {
  mounted() {
    //.box获取class为box的元素，如果使用的id= 'box' 则使用'#box'
    uni
      .createSelectorQuery()
      .select("#computed-box")
      .boundingClientRect((data) => {
        console.log(data);
        this.bgHeight = data.height
        console.log(this.bgHeight,98989898);
      }).exec();
  },
  created() {
    //  获取胶囊的高度
    // #ifdef MP-WEIXIN
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.menuButtonHeight = menuButtonInfo.height;
    // #endif

    //  请求获取店铺的信息
    this.getShop();
    // 获取经营数据信息
    this.getData()
  },
  data() {
    return {
      //  背景高度
      bgHeight:0,
      //  胶囊的高度
      menuButtonHeight: null,
      toolList: toolList,
      tobeList: tobeList,
      statisticsList: statisticsList,
      // 店铺信息
      shopInfo: {},
      //  动态计算 main 的高度
      mainHeight: 0,
      todayData:{}
    };
  },
  onLoad() {},
  methods: {
    //  获取经营数据
    async getData(){
      let res = await getBusinessData({});
      this.todayData = res.data;
    },
    getCapusleHeight(e) {
      // this.mainHeight = 327 - e - this.menuButtonHeight + 16;
      console.log(this.mainHeight);
    },
    //  底部菜单跳转
    tobeNavigate(item) {
      if (item.title == "订单管理") {
        uni.switchTab({
          url: item.url,
        });
      } else if (item.url) {
        this.navigateTo(item.url);
      } else {
        this.$showToast("功能暂未开放");
      }
    },
    //  获取店铺详情
    async getShop() {
      let { data } = await getShopDetail({});
      this.shopInfo = data;
      //  将店铺存到本地
      uni.setStorageSync("shopInfo", data);
    },
    // 扫码
    scanCode(url) {
      if(!url){
        this.$showToast("功能暂未开放");
        return
      }
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>