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

一、收藏功能实现思路

用户每次点击某一地点的收藏都需要请求一次后台接口
接口url为：
http://8.140.117.15:8800/collect/addcollect
表单参数为：
username（用户名），name（地点名），address（地点），longitude、latitude。

每次在此点击收藏按钮，则会请求删除收藏接口。
接口url为：
http://8.140.117.15:8800/collect/deletebyname/

参数为：
username（用户名）、name（地点名）

界面会有一个参数判断是否收藏，会有不同的图标显示。

用户每次点击地点，都会请求是否存在收藏的接口，以便于前端页面判断收藏按钮样式。接口url为：
http://8.140.117.15:8800/collect/ifexist/

参数为：
username（用户名）、name（地点名）

当用户点击我的页面收藏按钮时，会跳转到收藏详情页面，显示此用户收藏的所有地点名以及位置。此时需要请求后台获取所用用户数据接口。
接口url为：
http://8.140.117.15:8800/collect/findall/

参数为：
username（用户名）

当用户想要删除收藏的地点，会弹窗，提示是否要删除该收藏，如果点击是，就再次调用删除收藏接口。

二、项目代码

js文件代码：

async clickcollect() {
    var that = this
    var value = wx.getStorageSync("firstuser")
    if (value == "") {
      wx.showModal({
        title: '提示',
        content: '请先登录',
      })
    } else {
      var is = this.data.iscollect
      if (is) {
        console.log("取消收藏")
        var result = await request({ url: 'http://8.140.117.15:8800/collect/deletebyname/' + value.nickName+'/'+this.data.bottom.title, method: "DELETE" });
        console.log(result)
        this.setData({
          
          collectid: 0,
          iscollect: false,
        })
        wx.showToast({
          title: "取消收藏",
          duration: 1000,
          icon: "sucess",
          make: true
        });
      } else {
        console.log("已收藏")
        var a = {}
        if (this.data.markers.length == 2) {
          a = this.data.markers[1]
        } else {
          a = this.data.markers[0]
        }
        var value = wx.getStorageSync("firstuser")
        var data = {
          username:value.nickName,
          // username: value.username,
          name: this.data.bottom.title,
          address: this.data.bottom.addr,
          longitude: a.longitude,
          latitude: a.latitude
        }
        var result = await request({ url: 'http://8.140.117.15:8800/collect/addcollect', data: data, method: "POST" });
        console.log(result)
        this.setData({
          collectid: result.data,
          iscollect: true,
        })
        wx.showToast({
          title: "收藏成功",
          duration: 1000,
          icon: "sucess",
          make: true
        });
      }
    }

  },

// 点击地图事件
  onTapMap(event) {
    var that = this
    console.log(event)
    const latitude = event.detail.latitude;
    const longitude = event.detail.longitude;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      get_poi: 1,
      poi_options: 'policy=2;radius=3000;page_size=20;page_index=1',
      
      success: async function (res) {
        console.log(res);
        var value = wx.getStorageSync("firstuser")
        var result = await request({ url: 'http://8.140.117.15:8800/collect/ifexist/' +value.nickName+'/'+res.result.formatted_addresses.recommend });
        console.log(result)
        that.setData({
          iscollect: result.data.ifexist,
        })
        var result = res.result
        that.setData({
          // addressList: res.result.pois
          bottom: {
            title: res.result.formatted_addresses.recommend,
            addr: res.result.address,
            latitude: event.detail.latitude,
            longitude: event.detail.longitude
          },
          bottom2: {
            title: res.result.formatted_addresses.recommend,
            addr: res.result.address,
            latitude: event.detail.latitude,
            longitude: event.detail.longitude
          },
          collectid: result.data,
          showbottom: true,
        })
      },
      fail: function (res) {
        console.log(res);
      }
    });
    var markers = []
    markers.push(this.data.markers[0])
    markers.push({
      id: 1,
      iconPath: `${CDN_PATH}/Marker3_Activated@3x.png`,
      latitude: latitude,
      longitude: longitude,
      width: 30,
      height: 30
    })
    this.setData({
      mapCallbackTxt: latitude.toFixed(6) + ',' + longitude.toFixed(6),

      markers
    });
  },

