校园二手交易平台(微信小程序版)-EW帮帮网

文章目录

1. 项目概述

校园二手交易平台微信小程序旨在为在校学生提供一个便捷的二手物品交易渠道，包含用户模块、商品发布与浏览、订单管理、私信沟通等核心功能。本文将基于思维导图的结构，分享该小程序开发过程中的关键技术点和实现方案。

2. 项目功能思维导图

在这里插入图片描述

3. 技术架构

1. 前端技术栈

微信小程序原生框架（WXML/WXSS/JS）
wx.request API（网络请求）

2. 后端技术栈

springBoot+MyBatis（服务端框架）
MySQL（数据库）

4. 核心模块实现

 //登录
  async onClickLoginHandle() {
    if (this.data.username == "") {
      wx.showToast({
        title: '用户名不能为空',
        icon: 'error'
      })
      return
    }

    if (this.data.password == "") {
      wx.showToast({
        title: '密码不能为空',
        icon: 'error'
      })

      return
    }

    //调用登录接口
    const res = await http.get("/login", {
      username: this.data.username,
      password: this.data.password
    }, {
      header:{
        'Content-type': 'application/json' 
      }
    })

    if (res.data.code == 200) {
      wx.showToast({
        title: res.data.msg,
      })

      //保存用户名信息
      wx.setStorageSync("user", res.data.data)
      wx.setStorageSync("isAgreed", this.data.isAgreed)

      //跳转到index
      setTimeout(() => {
        // wx.navigateTo({
        //   url: '/pages/index/index',
        // })
        wx.navigateBack()
      }, 1000);

    } else {
      wx.showToast({
        title: res.data.msg,
        icon: 'error'
      })
    }

  }

  //注册
  async onClickRegisterHandle() {
    if (this.data.username == "") {
      wx.showToast({
        title: '请输入用户名',
        icon: "error"
      })

      return
    }
    if (this.data.phone == "") {
      wx.showToast({
        title: '请输入手机号',
        icon: "error"
      })

      return
    }

    if (this.data.password == "") {
      wx.showToast({
        title: '请输入密码',
        icon: "error"
      })

      return
    }

    const res = await http.get("/register", {
      username: this.data.username,
      password: this.data.password,
      mobile:this.data.phone,
      nickname: "这个家伙很懒，什么都没有留下～",
      avatar:"https://img2.baidu.com/it/u=3134235566,1012432277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
    })
    if (res.data.code == 200) {
      wx.showToast({
        title: res.data.msg,
      })
      setTimeout(() => {
        wx.navigateBack()
      }, 1000);

    } else {
      wx.showToast({
        title: res.data.msg,
        icon: "error"
      })
    }

  }

二手商品发布模块

  /**
   * 发布闲置
   */
  async onCreateHandle() {

    if (!wx.getStorageSync('user')) {
      wx.showModal({
        title: '温馨提示',
        content: '登录后才可以发布闲置物品哦～',
        complete: (res) => {
          if (res.confirm) {
            wx.navigateTo({
              url: '/pages/login/login',
            })
          }
        }
      })

      return;
    }


    if (this.data.goods_name === '' || this.data.goods_introduce === '' || this.data.goods_price === '' || this.data.goods_img === '') {
      wx.showToast({
        title: '请完善发布信息',
        icon: 'error'
      })

      return;
    }




    const prams = {
      ...this.data
    }
    const res = await http.post('/pushGoods', prams)
    if (res.data.code == 200) {
      wx.showToast({
        title: res.data.msg,
        icon: 'success',
        success: () => {
          setTimeout(() => {
            wx.switchTab({
              url: '/pages/index/index',
            })

            //清空数据
            this.setData({
              goods_name: '',
              goods_introduce: '',
              goods_price: '',
              goods_img: '',
              status: 0,
            })

          }, 1000)
        }
      })


    }
  }

二手商品浏览模块
wxml

  <!-- 内容区域 -->
  <view class="grid-container">

    <block wx:for="{{goodsList}}" wx:key="uid">

      <view class="grid" bind:tap="onItemClickHandle" data-item="{{item}}">
        <view class="grid-item">
          <image src="{{item.goods_img}}" mode="aspectFill" />
          <text class="product-name">{{item.goods_name}}</text>
          <view class="product-price-view">
            <span style="color:#f3514f; font-size: 22rpx">￥</span>
            <text class="product-price">{{item.goods_price}}</text>
          </view>
        </view>

        <view class="mask-container" wx:if="{{item.status==1}}">
          <text>卖掉啦～</text>
        </view>

      </view>

    </block>

  </view>

js

 /**
   * 获取二手商品闲置列表数据
   */
  async getGoodsList() {
    const res = await http.get('/goodsList', null, {
      isLoading: this.data.isLoading
    })
    this.setData({
      goodsList: res.data.data.list
    })
  },