小程序：发布信息

htmldev/wxMini/README.md

@@ -14,7 +14,8 @@
   - [x] 频道：村长说农货 media 5
     - [x] 视频详情 mediaDetail 2
 - [x] 优秀合作社 partner 4
-- 农事天地 news 4
+- [x] 农事天地 news 4
+  - [x] 发布 addNews 4
 - [x] 我的 mine 4
 - [x] 登录 login 4
 - 商户端 businessHome 4
@@ -44,5 +45,5 @@
   * 点赞、评论、转发：视频列表应该是纯展示吧，这个功能在详情页怎么没有入口呢？
 
 * 农事天地
-  * 缺回复样式、收藏、点赞样式；
+  * 缺回复样式（做成弹窗）、收藏、点赞样式；
   * 点击关注之后：合作社发了消息，用户那边是怎么展示的

htmldev/wxMini/app.json

@@ -16,7 +16,8 @@
     "pages/media/media",
     "pages/mediaDetail/mediaDetail",
     "pages/partner/partner",
-    "pages/login/login"
+    "pages/login/login",
+    "pages/addNews/addNews"
   ],
   "permission": {
     "scope.userLocation": {

htmldev/wxMini/pages/addNews/addNews.js

@@ -0,0 +1,63 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

htmldev/wxMini/pages/addNews/addNews.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

htmldev/wxMini/pages/addNews/addNews.scss

@@ -0,0 +1,70 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.btns {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  view {
+    padding: 32rpx 36rpx;
+    line-height: 40rpx;
+    font-size: 30rpx;
+  }
+
+  .cancel {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .add {
+    color: rgba(110, 134, 255, 1);
+  }
+}
+
+.form-wrap {
+  width: 678rpx;
+}
+
+textarea {
+  display: block;
+  width: 100%;
+  min-height: 232rpx;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: rgba(29, 29, 31, 1);
+}
+
+.placeholder-class {
+  font-size: 28rpx;
+  color: rgba(29, 29, 31, 1);
+}
+
+.photo-wrap {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+
+  .box {
+    width: 150rpx;
+    height: 150rpx;
+    border-radius: 8rpx;
+    margin-left: 26rpx;
+    margin-bottom: 26rpx;
+    overflow: hidden;
+
+    &:nth-of-type(4n +1) {
+      margin-left: 0;
+    }
+  }
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}

htmldev/wxMini/pages/addNews/addNews.wxml

@@ -0,0 +1,24 @@
+<view class="wrapper">
+  <view
+    class="btns">
+    <view class="cancel">取消</view>
+    <view class="add">发布</view>
+  </view>
+  <view class="form-wrap">
+    <textarea
+      value=""
+      placeholder="写下此刻的想法..."
+      placeholder-class="placeholder-class"
+      maxlength="-1"
+      auto-height="{{true}}"
+      cursor-spacing="{{60}}"></textarea>
+    <view class="photo-wrap">
+      <view
+        class="box"
+        wx:for="{{2}}"
+        wx:key="index">
+        <image src=""></image>
+      </view>
+    </view>
+  </view>
+</view>

htmldev/wxMini/pages/news/news.js

@@ -8,56 +8,61 @@ Page({
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad (options) {
+  onLoad(options) {
 
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady () {
+  onReady() {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow () {
+  onShow() {
 
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide () {
+  onHide() {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload () {
+  onUnload() {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh () {
+  onPullDownRefresh() {
 
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom () {
+  onReachBottom() {
 
   },
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage () {
+  onShareAppMessage() {
 
+  },
+  jumpAddNews() {
+    wx.navigateTo({
+      url: '/pages/addNews/addNews'
+    })
   }
 })

htmldev/wxMini/pages/news/news.scss

@@ -52,3 +52,156 @@
     background: pink;
   }
 }
+
+.main {
+  padding: 42rpx 0 134rpx;
+}
+
+.list {
+  width: 690rpx;
+  margin: 20rpx auto 74rpx;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  padding-left: 12rpx;
+}
+
+.portrait {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  overflow: hidden;
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.blogger-name-wrap {
+  width: 450rpx;
+  padding: 0 16rpx;
+
+  view {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .user-name {
+    line-height: 36rpx;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: rgba(29, 29, 31, 1);
+  }
+
+  .business-name {
+    margin-top: 2rpx;
+    line-height: 32rpx;
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.follow {
+  width: 140rpx;
+  height: 56rpx;
+  border-radius: 8rpx;
+  background: rgba(145, 179, 121, 1);
+  font-size: 24rpx;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 1);
+}
+
+.news {
+  margin-top: 20rpx;
+
+  .text {
+    line-height: 44rpx;
+    font-size: 28rpx;
+    color: rgba(102, 102, 102, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  .photo-wrap {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .box {
+    width: 222rpx;
+    height: 218rpx;
+    margin-top: 24rpx;
+    margin-left: 12rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+
+    &:nth-of-type(1),
+    &:nth-of-type(2),
+    &:nth-of-type(3) {
+      margin-top: 20rpx;
+    }
+
+    &:nth-of-type(3n + 1) {
+      margin-left: 0;
+    }
+  }
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.tools-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12rpx;
+
+  image {
+    display: block;
+    width: 48rpx;
+    height: 48rpx;
+    background: pink;
+  }
+
+  .collection-favorite {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .favorite {
+    margin-left: 30rpx;
+  }
+}
+
+.message-list {
+  .list {
+    display: flex;
+    margin-top: 20rpx;
+  }
+
+  .message {
+    width: 614rpx;
+    line-height: 44rpx;
+    font-size: 28rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+
+  .btn-reply {
+    width: 76rpx;
+    line-height: 44rpx;
+    font-size: 24rpx;
+    color: rgba(153, 153, 153, 1);
+    text-align: center;
+  }
+}

htmldev/wxMini/pages/news/news.wxml

@@ -11,8 +11,58 @@
       <view>8</view>
     </view>
   </view>
+  <view class="main">
+    <view class="list">
+      <view class="top">
+        <view class="portrait">
+          <image src=""></image>
+        </view>
+        <view class="blogger-name-wrap">
+          <view class="user-name">农户张三</view>
+          <view class="business-name">商铺：xxxx西瓜店</view>
+        </view>
+        <button class="follow">关注</button>
+      </view>
+      <view class="news">
+        <view class="text">
+          哈拉啊啊啊啦啦啦啦啦啦阿拉，啊啦啦啦阿拉啦啦啦啦啦啦，啦啦啦啦啦阿拉啦啦。啦啦啦啦啦啦啦啦，啦啦啦啦啦啦啦阿拉啦啦啦啦。阿卡卡卡卡看。
+        </view>
+        <view class="photo-wrap">
+          <view
+            class="box"
+            wx:for="{{6}}"
+            wx:key="index">
+            <image src=""></image>
+          </view>
+        </view>
+      </view>
+      <view class="tools-wrap">
+        <view>
+          <image src=""></image>
+        </view>
+        <view class="collection-favorite">
+          <view>
+            <image src=""></image>
+          </view>
+          <view class="favorite">
+            <image src=""></image>
+          </view>
+        </view>
+      </view>
+      <view class="message-list">
+        <view class="list">
+          <view class="message">
+            巴啦啦：这个西瓜养得可真好啊！这个西瓜养得可真好啊！这个西瓜养得可真好啊！这个西瓜养得可真好啊！
+          </view>
+          <view class="btn-reply">回复</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </view>
-<view class="btn-send">
+<view
+  class="btn-send"
+  bind:tap="jumpAddNews">
   <image
     src=""></image>
 </view>