始宁农业小程序：样式

htmldev/shiningWxMini/README.md

@@ -1,63 +1 @@
 ### 页面
-
-- [x] 首页 home 12
-  - [x] 用户消息 leavingAMessage 4
-  - [x] 供应商 business 4
-    - [x] 供应商详情 businessDetail 4
-  - [x] 采购指南 guide 6
-    - [x] 商品详情(预售、现货) goodsDetail 8
-  - [x] 收藏 collection 4
-  - [x] 最新上架 newGoods 4
-  - [x] VR看菜园 VR 4
-  - [x] 频道：村长说农货 media 5
-    - [x] 视频详情 mediaDetail 2
-- [x] 优秀合作社 partner 4
-- [x] 农事天地 news 4
-  - [x] 发布 addNews 4
-- [x] 我的 mine 4
-- [x] 登录 login 4
-- [x] 商户端 businessHome 4
-  - [x] 产品管理 businessGoodsManage 6
-    - 产品新增/编辑 businessGoodsEdit 16
-  - [x] 视频管理 businessVideoManage 4
-    - [x] 视频新增/编辑 businessVideoEdit 16
-
-### TODO
-
-* 用户消息、商家消息（待沟通 2022.9.13 22:50）
-  * 展示逻辑
-  * 系统消息点击之后什么样子的
-
-* 首页
-  * 农事天地：只针对商户展示
-
-* 预售商品
-  * 缺一个取消收藏的样式
-  * 供应商那个Tab点击之后页面是什么样子的：展示供应商详情的信息
-
-* 购物车
-  * 商家信息 按钮：去除
-
-* 购物车详情：需要UI调整
-
-* 村长说农货
-  * 点赞、评论、转发：视频列表应该是纯展示吧，这个功能在详情页怎么没有入口呢：缺UI
-
-* 农事天地
-  * 缺回复样式（做成弹窗）、收藏(不要了)、点赞样式；
-  * 点击关注之后：合作社发了消息，用户那边是怎么展示的
-
-* 我的
-  * 申请入驻 -> 填写表单：需要审核 -> 变成商户
-    * 审核中、审核失败、审核成功
-  * 农户收藏：收藏之后的展示、在哪里去收藏
-
-* 商户消息：
-  * 二级页面 ？？？
-
-
-登录：只要微信登录，设计稿优化下
-去除购物车
-供应商详情：地址、手机按钮区域重叠，UI优化下
-加个服务通知
-农事天地、系统消息：这一版暂不开发

htmldev/shiningWxMini/pages/addNews/addNews.js

