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();

    //  本地获取店铺信息
    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>