confirm-list.vue 9.1 KB
Newer Older
1
<template>
linxin's avatar
linxin committed
2
  <h-view id="confirmList">
3 4 5
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
6
        <span>发车确认</span>
7 8
      </div>
    </h-header>
linxin's avatar
linxin committed
9
    <Tab :title="text" @getTabNum="getTabNum" />
linxin's avatar
linxin committed
10
    <div class="search has-header">
786817560's avatar
786817560 committed
11
      <input v-model="keyWord" placeholder="请输入合同号/产品名称/承租人名称" >
12
    </div>
linxin's avatar
linxin committed
13 14 15 16 17 18 19 20 21 22 23
    <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="getList">
      <div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)">
        <div class="left">
          <span>
            <img src="@/assets/contractStart/icon.png" >
          </span>
        </div>
        <div class="right">
          <div class="right-top">
            <span>合同号</span>
            <span>{{ item.project_number }}</span>
24
          </div>
linxin's avatar
linxin committed
25 26 27
          <div class="right-bottom">
            <ul>
              <li>
linxin's avatar
linxin committed
28
                {{ item.bp_type_n }}
linxin's avatar
linxin committed
29 30 31
                <span>{{ item.bp_name }}</span>
              </li>
              <li>
786817560's avatar
786817560 committed
32
                产品名称
linxin's avatar
linxin committed
33 34 35 36 37 38 39
                <span>{{ item.division_n }}</span>
              </li>
              <li>
                合同金额
                <span class="number">{{ item.total_price|currency }}</span>
              </li>
            </ul>
40 41
          </div>
        </div>
linxin's avatar
linxin committed
42 43
      </div>
    </scroll>
李晓兵's avatar
李晓兵 committed
44 45 46 47 48
    <div v-if="showList.length === 0">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </div>
49 50 51
  </h-view>
</template>
<script>
linxin's avatar
linxin committed
52
import Tab from '@/pages/carConfirm/tab'
53 54 55 56
export default {
  components: {
    Tab,
  },
57 58
  data () {
    return {
linxin's avatar
linxin committed
59
      text: {first: '待确认', second: '已确认'},
linxin's avatar
linxin committed
60
      tabNum: 0,
linxin's avatar
linxin committed
61
      keyWord: '',
62 63 64
      status: '',
      pagenumNew: 1,
      pagenumApproved: 1,
linxin's avatar
linxin committed
65
      lists: [],
linxin's avatar
linxin committed
66 67 68
      showList: [],
      undo: [],
      done: [],
69 70
    }
  },
linxin's avatar
linxin committed
71
  watch: {
linxin's avatar
linxin committed
72
    tabNum: {
linxin's avatar
linxin committed
73 74
      handler (newVal, oldVal) {
        if (newVal === 0) {
75
          this.status = 'SUBMIT'
linxin's avatar
linxin committed
76 77
          this.showList = this.undo
        } else if (newVal === 1) {
78
          this.status = 'APPROVED'
linxin's avatar
linxin committed
79 80
          this.showList = this.done
        }
81
        this.getList()
linxin's avatar
linxin committed
82 83 84
      },
      immediate: true,
    },
85 86 87
    keyWord (newVal, oldVal) {
      this.search()
    },
linxin's avatar
linxin committed
88
  },
linxin's avatar
linxin committed
89
  created () {},
linxin's avatar
linxin committed
90 91
  beforeRouteEnter (to, from, next) {
    next(vm => {
92 93
      vm.pagenumNew = 1
      vm.pagenumApproved = 1
linxin's avatar
linxin committed
94
      vm.lists = []
linxin's avatar
linxin committed
95
    })
linxin's avatar
linxin committed
96
  },
97
  methods: {
98 99 100
    search () {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
linxin's avatar
linxin committed
101 102 103 104 105
      let url =
        process.env.basePath +
        'car_confirm_list_query' +
        '&index' +
        `'${randomString}'`
106 107
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
108
        confirm_status: vm.status,
109 110 111 112 113 114 115 116 117 118 119
        searchInput: vm.keyWord,
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          vm.lists = res.lists
          vm.selectShowList()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
linxin's avatar
linxin committed
120 121
    selectShowList () {
      let vm = this
linxin's avatar
linxin committed
122 123
      vm.undo = []
      vm.done = []
linxin's avatar
linxin committed
124 125 126 127 128 129 130
      this.lists.forEach(item => {
        if (item.confirm_status === 'SUBMIT') {
          vm.undo.push(item)
        } else if (item.confirm_status === 'APPROVED') {
          vm.done.push(item)
        }
      })
131 132 133 134 135
      if (vm.tabNum === 0) {
        this.showList = this.undo
      } else {
        this.showList = this.done
      }
linxin's avatar
linxin committed
136
    },
137
    getTabNum (i) {
linxin's avatar
linxin committed
138
      this.tabNum = i
linxin's avatar
linxin committed
139
      this.$refs.scroll.update(false)
linxin's avatar
linxin committed
140
      this.$refs.scroll.scrollToTop()
141
    },
linxin's avatar
linxin committed
142
    changePage (e) {
143
      this.$router.push({
144
        name: 'ConfirmDetail',
linxin's avatar
linxin committed
145
        params: {
linxin's avatar
linxin committed
146
          project_id: e.project_id,
linxin's avatar
linxin committed
147
          confirm_status: e.confirm_status,
linxin's avatar
linxin committed
148 149
          check_id: e.check_id,
          confirm_id: e.confirm_id,
150
          business_type: e.business_type,
linxin's avatar
linxin committed
151 152 153 154 155
        },
      })
    },
    getList () {
      let vm = this
156
      let randomString = Math.floor(Math.random() * 21)
linxin's avatar
linxin committed
157 158 159 160 161
      let url =
        process.env.basePath +
        'car_confirm_list_query' +
        '&index' +
        `'${randomString}'`
linxin's avatar
linxin committed
162
      let param = {
163
        user_phone: window.localStorage.getItem('user_phone'),
linxin's avatar
linxin committed
164
        pagesize: 10,
165 166
        pagenum: vm.status === 'APPROVED' ? vm.pagenumApproved : vm.pagenumNew,
        confirm_status: vm.status,
linxin's avatar
linxin committed
167
        searchInput: vm.keyWord,
linxin's avatar
linxin committed
168 169 170 171 172
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
linxin's avatar
linxin committed
173 174 175 176 177 178 179 180
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
181
            vm.status === 'APPROVED' ? vm.pagenumApproved++ : vm.pagenumNew++
linxin's avatar
linxin committed
182 183 184 185 186
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
187
            vm.status === 'APPROVED' ? vm.pagenumApproved++ : vm.pagenumNew++
linxin's avatar
linxin committed
188 189
            vm.$refs.scroll.update(false)
          }
linxin's avatar
linxin committed
190
          vm.selectShowList()
linxin's avatar
linxin committed
191 192 193
        } else {
          hlsPopup.showLongCenter(res.message)
        }
194 195 196 197 198
      })
    },
  },
}
</script>
linxin's avatar
linxin committed
199 200
<style lang="less">
#confirmList {
李晓兵's avatar
李晓兵 committed
201 202
  .display {
    position: fixed;
linxin's avatar
linxin committed
203 204
      width: 100%;
      height: 100%;
李晓兵's avatar
李晓兵 committed
205 206 207 208 209 210 211
    // top: 0;
    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }
