zhangqi
/
yos_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./file/axios.min.js"></script>
  <script src="./file/vue.min.js"></script>
  <link rel="stylesheet" href="./file/index.css">
  <script src="./file/vant.min.js"></script>
  <link rel="stylesheet" href="./file/style.css">
  <script src="./file/login-auth.js"></script>
  <title>工单</title>
  <style>
    body {
      background-color: #f5f6fa;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', sans-serif;
    }
    .container {
      max-width: 750px;
      margin: 0 auto;
      background-color: #f5f6fa;
      min-height: 100vh;
    }
    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      padding: 0 16px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .nav-bar .nav-left, .nav-bar .nav-right {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .nav-bar .nav-left svg, .nav-bar .nav-right svg {
      width: 20px;
      height: 20px;
      fill: #333;
    }
    .nav-bar .nav-right { gap: 16px; }
    .nav-bar .nav-title {
      font-size: 17px;
      font-weight: 600;
      color: #000;
    }
    /* 搜索栏 */
    .search-bar {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }
    .search-input-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 4px;
      padding: 6px 10px;
    }
    .search-input-wrap svg {
      width: 16px;
      height: 16px;
      fill: #999;
      margin-right: 6px;
    }
    .search-input-wrap input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-size: 14px;
      color: #333;
    }
    .search-cancel {
      margin-left: 12px;
      font-size: 14px;
      color: #1989fa;
      cursor: pointer;
    }
    /* 筛选弹窗 */
    .filter-mask {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 999;
    }
    .filter-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 85%;
      max-width: 350px;
      background: #fff;
      box-shadow: -2px 0 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      z-index: 1000;
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }
    .filter-panel.show { transform: translateX(0); }
    .filter-header {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    .filter-header span { font-size: 17px; font-weight: 600; }
    .filter-close { font-size: 24px; color: #999; cursor: pointer; }
    .filter-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    .filter-section { margin-bottom: 24px; }
    .filter-section-title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 12px;
    }
    .filter-tags { display: flex; flex-wrap: wrap; gap: 10px; }
    .tag-item {
      padding: 8px 16px;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
    }
    .tag-item.active { background: #1989fa; color: #fff; }
    .filter-date-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .filter-date-row input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      color: #333;
      background: #fff;
    }
    .filter-date-row span { color: #999; }
    .filter-footer {
      display: flex;
      padding: 16px;
      gap: 12px;
      border-top: 1px solid #eee;
    }
    .btn-reset {
      flex: 1;
      text-align: center;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      color: #1989fa;
      font-size: 15px;
      cursor: pointer;
    }
    .btn-confirm {
      flex: 1;
      text-align: center;
      padding: 12px;
      background: #1989fa;
      border-radius: 4px;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
    }
    /* 标签页 */
    .tabNav {
      display: flex;
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }
    .tabNav > a {
      display: block;
      flex: 1;
      text-align: center;
      line-height: 44px;
      font-size: 15px;
      color: #666;
      text-decoration: none;
      position: relative;
    }
    .tabNav > a.active {
      color: #1989fa;
      font-weight: 500;
    }
    .tabNav > a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background-color: #1989fa;
      border-radius: 2px;
    }
    /* 列表样式 */
    .list-container { padding: 12px; background-color: #f5f6fa; }
    .card {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    }
    .tag {
      display: inline-block;
      background-color: #1989fa;
      color: #fff;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
    }
    .status { font-size: 14px; font-weight: 500; }
    .status.pending { color: #1989fa; }
    .status.processing { color: #07c160; }
    .status.completed { color: #ff976a; }
    .status.paused { color: #ee0a24; }
    .card-body { padding-top: 12px; }
    .address {
      font-size: 15px;
      font-weight: 500;
      color: #333;
      line-height: 1.5;
      margin-bottom: 8px;
    }
    .info-row {
      display: flex;
      font-size: 13px;
      color: #999;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    .label { flex-shrink: 0; width: 70px; }
    .value { flex: 1; word-break: break-all; }
    .value.phone { color: #1989fa; text-decoration: none; }
    .empty-state {
      text-align: center;
      padding: 40px 0;
      color: #999;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="app">
      <!-- 顶部导航栏 -->
      <div class="nav-bar">
        <div class="nav-left" @click="goback">
          <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
        </div>
        <div class="nav-title">工单</div>
        <div class="nav-right">
          <svg @click="showSearch = true" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
          <svg @click="showFilter = true" viewBox="0 0 24 24"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>
        </div>
      </div>

      <!-- 搜索栏 -->
      <div class="search-bar" v-show="showSearch">
        <div class="search-input-wrap">
          <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
          <input type="text" v-model="searchKey" placeholder="请输入关键词搜索" />
        </div>
        <div class="search-cancel" @click="showSearch = false; searchKey = ''">取消</div>
      </div>

      <!-- 标签页导航 -->
      <div class="tabNav">
        <a href="jindu.html">预约单</a>
        <a class="active">工单</a>
      </div>

      <div class="list-container">
        <div v-if="filteredList.length === 0" class="empty-state">暂无工单数据</div>
        <div class="card" v-for="(item, index) in filteredList" :key="index" @click="goDetail(item.sc_workorderid)">
          <div class="card-header">
            <span class="tag">{{ item.type || '施工' }}</span>
            <span class="status" :class="{
              'pending': item.status === '待开始',
              'processing': item.status === '进行中',
              'paused': item.status === '暂停',
              'completed': item.status === '已完成'
            }">{{ item.status }}</span>
          </div>
          <div class="card-body">
            <div class="address">{{ item.address }}</div>
            <div class="info-row">
              <span class="label">工单号：</span>
              <span class="value">{{ item.billno }}</span>
            </div>
            <div class="info-row">
              <span class="label">客户：</span>
              <span class="value">{{ item.name }} <a :href="'tel:' + item.phonenumber" class="value phone">{{ item.phonenumber }}</a></span>
            </div>
            <div class="info-row">
              <span class="label">现场联系人：</span>
              <span class="value">{{ item.scenecontact }} <a :href="'tel:' + item.scenecontactphonenumber" class="value phone">{{ item.scenecontactphonenumber }}</a></span>
            </div>
            <div class="info-row">
              <span class="label">负责人：</span>
              <span class="value">{{ item.changeby || '-' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 筛选弹窗 -->
      <div class="filter-mask" v-show="showFilter" @click="showFilter = false">
        <div class="filter-panel" :class="{ show: showFilter }" @click.stop>
          <div class="filter-header">
            <span>筛选条件</span>
            <div class="filter-close" @click="showFilter = false">×</div>
          </div>
          <div class="filter-body">
            <div class="filter-section">
              <div class="filter-section-title">状态</div>
              <div class="filter-tags">
                <div class="tag-item" :class="{ active: filters.status === '待开始' }" @click="filters.status = '待开始'">待开始</div>
                <div class="tag-item" :class="{ active: filters.status === '进行中' }" @click="filters.status = '进行中'">进行中</div>
                <div class="tag-item" :class="{ active: filters.status === '暂停' }" @click="filters.status = '暂停'">暂停</div>
                <div class="tag-item" :class="{ active: filters.status === '已完成' }" @click="filters.status = '已完成'">已完成</div>
                <div class="tag-item" :class="{ active: filters.status === '质保卡审批' }" @click="filters.status = '质保卡审批'">质保卡审批</div>
                <div class="tag-item" :class="{ active: filters.status === '作废' }" @click="filters.status = '作废'">作废</div>
              </div>
            </div>
            <div class="filter-section">
              <div class="filter-section-title">工单类型</div>
              <div class="filter-tags">
                <div class="tag-item" :class="{ active: filters.orderType === '施工' }" @click="filters.orderType = '施工'">施工</div>
                <div class="tag-item" :class="{ active: filters.orderType === '维修' }" @click="filters.orderType = '维修'">维修</div>
                <div class="tag-item" :class="{ active: filters.orderType === '验收' }" @click="filters.orderType = '验收'">验收</div>
              </div>
            </div>
            <div class="filter-section">
              <div class="filter-section-title">服务类型</div>
              <div class="filter-tags">
                <div class="tag-item" :class="{ active: filters.type === '安装' }" @click="filters.type = '安装'">安装</div>
                <div class="tag-item" :class="{ active: filters.type === '维修' }" @click="filters.type = '维修'">维修</div>
                <div class="tag-item" :class="{ active: filters.type === '验收' }" @click="filters.type = '验收'">验收</div>
              </div>
            </div>
            <div class="filter-section">
              <div class="filter-section-title">创建时间</div>
              <div class="filter-date-row">
                <input type="date" v-model="filters.createDateStart" placeholder="开始日期" />
                <span>—</span>
                <input type="date" v-model="filters.createDateEnd" placeholder="结束日期" />
              </div>
            </div>
            <div class="filter-section">
              <div class="filter-section-title">完成时间</div>
              <div class="filter-date-row">
                <input type="date" v-model="filters.finishDateStart" placeholder="开始日期" />
                <span>—</span>
                <input type="date" v-model="filters.finishDateEnd" placeholder="结束日期" />
              </div>
            </div>
          </div>
          <div class="filter-footer">
            <div class="btn-reset" @click="resetFilter">重置</div>
            <div class="btn-confirm" @click="applyFilter">确定</div>
          </div>
        </div>
      </div>

    </div>
  </div>

<script>
  new Vue({
    el: '#app',
    data: {
      workOrderData: [],
      showSearch: false,
      searchKey: '',
      showFilter: false,
      filters: {
        status: '',
        orderType: '',
        type: '',
        createDateStart: '',
        createDateEnd: '',
        finishDateStart: '',
        finishDateEnd: ''
      }
    },
    computed: {
      filteredList () {
        return this.workOrderData;
      }
    },
    watch: {
      showFilter (val) {
        if (val) {
          document.body.classList.add('van-overflow-hidden');
        } else {
          document.body.classList.remove('van-overflow-hidden');
        }
      }
    },
    methods: {
      goback () {
        window.location.href="javascript:history.go(-1)";
      },
      goDetail (id) {
        window.location.href = 'gongdan_detail.html?id=' + id;
      },
      resetFilter () {
        this.filters = { status: '', orderType: '', type: '', createDateStart: '', createDateEnd: '', finishDateStart: '', finishDateEnd: '' };
        this.getData();
      },
      applyFilter () {
        this.showFilter = false;
        this.getData();
      },
      getData() {
        var self = this;
        var login = window.H5Login || {};

        axios.post(window.API_URL, {
          id: 2026052113525502,
          content: {
            phonenumber: login.phone || '',
            pageNumber: 1,
            pageSize: 50,
            where: {
              condition: this.searchKey || '',
              status: this.filters.status ? [this.filters.status] : [],
              type: this.filters.orderType || '',
              servicetype: this.filters.type || '',
              begindate_createdate: this.filters.createDateStart || '',
              enddate_createdate: this.filters.createDateEnd || '',
              begindate_finishdate: this.filters.finishDateStart || '',
              enddate_finishdate: this.filters.finishDateEnd || ''
            }
          },
          accesstoken: login.token || ''
        }).then(function (res) {
          var data = res.data;
          if (data.code === 1) {
            self.workOrderData = data.data || [];
          }
        }).catch(function () {
          self.workOrderData = [];
        });
      }
    },
    mounted() {
      var self = this;
      this.getData();
      window.addEventListener('h5:login', function () {
        self.getData();
      });
    }
  })
</script>
</body>
</html>