wxml代码：

 			<cover-view class="collect" bindtap="clickcollect">
              <cover-image wx-if="{{!iscollect}}" src="../../src/images/no_collect.png" mode="scaleToFill"></cover-image>
              <cover-image wx-if="{{iscollect}}" src="../../src/images/collect.png" mode="scaleToFill"></cover-image>
              <cover-view>收藏</cover-view>
            </cover-view>

收藏详情页面wxml文件：

<!--pages/collect/collect.wxml-->
<navBar 
    title-text="我的收藏" 
    back-icon="../../src/images/back@3x.png"

    background="#f2f2f2"
    bindback="back"/>
    <view wx-if="{{show}}">
  <view class="wrop" wx:for="{{collect}}"  wx:for-index="index" bindtap="click" data-index="{{index}}">
  
  <image src="{{img}}" mode="aspectFit"></image>
  <!-- <image src="../../src/images/diandian.png" mode="aspectFit"></image> -->

  <view class="wrop_content">
    <view class="title">{{item.name}}</view>
    <view class="addr">{{item.address}}</view>
    
  </view>
  <image class="png" bindtap="ondian" data-index="{{item.id}}" src="../../src/images/diandian.png" mode="aspectFit"></image>
  
</view>
</view>
<view wx-if="{{!show}}" class="imagesize">
  <image src="../../src/images/kong2.png"></image>
</view>

详情页面的js文件为

// pages/collect/collect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    collect:[],
    show:true,
    img:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:  function (options) {
    var value = wx.getStorageSync('firstuser')
    this.setData({
      img:value.avatarUrl
    })
    var that = this
    wx.request({
      url: 'http://8.140.117.15:8800/collect/findall/'+value.nickName,
      method:'GET',
      success:function(res){
        console.log(res)
        if(res.data.status==401){
          that.setData({
            show:false
          })
        }
        that.setData({
          collect:res.data.collectList
        })

      }
      
    })

  },
  ondian :async  function(e){
    var index = e.currentTarget.dataset.index
    console.log(index)
    var that = this
    wx.showModal({
      title: '删除该收藏',
      content: '确定要删除该收藏？',
      showCancel: true,//是否显示取消按钮
      cancelText: "否",//默认是“取消”
      confirmText: "是",//默认是“确定”
      success: function(res){
        if (res.cancel) {
          //点击取消,默认隐藏弹框
        } else{
          wx.request({
            url: 'http://8.140.117.15:8800/collect/deletebyid/'+index,
            method:'DELETE',
            success:function(res){
              console.log(res)
              wx.showToast({
                title: "删除成功",
                duration: 1000,
                icon: "sucess",
                make: true
              })
              that.onLoad()
              
            }
          })
          
        
          
         
        }
      }
    })
   
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

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

  },

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

  }
})

wxss文件代码：

/* pages/collect/collect.wxss */
page{
  background-color:#E4E7ED
}
.wrop{
  margin: 10rpx;
  border-radius: 10rpx;

  height: 180rpx;
  display: flex;
  background-color:#fff;
}
.wrop image{
  flex: 1;
  padding-top: 40rpx;
  width: 50%;
  height: 50%;
}
.wrop_content{
  flex: 4;
  display: flex;
  flex-direction: column;
}
.title{
  flex: 3;
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 20rpx;
}
.addr{
  flex: 2;
  display: flex;
  font-size: 32rpx;
  margin-left: 20rpx;
  /* align-items: center; */
}
.png{
  width: 10rpx;
  height: 10rpx;
}
page{
   height:100%                        
}
.imagesize{
 display:flex;
 height: 88%;                        
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
  }

三、效果展示

收藏：

取消收藏：

收藏详情页面：

删除收藏：


以上是没有收藏的样子。收藏功能差不多就到这。。。。。。