Bootstrap

校园跑腿小程序---任务界面 发布以及后端模板下载

在这里插入图片描述

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

在这里插入图片描述

文章目录


B站讲解视频

上篇文章

校园跑腿小程序—轮播图，导航栏开发

1.接单页面的开发

<view class="tabr">
  <view class="rw">最新任务</view>
  <view class="top" wx:for="{{taskList}}">
    <view class="top_left">
      <view class="item">{{item.taskType}}</view>
      <view class="money">佣金{{item.money}}</view>
    </view>
    <view class="start">取件地址：{{item.startAdddress}}</view>
    <view class="end">送达地址：{{item.endAdddress}}</view>
    <view class="bottom">
     <view class="time">服务时间：{{item.time}}</view>
     <view class="help">帮ta</view>
    </view>
  </view>
</view>

.rw{
    margin: 15rpx 30rpx;
    font-size: 38rpx;
    font-weight: 600;
}
.top{
    width: 90%;
    margin: 15rpx auto;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    height: 240rpx;
    padding: 10rpx 20rpx;
}
.top_left{
    font-size: 36rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}
.money{
    color: rgb(255, 161, 20);
}
.start{
    margin-bottom: 20rpx;
}
.bottom{
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.help{
    width: 150rpx;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx;
    border-radius: 35rpx;
    color: white;
    background-color: #1296db;
    margin-bottom: -20rpx;
}

// components/task/task.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        taskList:{
            type:Array,
            value:[]
        }
    
    },

    /**
     * 组件的初始数据
     */
    data: {
        taskList:[]
    },

    /**
     * 组件的方法列表
     */
    methods: {
    
    }
})

实现效果

在这里插入图片描述

2.发布页面的开发

user.js
在这里插入图片描述
在这里插入图片描述
发布页面的代码

<view class="top">
 <view class="address">
  <view class="startAddress">取件地址</view>
  <input type="text" placeholder="请输入取件地址" bindinput="startAddress" />
  <view class="endAddress">收货地址</view>
  <input type="text" placeholder="请输入取件地址" bindinput="endAddress"/>
  <view class="endAddress">联系电话</view>
  <input type="text" placeholder="请输入联系电话" bindinput="phone"/>
 </view>
 <view class="shopdetail">
   <view class="name"><text style="color: red;">*</text> 物品名称：<input type="text" placeholder="物品名称" bindinput="name" /></view>
   <view class="desc">描述信息：<textarea placeholder="描述信息" bindinput="desc" /></view>
   <view class="zl">物品重量：<input type="text" placeholder="物品重量" bindinput="weight" /></view>
   <view class="type">
   <text style="color: red;">*</text> 物品类别：
   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      {{array[index]}}
    </view>
  </picker>
   </view>
   <view class="price">
     <text style="color: red;">*</text> 小费：
     <button bind:tap="delet" data-value="{{price}}">-</button>
     <text style="margin-left: 25rpx;">{{price}}</text>
     <button bind:tap="add" data-value="{{price}}"  style="margin-left: 25rpx;">+</button>
   </view>
   <view class="img">物品图片：
     <image wx:if="{{imgUrl}}" src="{{imgUrl}}" mode=""/>
     <image wx:else bind:tap="goupload" src="../../image/index/upload.png" mode=""/>
   </view>
 </view>
 <button class="gopublic" bind:tap="goPublic">发布</button>
</view>

/* pages/send/send.wxss */
.address{
    margin: 15rpx auto;
    width: 92%;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    padding: 10rpx;
}
.startAddress,.endAddress{
    font-weight: 600;
    font-size: 36rpx;
    margin: 15rpx 10rpx;
    border-left: 5rpx solid #1296db;
    padding-left: 10rpx;

}
.address input{
    height: 50rpx;
    padding: 10rpx;
    border-bottom: 1rpx dashed gainsboro;
}
.shopdetail {
    margin: 20rpx auto;
    width: 92%;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    padding: 10rpx;
    font-size: 36rpx;
}
.name{
    display: flex;
    margin: 15rpx 10rpx;
    align-items: center;
    font-size: 36rpx;
}
.name input{
    width: 66%;
    height: 65rpx;
    padding-left: 10rpx;
    border-bottom: 1rpx dashed gainsboro;
}
.desc{
    margin: 15rpx 20rpx;
    display: flex;
}
.desc textarea{
    width: 70%;
    height: 120rpx;
    border-bottom: 1rpx dashed gainsboro;
    margin-left: 20rpx;
}
.type{
    margin: 30rpx 20rpx;
    display: flex;

}
.price{
    margin: 25rpx 20rpx;
    display: flex;
}
.price button{
    width: 60rpx;
    padding: 0;
    margin: 0;
    height: 60rpx;
    line-height: 50rpx;
}
.zl{
    display: flex;
    margin: 20rpx 20rpx;
}
.zl input{
    width: 70%;
    height: 65rpx;
    border-bottom: 1rpx dashed gainsboro;
    margin-left: 20rpx;
}
.img{
    margin: 20rpx 20rpx;
    display:flex;
}
.img image{ 
    width: 250rpx;
    height: 250rpx;
}
.gopublic{
    background-color: #1296db;
    width: 80%;
    margin: 50rpx auto;
    border-radius: 50rpx;
    color: white;
}

