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

地图圈系统——微信小程序(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;
  }

三、效果展示

收藏:
在这里插入图片描述
取消收藏:
在这里插入图片描述
收藏详情页面:
在这里插入图片描述
删除收藏:
在这里插入图片描述
在这里插入图片描述
以上是没有收藏的样子。收藏功能差不多就到这。。。。。。

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…