fanp
6 years ago
14 changed files with 455 additions and 28 deletions
@ -1,4 +1,9 @@ |
|||||
{ |
{ |
||||
"navigationBarTitleText": "新建议题", |
"navigationBarTitleText": "新建议题", |
||||
"usingComponents": {} |
"usingComponents": { |
||||
|
"e-ibutton": "/components/image-button/index", |
||||
|
"mp-cells": "/components/weui/cells/cells", |
||||
|
"mp-cell": "/components/weui/cell/cell", |
||||
|
"mp-uploader": "/components/weui/uploader/uploader" |
||||
|
} |
||||
} |
} |
||||
@ -0,0 +1,119 @@ |
|||||
|
// pages/topics/interactive/article/index.js
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
title:"市北区举行国际航运贸易金融创新中心核心区产业建设", |
||||
|
time:"6月7日", |
||||
|
userInfo:{ |
||||
|
icon:"", |
||||
|
name:"用户名", |
||||
|
company:"青岛誉群投资有限公司", |
||||
|
position:"董事长" |
||||
|
}, |
||||
|
detail:"9月16日晚7时，市北区委、区政府在区机关二楼会议厅举行国际航运贸易金融创新中心核心区产业招商工作方案答辩。这是市北区借鉴市委、市政府推动15个攻势作战经验，围绕创新中心核心区建设举行的首场答辩。区委书记张新竹主持答辩并讲话。", |
||||
|
imgArr:['http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg', |
||||
|
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg', |
||||
|
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg', |
||||
|
'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg' |
||||
|
], |
||||
|
|
||||
|
comments:[ |
||||
|
{ |
||||
|
userIcon:"", |
||||
|
userName:"用户名", |
||||
|
detail:"评论内容", |
||||
|
time:"刚刚", |
||||
|
praiseNum:"30" |
||||
|
}, |
||||
|
{ |
||||
|
userIcon: "", |
||||
|
userName: "用户名", |
||||
|
detail: "评论内容", |
||||
|
time: "1小时前", |
||||
|
praiseNum: "30" |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
unStar: '/images/common/star.png', |
||||
|
star: '/images/common/star_light.png', |
||||
|
isStar:true |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
}, |
||||
|
onClickCollect() { |
||||
|
this.setData({ |
||||
|
isStar: !this.data.isStar |
||||
|
}) |
||||
|
// 收藏功能
|
||||
|
}, |
||||
|
|
||||
|
previewImg: function (e) { |
||||
|
console.log(e.currentTarget.dataset.index); |
||||
|
var index = e.currentTarget.dataset.index; |
||||
|
var imgArr = this.data.imgArr; |
||||
|
wx.previewImage({ |
||||
|
current: imgArr[index], //当前图片地址
|
||||
|
urls: imgArr, //所有要预览的图片的地址集合 数组形式
|
||||
|
success: function (res) { }, |
||||
|
fail: function (res) { }, |
||||
|
complete: function (res) { }, |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
<!--pages/topics/interactive/article/index.wxml--> |
||||
|
<view class="container"> |
||||
|
<view class="topic_info"> |
||||
|
<view class="topic_title"> |
||||
|
{{title}} |
||||
|
</view> |
||||
|
<view class="topic_time"> |
||||
|
<view class="topic_time_left"> |
||||
|
{{time}} |
||||
|
</view> |
||||
|
<view class="topic_time_right"> |
||||
|
<image src="{{isStar ? star : unStar}}" bindtap="onClickCollect"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="topic_userInfo"> |
||||
|
<view class="user_icon"> |
||||
|
<image src=""></image> |
||||
|
</view> |
||||
|
<view class="user_text"> |
||||
|
<view> |
||||
|
{{userInfo.name}} |
||||
|
</view> |
||||
|
<view> |
||||
|
{{userInfo.company + ' ' + userInfo.position}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="topic_detail"> |
||||
|
<view class="topic_detail_text"> |
||||
|
{{detail}} |
||||
|
</view> |
||||
|
<view class="topic_detail_imgs"> |
||||
|
<view class='imgList-li' wx:for='{{imgArr}}'> |
||||
|
<image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="section_line"></view> |
||||
|
<view class="topic_comment"> |
||||
|
<view class="topic_comment_top"> |
||||
|
{{'评论 ' + comments.length}} |
||||
|
</view> |
||||
|
<view class="comment_info" wx:for="{{comments}}"> |
||||
|
<view class="comment_info_left"> |
||||
|
<image class="comment_icon" src=""></image> |
||||
|
</view> |
||||
|
<view class="comment_info_right"> |
||||
|
<view class="comment_info_userName">{{item.userName}}</view> |
||||
|
<view class="comment_info_detail">{{item.detail}}</view> |
||||
|
<view class="comment_info_time"> |
||||
|
<view class="comment_info_time_left">{{item.time}}</view> |
||||
|
<view class="comment_info_time_right"> |
||||
|
<view class="praiseNum">{{item.praiseNum}}</view> |
||||
|
<image class="praiseIcon" src="/images/common/zan.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,156 @@ |
|||||
|
.container{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.topic_info{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 10px 20px 10px 20px; |
||||
|
} |
||||
|
.topic_title{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.topic_time{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 10px 0 10px 0; |
||||
|
} |
||||
|
.topic_time_left{ |
||||
|
font-size: 13px; |
||||
|
color: #B3B3B3; |
||||
|
} |
||||
|
.topic_time_right{ |
||||
|
padding: 0 10px; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
line-height: -10px; |
||||
|
} |
||||
|
image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.topic_userInfo{ |
||||
|
border-radius: 5px; |
||||
|
padding: 10px; |
||||
|
background-color: #FEFAF6; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.user_icon{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #EFECE8; |
||||
|
} |
||||
|
.user_text{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
color: #808B8C; |
||||
|
padding: 0 10px; |
||||
|
font-weight: 0; |
||||
|
} |
||||
|
.user_text :first-child{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.user_text :last-child{ |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.topic_detail{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 20px 20px; |
||||
|
/* border-bottom: 7px solid #FAFAFA; */ |
||||
|
} |
||||
|
.topic_detail_text{ |
||||
|
color: #373737; |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
.section_line { |
||||
|
padding: 0; |
||||
|
height: 7px; |
||||
|
width: 100%; |
||||
|
background-color: #FAFAFA; |
||||
|
} |
||||
|
.topic_detail_imgs{ |
||||
|
width: 100%; |
||||
|
padding: 10px 0; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
} |
||||
|
.imgList-li { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
margin: 5px 5px; |
||||
|
} |
||||
|
.img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.topic_comment{ |
||||
|
padding: 10px 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.topic_comment_top{ |
||||
|
height: 40px; |
||||
|
border-bottom: 1px solid #E7E7E7; |
||||
|
} |
||||
|
.comment_info{ |
||||
|
padding: 10px 0; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
border-bottom: 1px solid #E7E7E7; |
||||
|
} |
||||
|
.comment_info_left{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
border-radius: 50%; |
||||
|
background-color: red; |
||||
|
} |
||||
|
.comment_icon{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
.comment_info_right{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
.comment_info_userName{ |
||||
|
font-size: 14px; |
||||
|
color: #66708B; |
||||
|
} |
||||
|
.comment_info_detail{ |
||||
|
font-size: 14px; |
||||
|
color: #3B3B3B; |
||||
|
} |
||||
|
.comment_info_time{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.comment_info_time_left{ |
||||
|
font-size: 10px; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.comment_info_time_right{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.praiseNum{ |
||||
|
font-size: 10px; |
||||
|
color: #ABABAB; |
||||
|
} |
||||
|
.praiseIcon{ |
||||
|
margin-left: 5px; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
} |
||||
@ -1,4 +1,6 @@ |
|||||
{ |
{ |
||||
"component": true, |
"component": true, |
||||
"usingComponents": {} |
"usingComponents": { |
||||
|
"e-ibutton": "/components/image-button/index" |
||||
|
} |
||||
} |
} |
||||
Loading…
Reference in new issue