confirm-list.vue 8.59 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 9
      </div>
    </h-header>
    <Tab @getTabNum="getTabNum" />
linxin's avatar
linxin committed
10
    <div class="search has-header">
linxin's avatar
linxin 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 28 29 30 31 32 33 34 35 36 37 38 39
          <div class="right-bottom">
            <ul>
              <li>
                承租人
                <span>{{ item.bp_name }}</span>
              </li>
              <li>
                产品线
                <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>
44 45 46
  </h-view>
</template>
<script>
linxin's avatar
linxin committed
47
import Tab from '@/pages/carConfirm/tab'
48 49 50 51
export default {
  components: {
    Tab,
  },
52 53
  data () {
    return {
linxin's avatar
linxin committed
54
      tabNum: 0,
linxin's avatar
linxin committed
55
      keyWord: '',
56 57 58
      status: '',
      pagenumNew: 1,
      pagenumApproved: 1,
linxin's avatar
linxin committed
59
      lists: [],
linxin's avatar
linxin committed
60 61 62
      showList: [],
      undo: [],
      done: [],
63 64
    }
  },
linxin's avatar
linxin committed
65
  watch: {
linxin's avatar
linxin committed
66
    tabNum: {
linxin's avatar
linxin committed
67 68
      handler (newVal, oldVal) {
        if (newVal === 0) {
69
          this.status = 'SUBMIT'
linxin's avatar
linxin committed
70 71
          this.showList = this.undo
        } else if (newVal === 1) {
72
          this.status = 'APPROVED'
linxin's avatar
linxin committed
73 74
          this.showList = this.done
        }
75
        this.getList()
linxin's avatar
linxin committed
76 77 78
      },
      immediate: true,
    },
79 80 81
    keyWord (newVal, oldVal) {
      this.search()
    },
linxin's avatar
linxin committed
82
  },
linxin's avatar
linxin committed
83
  created () {},
linxin's avatar
linxin committed
84 85
  beforeRouteEnter (to, from, next) {
    next(vm => {
86 87
      vm.pagenumNew = 1
      vm.pagenumApproved = 1
linxin's avatar
linxin committed
88
      vm.lists = []
linxin's avatar
linxin committed
89
    })
linxin's avatar
linxin committed
90
  },
91
  methods: {
92 93 94
    search () {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
linxin's avatar
linxin committed
95 96 97 98 99
      let url =
        process.env.basePath +
        'car_confirm_list_query' +
        '&index' +
        `'${randomString}'`
100 101
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
102
        confirm_status: vm.status,
103 104 105 106 107 108 109 110 111 112 113
        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
114 115
    selectShowList () {
      let vm = this
linxin's avatar
linxin committed
116 117
      vm.undo = []
      vm.done = []
linxin's avatar
linxin committed
118 119 120 121 122 123 124
      this.lists.forEach(item => {
        if (item.confirm_status === 'SUBMIT') {
          vm.undo.push(item)
        } else if (item.confirm_status === 'APPROVED') {
          vm.done.push(item)
        }
      })
125 126 127 128 129
      if (vm.tabNum === 0) {
        this.showList = this.undo
      } else {
        this.showList = this.done
      }
linxin's avatar
linxin committed
130
    },
131
    getTabNum (i) {
linxin's avatar
linxin committed
132
      this.tabNum = i
linxin's avatar
linxin committed
133
      this.$refs.scroll.update(false)
linxin's avatar
linxin committed
134
      this.$refs.scroll.scrollToTop()
135
    },
linxin's avatar
linxin committed
136
    changePage (e) {
137
      this.$router.push({
138
        name: 'ConfirmDetail',
linxin's avatar
linxin committed
139
        params: {
linxin's avatar
linxin committed
140
          project_id: e.project_id,
linxin's avatar
linxin committed
141
          confirm_status: e.confirm_status,
linxin's avatar
linxin committed
142 143 144 145 146
        },
      })
    },
    getList () {
      let vm = this
147
      let randomString = Math.floor(Math.random() * 21)
linxin's avatar
linxin committed
148 149 150 151 152
      let url =
        process.env.basePath +
        'car_confirm_list_query' +
        '&index' +
        `'${randomString}'`
linxin's avatar
linxin committed
153
      let param = {
154
        user_phone: window.localStorage.getItem('user_phone'),
linxin's avatar
linxin committed
155
        pagesize: 10,
156 157
        pagenum: vm.status === 'APPROVED' ? vm.pagenumApproved : vm.pagenumNew,
        confirm_status: vm.status,
linxin's avatar
linxin committed
158
        searchInput: vm.keyWord,
linxin's avatar
linxin committed
159 160 161 162 163
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
linxin's avatar
linxin committed
164 165 166 167 168 169 170 171
          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])
            })
172
            vm.status === 'APPROVED' ? vm.pagenumApproved++ : vm.pagenumNew++
linxin's avatar
linxin committed
173 174 175 176 177
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
178
            vm.status === 'APPROVED' ? vm.pagenumApproved++ : vm.pagenumNew++
linxin's avatar
linxin committed
179 180
            vm.$refs.scroll.update(false)
          }
linxin's avatar
linxin committed
181
          vm.selectShowList()
linxin's avatar
linxin committed
182 183 184
        } else {
          hlsPopup.showLongCenter(res.message)
        }
185 186 187 188 189
      })
    },
  },
}
</script>
linxin's avatar
linxin committed
190 191
<style lang="less">
#confirmList {
192 193
  .search {
    background-color: #fff;
linxin's avatar
linxin committed
194 195 196
    padding: 8px 12px;
    position: absolute;
    width: 100%;
linxin's avatar
linxin committed
197
    height: 1.02rem;
linxin's avatar
linxin committed
198 199 200
    z-index: 100;
    margin-top: 52px;
    margin-bottom: 8px;
201
    input {
linxin's avatar
linxin committed
202 203
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
linxin's avatar
linxin committed
204 205 206 207
      background-color: rgba(239, 239, 239, 0.55);
      padding-left: 12px;
      height:36px;
      line-height: 36px;
linxin's avatar
linxin committed
208 209
      border-radius: 4px;
      width: 100%;
210 211
      font-family: PingFangSC-Regular;
      font-size: 14px;
linxin's avatar
linxin committed
212
      color: #888c8f;
213
    }
linxin's avatar
linxin committed
214

215 216 217
    input::placeholder {
      font-family: PingFangSC-Regular;
      font-size: 14px;
linxin's avatar
linxin committed
218
      color: #888c8f;
219 220
      letter-spacing: 0;
    }
linxin's avatar
linxin committed
221

222 223 224 225 226 227 228
    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
229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
  .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;
254 255
        }
      }
linxin's avatar
linxin committed
256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279
    }
    .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;
280 281
          color: #4b4a4b;
          letter-spacing: 0;
linxin's avatar
linxin committed
282
          font-weight: bold;
283
        }
linxin's avatar
linxin committed
284 285 286 287 288 289 290 291 292
        li {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #4b4a4b;
          letter-spacing: 0;
          height: 30px;
          width: 100%;
          span {
            float: right;
293 294 295 296
          }
        }
      }
    }
linxin's avatar
linxin committed
297 298
  }
  .content {
linxin's avatar
linxin committed
299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334
    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
335 336 337 338 339 340 341 342 343 344 345 346 347 348
      .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
349
    }
350 351 352
  }
}
</style>