212 213
  .search {
    background-color: #fff;
linxin's avatar
linxin committed
214 215 216
    padding: 8px 12px;
    position: absolute;
    width: 100%;
linxin's avatar
linxin committed
217
    height: 1.02rem;
linxin's avatar
linxin committed
218 219 220
    z-index: 100;
    margin-top: 52px;
    margin-bottom: 8px;
221
    input {
linxin's avatar
linxin committed
222 223
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
linxin's avatar
linxin committed
224 225 226 227
      background-color: rgba(239, 239, 239, 0.55);
      padding-left: 12px;
      height:36px;
      line-height: 36px;
linxin's avatar
linxin committed
228 229
      border-radius: 4px;
      width: 100%;
230 231
      font-family: PingFangSC-Regular;
      font-size: 14px;
linxin's avatar
linxin committed
232
      color: #888c8f;
233
    }
linxin's avatar
linxin committed
234

235 236 237
    input::placeholder {
      font-family: PingFangSC-Regular;
      font-size: 14px;
linxin's avatar
linxin committed
238
      color: #888c8f;
239 240
      letter-spacing: 0;
    }
linxin's avatar
linxin committed
241

242 243 244 245 246 247 248
    input:focus {
      background: url("../../assets/contractStart/search2.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      border: 2px solid #bcc6ff;
    }
  }
linxin's avatar
linxin committed
249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273
  .item {
    width: 359px;
    height: 148px;
    background-color: #fff;
    border-radius: 2px;
    margin: 0 auto;
    margin-top: 9px;
    .left {
      width: 15%;
      height: 100%;
      float: left;
      span {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #e8e9ed;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-top: 8px;
        img {
          width: 11px;
          height: 14px;
274 275
        }
      }
linxin's avatar
linxin committed
276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
    }
    .right {
      height: 100%;
      width: 85%;
      float: right;
      .right-top {
        width: 285px;
        height: 45px;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #4b4a4b;
        letter-spacing: 0;
        line-height: 45px;
        border-bottom: 1px solid #f3f3f7;
        span:last-child {
          float: right;
        }
      }
      .right-bottom {
        width: 285px;
        margin-top: 10px;
        .number {
          font-family: Verdana-Bold;
          font-size: 14px;
300 301
          color: #4b4a4b;
          letter-spacing: 0;
linxin's avatar
linxin committed
302
          font-weight: bold;
303
        }
linxin's avatar
linxin committed
304 305 306 307 308 309 310 311 312
        li {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #4b4a4b;
          letter-spacing: 0;
          height: 30px;
          width: 100%;
          span {
            float: right;
313 314 315 316
          }
        }
      }
    }
linxin's avatar
linxin committed
317 318
  }
  .content {
linxin's avatar
linxin committed
319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
    position: absolute;
    top: 0;
  }
  .scrollContent {
    padding-top: 2.92rem;
    padding-bottom: 20px;
  }
  .tab-style {
    width: 100%;
    position: absolute;
  }
}
.platform-ios {
  #confirmList {
    .scrollContent {
      padding-top: 3.32rem;
    }
  }
}

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #confirmList {
      .scrollContent {
        padding-top: 3.72rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #confirmList {
      .scrollContent {
        padding-top: 3.72rem;
      }
linxin's avatar
linxin committed
355 356 357 358 359 360 361 362 363 364 365 366 367 368
      .search {
        input {
          background: url("../../assets/contractStart/search1.png") 320px
            no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding: 8px 12px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }
      }
linxin's avatar
linxin committed
369
    }
370 371 372
  }
}
</style>