// pages/send/send.js
const {addTask} =require('../../api/user')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: ['取快递', '取外卖', '代买零食', '打印'],
    index:0,
    imgUrl:'',
    price:0,
    startAddress:'',
    endAddress:'',
    phone:'',
    name:'',
    desc:'',
    weight:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
  },
  startAddress(e){
    this.setData({
        startAddress:e.detail.value
    })
  },
  endAddress(e){
    this.setData({
        endAddress:e.detail.value
    })
  },
  phone(e){
    this.setData({
        phone:e.detail.value
    })
  },
  name(e){
    this.setData({
        name:e.detail.value
    })  
  },
  desc(e){
    this.setData({
        desc:e.detail.value
    }) 
  },
  weight(e){
    this.setData({
        weight:e.detail.value
    }) 
  },
  add(e){
      let value=e.currentTarget.dataset.value
      this.setData({
          price:value+1
      })
  },
  delet(e){
    let value=e.currentTarget.dataset.value
    if(value<2){
      wx.showToast({
        title: '小费不能为零',
        icon:'none'
      })
    }else{
        this.setData({
            price:value-1
        })
    }
   },
  bindPickerChange: function(e) {
    this.setData({
      index: e.detail.value
    })
  },
  goupload(res){
    let that=this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        var imgsFile = res.tempFilePaths[0];
        that.setData({
            imgUrl:imgsFile
        })
        wx.uploadFile({
          filePath: imgsFile,
          name: 'file',
          url: 'http://localhost:3000/upload/upload',
          success: res => {
           that.data.userInfo.imgUrl=JSON.parse(res.data).url
          }
        })
      }
      
    })
  },
  goPublic(){
     if(this.data.startAddress==''){
         wx.showToast({
           title: '取件地址不能为空',
           icon:"none"
         })
     }else if(this.data.endAddress==''){
        wx.showToast({
            title: '收货地址不能为空',
            icon:"none"
          })
     }else if(this.data.phone==''){
        wx.showToast({
            title: '手机号不能为空',
            icon:"none"
          })
     }else if(this.data.name==''){
        wx.showToast({
            title: '物品名称不能为空',
            icon:"none"
          })
     }else if(this.data.price==0){
        wx.showToast({
            title: '佣金不能为零',
            icon:"none"
          })
     } else{
         let data={
            startAddress:this.data.startAddress,
            endAddress:this.data.endAddress,
            phone:this.data.phone,
            name:this.data.name,
            desc:this.data.desc,
            weight:this.data.weight,
            type:this.data.array[this.data.index],
            price:this.data.price,
            imgUrl:this.data.imgUrl,
            user_id:wx.getStorageSync('userInfo').id
         }
        addTask(data).then(res=>{
            if(res.code==200){
                wx.showToast({
                  title: '发布成功',
                  icon:"none"
                })
            }
        })
     }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

在这里插入图片描述

3.后端模板下载

如果需要后端模板的可以下面这个gitee的地址去下载

gitee后端模板下载

vscode 的下载，node 下载以及vue脚手架的安装可以去看看这个篇文章，大家有啥不懂的都可以去看我发布的视频。重要的环节我都已视频的形式表达了。

vue脚手架的安装

在这里插入图片描述
在这里插入图片描述

🎉写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~
在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
2024年最全重磅首发！天花板级别大模型LLM学习路线图来了！，2024年最新网络安全程序员怎么优雅迈过30K+这道坎
enscape各种材质参数_10秒极速出图！吊打3D、V-Ray的Enscape
修改el-radio-group样式,自定义单选组件
ubuntu+flask+uwsgi+nginx+mysql从零部署（包括常见问题解决策略）
计算机毕业设计项目：94559基于微信小程序的共享车位系统的设计与开发（开题答辩+程序定制+全套文案 ）上万套实战教程手把手教学JAVA、PHP，node.js，C++、python、大屏数据可视化等
信息安全技术标准合集
HTML 转义符
Git入门图文教程 -- 深入浅出 ( 保姆级 )
【Python大写字符串中每一个单词的首字母】
ERROR: Exception: Traceback (most recent call last)的解决方法
;