山东大学项目实训——地图圈系统——微信小程序（17）

一、社区附加功能

在上次社区功能的基础上，我增加了几个附加功能，首先点击用户头像可以看到此用户的用户信息，然后点击查看动态，可以查看此用户发表的动态，也可以进行点赞和评论。

还增加了我的动态功能，在此功能里可以删除自己的动态，也可以进行点赞评论。

二、项目代码

<!--pages/my/xinxi/xiugai/xiugai.wxml-->
<navBar 
    title-text="个人信息" 
    back-icon="../../src/images/back@3x.png"
    background="#f2f2f2"
    bindback="back"/>
<form >
	<view class="cu-form-group margin-top">
		<view class="title">头像</view>
		<image class="aaa" src="http://8.140.117.15:8800/user/getimage/{{userInfo.head_img}}"></image>
	</view>
  <view class="cu-form-group ">
		<view class="title">昵称</view>
		<text>{{userInfo.username}}</text>
	</view>
  	<view class="cu-form-group">
		<view class="title">性别</view>
    <text >男</text>
	</view>
  <view class="cu-form-group">
		<view class="title">生日</view>
		<text>{{userInfo.birthday}}</text>
	
	</view>
  	<view class="cu-form-group">
		<view class="title">省份</view>
		<text>{{userInfo.province}}</text>
	</view>
  	<view class="cu-form-group">
		<view class="title">个人说明</view>
		<text>{{userInfo.introduction}}</text>
	
	</view>
  	
  	
  
  <view class="padding">
  <button class="cu-btn block bg-blue margin-tb-sm lg" bindtap="watch">查看动态</button>
  
</view>
</form>

// pages/other_index/other_index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo:[]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var username = options.username
    var that = this
    console.log(username)
    wx.request({
      url: 'http://8.140.117.15:8800/user/findbyid/'+username,
      method:'GET',
      success:function(res){
        console.log(res)
        that.setData({
          userInfo:res.data.user
        })
        
      }
    })
  },
  watch(){
    wx.navigateTo({
      url: '/pages/otherUser/otherUser?username='+this.data.userInfo.username+ '&head_img=' +'http://8.140.117.15:8800/user/getimage/'+this.data.userInfo.head_img ,
    })
  },

