xuxu
5 years ago
8 changed files with 405 additions and 0 deletions
@ -0,0 +1,123 @@ |
|||||
|
// pages/resource/detail/index.js
|
||||
|
import { TopicModel } from '../../../models/topic.js' |
||||
|
let topicModel = new TopicModel() |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
titlePic:"/images/temp_1.png", |
||||
|
unStar: '/images/common/star.png', |
||||
|
star: '/images/common/star_light.png', |
||||
|
detail:{}, |
||||
|
isCollect:false |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
var id = options.id; |
||||
|
topicModel.getResourceDetail(id,res=>{ |
||||
|
|
||||
|
if(res.result.isCollection == 1){ |
||||
|
this.setData({ |
||||
|
isCollect:true, |
||||
|
}) |
||||
|
}else{ |
||||
|
this.setData({ |
||||
|
isCollect:false, |
||||
|
}) |
||||
|
} |
||||
|
this.setData({ |
||||
|
detail:res.result, |
||||
|
}) |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
}, |
||||
|
previewImage:function(e){ |
||||
|
// var current = e.target.dataset.src;
|
||||
|
var th = this; |
||||
|
if(th.data.detail.titlePic){ |
||||
|
var urls = [th.data.detail.titlePic]; |
||||
|
wx.previewImage({ |
||||
|
urls:urls// 需要预览的图片http链接列表
|
||||
|
}) |
||||
|
}else{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
onClickCollect:function(){ |
||||
|
this.setData({ |
||||
|
isCollect: !this.data.isCollect |
||||
|
}) |
||||
|
this.fetchTopicCollect(); |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
fetchTopicCollect(){ |
||||
|
let id = this.data.detail.id |
||||
|
topicModel.resourceCollect(id,res =>{ |
||||
|
//console.log('收藏')
|
||||
|
if(res.code === 200){ |
||||
|
wx.showToast({ |
||||
|
title: '收藏成功', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
<!--pages/resource/detail/index.wxml--> |
||||
|
|
||||
|
<view class="title"> |
||||
|
<view class="left"> |
||||
|
<view class="articleImg"> |
||||
|
<image src="{{detail.titlePic ? detail.titlePic : titlePic}}" bindtap="previewImage" mode="widthFix" style="width:100%;"></image> |
||||
|
</view> |
||||
|
<!-- <image class="articleImg" src="{{detail.titlePic ? detail.titlePic : titlePic}}" bindtap="previewImage"></image> --> |
||||
|
<view class="content"> |
||||
|
<view class="tit">{{detail.title}}</view> |
||||
|
<view class="r_type">{{detail.typeName}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<image class="artice_collect" src="{{isCollect ? star : unStar}}" bindtap="onClickCollect"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="text"> |
||||
|
<rich-text nodes="{{detail.content}}"></rich-text> |
||||
|
</view> |
||||
@ -0,0 +1,61 @@ |
|||||
|
/* pages/resource/detail/index.wxss */ |
||||
|
/* @import '../../style/font.wxss'; */ |
||||
|
page{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.title{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 90%; |
||||
|
min-height: 90px; |
||||
|
border-bottom: 2px solid whitesmoke; |
||||
|
margin-top:5px; |
||||
|
} |
||||
|
|
||||
|
.left{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.right{ |
||||
|
width: 15px; |
||||
|
text-align:right; |
||||
|
} |
||||
|
|
||||
|
.articleImg{ |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
/* border-radius: 50%; */ |
||||
|
} |
||||
|
|
||||
|
.content{ |
||||
|
margin-left: 15px; |
||||
|
margin-right: 20px; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.tit{ |
||||
|
width: 100%; |
||||
|
font-weight:1000; |
||||
|
} |
||||
|
|
||||
|
.r_type{ |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.artice_collect { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.text{ |
||||
|
width: 90%; |
||||
|
} |
||||
@ -0,0 +1,86 @@ |
|||||
|
// pages/resource/index.js
|
||||
|
import { TopicModel } from '../../models/topic.js' |
||||
|
let topicModel = new TopicModel() |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
titlePic:"/images/temp_1.png", |
||||
|
page:1, |
||||
|
list:[], |
||||
|
show:true |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
var typeCode = options.typeCode; |
||||
|
topicModel.getResourceList(typeCode,1,res=>{ |
||||
|
this.setData({ |
||||
|
list:res.result.records |
||||
|
}) |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
}, |
||||
|
detail:function(e){ |
||||
|
if (!e.currentTarget.dataset.id){ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
wx.navigateTo({ |
||||
|
url: 'detail/index?id=' + e.currentTarget.dataset.id |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"usingComponents": { |
||||
|
"van-popup": "/components/vant/popup/index" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
<!--pages/resource/index.wxml--> |
||||
|
<view class="container"> |
||||
|
<view class="column" wx:for="{{ list }}" bindtap="detail" data-id="{{item.id}}"> |
||||
|
<view class="left"> |
||||
|
<view class="articleImg"> |
||||
|
<image src="{{item.titlePic ? item.titlePic : titlePic}}" mode="widthFix" style="width:100%;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<view class="title">{{item.title}}</view> |
||||
|
<view class="r_type">{{item.typeName}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="right"><text class="fa fa-angle-right fa-lg"></text></view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
<van-popup |
||||
|
show="{{ show }}" |
||||
|
bind:close="onClose" |
||||
|
custom-style="height: 80%;width:80%" |
||||
|
|
||||
|
> |
||||
|
<view class="tips"> |
||||
|
<view class="tips-con"> |
||||
|
内容内容内容内容内容内容内容 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</van-popup> |
||||
@ -0,0 +1,76 @@ |
|||||
|
/* pages/resource/index.wxss */ |
||||
|
@import '../../style/font.wxss'; |
||||
|
page{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
background-color: whitesmoke; |
||||
|
} |
||||
|
.container{ |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: white; |
||||
|
margin-top:10px; |
||||
|
} |
||||
|
|
||||
|
.column{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 90%; |
||||
|
height: 90px; |
||||
|
border-bottom: 2px solid whitesmoke; |
||||
|
} |
||||
|
|
||||
|
.left{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.right{ |
||||
|
width: 15px; |
||||
|
text-align:right; |
||||
|
} |
||||
|
|
||||
|
.articleImg{ |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
/* border-radius: 50%; */ |
||||
|
} |
||||
|
|
||||
|
.content{ |
||||
|
margin-left: 15px; |
||||
|
margin-right: 20px; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.title{ |
||||
|
width: 100%; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 1; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-webkit-box-orient: vertical; |
||||
|
word-break: break-all; |
||||
|
font-weight:1000; |
||||
|
} |
||||
|
|
||||
|
.r_type{ |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
.tips{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tips-con{ |
||||
|
width: 90%; |
||||
|
height: 90; |
||||
|
} |
||||
|
|
||||
Loading…
Reference in new issue