fanp
6 years ago
14 changed files with 455 additions and 28 deletions
@ -1,4 +1,9 @@ |
|||
{ |
|||
"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, |
|||
"usingComponents": {} |
|||
"usingComponents": { |
|||
"e-ibutton": "/components/image-button/index" |
|||
} |
|||
} |
|||
Loading…
Reference in new issue