|
@@ -5,25 +5,28 @@
|
|
|
<van-dropdown-item v-model='value1' :options='option1' />
|
|
|
</van-dropdown-menu>
|
|
|
<div class='record'>
|
|
|
- <div class='info' v-for='i in 5' :key='i'>
|
|
|
- <div class='left'>
|
|
|
- <div class='dot'></div>
|
|
|
- <div class='line'></div>
|
|
|
- </div>
|
|
|
- <div class='right'>
|
|
|
- <div class='title'>
|
|
|
- <span class='date'>2020.08.19</span>
|
|
|
- </div>
|
|
|
- <div class='content' @click='goToDetailInfo'>
|
|
|
- <p class='type'>重要维保</p>
|
|
|
- <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
|
|
|
+ <!-- 引入list,触底更新 -->
|
|
|
+ <van-list class='record-list' v-model='loading' :finished='finished' finished-text='没有更多了' @load='onLoad'>
|
|
|
+ <div class='info' v-for='i in list' :key='i'>
|
|
|
+ <div class='left'>
|
|
|
+ <div class='dot'></div>
|
|
|
+ <div class='line'></div>
|
|
|
</div>
|
|
|
- <div class='content' v-if='i===1'>
|
|
|
- <p class='type'>重要维修</p>
|
|
|
- <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
|
|
|
+ <div class='right'>
|
|
|
+ <div class='title'>
|
|
|
+ <span class='date'>2020.08.19 {{i}}</span>
|
|
|
+ </div>
|
|
|
+ <div class='content' @click='goToDetailInfo'>
|
|
|
+ <p class='type'>重要维保</p>
|
|
|
+ <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
|
|
|
+ </div>
|
|
|
+ <div class='content' v-if='i===1'>
|
|
|
+ <p class='type'>重要维修</p>
|
|
|
+ <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </van-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -32,9 +35,11 @@
|
|
|
* 说明书更新记录
|
|
|
*/
|
|
|
import Vue from 'vue'
|
|
|
-import { NavBar, DropdownMenu, DropdownItem } from 'vant'
|
|
|
+import { NavBar, DropdownMenu, DropdownItem, List } from 'vant'
|
|
|
Vue.use(NavBar)
|
|
|
Vue.use(DropdownMenu).use(DropdownItem)
|
|
|
+Vue.use(List)
|
|
|
+import { getChangeList } from '@/api/homePage'
|
|
|
export default {
|
|
|
name: 'UpdateRecord',
|
|
|
props: {},
|
|
@@ -49,8 +54,23 @@ export default {
|
|
|
{ text: '其他事项', value: 3 },
|
|
|
{ text: '综合事项', value: 4 },
|
|
|
],
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ let params = {
|
|
|
+ getParams: {
|
|
|
+ plazaId: '1000423',
|
|
|
+ page: 1,
|
|
|
+ size: 100,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ getChangeList(params).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
beforeMount() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
@@ -61,6 +81,23 @@ export default {
|
|
|
goToDetailInfo() {
|
|
|
this.$router.push({ name: 'UpdateRecordDetail', params: { a: 1 } })
|
|
|
},
|
|
|
+ onLoad() {
|
|
|
+ // 异步更新数据
|
|
|
+ // setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
|
|
+ setTimeout(() => {
|
|
|
+ for (let i = 0; i < 5; i++) {
|
|
|
+ this.list.push(this.list.length + 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载状态结束
|
|
|
+ this.loading = false
|
|
|
+
|
|
|
+ // 数据全部加载完成
|
|
|
+ if (this.list.length >= 40) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -81,6 +118,10 @@ export default {
|
|
|
padding: 15px;
|
|
|
background-color: #f5f6f7;
|
|
|
overflow: auto;
|
|
|
+ .record-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
.info {
|
|
|
width: 100%;
|
|
|
height: auto;
|