|
@@ -1,22 +1,178 @@
|
|
|
<template>
|
|
|
- <web-view :src="webViewSrc"></web-view>
|
|
|
+ <view class="art-wrap">
|
|
|
+ <view class="tabs">
|
|
|
+ <view class="tab" v-for="(tab,index) in tabs" :key="index" @click="changeTab(tab)" :class="tab.artCatId===artCatId?'active':''">{{tab.artCatTitle}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="tab-container">
|
|
|
+ <view class="item" v-for="(item,idx) in artList" :key="idx">
|
|
|
+ <view class="content card" @click="showDetail(item)">
|
|
|
+ <view class="top">
|
|
|
+ <view class="lf">
|
|
|
+ <view class="tag">{{item.artCatTitle}}</view>
|
|
|
+ <view class="author" v-if="item.editorName">{{item.editorName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="rt"><span>{{MessageTimeFormat(item.issuedAt)}}</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title" v-if="item.artTitle">{{item.artTitle}}</view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="author">{{item.artAuthor?item.artAuthor:'未知'}}</view>
|
|
|
+ <view class="time">{{item.issuedAt}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import {getToken} from '@/libs/auth.js';
|
|
|
+ import {getToken} from '@/libs/auth.js';
|
|
|
+ import {MessageTimeFormat} from '@/libs/index.js';
|
|
|
+ import {getArtCatTop,getArtByList} from '@/api/system/art.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- webViewSrc:""
|
|
|
+ artCatId:"",
|
|
|
+ tabs:[],
|
|
|
+ artList:[]
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
- let t=new Date().getTime();
|
|
|
- this.webViewSrc=`http://h5.xazhyc.com/art?token=${getToken()}&t=&{t}`
|
|
|
+ this.getArtCatTop()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ MessageTimeFormat,
|
|
|
+ changeTab(item){
|
|
|
+ this.artCatId=item.artCatId
|
|
|
+ this.getArtByList()
|
|
|
+ },
|
|
|
+ getArtCatTop(){
|
|
|
+ getArtCatTop().then((res)=>{
|
|
|
+ this.tabs=res.data
|
|
|
+ if(res.data.length>0){
|
|
|
+ this.artCatId=res.data[0].artCatId
|
|
|
+ this.getArtByList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getArtByList(){
|
|
|
+ getArtByList({
|
|
|
+ artCatId:this.artCatId
|
|
|
+ }).then((res)=>{
|
|
|
+ this.artList=res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showDetail(){
|
|
|
+ let baseUrl="http://h5.xazhyc.com"
|
|
|
+ uni.navigateTo({
|
|
|
+ url:`/pages/webview/webview?href=${baseUrl}/art/views/detail.html&artId=473700&name=通讯录`
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
- let t=new Date().getTime();
|
|
|
- this.webViewSrc=`http://h5.xazhyc.com/art?token=${getToken()}&t=&{t}`;
|
|
|
+ this.getArtCatTop()
|
|
|
uni.stopPullDownRefresh()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .art-wrap{
|
|
|
+ padding: 24rpx;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ .tabs{
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ display: flex;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ .tab{
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ flex: 1 0 auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #35364F;
|
|
|
+ position: relative;
|
|
|
+ &::after{
|
|
|
+ display: block;
|
|
|
+ width: 50%;
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ &::after{
|
|
|
+ border-bottom: 2px solid #15CD85;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-container{
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ .item{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .card{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ .top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .lf{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ padding:10rpx 16rpx;
|
|
|
+ border: 1px solid #15CD85;
|
|
|
+ line-height: 1;
|
|
|
+ color: #15CD85;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ .author{
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 5px;
|
|
|
+ line-height: 1;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #B0B0B0;
|
|
|
+ line-height:1;
|
|
|
+ padding-top: 0.22rem;
|
|
|
+ .title{
|
|
|
+ font-size:32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height:48rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|