征信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhengxinApplets/pages/user/history.vue

257 lines
5.4 KiB

3 months ago
<template>
<view class="history">
<view class="history-list">
<view class="tab">
3 months ago
<u-tabs :list="typeList" @click="clickTab"
3 months ago
lineWidth="0"
3 months ago
:current="tabIndex"
3 months ago
:activeStyle="{
color: '#00C6A9',
border: '1px solid #00C6A9',
borderRadius: '5px',
width: '150rpx',
textAlign: 'center',
padding: '10rpx 0',
display: 'block',
}"
:inactiveStyle="{
color: '#999999',
border: '1px solid #999999',
width: '150rpx',
display: 'block',
padding: '10rpx 0',
textAlign: 'center',
borderRadius: '5px'
}"
></u-tabs>
</view>
<view class="list">
3 months ago
<view class="item" v-for="(a,i) in list" :key="i" @click="openPage(a.id)">
<view class="name">{{a.title}}</view>
<view class="desc">{{a.content_tag}}</view>
3 months ago
<view class="do">
3 months ago
<view class="fl"><image class="img1" src="https://zhengxin.njrenzhou.cn/static/icon-view.png"></image>{{a.readnum}}</view>
<view class="fl"><image class="img2" src="https://zhengxin.njrenzhou.cn/static/dianzan.png"></image>{{a.likenum}}</view>
3 months ago
</view>
3 months ago
<view class="tag" v-if="a.type_tag == '善'"></view>
<view class="tag tag-on" v-else></view>
3 months ago
</view>
</view>
3 months ago
<view class="empty" v-if="total == 0">
<image src="https://zhengxin.njrenzhou.cn/static/empty.png"></image>
<view class="txt">暂无数据 ~</view>
</view>
3 months ago
</view>
</view>
</template>
<script>
export default {
data() {
return {
3 months ago
tabIndex: 0,
list: [],
total: 1,
offset: 1,
typeList: []
3 months ago
}
},
mounted() {
3 months ago
this.getTylelist();
3 months ago
},
onShow() {
3 months ago
this.querytContentList(2);
},
onReachBottom() {
const that = this;
uni.showLoading({
title: "加载中"
})
if(this.list.length <= this.total){
that.offset ++;
setTimeout(function() {
that.querytContentList(1);
}, 1000);
}
3 months ago
},
methods: {
3 months ago
//数组对象去重
arrayUnique (arr, name) {
var hash = {};
return arr.reduce(function (item, next) {
hash[next[name]]
? ""
: (hash[next[name]] = true && item.push(next));
return item;
}, []);
},
//事件类型
async getTylelist() {
const { code, data } = await this.$api.getTylelist({})
if(code == 1){
let arr = []
if(data && data.length > 0){
data.map(a=>{
a.name = a.title
})
}
this.typeList = [{name: "全部事件"},...data]
}
},
//获取事件
async querytContentList(type) {
const that = this;
if(type==2){
this.offset = 1;
this.tabIndex= 0;
}
const { code, data } = await that.$api.getreadcontentlist({
offset: this.offset,
limit: 20,
type: 3,
filter: JSON.stringify({content_type_id: (this.tabIndex==0?0:this.typeList[this.tabIndex].id)}),
token: uni.getStorageSync("token")
})
if(code == 1){
if(type==1){
uni.hideLoading();
}
that.list = this.arrayUnique([...that.list,...data.rows],'id');
that.total = data.total;
}
},
clickTab(e) {
this.tabIndex = e.index;
this.list = [];
this.offset = 1;
this.querytContentList();
},
3 months ago
openPage(id){
uni.navigateTo({
url: "/pages/release/detail?id="+id
})
},
}
}
</script>
<style lang="scss" scoped>
.history {
overflow: hidden;
box-sizing: border-box;
3 months ago
.empty{
padding: 150rpx 0;
text-align: center;
font-size: 26rpx;
color: #666;
image{
width: 460rpx;
height: 400rpx;
margin-bottom: 30rpx;
}
}
3 months ago
&-title{
text-align: center;
padding: 38rpx;
font-weight: 500;
font-size: 26rpx;
color: #333333;
text{
display: block;
font-weight: bold;
font-size: 36rpx;
color: #333333;
margin-bottom: 25rpx;
}
}
&-list{
overflow: hidden;
.title{
font-weight: bold;
font-size: 36rpx;
color: #333333;
padding: 0 25rpx;
}
.tab{
padding: 20rpx 0 15rpx;
}
.list{
3 months ago
padding: 0 25rpx 25rpx;
3 months ago
overflow: hidden;
.item{
width: 100%;
height: 180rpx;
background: #FFFFFF;
box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
position: relative;
margin-top: 20rpx;
&:first-child{
margin-top: 0;
}
.tag{
width: 80rpx;
height: 56rpx;
text-align: center;
line-height: 56rpx;
background: #00C6A9;
border-radius: 0px 20rpx 0px 20rpx;
font-size: 32rpx;
color: #FFFFFF;
position: absolute;
right: 0;
top: 0;
z-index: 2;
&-on{
background: #333333;
}
}
.name{
font-weight: 500;
font-size: 30rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #333333;
}
.desc{
font-weight: 500;
font-size: 24rpx;
color: #999999;
margin-top: 18rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.do{
display: flex;
align-items: center;
margin-top: 10rpx;
.fl{
width: 130rpx;
display: flex;
align-items: center;
font-weight: 500;
font-size: 24rpx;
color: #999999;
.img1{
width: 30rpx;
height: 20rpx;
margin-right: 10rpx;
margin-top: 5rpx;
}
.img2{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
}
}
}
}
}
</style>