hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹
🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
文章目录
- 1.接单页面的开发
- 2.发布页面的开发
- 3.后端模板下载
- 🎉写在最后
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.valuethis.setData({price:value+1})},delet(e){let value=e.currentTarget.dataset.valueif(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=thiswx.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 ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~
你的支持就是我更新的最大动力💪~
