jsm-mall-h5-front/src/pages/workorder/index.vue

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :isScroll="true" :refresherTriggered="refresherTriggered" @refresherrefresh="refresherrefresh">
    <template slot="header">
      <view class="search-container" v-if="isWorkerUser">
        <u-search
          shape="round"
          :showAction="false"
          placeholder="输入工单单号进行搜索"
          v-model="keyword"
          @search="searchData"
        >
        </u-search>
      </view>
    </template>

    <view class="all-container">
      <!-- <view class="order-container card">
        <view class="home-title">
          <view class="left">我的订单</view>
          <view class="right" @tap="navToPage('/packageMine/pages/order/list?tab=', 1)">
            <text class="text">全部订单</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in orderList" :key="index"
            @tap="navToPage(`/packageMine/pages/order/list?tab=${item.key}`, 1)">
            <view class="icon">
              <text class="iconfont" :class="item.icon"></text>
              <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
            </view>
            <view class="title">{{ item.title }}</view>
          </view>
        </view>
      </view> -->

      <view class="order-container card">
        <view class="home-title">
          <view class="left">我的服务单</view>
          <view class="right" @tap="navToPage('/packageWorkorder/pages/userWorkorderList?tab=', 1)">
            <text class="text">全部服务单</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
        <view class="list">
          <view
            class="item"
            v-for="(item, index) in workorderList"
            :key="index"
            @tap="navToPage(`/packageWorkorder/pages/userWorkorderList?tab=${item.key}`, 1)"
          >
            <view class="icon">
              <text class="iconfont" :class="item.icon"></text>
              <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
            </view>
            <view class="title">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <block v-if="isWorkerUser">
        <view class="data-container">
          <view class="common-title">我的工单</view>
          <view class="list">
            <view class="item" v-for="(item, index) in statsList" :key="index" @tap="clickItem(item)">
              <view class="num">{{ item.num }}</view>
              <view class="bottom">
                <text class="iconfont" :class="item.icon" :style="{ color: item.color }"></text>
                <text class="text">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="schedule-container">
          <view class="common-title">我的日程</view>
          <view class="schedule-card">
            <view class="label">
              <view>星期</view>
              <view>日期</view>
              <view>待接单</view>
              <view>服务中</view>
            </view>
            <view class="days">
              <view class="item" v-for="(item, index) in scheduleList" :key="index">
                <view>{{ item.week }}</view>
                <view :class="index === 0 ? 'today' : ''">{{ index === 0 ? '今天' : item.day }}</view>
                <view>{{ item.djd || '' }}</view>
                <view>{{ item.fwz || '' }}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/pages/workorder/index`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
import { selectionChange } from '@/common/utils/util.js';

export default {
  data() {
    return {
      userInfo: {},
      refresherTriggered: false,
      keyword: '',

      statsList: [
      	{ name: '待接单', num: 0, icon: 'icon-daiyuyue', color: '#D8F6D8', url: '/packageWorkorder/pages/orderList?tab=DJD' },
      	{ name: '服务中', num: 0, icon: 'icon-daishangmen', color: '#FFEBDF', url: '/packageWorkorder/pages/orderList?tab=FWZ' },
      	{ name: '异常单', num: 0, icon: 'icon-daiwangong', color: '#D7F1FF', url: '/packageWorkorder/pages/orderList?tab=YCD' },
      	{ name: '待抢单', num: 0, icon: 'icon-daijiesuan', color: '#FFEED1', url: '/packageWorkorder/pages/orderList?tab=DQD' },
      	{ name: '今日完工', num: 0, icon: 'icon-tuojigongdan', color: '#D7F1FF', url: '/packageWorkorder/pages/orderList?tab=YWG' },
      	{ name: '近半年完工', num: 0, icon: 'icon-bannianwangong', color: '#D8F6D8', url: '/packageWorkorder/pages/orderList?tab=YWG' },
      	{ name: '配件申请中', num: 0, icon: 'icon-bannianwangong', color: '#D8F6D8', url: '/packageMaterial/pages/partsApply/list?tab=ING' },
      	{ name: '配件已到货', num: 0, icon: 'icon-bannianwangong', color: '#D8F6D8', url: '/packageMaterial/pages/partsApply/list?tab=END' },
      ],

      scheduleList: [],

      orderList: [
        { title: '待付款', icon: 'icon-daifukuan', key: 'NOPAY', num: 0 },
        { title: '进行中', icon: 'icon-daifuwu', key: 'YFH', num: 0 },
        { title: '待评价', icon: 'icon-daipingjia1', key: 'OVER', num: 0 },
        { title: '售后/退款', icon: 'icon-shouhou', key: 'REFUND', num: 0 }
      ],

      workorderList: [
        { title: '待预约', icon: 'icon-daifukuan', key: 1, num: 0 },
        { title: '服务中', icon: 'icon-daifuwu', key: 2, num: 0 },
        { title: '待评价', icon: 'icon-daipingjia1', key: 3, num: 0 },
        { title: '已完成', icon: 'icon-shouhou', key: 4, num: 0 }
      ],
    }
  },

  computed:{
    isWorkerUser() { // 是否师傅
    	return this.userInfo && this.userInfo.type === 'WORKER';
    },
  },

  onLoad() {
    this.crossPage.$on('refreshUserWorkorderList', data => {
      if(this.isWorkerUser) {
        this.getOrderStats();
        this.getPartsStats();
        this.getSchedule();
      }
    })
  },

  async onShow() {
    selectionChange();

    this.userInfo = await this.$getUserInfo();

    if(this.isWorkerUser) {
      this.getOrderStats();
      this.getPartsStats();
      this.getSchedule();
    }
  },

  onUnload() {
    this.crossPage.$off('refreshUserWorkorderList');
  },

  methods: {
    // 获取工单统计
    async getOrderStats() {
      return new Promise((resolve, reject) => {
        this.$api.post('/pg/order/base/status/count')
        .then(res => {
          this.statsList[0].num = res.data.djd;
          this.statsList[1].num = res.data.fwz;
          this.statsList[2].num = res.data.ycd;
          this.statsList[3].num = res.data.dqd;
          this.statsList[4].num = res.data.jrwg;
          this.statsList[5].num = res.data.jbnwg;
        }).finally(res => {
          resolve(1);
        })
      })
    },

    // 获取配件申请统计
    async getPartsStats() {
      return new Promise((resolve, reject) => {
        this.$api.post('/material/parts/apply/count')
        .then(res => {
          this.statsList[6].num = res.data.partsIngCount;
          this.statsList[7].num = res.data.partsEndCount;
        }).finally(res => {
          resolve(1);
        })
      })
    },

    // 获取日程
    async getSchedule() {
      return new Promise((resolve, reject) => {
        this.$api.post('/pg/order/base/my/schedule')
        .then(res => {
          let list = [];
          for (var i = 0; i < res.data.dayList.length; i++) {
            list.push({
              week: res.data.weekList[i],
              day: res.data.dayList[i],
              djd: res.data.djdList[i],
              fwz: res.data.fwzList[i]
            });
          }
          this.scheduleList = list;
        }).finally(res => {
          resolve(1);
        })
      })
    },

    // 下拉刷新
    async refresherrefresh() {
      this.refresherTriggered = true;
      if(this.isWorkerUser && this.type != 2) {
        await this.getOrderStats();
        await this.getPartsStats();
        await this.getSchedule();
      }
      this.refresherTriggered = false;
    },

    clickItem(item) {
      if(!item.url) return false;
      this.navToPage(item.url);
    },

    searchData() {
      this.navToPage(`/packageWorkorder/pages/search?keyword=${this.keyword}`)
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    },
  },
}

// #endif
// #ifndef H5

import { getNoticeNum, getOrderNum } from '@/common/utils/util.js';

export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;

    getNoticeNum()
    getOrderNum()
  }
}
// #endif
</script>

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}

.all-container {
  padding: 1rpx 20rpx 20rpx;
}

.data-container {
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .item {
      background: #ffffff;
      width: calc((100% - 40rpx) / 3);
      margin: 20rpx 20rpx 0 0;
      height: 220rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 20rpx 16rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .num {
        font-size: 52rpx;
        font-weight: 500;
      }

      .bottom {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 36rpx;
        }

        .text {
          color: $sec-font;
          margin-left: 6rpx;
          font-size: 28rpx;
        }
      }
    }
  }
}

.card {
  @include zj-card;
  padding: 30rpx;
  box-shadow: none;
  margin-top: 20rpx;
}

.common-title {
  margin-top: 30rpx;
  font-size: 34rpx;
  font-weight: bold;
}

.home-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    font-size: 34rpx;
    color: $main-font;
    font-weight: bold;
  }

  .right {
    display: flex;
    align-items: center;

    .text {
      font-size: 28rpx;
      color: $sec-font;
    }

    .iconfont {
      font-size: 24rpx;
      color: $sec-font;
      margin-left: 8rpx;
    }
  }
}

.schedule-container {
  .schedule-card {
    border-radius: 12rpx;
    display: flex;
    overflow: hidden;
    background: #ffffff;
    margin-top: 20rpx;
    .label {
      background: $theme-color;
      width: 44rpx;

      view {
        height: 90rpx;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10rpx;
        box-sizing: border-box;
      }
    }

    .days {
      flex: 1;
      display: flex;
      overflow-x: scroll;

      .item {
        flex-shrink: 0;
        width: 90rpx;

        view {
          width: 100%;
          text-align: center;
          height: 90rpx;
          line-height: 90rpx;
          box-sizing: border-box;

          &.today {
            color: $theme-color;
            font-size: 28rpx !important;
          }

          &.active {
            color: #19be6b !important;
          }

          &:nth-child(1) {
            color: $sec-font;
          }

          &:nth-child(2) {
            font-size: 32rpx;
            font-weight: 500;
          }

          &:nth-child(3) {
            font-size: 32rpx;
            font-weight: 500;
            color: $assist-color;
            border-right: 1rpx solid #f4f5f7;
            border-top: 1rpx solid #f4f5f7;
          }

          &:nth-child(4) {
            font-size: 32rpx;
            font-weight: 500;
            color: $theme-color;
            border-right: 1rpx solid #f4f5f7;
            border-top: 1rpx solid #f4f5f7;
          }

          &:nth-child(5) {
            color: $sec-font;
            border-right: 1rpx solid #f4f5f7;
            border-top: 1rpx solid #f4f5f7;
          }
        }
      }
    }
  }
}

.order-container {
  .list {
    display: flex;
    margin-top: 30rpx;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        position: relative;

        .iconfont {
          font-size: 52rpx;
        }
      }

      .title {
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
}
</style>