<template>
|
|
<view class="template-job tn-safe-area-inset-bottom tn-skeleton">
|
|
<!-- 顶部自定义导航 -->
|
<!-- <view style="height: 100%;"> -->
|
|
<tn-nav-bar fixed style="position: absolute;z-index: 999999999;">
|
<text class="page-title">信息</text>
|
</tn-nav-bar>
|
<u-search class="searchbg" shape="true" bg-color="rgba(255, 255, 255, 0.5)" placeholder="请输入名称" :show-action="false" v-model="keyword" @search="searchxinxi"
|
:style="{top: topheight+'px',position: 'absolute',width: '50%',left: '25%'}"></u-search>
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
<!-- <template #top>
|
<z-tabs :list="tabList" @change="tabsChange" />
|
</template> -->
|
|
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
|
|
<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
|
<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
|
<template #refresher="{refresherStatus}">
|
<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
|
<custom-refresher :status="refresherStatus" />
|
</template>
|
<!-- 自定义没有更多数据view -->
|
<template #loadingMoreNoMore>
|
<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
|
<custom-nomore />
|
</template>
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
|
<view class="item-title">{{item.title}}</view>
|
<view class="item-detail">{{item.detail}}</view>
|
<view class="item-line"></view>
|
</view>
|
</z-paging>
|
|
|
<tn-skeleton :show="showSkeleton"></tn-skeleton>
|
<successCom ref="refSuccess"></successCom>
|
<!-- <u-empty text="暂未开放" mode="list" style="width: 90%; top: 30%;left: 5%; position: absolute; "></u-empty> -->
|
</view>
|
<!-- </view> -->
|
|
<!-- <u-empty text="所谓伊人，在水一方" mode="list"></u-empty> -->
|
</template>
|
|
<script>
|
import successCom from '@/components/success.vue'
|
import {
|
findwarning
|
} from '@/config/api.js';
|
import {
|
minLogin
|
} from '@/js/minLogin.js'
|
import {
|
pagesAlarm
|
} from '@/js/pages/alarm.js'
|
export default {
|
mixins: [minLogin, pagesAlarm],
|
components: {
|
successCom
|
},
|
data() {
|
return {
|
dataList: [],
|
tabList: ['测试1','测试2','测试3','测试4'],
|
tabIndex: 0,
|
imgStyle: {
|
width: '100px',
|
height: '1000px',
|
borderRadius: '50%'
|
},
|
showSkeleton: true,
|
options: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737',
|
}
|
}, ],
|
boxKey: 0,
|
scrollHeight: 500,
|
paddingTop: 60,
|
emitDate: 'indexHome',
|
show: false,
|
time: '',
|
list: [],
|
total: 0,
|
options1: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737'
|
}
|
}]
|
}
|
},
|
computed:{
|
countList(){
|
let num = 0;
|
for (let i in this.list) {
|
num += this.list[i].fQty;
|
}
|
return num;
|
}
|
},
|
mounted() {
|
|
setTimeout(() => {
|
this.showSkeleton = false
|
}, 1000)
|
|
// this.$refs.refSuccess.showBox({
|
// type:'error',//success/error/warning,
|
// txt:'操作失败，请重试！'
|
// })
|
|
this.scrollHeight = this.screenHeight - 282;
|
|
setTimeout(() => {
|
this.paddingTop = this.vuex_padding_top
|
this.paddingTop += 5
|
}, 400)
|
|
},
|
methods: {
|
tabsChange(index) {
|
console.log(2222222);
|
console.log(index);
|
this.tabIndex = index;
|
//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
|
this.$refs.paging.reload(true);
|
},
|
queryList(pageNo, pageSize) {
|
console.log(1111);
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
const params = {
|
page: pageNo,
|
limit: pageSize,
|
company: this.company,
|
// type: this.tabIndex + 1
|
}
|
console.log(params);
|
findwarning(params).then((res) => {
|
console.log(res);
|
|
if (res.code == 0) {
|
this.$refs.paging.complete(res.data.records);
|
} else {
|
this.$refs.paging.complete(false);
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
// this.$request.queryList(params).then(res => {
|
// // 将请求的结果数组传递给z-paging
|
// this.$refs.paging.complete(res.data.list);
|
// }).catch(res => {
|
// // 如果请求失败写this.$refs.paging.complete(false);
|
// // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
// this.$refs.paging.complete(false);
|
// })
|
},
|
itemClick(item) {
|
console.log('点击了', item.title);
|
},
|
// 模拟请求加载数据
|
handleLoad(data, callback) {
|
console.log(data);
|
|
console.log(1111111111111);
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < 3; i++) {
|
list.push(i);
|
}
|
this.list = [...this.list, ...list];
|
callback({ list: this.list, total: 30 });
|
}, 1500);
|
console.log(this.list);
|
},
|
// 模拟请求数据刷新
|
handleRefresh(data, callback) {
|
console.log(2222222222);
|
setTimeout(() => {
|
this.list = [];
|
for (var i = 0; i < 3; i++) {
|
this.list.push(i);
|
}
|
callback({ list: this.list, total: 30 });
|
}, 1500);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.item {
|
position: relative;
|
height: 150rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0rpx 30rpx;
|
}
|
|
.item-detail {
|
padding: 5rpx 15rpx;
|
border-radius: 10rpx;
|
font-size: 28rpx;
|
color: white;
|
background-color: #007AFF;
|
}
|
|
.item-line {
|
position: absolute;
|
bottom: 0rpx;
|
left: 0rpx;
|
height: 1px;
|
width: 100%;
|
background-color: #eeeeee;
|
}
|
.modal-btn {
|
position: absolute;
|
|
left: 80%;
|
margin-top: 40px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// box-sizing: border-box;
|
// width: 120rpx;
|
// height: 40rpx;
|
// background: rgba(103, 149, 255, 0.2);
|
}
|
.page-wrap {
|
height: 100%;
|
padding-top: 45px;
|
padding-left: 30rpx;
|
padding-right: 30rpx;
|
.test-view {
|
height: 300rpx;
|
}
|
.navbar-content {
|
width: 100%;
|
display: flex;
|
padding: 30rpx;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.u-icon {
|
margin-left: 30rpx;
|
}
|
.item-wrap {
|
display: flex;
|
margin: 10rpx;
|
padding: 30rpx;
|
align-items: center;
|
border-radius: 16rpx;
|
box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
|
.avatar {
|
width: 150rpx;
|
height: 150rpx;
|
margin-right: 30rpx;
|
border-radius: 16rpx;
|
background-color: #c0c0c0;
|
}
|
.item {
|
// width: 100rpx;
|
height: 30rpx;
|
margin-bottom: 10rpx;
|
border-radius: 16rpx;
|
background-color: #c8c7cc;
|
}
|
|
}
|
}
|
</style>
|
