操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

首先我們先布局，一個文章或者是商品，底下是評論小程序評論功能小程序評論功能，

<view>
  <view class="store">
    
    <view class="store_box item_center">
      <view class="store_box_image">
        <image src="{{order.boots_image}}">image>
      view>
      <view class="store_box_title font30">
        <text>{{order.boots_name}}text>
        <view class="colorred">￥{{order.boot_price}}view>
      view>
    view>
  view>
  <view class="comment_box">
    <text>評論：text>
    <view wx:for="{{order.pinlun}}" wx:key='index'>
      <text class="blue">{{item.name}}：text>
      <text>{{item.login_text}}text>
    view>
  view>
view>
<view class="nar flexed color">
  <view class="login_img">
    <image src="{{login.avatarUrl}}">image>
  view>
  <view class="search_input">
    <view class="search_inputbox flexed">
      <text class="iconfont icon-search">text>
      <input placeholder="請輸入內容" bindinput="pinlun"/>
    view>
  view>
  <view class="search" bindtap="send">
    <block>評論block>
  view>
view>

上面的布局是在一個商品中添加了 下面評論功能，有點像qq的留言。

底下的是用固定定位寫的一個帶頭像的評論功能，

.nar{
  position: fixed;
  bottom: 0;

  width: 100%;
  margin-top: 20rpx;
  /* 用來適配 設置安全區域 */
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  background-color: #ffffff;
}

然后就是比較基本的布局了我就貼出css代碼來

/* pages/packaged/pinlun/pinlun.wxss */
/* 公共樣式類 */
.flexed{
  display: flex;
  align-items: center;
}
.nar{
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-top: 20rpx;
  /* 用來適配 設置安全區域 */
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  background-color: #ffffff;
}
.colorred{
  color: red;
}
.colorhui{
  color: #b3b2b2;
}
.font30{
  font-size: 30rpx;
}
/* 訂單詳情 */
.store{
  width: 100%;
  padding: 15rpx;
  font-size: 32rpx;
  background-color: #fff;
}
.store_title{

  width: 100%;
  font-size: 32rpx;
  justify-content: space-between;
  border-bottom: 1px solid #c5c5c5;
}
.store_box{
  width: 100%;
  height: 150rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #c5c5c5;
}
.store_box_image{
  width: 26%;
}
.store_box_image>image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 5px;
}
.store_box_title{
  width: 50%;
}
.store_box_prise{
  width: 24%;
  text-align: right;
}
.store_count{
  margin-top: 10rpx;
  padding: 20rpx 0;
  text-align: right;
}
.comment_box{
  width: 100%;
  padding: 10rpx;
  font-size: 30rpx;
  line-height: 1.6;
}
.blue{
  color: #03f8f8;
}
/* 搜索模塊1 */
.color{

  background-color: #03f8f8;
}
.login_img{
  height: 100%;
  flex: 0.8;
  text-align: center;
}
.login_img>image{
  width: 80rpx;
  height: 80rpx;
  margin: 11rpx auto;
  border-radius: 50%;
}
.search_input{
  height: 100%;
  flex: 3.2;
  padding: 10rpx;
}
.search_inputbox{
  height: 100%;
  border-radius: 3px;
  background-color: #ffffff;
}
.search_inputbox>text{
  display: inline-block;
  width: 10%;
  height: 100%;
  line-height: 2.5;
  font-size: 13px;
  margin-left: 5rpx;
}
.search_inputbox>input{
  width: 90%;
  height: 100%;
  font-size: 29rpx;
  margin-right: 10rpx;
}
.search{
  height: 100%;
  flex: 1;
  text-align: center;
  line-height: 3;
  font-size: 14px;

  color: #ffffff;
}
.search>text{
  font-size: 10px;
  margin-left: 10rpx;
}

最后最核心的是js代碼 。

js其實有沒有忒別的偏難

首先是在數據庫中建一個記錄數據類型為json類型的數據，用來儲存評論

然后是獲取用戶輸入后親求數據庫。把評論的內容記錄到該條記錄中。

var app = getApp();
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    login:{},
    order:{},
    pinlun:''
  },
  //獲取初始化
  loads(){
    var id = this.data.order._id
    wx.cloud.database().collection('boots').doc(id).get().then(res=>{
      console.log(res)
      this.setData({order:res.data})
    }).catch(res=>{
      app.fail();
    })
  },
  pinlun(e){this.setData({pinlun:e.detail.value})},
  //發送評論
  send(){
    var login_name = wx.getStorageSync('login').nickName
    if(this.data.pinlun == ''){wx.showToast({title: '請輸入完整！',icon:'none'})}
    else{
      var pinlun = this.data.pinlun
      wx.cloud.callFunction({name:'pinlun',data:{'login_name':login_name,'pinluns':pinlun,'id':this.data.order._id}}).then(res=>{
        this.loads();

      }).catch(res=>{
        app.fail();
      })
    }
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    if(wx.getStorageSync('login') == ''){
      wx.showModal({title: '登錄提醒',content: '系統顯示你未登錄，請先登錄!',showCancel: false,
        success (res) {if (res.confirm) {wx.switchTab({url: '/pages/packtable/home/home'})}}
      })
    }else{
      var pinlun = wx.getStorageSync('pinlun')
      var login = wx.getStorageSync('login')
      this.setData({login:login,order:pinlun})
      console.log(pinlun)
      this.loads();
      }
  },
  })

這里其實還要做一個登錄判斷，

應為數據對象是 儲存在本地中的如果沒有登錄就沒有本地記錄，

所以需要判斷一下是否登錄。

以下為云函數的代碼

// 云函數入口文件
const cloud = require('wx-server-sdk')
//適配本環境用戶
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函數入口函數
exports.main = async (event, context) => {
  var db = cloud.database();
  var _ = db.command;
  var data = await db.collection('boots').doc(event.id).update({data:{
    pinlun: _.push({'name':event.login_name,'login_text':event.pinluns})
  }})
  return {event,data}
}