tf-business/pages_module/operateData/index.vue

<template>
  <view class="operateData">
    <view class="operate-box">
      <view class="operate-item border">
        <view class="item-icon">
          <tui-icon name="seen" :size="16" color="#FFFFFF"></tui-icon>
        </view>
        <view class="item-text">
          <text>店铺访问次数</text>
          <text>{{ operateData.total }}</text>
        </view>
      </view>
      <view class="operate-item">
        <view class="item-icon">
          <tui-icon name="time" :size="16" color="#FFFFFF"></tui-icon>
        </view>
        <view class="item-text">
          <text>待处理订单</text>
          <text>{{ operateData.stayOrders }}</text>
        </view>
      </view>
      <view class="operate-item border">
        <view class="item-icon">
          <tui-icon name="wealth" :size="16" color="#FFFFFF"></tui-icon>
        </view>
        <view class="item-text">
          <text>成交金额</text>
          <text>{{ operateData.money || 0 }}</text>
        </view>
      </view>
      <view class="operate-item">
        <view class="item-icon">
          <tui-icon name="order" :size="16" color="#FFFFFF"></tui-icon>
        </view>
        <view class="item-text">
          <text>售后订单</text>
          <text>{{ operateData.stayAfters }}</text>
        </view>
      </view>
    </view>
    <view class="list-container">
      <view class="list-title">用户访问趋势</view>
      <view class="list-box">
        <tui-charts-line
          ref="tui_line_1"
          tooltip
          :width="588"
          :xAxis="options1.xAxis"
          :dataset="options1.dataset"
          :max="options1.max"
          :splitNumber="options1.splitNumber"
          @click="dotClick"
        ></tui-charts-line>
      </view>
    </view>
    <view class="list-container">
      <view class="list-title">订单转换漏斗</view>
      <view class="list-box">
        <tui-charts-line
          ref="tui_line_2"
          tooltip
          :width="588"
          :xAxis="options2.xAxis"
          :dataset="options2.dataset"
          :max="options2.max"
          :splitNumber="options2.splitNumber"
          @click="dotClick"
        ></tui-charts-line>
      </view>
    </view>
    <view class="custom-container">
      <view class="custom-title">客户列表</view>
      <view class="custom-list">
        <view class="item" v-for="item in buyerList" :key="item.buyerUserId">
          <view class="item-top">
            <text>{{ item.name }}</text>
            <text>{{ item.phone }}</text>
          </view>
          <view class="item-bottom">
            <view class="text-box">
              <text>消费次数</text>
              <text>{{ item.frequency || 0 }}</text>
            </view>
            <view class="text-box">
              <text>累计消费金额</text>
              <text>{{ item.total || 0 }}元</text>
            </view>
            <view class="text-box">
              <text>上次消费时间</text>
              <text>{{ item.lastTime }}</text>
            </view>
            <view class="text-box">
              <text>成为客户时间</text>
              <text>{{ item.time }}</text>
            </view>
            <view class="text-box">
              <text>客户等级</text>
              <text>{{ item.userGrade }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getOperateData, getCustomerList } from "@/config/index";
export default {
  created() {
    //  获取客户列表
    this.getBuyerAll();
  },
  async onReady() {
    this.getBusinessData();
  },
  data() {
    return {
      // 总体数据
      operateData: {},
      options1: {
        xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
        dataset: [
          {
            name: "访问量",
            color: "#EA5C1E",
            source: [1, 2, 3, 4, 5, 6],
          },
        ],
        max: 10,
        splitNumber: 2,
      },
      options2: {
        xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
        dataset: [
          {
            name: "转化率(%)",
            color: "#EA5C1E",
            source: [],
          },
        ],
        max: 100,
        splitNumber: 25,
      },
      //    获取客户列表的参数
      queryData: {
        dates: [],
        labelId: null,
        lastTimes: [],
        page: 1,
        pageSize: 20,
        phone: "",
      },
      // 客户列表
      buyerList: [],
    };
  },
  methods: {
    //  获取经营数据
    async getBusinessData() {
      let res = await getOperateData({ condition: 3 });
      this.operateData = res.data;
      this.handleData();
      this.orderData();
    },
    //  获取客户数据
    async getBuyerAll() {
      let { data } = await getCustomerList(this.queryData);
      this.buyerList = [...this.buyerList, ...data.list];
    },

    // 对数据进行处理
    handleData() {
      let { visitWeek } = this.operateData;
      let list = visitWeek.time.reduce((prev, item, index) => {
        if (index == 0) return prev;
        let arr = item.split("-");
        prev.push(`${arr[1]}.${arr[2]}`);
        return prev;
      }, []);
      this.options1.xAxis = list;
      //  删除第一个
      visitWeek.total.shift();
      this.options1.dataset[0].source = visitWeek.total;

      let max = Math.max(...visitWeek.total);
      //    设置最大值和最小值
      this.options1.max = max + 4;
      this.options1.splitNumber = Math.ceil(max / 4) + 1;
      this.$nextTick(() => {
        this.$refs.tui_line_1.draw(this.options1.dataset);
      });
    },
    //  订单转化率画图
    orderData() {
      let { conversion } = this.operateData;
      this.options2.xAxis = conversion.names;
      this.options2.dataset[0].source = conversion.rates;
      this.$nextTick(() => {
        this.$refs.tui_line_2.draw(this.options2.dataset);
      });
    },
    dotClick(e) {
      console.log(e);
    },
  },
  //  触底加载
  onReachBottom() {
    this.queryData.page++;
    this.getBuyerAll();
  },
};
</script>

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