ch-tgr-h5/src/views/Merchant/Merchant.vue

<template>
  <!-- <BasePage> -->
  <ManagerPopup v-model="managerPopupVisible" />
  <div class="merchant">
    <div class="shopinfo">
      <img class="tx" :src="$file(data.shopimg)">
      <div class="info">
        <b>{{ truncatedShopname }}</b>
        <p>账号：{{ data.shopphone }}</p>
      </div>

      <div class="service-box" @click="$showManagerPopup()">
        管理中心
        <van-icon name="arrow"></van-icon>
      </div>
    </div>

    <div class="wallet">
      <div class="tit">
        <span @click="$navigate('MerchantIncome')"> 营业收入(元) <van-icon name="arrow"></van-icon>
        </span>
        <div class="line">
          <b @click="$navigate('MerchantIncome')">
            {{ data.shangjiashouru?.toFixed(2) }}
          </b>
          <!--  v-if="data.Income" -->
          <div @click="$navigate('MerchantCashout')">
            <span>提现中金额
            </span>
            <p>￥{{ data.withdrawing?.toFixed(2) }}</p>
          </div>
        </div>
      </div>
      <div class="cc">
        <div class="ll" @click="$navigate('Balance')">
          <span>
            可用余额<van-icon name="arrow"></van-icon>
          </span>
          <b>{{ data.keyongyue?.toFixed(2) }}</b>
        </div>
        <div class="ll" @click="$navigate('CV')">
          <span>
            会员卡额度<van-icon name="arrow"></van-icon>
          </span>
          <b>{{ data.huiyuanka?.toFixed(2) }}</b>
        </div>
      </div>
    </div>

    <!-- <div class="block">
        <div class="d1" @click="$navigate('MerchantTrade')">
          <b>订单记录</b>
          <p>查看订单记录</p>
          <van-badge :content="expiring ? expiring : ''" :offset="[60, -40]">
            <button>立即查看</button>
          </van-badge>
          <img src="/img/bbb1.png">
        </div>
        <div class="_r">
          <div class="d2" @click="$navigate('MerchantTrade')">
            <b>订单记录</b>
            <p>查看订单记录</p>
            <button>立即查看</button>
            <img src="/img/bbb2.png">
          </div>
          <div class="d3" @click="$navigate('MerchantProduct')">
            <b>产品列表</b>
            <p>查看我的产品</p>
            <button>立即查看</button>
            <img src="/img/bbb3.png">
          </div>
        </div>

      </div> -->

    <div class="fastTo">
      <div class="ft1" @click="$navigate('PayCode?id=' + id)">
        <span>收款码</span>
        <img src="/img/ft_i1.png" alt="">
      </div>

      <div class="ft2" @click="$navigate('MerchantTrade')">
        <span>订单记录</span>
        <img src="/img/ft_i2.png" alt="">
      </div>

      <div class="ft3" @click="$navigate('MerchantIntroduction')">
        <span>商家资料</span>
        <img src="/img/ft_i3.png" alt="">
      </div>
    </div>

    <div class="countbox">
      <div class="title">
        <b>经营数据</b>
      </div>
      <div class="box line">
        <span>截止{{ data.endTimes }}</span>
        <p class="refresh" @click="getCount">刷新</p>
        <p class="cou r" @click="$navigate('Statistics')">统计<van-icon name="arrow"></van-icon></p>
      </div>

      <div class="list">
        <div class="item">
          <span>
            今日营业额（元）
          </span>
          <b>{{ countData.todayyingyee?.toFixed(2) }}</b>
          <p>昨日<span>{{ countData.yesterdayyingyee?.toFixed(2) }}</span></p>
        </div>

        <div class="item">
          <span>
            今日应收（元）
          </span>
          <b>{{ countData.todayyingshou?.toFixed(2) }}</b>
          <p>昨日<span>{{ countData.yesterdayingshou?.toFixed(2) }}</span></p>
        </div>

        <div class="item">
          <span>
            今日订单数
          </span>
          <b>{{ countData.todaydingdanshu }}</b>
          <p>昨日<span>{{ countData.yesterdaydingdanshu }}</span></p>
        </div>

        <div class="item">
          <span>
            今日惠利金额（元）
          </span>
          <b>{{ countData.todayyouhui?.toFixed(2) }}</b>
          <p>昨日<span>{{ countData.yesterdayyouhui?.toFixed(2) }}</span></p>
        </div>
      </div>
    </div>


  </div>

  <!-- </BasePage> -->

</template>

<script>
import ManagerPopup from "@/components/ManagerPopup.vue"

export default {
  name: 'Merchant',
  components: { ManagerPopup },
  mounted() {
    this.$get('/v1/client/DUsersClient').then(res => {
      this.id = res.data.id;
      if (!res.data.isshop) {
        this.$showFailToast('您不是商家账号！')
        // localStorage.removeItem('member_token')
        location.replace('#/My')
        return
      }
      this.init();
    }).catch(() => {
      this.$showFailToast('登录状态异常，请重新登录')
      // localStorage.removeItem('member_token')
      location.replace('#/Login')
    })

    window.addEventListener('showManagerPopup', this.onShowManagerPopup)
    window.addEventListener('closeManagerPopup', this.onCloseManagerPopup)
  },
  beforeUnmount() {
    window.removeEventListener('showManagerPopup', this.onShowManagerPopup)
    window.removeEventListener('closeManagerPopup', this.onCloseManagerPopup)
  },
  data() {
    return {
      managerPopupVisible: false,
      id: this.$route.query.id || this.$ls.get('user_id'),
      data: {
        endTimes: new Date().toLocaleString('zh-CN', { hour12: false })
      },
      countData: {},
    }
  },
  computed: {
    truncatedShopname() {
      if (!this.data.shopname) return ''
      return this.data.shopname.length > 8 ? this.data.shopname.slice(0, 8) + '...' : this.data.shopname
    }
  },
  methods: {
    onShowManagerPopup() {
      this.managerPopupVisible = true
    },
    onCloseManagerPopup() {
      this.managerPopupVisible = false
    },
    init() {
      Promise.all([
        this.$get(`/v1/client/DShopsClient/${this.id}`).then(res => {
          this.data = res.data;
          this.data.endTimes = new Date().toLocaleString('zh-CN', { hour12: false });
          this.$ls.set('merchant_shopname', res.data.shopname);
          this.$ls.set('merchant_shopimg', res.data.shopimg);
          this.$ls.set('merchant_cellphone', res.data.cellphone);
        }),
        this.getCount()
      ])
    },
    getCount() {
      this.$get('/v1/client/DShopsClient/statistics').then(res => {
        this.countData = res.data;
        this.data.endTimes = new Date().toLocaleString('zh-CN', { hour12: false });
      })
    },
  },
}

</script>

<style lang="less"></style>