微信小程序拼车详情支持个人评论页面模板样式制作设计教程

本文给大家带来的是微信小程序拼车详情支持个人评论页面模板样式制作设计教程，制作好以后效果图如下：

一、wxml页面代码如下：

<scroll-view scroll-y="true" style="height: {{height}}px" scroll-into-view="{{toview}}" bindscrolltolower="tobottom" scroll-top="0">
<view class="page">
    <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>
    <view class="page__bd header">
        <view class="head">
            <image src="{{data.avatarUrl}}"></image>
        </view>
        <view class="username">
            {{data.nickName}}
        </view>
        <view class="add" wx:if="{{data.type == 1}}" wx:if="{{notme}}" bindtap="madal">
            <button type="mini"><image src="/img/add.png" class="icon-add"></image>预约</button>
        </view>
    </view>

    <view class="page__bd content">
        <view class="p">
            <image src="/img/cle1.png" class="icon icon-departure"></image><text>{{data.departure}}</text>
        </view>
        <view class="p">
            <image src="/img/cle.png" class="icon icon-departure"></image><text>{{data.destination}}</text>
        </view>
        <view class="p contact">
            <text class="tit">联系人:</text><text>{{data.name}}</text>
            <image wx:if="{{data.gender > 0}}" src="/img/{{data.gender}}.png" class="icon icon-gender"></image>
            <image src="/img/tel.png" class="icon icon-tel" bindtap="tel"></image>
        </view>
        <view class="p contact">
            <text class="tit">出发时间:</text><text>{{data.tm}}</text>
        </view>
        <view class="p contact" wx:if="{{data.type == 1}}">
            <text class="tit">拼车价格:</text><text>{{data.price}}</text>
        </view>
        <view class="p contact">
            <text wx:if="{{data.type == 1}}" class="tit">剩余空位:</text><text wx:elif="{{data.type == 2}}" class="tit">人数:</text><text>{{data.surplus}}</text>
        </view>
        <view class="p contact" wx:if="{{data.type == 1}}">
            <text class="tit">车型:</text><text>{{data.vehicle}}</text>
        </view>
        <view class="p contact">
            <text class="tit">备注:</text>
        </view>
        <view class="p remark">
            {{data.remark}}
        </view>

    </view>

    <view id="comment_list">
        <view class="comment_list_header">全部评论({{comnum}})</view>
        <view class="list">
        <view class="nocomment" wx:if="{{comnum == 0}}">
            暂无评论
        </view>
            <view class="item" wx:for="{{comment}}" wx:for-index="idx" wx:key="k">
                <view class="left">
                    <image src="{{item.avatarUrl}}"></image>
                </view>
                <view class="com_main">
                    <view class="name">
                        {{item.nickName}}
                    </view>
                    <view class="text">
                        {{item.content}}
                        <image wx:for="{{item.img}}" wx:for-item="res" wx:for-index="idxx" wx:key="i"  src="{{res}}" data-iid="{{idx}}" data-id="{{idxx}}" mode="aspectFit"  bindtap="previmg"></image>
                        <view class="reply" wx:if="{{item.reply}}">{{item.reply}}</view>
                    </view>
                    <view class="info">
                        <text>{{item.time}}</text>
                        <navigator url="/pages/comment/index?id={{data.id}}&reply={{item.nickName}}:{{item.content}}"><view class="zview"><image src="/img/msg1.png"></image><text>回复</text></view></navigator>                        
                        <view wx:if="{{item.iszan}}" class="zview" bindtap="zan" id="{{idx}}"><image src="/img/zan1.png"></image><text>{{item.zan}}</text></view>
                        <view wx:if="{{!item.iszan}}" class="zview" bindtap="zan" id="{{idx}}"><image src="/img/zan.png"></image><text>{{item.zan}}</text></view>
                    </view>
                </view>
            </view>
        </view>
        
    <view class="page__bd">
        <view class="weui-loadmore" bindtap="onReachBottom" wx:if="{{!nomore}}">
            <view class="weui-loading"></view>
            <view class="weui-loadmore__tips">正在加载</view>
        </view>
        <view class="weui-loadmore weui-loadmore_line" wx:if="{{nomore}}">
            <view class="weui-loadmore__tips weui-loadmore__tips_in-line">没有更多了~</view>
        </view>
    </view>
    </view>

    
