activity

活动详情页上半部分

miniprogram/pages/activity/activity.js

@@ -14,9 +14,29 @@ Page({
     commentText: ""
   },
 
+  // getPublisherInfo: function () {
+  //   wx.navigateTo({
+  //     url: "/pages/publisher/publisher?id=" + this.data.activityInfo.publisherId
+  //   })
+  // },
+
+  // components/itemCard.js
+
   getPublisherInfo: function () {
     wx.navigateTo({
-      url: "/pages/publisher/publisher?id=" + this.data.activityInfo.publisherId
+      url: "/pages/publisher/publisher?id=" + this.properties.item.publisherId
+    })
+  },
+
+  getActivityInfo: function () {
+    wx.navigateTo({
+      url: "/pages/activity/activity?id=" + this.properties.item._id
+    })
+  },
+
+  filterMsgType: function (e) {
+    this.triggerEvent("filtermsgtype", {
+      attr: this.properties.item.attribute[0]
     })
   },
 

miniprogram/pages/activity/activity.wxml

@@ -1,40 +1,54 @@
 <!--为首页-信息详情页面-->
-<image wx:if="{{activityInfo.poster != ''}}" class="activity-poster" src="{{activityInfo.poster}}" mode="aspectFill"/>
-<view class="activity-info block-background-color">
-  <view class="line light-primary-color" style="margin-top: 0;"></view>
-  <view class="top-column">
-    <view class="brief-info" catchtap="getPublisherInfo">
-      <view class="brief-info-left">
+<view class="card">
+  <image wx:if="{{activityInfo.poster != ''}}" class="activity-poster" src="{{activityInfo.poster}}"
+    mode="aspectFill" />
+  <view class="activity-info">
+    <view class="profile">
+      <view class="avatar-name" catchtap="getPublisherInfo">
         <image class="publisher-avatar" src="{{activityInfo.publisherAvatar}}"></image>
-        <view class="publisher-name dark-primary-color-font">{{activityInfo.publisherName}}</view>
+        <view class="publisher-name">{{activityInfo.publisherName}}</view>
+      </view>
+      <view class="activity-attribute primary-background-color white-text-color" catchtap="filterMsgType">
+        {{activityInfo.attribute[0]}}
       </view>
-      <image wx:if="{{like != -1}}" class="like" src="/images/like/{{like ? 'heart' : 'hollowheart'}}.png" catchtap="toggleLike"/>
     </view>
-    <view class="activity-name primary-text-color">{{activityInfo.title}}</view>
-  </view>
-  <view wx:if="{{activityInfo.activityTime != ''}}" class="line light-primary-color"></view>
-  <view wx:if="{{activityInfo.activityTime != ''}}" class="activity-time">{{activityInfo.activityTime}}</view>
-  <view wx:if="{{activityInfo.place != ''}}" class="line light-primary-color"></view>
-  <view wx:if="{{activityInfo.place != ''}}" class="activity-place">{{activityInfo.place}}</view>
-  <view wx:if="{{activityInfo.details != ''}}"class="line light-primary-color"></view>
-  <view wx:if="{{activityInfo.details != ''}}"class="activity-detail">
-    <rich-text class="activity-detail-text">{{activityInfo.details}}</rich-text>
+    <view class="title-time">
+      <view class="title">{{activityInfo.title}}</view>
+      <view class="time primary-text-color">{{activityInfo.time}}</view>
+    </view>
+    <view wx:if="{{activityInfo.activityTime != ''}}" class="line light-primary-color"></view>
+    <view wx:if="{{activityInfo.activityTime != ''}}" class="activity-time">{{activityInfo.activityTime}}</view>
+    <view wx:if="{{activityInfo.place != ''}}" class="line light-primary-color"></view>
+    <view wx:if="{{activityInfo.place != ''}}" class="activity-place">{{activityInfo.place}}</view>
+    <view wx:if="{{activityInfo.details != ''}}" class="line light-primary-color"></view>
+    <view wx:if="{{activityInfo.details != ''}}" class="activity-detail">
+      <rich-text class="sub-title">{{activityInfo.details}}</rich-text>
+    </view>
+    <imagePicker wx:if="{{activityInfo.photo.length != 0}}" images="{{activityInfo.photo}}" max="1"
+      image-width="{{activityInfo.photo.length == 1 ? 700 : activityInfo.photo.length <= 4 ? 330 : 220}}"
+      image-height="{{activityInfo.photo.length == 1 ? 700 : activityInfo.photo.length <= 4 ? 330 : 220}}" readonly />
+    <view class="line light-primary-color"></view>
   </view>
-  <imagePicker wx:if="{{activityInfo.photo.length != 0}}" images="{{activityInfo.photo}}" max="1" image-width="{{activityInfo.photo.length == 1 ? 700 : activityInfo.photo.length <= 4 ? 330 : 220}}" image-height="{{activityInfo.photo.length == 1 ? 700 : activityInfo.photo.length <= 4 ? 330 : 220}}" readonly />
-  <view class="line light-primary-color"></view>
+
 </view>
+
+
+<image wx:if="{{like != -1}}" class="like" src="/images/like/{{like ? 'heart' : 'hollowheart'}}.png"
+  catchtap="toggleLike" />
+
 <view class="message-block">
   <view class="dark-primary-color-font">{{activityComment.length == 0 ? "暂无问答" : "答疑区:"}}</view>
   <view class="card" wx:for="{{activityComment}}" wx:for-item="item" wx:key="_id">
-    <itemActivityComment comment="{{item}}" time="{{item.time}}"/>
+    <itemActivityComment comment="{{item}}" time="{{item.time}}" />
   </view>
 </view>
 
 <view class="comment block-background-color">
   <view class="comment-inside" style="display: flex; align-items: center;">
     <icon type="info" size="20" color="#B0B0B0"></icon>
-    <input class="comment-input primary-text-color" style="width: 550rpx;" model:value="{{commentText}}" placeholder="提问" confirm-type="send" bindconfirm="comment"></input>
+    <input class="comment-input primary-text-color" style="width: 550rpx;" model:value="{{commentText}}"
+      placeholder="提问" confirm-type="send" bindconfirm="comment"></input>
   </view>
-  <view class="comment-button {{commentText.length < 5 ? 'secondary-text-color' : 'dark-primary-color-font'}}" bindtap="comment">发送</view>
-</view>
-
+  <view class="comment-button {{commentText.length < 5 ? 'secondary-text-color' : 'dark-primary-color-font'}}"
+    bindtap="comment">发送</view>
+</view>

miniprogram/pages/activity/activity.wxss

@@ -1,4 +1,4 @@
-.activity-poster{
+/* .activity-poster{
   width: 100%;
   height: 300rpx;
   margin-bottom: 0rpx;
@@ -42,14 +42,14 @@
 .publisher-name{
   font-weight: 800;
   margin-left: 10rpx;
-}
+} */
 
-.like{
+.like {
   height: 50rpx;
   width: 50rpx;
 }
 
-.activity-name{
+/* .activity-name{
   font-weight: 800;
   margin-left: 60rpx;
   margin-bottom: 10rpx;
@@ -71,10 +71,6 @@
   margin: 5rpx 0rpx;
 }
 
-.activity-detail{
-  margin: 15rpx 50rpx;
-  font-size: 30rpx;
-}
 
 .activity-detail-text{
   text-indent: 2em;
@@ -85,6 +81,11 @@
   margin-left: 50rpx;
   margin-right: 50rpx;
   font-size: 30rpx;
+} */
+
+.activity-detail {
+  margin: -40rpx 40rpx 0rpx 40rpx;
+  font-size: 30rpx;
 }
 
 .comment {
@@ -100,7 +101,7 @@
   right: 0rpx;
 }
 
-.comment-inside{
+.comment-inside {
   border-radius: 20rpx;
   background: #dadada;
 }
@@ -119,3 +120,112 @@
 
 
 
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 700rpx;
+  margin: 50rpx 20rpx;
+  padding-bottom: 20rpx;
+  background-color: #ffffff;
+  border-radius: 28rpx;
+  box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
+}
+
+.avatar-name {
+  display: flex;
+  flex-direction: row;
+}
+
+.publisher-avatar {
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 30rpx;
+  margin-left: 10rpx;
+  z-index: 2;
+  border-color: #9E9E9E;
+  border-style: solid;
+  border-width: 2rpx;
+  background-color: #ffffff;
+}
+
+.profile {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+  top: -20rpx;
+  margin-right: 10rpx;
+}
+
+.publisher-name {
+  font-size: 24rpx;
+  align-self: center;
+  background-color: #ffffff;
+  padding: 5rpx 20rpx 5rpx 30rpx;
+  margin-left: -20rpx;
+  border-radius: 22rpx;
+  box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
+  z-index: 1;
+}
+
+.time {
+  font-size: 16rpx;
+}
+
+.activity-attribute {
+  font-size: 24rpx;
+  align-self: center;
+  padding-top: 5rpx;
+  padding-bottom: 5rpx;
+  padding-right: 20rpx;
+  padding-left: 20rpx;
+  border-radius: 28rpx;
+  box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
+}
+
+.title {
+  font-size: 28rpx;
+}
+
+.title-time {
+  margin-left: 50rpx;
+  margin-right: 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.sub-title {
+  font-size: 24rpx;
+  margin-left: 50rpx;
+  margin-bottom: 20rpx;
+  margin-right: 20rpx;
+}
+
+.bottom-line {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10rpx 10rpx 30rpx 10rpx;
+}
+
+.tags {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.to-detail {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.arrow {
+  height: 20rpx;
+  width: 20rpx;
+  margin: 0rpx 20rpx 0rpx 20rpx;
+}