初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class='box' @scroll="onScroll">
|
||||
<div v-for="item in recordArr" class="apply-list" :key="item.id">
|
||||
<h3 class="h3">
|
||||
<span>提交时间：{{ item.createTime }}</span>
|
||||
<!-- refuse拒绝 pass通过 状态 -->
|
||||
<div class="status" :class="stateEnum[item.status].className">{{ stateEnum[item.status].statusName }}</div>
|
||||
</h3>
|
||||
<div class="apply-content">
|
||||
<div class="user-info">
|
||||
<img src="../assets/lanseyuanquan.png" alt="">
|
||||
<span>拜访人：{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<img src="../assets/huangseyuanquan.png" alt="">
|
||||
<span>拜访时间：{{ item.hours }}</span>
|
||||
</div>
|
||||
<p>
|
||||
{{ item.status == 2 && item.remark ? item.remark : stateEnum[item.status].statusText }}
|
||||
<span class="triangle"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
|
||||
import { postApply, getVisitor, getByPhone } from '@/api/user.js'
|
||||
import { Toast, ImagePreview } from 'vant';
|
||||
/* @data */
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
// console.log(route.params.iphone)
|
||||
const query = reactive({
|
||||
// phone: route.params.iphone,
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
const total = ref()
|
||||
const recordArr = ref([])
|
||||
const stateEnum = store.state.stateEnum
|
||||
|
||||
/* @setup */
|
||||
console.log(localStorage.getItem('userToken'))
|
||||
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
console.log(windowHeight)
|
||||
getByPhone(query).then(res =>{
|
||||
// console.log(res)
|
||||
recordArr.value = res.data
|
||||
total.value = res.total
|
||||
// alert(windowHeight)
|
||||
|
||||
}).catch(err =>{
|
||||
console.log(err)
|
||||
})
|
||||
/* @method */
|
||||
let old = 0
|
||||
const onScroll = (e) =>{
|
||||
if(e.target.scrollTop > old){ // 说明是下拉
|
||||
if(e.target.scrollHeight <= windowHeight + Math.ceil(e.target.scrollTop) ){ // 说明到底了
|
||||
console.log('到底了')
|
||||
if(recordArr.value.length < total.value ){
|
||||
query.current++
|
||||
getList()
|
||||
}else{
|
||||
Toast.success('数据已全部加载完成！');
|
||||
|
||||
}
|
||||
}
|
||||
}else{ // 说明是上拉
|
||||
|
||||
}
|
||||
old = e.target.scrollTop
|
||||
|
||||
// setTimeout(()=>{
|
||||
// alert(e.target.scrollHeight - e.target.scrollTop)
|
||||
|
||||
// },2000)
|
||||
}
|
||||
const getList = () =>{
|
||||
Toast.loading({ duration: 0, forbidClick: true, message: '加载中', });
|
||||
getByPhone(query).then(res =>{
|
||||
// console.log(res)
|
||||
recordArr.value = [ ...recordArr.value , ...res.data]
|
||||
total.value = res.total
|
||||
Toast.clear();
|
||||
|
||||
}).catch(err =>{
|
||||
query.current--
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: #EDEDED;
|
||||
padding: .4rem /* 30/75 */;
|
||||
box-sizing: border-box;
|
||||
.apply-list{
|
||||
width: 100%;
|
||||
// height: 5.0667rem /* 380/75 */;
|
||||
background: #FFFFFF;
|
||||
border-radius: .2667rem /* 20/75 */;
|
||||
padding: 0 .4rem /* 30/75 */ .5867rem /* 44/75 */;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: .4rem /* 30/75 */;
|
||||
|
||||
|
||||
.h3{
|
||||
width: 100%;
|
||||
height: 1.2267rem /* 92/75 */;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: .0267rem /* 2/75 */ dashed #D9D9D9;
|
||||
padding: 0 .1067rem /* 8/75 */;
|
||||
box-sizing: border-box;
|
||||
span{
|
||||
font-size: $sm-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.status{
|
||||
font-size: $size26;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #448CF7;
|
||||
}
|
||||
.pass{
|
||||
color: #18C297;
|
||||
}
|
||||
.refuse{
|
||||
color: #FF6643;
|
||||
}
|
||||
}
|
||||
.apply-content{
|
||||
width: 100%;
|
||||
padding: .5067rem /* 38/75 */ 0 0;
|
||||
.user-info{
|
||||
padding: 0 .24rem /* 18/75 */;
|
||||
box-sizing: border-box;
|
||||
font-size: $md-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: .56rem /* 42/75 */;
|
||||
margin-bottom: .2133rem /* 16/75 */;
|
||||
img{
|
||||
width: .2667rem /* 20/75 */;
|
||||
height: .2667rem /* 20/75 */;
|
||||
margin-right: .2133rem /* 16/75 */;
|
||||
}
|
||||
}
|
||||
p{
|
||||
position: relative;
|
||||
width: 8.2133rem /* 616/75 */;
|
||||
padding: .2133rem /* 16/75 */ .4533rem /* 34/75 */;
|
||||
box-sizing: border-box;
|
||||
line-height: .48rem /* 36/75 */;
|
||||
// height: .9067rem /* 68/75 */;
|
||||
background: #EAEEF6;
|
||||
// background: #fff;
|
||||
border-radius: .1333rem /* 10/75 */;
|
||||
font-size: $sm-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5F6583;
|
||||
margin-top: .5067rem /* 38/75 */;
|
||||
.triangle{
|
||||
position: absolute;
|
||||
top: -.08rem /* 6/75 */;
|
||||
left: .5333rem /* 40/75 */;
|
||||
width: .2rem /* 15/75 */;
|
||||
height: .2rem /* 15/75 */;
|
||||
transform: rotateZ(-45deg);
|
||||
background: #EAEEF6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user