</view>
</scroll-view>

<view class="back" wx:if="{{back}}" bindtap="toIndex">
    <image src="/img/back.png"></image>
</view>

<view class="footer">
    <navigator url="/pages/comment/index?id={{data.id}}"><view class="comment">发表评论</view></navigator>
    <view class="ft-icon"><view class="tocomment" bindtap="tocomment"><image src="/img/msg.png" class="msg"></image><text class="comnum">{{comnum}}</text></view><image wx:if="{{!shoucang}}" src="/img/shoucang.png" class="shoucang" bindtap="shoucang"></image><image wx:if="{{shoucang}}" bindtap="qxshoucang" src="/img/shoucang1.png" class="shoucang"></image></view>
</view>

<modal class="modal" hidden="{{!modalFlag}}" title="申请预约" no-cancel bindconfirm="modalOk" confirmText="不了，我再看看">  
    <view class="dew">  
      <form report-submit="true" bindsubmit="appointment">
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">姓名</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" name="name" value="{{userInfo.name}}" placeholder="请填写姓名"/>
                </view>
            </view>
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">手机号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" type="number"  name="phone" value="{{userInfo.phone}}" placeholder="请输入手机号" />
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">乘车人数</view>
                </view>
                <view class="weui-cell__bd">
                    <picker mode="selector"  name="surplus" value="{{surplus}}" range="{{Surpluss}}" bindchange="setsurplus">
                        <view class="weui-input">{{Surpluss[surplus]}}</view>
                    </picker>
                </view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
            </view>
            
            <button class="weui-btn" type="primary" formType="submit">确定</button>

        </view>
      </form> 
</view>  
</modal>

二、wxss样式文件代码如下：