<!--pages/navigation/navigation.wxml-->
<navBar title-text="我的动态" back-icon="../../src/images/back@3x.png" background="#f2f2f2" bindback="back" />
<view wx-if="{{showcontent}}">

  <view>
    <image class="head_img11" src="../../src/images/cc.jpg" mode="aspectFill"></image>
    <!-- <image class="ffabu11" src="../../src/images/fabu.png" mode="aspectFit" bindtap="clickfabu"></image> -->
  </view>
  <view>
    <image class="touxiang" src="{{src}}" mode="aspectFit"></image>
    <view class="name">{{nickname}}</view>
  </view>
  <view style="height:80rpx;"></view>
  <view>
    <!-- 仿微信朋友圈 -->
    <scroll-view class='page'>
      <!-- 列表 -->
      <view class='CircleList' wx:for='{{datasource}}' wx:for-index="index">
        <!-- 头像、昵称、内容 -->
        <view class='body-view'>
          <!-- 头像 -->
          <view class='left-view'>
            <image class='user-icon' src='{{head_list[index]}}'></image>
          </view>
          <view class='right-view'>
            <!-- 昵称 -->
            <view class='user-name-view'>
              <label class='user-name'>{{item.username}}</label>
            </view>
            <!-- 内容 -->
            <view class='user-content-view'>
              <text class='user-content'>{{item.content}}</text>
            </view>
            <!-- 图片 -->
            <view class='photo-view '>
              <view class='photo' wx:for='{{image_list[index]}}' wx:for-item="item2"
                style='width:{{photoWidth}}px;height:{{photoWidth}}px'>
                <image bindtap='LookPhoto' data-photUrl='{{item2}}' src='{{item2}}'
                  style='width:{{photoWidth}}px;height:{{photoWidth}}px'></image>
              </view>
            </view>
            <!-- 地理位置 -->
            <view class='user-address-view'>

              <label>{{item.location}}</label>
            </view>

            <!-- 时间、删除按钮、点赞评论按钮 -->
            <view class='TDD-view'>
              <label>{{item.time}}</label>
              
              <button bindtap='delete' data-index="{{index}}" wx-if="{{item.username==nickname?true:false}}">删除</button>
              <!-- <image wx-if="{{!count_like[index]}}" class="TDD1" src="../../src/images/no_like.png" bindtap="clicklike" data-index="{{index}}"></image>
              <image wx-if="{{count_like[index]}}" class="TDD1" src="../../src/images/like.png" bindtap="clicklike" data-index="{{index}}"></image>
                
              <image data-isShow='{{isShow}}'class="TDD2"  bindtap="showInput" 
              data-index="{{index}}" src='../../src/images/wxdiscuss.png'></image> -->
            </view>
            <view class='TDD-view'>
              <!-- <label>{{item.time}}</label> -->
              <!-- <button bindtap='delete' data-index="{{index}}" wx-if="{{item.username==nickname?true:false}}">删除</button> -->
              <image wx-if="{{!if_zan[index]}}" class="TDD1" src="../../src/images/zan.png" bindtap="clicklike"
                data-index="{{index}}"></image>
              <image wx-if="{{if_zan[index]}}" class="TDD1" src="../../src/images/zan2.png" bindtap="clicklike"
                data-index="{{index}}"></image>

              <image data-isShow='{{isShow}}' class="TDD2" bindtap="showInput" data-index="{{index}}"
                src='../../src/images/wxdiscuss.png'></image>
            </view>

            <!-- 点赞 -->
            <view class='zan-view'>
              <!-- <view class='trigon-view'>
              <image mode='aspectFill' class='trigon' src='/images/trigon.png'></image>
            </view> -->

              <!-- 点赞 -->
              <view class='zan-bg-view'>
                <view class='zan-user-view' wx:for='{{count_like[index]}}'>
                  <label bindtap='TouchZanUser' data-name='{{item}}' class='zan-user'>{{item}},</label>

                </view>
                <label bindtap='TouchZanUser' data-name='{{item}}'
                  class='zan-user2'>{{count_like[index].length}}人觉得很赞</label>
              </view>
              <view class='line'></view>
              <!-- 评论 -->
              <view class='discuss-view'>
                <view class="cu-list menu-avatar comment solids-top">
                  <!-- <view class='discuss' wx:for='{{comment_list[index].commentList}}'>
                <label bindtap='TouchZanUser' data-name='{{item.username}}' class='discuss-user'>{{item.username}}：</label>
                <label class='content'>{{item.content}}</label>
                <label class='content2'>{{item.time}}</label>
              </view> -->
                  <view class="cu-item" wx:for='{{comment_list[index].commentList}}'>
                    <view class="cu-avatar round" wx:if='{{item.if_wx==0}}'
                      style="background-image:url(http://8.140.117.15:8800/user/getimage/{{item.head_img}});">
                    </view>
                    <view class="cu-avatar round" wx:if='{{item.if_wx==1}}'
                      style="background-image:url({{item.head_img}});">
                    </view>
                    <view class="content">
                      <view class="text-blue">{{item.username}}</view>
                      <view class="text-black text-content text-df">
                        {{item.content}}
                      </view>

                      <view class="margin-top-sm flex justify-between">
                        <view class="text-gray text-df">{{item.time}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
    </scroll-view>

    <!-- 评论按钮弹出框 -->
    <!-- <view animation="{{animation}}" class='pop-up-box' style='top:{{popTop}}px;width: {{popWidth}}px;'> -->

    <!-- </view> -->
  </view>
</view>
<view class="input-section" wx:if="{{showInput}}">
  <view class="cu-avatar round" style="background-image:url({{src}});"></view>
  <input class='input_input' value="{{inputMessage}}" focus="auto" placeholder="请输入内容" bindinput='bindInputMsg'
    bindblur="onHideInput" confirm-type="send" bindconfirm="sendTextMsg" />
  <view style="height:110rpx;width:170rpx;display:flex; align-items: center;justify-content: center;">
    <view class="send_btn">
      <view class="cu-btn bg-green shadow-blur" bindtap="send">发送</view>
    </view>
  </view>
</view>
<!-- <view class="cu-bar input" wx:if="{{showInput}}">
    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
    <view class="action">
      <text class="cuIcon-roundaddfill text-grey"></text>
    </view>
    <input value="{{inputMessage}}" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
    <view class="action">
      <text class="cuIcon-emojifill text-grey"></text>
    </view>
    <button class="cu-btn bg-green shadow-blur">发送</button>
  </view> -->

// pages/navigation/navigation.js
import { request } from "../../requests/index.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nickname:'',
    src:'',
    datasource: [],
    zanSource: [],
    comment:[],
    content:'',
    photoWidth: wx.getSystemInfoSync().windowWidth / 5,

    popTop: 0, //弹出点赞评论框的位置
    popWidth: 0, //弹出框宽度
    isShow: true, //判断是否显示弹出框
    showcontent:true,
    showInput: false, //控制输入栏
    islike:false,
    count:0,//记录第几个被评论
    count_like:[],
    image_list:[],
    head_list:[],
    id_list:[],
    if_zan:[],
    comment_list:[],
    content:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:async function (options) {
    var value=wx.getStorageSync("firstuser")
    if(value==""){
      wx.showModal({
        title: '提示',
        content: '请先登录',
      })
      this.setData({
        showcontent:false,
      })
    }else{
      this.setData({
        showcontent: true,
      })
      var nickname = value.nickName
      
      var src = value.avatarUrl
      console.log(src)
      this.setData({
        nickname,
        src,
      })
    }
    var result = await request({ url: 'http://8.140.117.15:8800/dongtai/findall/'+value.nickName});
    var zan_result = await request({ url: 'http://8.140.117.15:8800/like/findbyid/11'});
    var comment_result = await request({ url: 'http://8.140.117.15:8800/comment/findall'});
    console.log(result)
    console.log(zan_result)
    console.log(comment_result)
    var count_like=[]
    var zanSource=[]
    var comment=[]
    var datasource =[]
    var head_list = []
    var id_list = []
    var if_zan = []
    var comment_list = []
    var b = 0;
    var c = false
    for(var i=result.data.dongtaiList.length-1;i>=0;i--){
      datasource[b]=result.data.dongtaiList[i]
      
      var zan=await request({ url: 'http://8.140.117.15:8800/like/findbyid/'+datasource[b].id});
      count_like[b] = zan.data.usernameList
      for(var a = 0;a<comment_result.data.dongtaiCommentList.length;a++){
         
        if(datasource[b].id ==  comment_result.data.dongtaiCommentList[a].dongtai_id){
          
          comment_list[b] = comment_result.data.dongtaiCommentList[a]
          break
        }
        
      }
      // count_like[b]=zan_result.data.iLikeList[i].iLikeUserList
       id_list[b] = result.data.dongtaiList[i].id
      
      for(var z = 0;z<count_like[b].length;z++){
        if(count_like[b][z]==this.data.nickname){
          c = true
          break
        }else{
          c=false
        }
      }
      if_zan[b]=c
      b++
    }
    console.log(id_list)
    // console.log(if_zan)
    // console.log(count_like)
    // var datasource = result.data.dongtaitList
    console.log(comment_list)
    this.setData({
      datasource:datasource,
    })
    console.log("datascource为"+datasource)
    var image_list = []
    for(var i=0;i<datasource.length;i++){
      var strImage = datasource[i].image.split(",");
      var arr = []
      var imageList_1 = []
      if(datasource[i].if_wx == 0){
        var head ='http://8.140.117.15:8800/user/getimage/'+datasource[i].head_img
        head_list.push(head)
      }else{
        head_list.push(datasource[i].head_img)
      }
      for (var a in strImage) {
        arr = strImage[a];
        if(arr!=''){
          var url = 'http://8.140.117.15:8800/user/getimage/'+arr
          imageList_1.push(url)
        }else{
          url =null
        }
        
        console.log(url)
        
       }
      // console.log("列表"+i+"为"+imageList_1)
      if(imageList_1!=null){
        image_list.push(imageList_1)
      }else{
        
      }
     
    }
   
    this.setData({
      head_list:head_list,
      datasource:datasource,
      count_like:count_like,
      image_list:image_list,
      id_list:id_list,
      if_zan:if_zan,
      zanSource,
      comment_list:comment_list
    })
  },
  clickfabu(){
    var value=wx.getStorageSync("my")
    // var address=JSON.parse(value).name
    var address = '山东大学齐鲁软件学院'
    console.log(address)
    wx.navigateTo({
      url: '/pages/send/send?address=' + address,
    })
  },
  showInput: function (e) {
    // console.log(e.currentTarget.dataset.index)
    console.log(e)
    var id = this.data.id_list[e.currentTarget.dataset.index]
    console.log(id)
    this.setData({
      showInput: true,
      count: id,
      content:e.detail.value
    })
 
  },
  
  // onHideInput: function () {
  //   this.setData({
  //     showInput: false
  //   })

  // },
  LookPhoto:function(event){
    console.log(event)
    var src = event.currentTarget.dataset.photurl;//获取data-src
    // console.log(src)
    var imgList = [event.currentTarget.dataset.photurl];//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },
  bindInputMsg(e){
    console.log(e)
    this.setData({
      content:e.detail.value
    })
  },
  delete(e){
    var that = this
    console.log(e)
    var id = this.data.id_list[e.currentTarget.dataset.index]
    console.log(id)
    wx.showModal({
      title: '删除该动态',
      content: '确定要删除该动态？',
      showCancel: true,//是否显示取消按钮
      cancelText: "否",//默认是“取消”
      confirmText: "是",//默认是“确定”
      success: function(res){
        if (res.cancel) {
          //点击取消,默认隐藏弹框
        } else{
          wx.request({
            url: 'http://8.140.117.15:8800/dongtai/deletebyid/'+id,
            method:'DELETE',
            success:function(res){
              console.log(res)
              wx.showToast({
                title: "删除成功",
                duration: 1000,
                icon: "sucess",
                make: true
              })
              that.onLoad()
              
            }
          })
          
        
          
         
        }
      }
    })
    // wx.request({
    //   url: 'http://8.140.117.15:8800/dongtai/deletebyid/'+id,
    //   method:'DELETE',
    //   success:function(res){
    //     console.log(res)
        
    //   }
    // })
  },
  clicklike(e){
    var that = this
    console.log(e)
    var id2 =  e.currentTarget.dataset.index
    var id = this.data.id_list[e.currentTarget.dataset.index]
    var if_zan = this.data.if_zan[id2]
    console.log(id)
    console.log(if_zan)
    var a ={
      username : this.data.nickname,
      dongtai_id:id
    }
    if(!if_zan){
      wx.request({
        url: 'http://8.140.117.15:8800/dongtai/good',
        method:'POST',
        data:a,
        success:function(res){
          console.log(res)
          that.onLoad()
        }
        
      })
    }else{
      wx.request({
        url: 'http://8.140.117.15:8800/dongtai/cancelgood',
        method:'POST',
        data:a,
        success:function(res){
          console.log(res)
          that.onLoad()
        }
      })
    }
  

  },
  send(e){
    var that = this
    console.log("我是e"+e)
    console.log(this.data.content)
    console.log(this.data.count)
    var a ={
      dongtai_id:this.data.count,
      username:this.data.nickname,
      content:this.data.content
    }
    wx.request({
      url: 'http://8.140.117.15:8800/comment/wxsave',
      method:'POST',
      data:a,
      success:function(res){
        console.log(res)
        that.onLoad()
        that.setData({
          showInput: false
        })
        
      }
    })
    console.log(a)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.onPullDownRefresh()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    var that = this
    wx.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(function () {
    wx.hideNavigationBarLoading() //完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新
    that.onLoad()
     }, 1000);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

三、效果展示