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

<template>
  <view class="user">
    <view class="bg-box">
      <image class="" src="@/static/image/user/user-bg.png" mode="widthFix" />
    </view>
    <view class="pos-box">
      <capsule :showBorder="true" bgColor="transparent">
        <template v-slot:top>
          <view class="user-top">我的</view>
        </template>
      </capsule>
      <view class="box-container">
        <view class="user-info">
          <view class="info-image">
            <view class="img" @click="navigateTo('/user_module/changeLogo/index')">
              <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-name">
              <text>负责人：{{ shopInfo.shopReturn.returnPerson || '--' }}</text>
              <text>{{ shopInfo.shopPhone }}</text>
            </view>
          </view>
          <image class="notice" src="@/static/image/user/notice.png" />
        </view>
        <view class="user-money">
          <view class="money-bg">
            <image src="@/static/image/user/money-bg.png" />
          </view>
          <view class="money-container">
            <view class="money-top">
              <view class="top-box" @click="userAccount('/user_module/balance/index?type=4')">
                <text>{{ withdrawableMoney || 0 }}</text>
                <text>余额</text>
              </view>
              <view class="top-box" @click="userAccount('/user_module/consumptionPrice/index')">
                <text>{{ withdrawalIn || 0 }}</text>
                <text>消费金</text>
              </view>
              <view class="top-box" @click="navigateTo('/user_module/voucherPrice/index')">
                <text>{{ voucherWithdrawalIn || 0 }}</text>
                <text>代金券</text>
              </view>
              <view class="top-box" @click="navigateTo('/user_module/platformBalance/index')">
                <text>{{ rechargeWithdrawalIn || 0 }}</text>
                <text>平台余额</text>
              </view>
            </view>
            <view class="money-bottom">
              <view>收入明细</view>
              <view>
                <text>去查看</text>
                <tui-icon
                  name="arrowright"
                  color="rgba(0, 0, 0, 0.4)"
                  :size="18"
                ></tui-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="user-account">
          <view
            class="account-item"
            v-for="(item, index) in accountList"
            :key="index"
            @click="userAccount(item)"
          >
            <image :src="item.image" />
            <text>{{ item.title }}</text>
          </view>
        </view>
        <view class="user-related">
          <view
            class="related-item"
            v-for="item in relatedList"
            :key="item.title"
            @click="userAccount(item)"
          >
            <view class="item-left">
              <image :src="item.image" />
              <text>{{ item.title }}</text>
            </view>
            <view class="item-right">
              <!-- <text>￥{{ financeInfo[item.name] }}</text> -->
              <tui-icon name="arrowright" color="#000" :size="18"></tui-icon>
            </view>
          </view>
        </view>
        <view class="user-setup">
          <view
            class="related-item"
            @click="navigateTo('/user_module/businessInfo/index')"
          >
            <view class="item-left">
              <image src="@/static/image/user/user_icon5.png" />
              <text>设置</text>
            </view>
            <view class="item-right">
              <tui-icon name="arrowright" color="#000" :size="18"></tui-icon>
            </view>
          </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,
      // rechargeWithdrawalIn:0,
      withdrawableMoney: 0,
      //  总流水
      financeInfo:{},
      accountList: [
        // {
        //   title: "商家入驻",
        //   image: require("@/static/image/user/account_01.png"),
        //   url: "/user_module/webview/index?type=1",
        // },
        {
          title: "商家码",
          image: require("@/static/image/user/account_02.png"),
          url: "/user_module/merchantCode/index",
        },
        {
          title: "会员管理",
          image: require("@/static/image/user/account_03.png"),
          url: "/user_module/memberManage/index",
        },
        {
          title: "官方客服",
          image: require("@/static/image/user/account_04.png"),
          url: "/user_module/webview/index?type=2",
        },
      ],
      relatedList: [
        {
          title: "余额",
          image: require("@/static/image/user/user_icon1.png"),
          url:"/user_module/balance/index?type=4",
          name:"rechargeAllRealIncome"
        },
        {
          title: "消费金",
          image: require("@/static/image/user/user_icon2.png"),
          url:"/user_module/consumptionPrice/index",
          name:"withdrawalIn"
        },
        {
          title: "代金券",
          image: require("@/static/image/user/user_icon3.png"),
          url:"/user_module/voucherPrice/index",
          name:"voucherWithdrawalIn"
        },
        {
          title: "平台余额",
          image: require("@/static/image/user/user_icon4.png"),
          url:"/user_module/platformBalance/index",
          // name:"platformBalance"
        },
        {
          title: "佣金",
          image: require("@/static/image/user/user_icon6.png"),
          url:"/user_module/commission/index",
          // name:"platformBalance"
        },
      ],
    };
  },
  methods: {
    // 获取流水
    async getFinance() {
      let res = await getFinanceCount({ condition: "1", time: "",paymentMode:1 });
      this.financeInfo = res.data;
      this.animateNumber("turnover", res.data.turnover);
      this.animateNumber("frozenMoney", res.data.frozenMoney);
      this.animateNumber("withdrawableMoney", res.data.withdrawableMoney);
      // this.animateNumber("rechargeWithdrawalIn", res.data.rechargeWithdrawalIn);
    },
    //  获取店铺详情
    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 (typeof item === "string") {
        this.navigateTo(item);
        return;
      }
      if (!item.url) {
        this.$showToast("功能暂未开放");
        return;
      }
      this.navigateTo(item.url);
    },
  },
};
</script>

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