@@ -122,7 +122,12 @@ Page({
     try {
       const { status, msg } = await postAddNews(temp)
       if (status) {
-        wx.redirectTo({
+        const page = getCurrentPages()
+        console.log(page)
+        if (page.length >= 2 && page[page.length - 2].route === 'pages/news/news') {
+          page[page.length - 2].refreshOrderList && page[page.length - 2].refreshOrderList()
+        }
+        wx.switchTab({
           url: '/pages/news/news'
         })
       } else {

htmldev/shiningWxMini/pages/news/api/index.js

@@ -9,13 +9,13 @@ export const postFollowUser = (id) => request({
   url: '/api/user/follow/user',
   method: 'POST',
   data: {
-    shop_id: id // todo 这里应该是商户ID，不是店铺ID
+    shop_id: id
   },
   showLoading: true
 })
 
 /**
- * 评论动态 // todo 缺评论、回复评论的UI；缺字段：收藏商家时店铺的ID；缺点赞、取消点赞接口及点赞数字段
+ * 评论动态
  * @param postData
  * @returns {Promise<*>}
  */
@@ -29,3 +29,19 @@ export const postAddComment = (postData) => request({
   },
   showLoading: true
 })
+
+/**
+ * 动态点赞、取消点赞
+ * @param postData
+ * @returns {Promise<*>}
+ */
+export const postGood = (postData) => request({
+  url: '/api/user/track/good',
+  method: 'POST',
+  data: {
+    ...postData
+    // 'track_id': 1, // 动态ID
+    // 'type': 1 // 类型(1点赞2取消点赞)
+  },
+  showLoading: true
+})

htmldev/shiningWxMini/pages/news/news.js

@@ -1,5 +1,5 @@
 const pages = require('../../mixin/pages')
-const { postFollowUser } = require('./api/index')
+const { postFollowUser, postAddComment, postGood } = require('./api/index')
 
 Page({
 
@@ -24,8 +24,16 @@ Page({
       }
     ],
     active: '1',
-    booLock: false
+    booLock: false,
+    autoFocus: false,
+    inputBoxStyle: 'bottom:0;',
+    form: {
+      track_comment: '' //  评论内容
+    },
+    placeholderText: '评论',
+    booPopop: false
   },
+  currentItem: {}, // 当前选中的动态
   ...pages.methods,
 
   /**
@@ -130,6 +138,131 @@ Page({
       booLock: false
     })
   },
+  showPopop(e) {
+    const { item, index } = e.currentTarget.dataset
+
+    this.currentItem = {
+      ...item,
+      _index: index
+    }
+
+    this.setData({
+      booPopop: true
+    })
+
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      this.setData({
+        autoFocus: true
+      })
+    }, 500)
+  },
+  hidePopop() {
+    this.setData({
+      booPopop: false
+    })
+  },
+  handleFocus(event) {
+    const height = event.detail.height
+    this.setData({ inputBoxStyle: `bottom:${height}px;` })
+  },
+  handleBlur() {
+    this.setData({ inputBoxStyle: `bottom:0;` })
+  },
+  setComment(event) {
+    const { value } = event.detail
+
+    this.setData({
+      'form.track_comment': value.trim()
+    })
+  },
+  // 评论
+  async addComment() {
+    const { track_comment } = this.data.form
+    const postData = {
+      'track_id': this.currentItem.id,
+      'track_comment': track_comment
+    }
+
+    if (!track_comment) {
+      wx.showToast({
+        title: '请输入评论内容',
+        icon: 'none'
+      })
+      return
+    }
+
+    if (this.data.booLock) {
+      return
+    }
+
+    this.setData({
+      booLock: true
+    })
+    try {
+      const { status, msg } = await postAddComment(postData)
+      if (status) {
+        wx.showToast({
+          title: '已评论',
+          icon: 'none'
+        })
+
+        this.refreshOrderList()
+
+        this.setData({
+          'form.track_comment': '',
+          booPopop: false
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
+
+    this.setData({
+      booLock: false
+    })
+  },
+  // 点赞、取消点赞
+  async trackGood(e) {
+    const { item, index } = e.currentTarget.dataset
+    const postData = {
+      'track_id': item.id,
+      'type': item.good_status === 0 ? 1 : 2 // 类型(1点赞2取消点赞)
+    }
+
+    if (this.data.booLock) {
+      return
+    }
+
+    this.setData({
+      booLock: true
+    })
+    try {
+      const { status, msg } = await postGood(postData)
+      if (status) {
+        wx.showToast({
+          title: item.good_status === 0 ? '已点赞' : '已取消点赞',
+          icon: 'none'
+        })
+        this.setData({
+          ['listData[' + index + '].good_status']: item.good_status === 0 ? 1 : 0,
+          ['listData[' + index + '].good_count']: item.good_status === 0 ? item.good_count + 1 : item.good_count - 1
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
+
+    this.setData({
+      booLock: false
+    })
+  },
   jumpAddNews() {
     wx.navigateTo({
       url: '/pages/addNews/addNews'

htmldev/shiningWxMini/pages/news/news.json

@@ -1,7 +1,8 @@
 {
   "usingComponents": {
     "customer-tab": "../../components/customer-tab/index",
-    "van-loading": "@vant/weapp/loading/index"
+    "van-loading": "@vant/weapp/loading/index",
+    "van-popup": "@vant/weapp/popup/index"
   },
   "backgroundColor": "#F6F6F6",
   "backgroundTextStyle": "dark",

htmldev/shiningWxMini/pages/news/news.scss

@@ -30,7 +30,7 @@
   text-align: center;
 }
 
-.btn-send {
+.btn-add {
   position: fixed;
   right: 30rpx;
   bottom: 156rpx;
@@ -57,7 +57,7 @@
 
 .list {
   width: 690rpx;
-  margin: 20rpx auto 74rpx;
+  margin: 20rpx auto 0;
 }
 
 .top {
@@ -185,16 +185,20 @@
 }
 
 .message-list {
+  margin-bottom: 74rpx;
+
   .list {
     display: flex;
     margin-top: 20rpx;
   }
 
   .message {
-    width: 614rpx;
+    width: 100%;
     line-height: 44rpx;
     font-size: 28rpx;
     color: rgba(153, 153, 153, 1);
+    word-break: break-all;
+    word-wrap: break-word;
   }
 
   .btn-reply {
@@ -205,3 +209,53 @@
     text-align: center;
   }
 }
+
+.popup-body {
+  padding-top: 24rpx;
+  padding-bottom: 100rpx;
+}
+
+.form-item {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 688rpx;
+  height: 76rpx;
+  margin: 0 auto;
+  border-radius: 38rpx;
+  background: rgba(240, 240, 240, 1);
+}
+
+.smile {
+  position: absolute;
+  left: 27rpx;
+  top: 18rpx;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+input {
+  width: 383rpx;
+  height: 100%;
+  padding: 0 13rpx;
+  margin-left: 67rpx;
+  font-size: 32rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+.placeholder {
+  color: rgba(166, 166, 166, 1);
+}
+
+.btn-send {
+  position: absolute;
+  right: 14rpx;
+  top: 10rpx;
+  z-index: 99;
+  width: 108rpx;
+  height: 56rpx;
+  border-radius: 38rpx;
+  background: rgba(96, 169, 252, 1);
+  font-size: 24rpx;
+  color: #FFF;
+}

htmldev/shiningWxMini/pages/news/news.wxml

@@ -1,3 +1,4 @@
+<page-meta page-style="{{ booPopop ? 'overflow: hidden;' : '' }}"/>
 <view class="wrapper">
   <view class="app_page-header-search">
     <view class="app_page-header-search-warp app_width-690">
@@ -55,13 +56,20 @@
         </view>
       </view>
       <view class="tools-wrap">
-        <view>
+        <view
+          data-item="{{item}}"
+          data-index="{{index}}"
+          bind:tap="showPopop">
           <image src="../../image/news/Chat.png"></image>
         </view>
         <view class="collection-favorite">
-          <view class="favorite">
-            <image src="../../image/news/like_0.png" wx:if="{{true}}"></image>
-            <image src="../../image/news/like_1.png" wx:if="{{false}}"></image>
+          <view
+            class="favorite"
+            data-item="{{item}}"
+            data-index="{{index}}"
+            bind:tap="trackGood">
+            <image src="../../image/news/like_0.png" wx:if="{{item.good_status === 0}}"></image>
+            <image src="../../image/news/like_1.png" wx:if="{{item.good_status === 1}}"></image>
             <text class="good-count">{{item.good_count}}</text>
           </view>
         </view>
@@ -74,7 +82,7 @@
           wx:for-index="idx"
           wx:key="idx">
           <view class="message">{{msg.user_nickname}}：{{msg.track_comment}}</view>
-          <view class="btn-reply">回复</view>
+          <view class="btn-reply" wx:if="{{false}}">回复</view>
         </view>
       </view>
     </view>
@@ -95,10 +103,39 @@
   </view>
 </view>
 <view
-  class="btn-send"
+  class="btn-add"
   bind:tap="jumpAddNews">
   <image
     src="../../image/news/add.png"></image>
 </view>
+
+<van-popup
+  show="{{ booPopop }}"
+  overlay="{{true}}"
+  position="bottom"
+  custom-style="{{inputBoxStyle}}"
+  bind:close="hidePopop">
+  <view class="popup-body">
+    <view class="form-item">
+      <image
+        class="smile"
+        src="../../image/common/smile.png"></image>
+      <input
+        placeholder-class="placeholder"
+        value="{{form.track_comment}}"
+        placeholder="{{placeholderText}}"
+        adjust-position="{{false}}"
+        focus="{{autoFocus}}"
+        bind:focus="handleFocus"
+        bind:blur="handleBlur"
+        bind:input="setComment"></input>
+      <button
+        class="btn-send"
+        disabled="{{booLock}}"
+        bind:tap="addComment">发送
+      </button>
+    </view>
+  </view>
+</van-popup>
   <!--自定义tabbar页面被遮挡-->
 <view style="padding-bottom:25%;"></view>