.page{background: #f5f5f5;}
.header{border-bottom:1px solid #eee;height:130rpx;background: #fff;padding:5px 10px 0px 10px;}
.head{width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;border: 1px solid #f4de3b;float: left;margin:5rpx 10rpx;}
.head image{width:100%;height:100%;}
.username{float:left;line-height: 110rpx;font-size:.75rem;}
.icon-add{width:20rpx;height: 20rpx;}
.add{float:right;}
.add button{background: #000;color:#fff;width: 120rpx;font-size:.82rem;height:50rpx;padding:10rpx;line-height: 30rpx;border-radius: 10rpx;margin-top: 40rpx;}

.content{clear:both;margin-top: 20rpx;background: #fff;padding:5px 10px 40px 10px;}
.p{position: relative;}
.icon{width:50rpx;height: 50rpx;margin:10rpx;position:absolute}
.p text{margin-left:60rpx;font-size:.9rem;}
.icon-tel{width:60rpx;height: 60rpx;margin-left:50rpx;}
.contact text{font-size:.94rem;line-height: 80rpx;margin: 20rpx;}
.tit{color:#000;}
.icon-gender{width:30rpx;height: 30rpx;top: 16rpx;}
.tocomment{width:100rpx;float:left}

.footer{position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1001;
    display: table;
    width: 100%;
    height: 60rpx;
    padding: 0.1375rem 0;
    background-color: #f5f5f5;
    border-top: solid #d7d7d7 0.0625rem;}
.comment{display: block;
    margin: 0 0.25rem 0 0.5rem;
    padding: 0.2375rem;
    color: #888;
    font-size:.70rem;
    background-color: #fff;
    border: solid #e9e9e9 1px;
    border-radius: 0.125rem;width:550rpx;float: left}

.footer image{width:40rpx;height: 40rpx;margin:10rpx;}
.ft-icon{position: relative;}
.msg{position: absolute;right:100rpx}
.shoucang{position: absolute;right:10rpx;}
.comnum{position: absolute;right:80rpx;margin-left:80rpx;color:darkred}
.remark{margin: 20rpx; font-size: .78rem;}

#comment_list{margin-top:10px;background: #fff;padding-bottom: 60px;}
#comment_list .comment_list_header{font-size:.78rem;padding:5px 10px;border:1px solid #eee;}
#comment_list .list .item .left{width:140rpx;height:140rpx;float:left;}
#comment_list .list .item .left image{width:80rpx;height:80rpx;border-radius: 50%;margin:10px;border:1px solid #f4de3b}
#comment_list .list .item{border-bottom:1px solid #eee;overflow:hidden;}
#comment_list .list .item .com_main{width:600rpx;float:left;margin-top:40rpx;font-size:.8rem;padding-bottom: 10rpx;}
#comment_list .list .item .com_main .text{color:#222;margin-top:10rpx;}
#comment_list .list .item .com_main .info{padding: 5rpx;}
#comment_list .list .item .com_main .info text{font-size: .7rem!important;float:left;}
#comment_list .list .item .com_main .info image{width:16px;height:16px;position:absolute;left:-40rpx;top:6rpx;}
#comment_list .list .item .com_main .info .zview{position: relative; min-width:15px;}
#comment_list .list .item .com_main .info view{float: right;margin:0px 30rpx;}
#comment_list .list .item .com_main image{max-width: 98%;margin-right:2%;}
#comment_list .list{min-height: 300px;}
#comment_list .list .nocomment{text-align: center;line-height: 200px;}
#comment_list .list .reply{background: #f5f5f5;width:90%;padding:5px 2%;margin-left:3px;color:#000;}

.back{position: fixed;top:70px;left:0px;background: rgba(0, 0, 0, 0.5);padding:9px 20px 5px 10px;border-bottom-right-radius:2em;border-top-right-radius:2em;}
.back image{width:20px;height: 20px;}
.weui-input{overflow: hidden}

三、js页面代码如下：

// pages/info/index.js
var util = require('../../utils/util.js');
var app = getApp();
var page = 1;
var comment = new Array();
Page({
  data:{
    'data.id':0,
    'back':false,
    'nomore':false,
    'shoucang':false,
    'notme':false,
    'modalFlag':false
  },
  tel:function(){
    var that = this;
    wx.makePhoneCall({
      phoneNumber: that.data.data.phone
    })
  },
  tocomment:function(){
    this.setData({toview:'comment_list'});
  },
  zan:function(event){
    var that = this;
    var Commentdata = this.data.comment;
    util.req('comment/zan',{
      'cid':Commentdata[event.currentTarget.id].id,
      'sk':app.globalData.sk
      },function(data){
      if(data.status == 1){
        Commentdata[event.currentTarget.id].zan = data.zan;
        Commentdata[event.currentTarget.id].iszan = true;
        that.setData({comment:Commentdata});
      }else{
        console.log(data.msg);
        wx.showModal({
            title: '提示',
            content: data.msg,
            showCancel: false,
            success: function (res) {
            }
        });
      }
    })
  },
  shoucang:function(){
    var that = this;
    util.req('fav/addfav',{iid:that.data.data.id,sk:app.globalData.sk},function(data){
      if(data.status == 1){
        that.setData({'shoucang':true});
        wx.showToast({
          title: '收藏成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },
  qxshoucang:function(){
    var that = this;
    util.req('fav/delfav',{iid:that.data.data.id,sk:app.globalData.sk},function(data){
      if(data.status == 1){
        that.setData({'shoucang':false});
        wx.showToast({
          title: '取消收藏成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },
  madal:function(){
    this.setData({modalFlag:true});
  },
  modalOk:function(){
    this.setData({modalFlag:false});
  },
  appointment:function(e){
    var fId = e.detail.formId;
    var that = this;
    console.log(e.detail.value.surplus);
    if(e.detail.value.name == ''){
        util.isError('请输入姓名',that);
        return false;
    }
    if(e.detail.value.phone == ''){
        util.isError('请输入手机号',that);
        return false;
    }
    if(!(/^1[34578]d{9}$/.test(e.detail.value.phone))){
      util.isError('手机号码错误', that);
      return false;
    }
    if(e.detail.value.surplus == 0){
        util.isError('请选择人数',that);
        return false;
    }
    util.clearError(that);
    util.req('appointment/add',{form_id:fId,iid:this.data.data.id,name:e.detail.value.name,phone:e.detail.value.phone,surplus:e.detail.value.surplus,sk:app.globalData.sk},function(data){
      if(data.status == 1){
        that.setData({modalFlag:false});
        wx.showToast({
          title: '预约成功',
          icon: 'success',
          duration: 2000
        })
      }else{
        util.isError(data.msg,that);
        return false;
      }
    })
  },
  setsurplus:function(e){
    this.setData({surplus:e.detail.value})
  },
  onLoad:function(options){
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({height:res.windowHeight});
      }
    })

    that.setData({
      'userInfo.gender':app.globalData.userInfo.gender,
      'userInfo.name':(app.globalData.userInfo.name == '')?app.globalData.userInfo.nickName:app.globalData.userInfo.name,
      'userInfo.phone':app.globalData.userInfo.phone
    })

    util.req('fav/isfav',{iid:options.id,sk:app.globalData.sk},function(data){
      if(data.status == 1){
        that.setData({'shoucang':true});
      }
    }) 

    util.req('info/index',{id:options.id},function(data){
      that.setData({data:data.data});
      if(data.data.uid == app.globalData.userInfo.id){
        var notme = false;
      }else{
        var notme = true;
      }
      var Surpluss = new Array('请选择人数');
      for(var i = 1; i <= data.data.surplus; i++){
        Surpluss.push(i);
      }
      that.setData({
        'data.tm':util.formatTime(new Date(data.data.time*1000)),
        'data.price':(data.data.price == null)?'面议':data.data.price,
        'data.gender':data.data.gender,
        'notme':notme,
        'Surpluss':Surpluss,
        'surplus':0
        });
    })   
    page = 1; 
    this.getCount(options.id);
    this.getComment(options.id);
    if(getCurrentPages().length == 1){
      that.setData({'back':true});
    }
  },
  previmg:function(e){
    var that = this;    
    wx.previewImage({
      current: that.data.comment[e.target.dataset.iid].img[e.target.dataset.id],
      urls: that.data.comment[e.target.dataset.iid].img,
    })
  },
  getComment:function(id){
    var that = this;
    util.req('comment/get',{id:id,type:'info',page:page},function(data){
      if(data.status == 1){
        if(page == 1){          
          comment = new Array();
        }
        if(data.data == null){
          that.setData({'nomore':true});
        }else{         
          data.data.forEach(function(item){
            comment.push({
              id:item.id,
              avatarUrl:item.avatarUrl,
              content:item.content,
              fid:item.fid,
              nickName:item.nickName,
              img:JSON.parse(item.img),
              zan:item.zan,
              reply:item.reply,
              time:util.getDateBiff(item.time*1000)
            })
          })
        }
        console.log(page+':'+comment);
        that.setData({comment:comment});
      }
    })
  },
  toIndex:function(){
    wx.reLaunch({
      url: '/pages/index/index'
    })
  },
  onShareAppMessage: function () { 
    return {
      title: '拼车详情',
      path: 'pages/info/index?id='+this.data.data.id
    }
  },
  getCount:function(id){  
    var that = this;  
    util.req('comment/get_count',{id:id,type:'info'},function(data){  //获取评论总数
      if(data.status == 1){
        that.setData({comnum:data.data});
      }
    })
  },
  onShow:function(){      
    page = 1; 

    if(this.data.data) {
      this.getCount(this.data.data.id);
      this.getComment(this.data.data.id);
    }
  },
  tobottom:function(){
    if(!this.data.nomore){
      page++;
      this.getComment(this.data.data.id);
    }
  }
})

模板简介：该模板名称为【微信小程序拼车详情支持个人评论页面模板样式制作设计教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。