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

<template>
  <view class="user">
    <capsule :showBorder="true" bgColor="#FFFFFF">
      <template v-slot:top>
        <view class="user-box">个人中心</view>
      </template>
    </capsule>
    <view class="seize"></view>
    <view class="picture-bg">
      <view class="bg-icon">
        <tui-icon name="notice" :size="24" color="#FFFFFF"></tui-icon>
        <tui-icon
          name="setup"
          :size="24"
          color="#FFFFFF"
          @click="navigateTo('/user_module/businessInfo/index')"
        ></tui-icon>
      </view>
      <view class="bg-image">
        <image class="" :src="shopInfo.shopLogo" mode="center" />
      </view>
      <view class="bg-info">
        <view class="info-image">
          <view class="img">
            <image class="" :src="shopInfo.shopLogo" />
          </view>
          <view class="info-switch">
            <image class="" src="@/static/image/user/switch.png" />
          </view>
        </view>
        <view class="info-text">
          <view class="text-title">{{ shopInfo.shopName }}</view>
          <view class="text-lable">
            <view class="lable">{{ shopInfo.shopReturn.returnPerson }}</view>
            <view class="lable">{{ shopInfo.shopPhone }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="user-container">
      <view class="user-flowing">
        <view class="flowing-box left">
          <view class="flowing-txt">营业额</view>
          <view class="flowing-price">¥{{ turnover }}元</view>
        </view>
        <view class="flowing-box left">
          <view class="flowing-txt">途中金额</view>
          <view class="flowing-price">¥{{ frozenMoney }}元</view>
        </view>
        <view class="flowing-box">
          <view class="flowing-txt">已到账金额</view>
          <view class="flowing-price">¥{{ withdrawableMoney }}元</view>
        </view>
      </view>
      <view class="user-account">
        <view class="account-top">
          <text>我的账户</text>
          <tui-icon name="arrowright" :size="26" colo="#666666"></tui-icon>
        </view>
        <view class="account-bottom">
          <view
            class="bottom-box"
            v-for="item in accountList"
            :key="item.title"
            @click="userAccount(item)"
          >
            <image class="" :src="item.image" />
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFinanceCount, getShopDetail } from "@/config/index.js";
export default {
  created() {
    this.getFinance();
  },
  onShow() {
    //  本地获取店铺信息
    this.shopInfo = uni.getStorageSync("shopInfo");
    //  如果没有店铺信息 请求店铺信息
    if (!this.shopInfo) {
      this.getShop();
    }
  },
  data() {
    return {
      shopInfo: null,
      turnover: 0,
      frozenMoney: 0,
      withdrawableMoney: 0,
      accountList: [
        {
          title: "商家入驻",
          image: require("@/static/image/user/account_01.png"),
        },
        {
          title: "商家码",
          image: require("@/static/image/user/account_02.png"),
          url: "/user_module/merchantCode/index",
        },
        {
          title: "员工账户",
          image: require("@/static/image/user/account_03.png"),
        },
        {
          title: "官方客服",
          image: require("@/static/image/user/account_04.png"),
        },
      ],
      financeInfo: {},
    };
  },
  methods: {
    // 获取流水
    async getFinance() {
      let res = await getFinanceCount({ condition: "1", time: "" });
      this.financeInfo = res.data;
      this.animateNumber("turnover", res.data.turnover);
      this.animateNumber("frozenMoney", res.data.frozenMoney);
      this.animateNumber("withdrawableMoney", res.data.withdrawableMoney);
    },
    //  获取店铺详情
    async getShop() {
      let { data } = await getShopDetail({});
      this.shopInfo = data;
      //  将店铺存到本地
      uni.setStorageSync("shopInfo", data);
    },
    //  流水动画
    animateNumber(str, targetNum) {
      const duration = 2000; // 动画时长，单位毫秒
      const interval = 20; // 动画间隔时间，单位毫秒
      const distance = targetNum - this[str];
      const steps = duration / interval;
      const step = distance / steps;

      let currentStep = 0;
      const timer = setInterval(() => {
        if (!targetNum) return;
        currentStep++;
        this[str] = parseFloat((this[str] + step).toFixed(2));
        if (currentStep >= steps) {
          this[str] = targetNum;
          clearInterval(timer);
        }
      }, interval);
    },
    // 下方功能页面跳转
    userAccount(item) {
      if (!item.url) {
        this.$showToast("功能暂未开放");
        return;
      }
      this.navigateTo(item.url);
    },
  },
};
</script>

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