三：信息收集页面
作者：互联网
- 每个收集数据的表单：
每一个收集数据的表单都运用了Van3的组件van-cell-group、van-field，然后对与每个数据与page中data进行数据绑定，然后在添加到数据库中先进行判断填入的内容不能为空，并非空和成功提交分别给出相应的提示。
//初始化数据库
let name1="";//姓名
let telephone="";//电话
let address1 = "";//地址取
let address2=""//地址送
let deadline="";//截止时间
let money = "";//支付金额
let id = ""//判断的id
let url = "/pages/index/index?id="//跳转的页面
let title1 = "快递"//分类的显示
let beizhu =""//备注
let zhuangtai="未"//状态
let people_name="无"
let people_telephon="无"
let openid=""//用户的openid
let a=""
let active=""
Data：
/**
* 页面的初始数据
*/
data: {
imageList:[
],
imgbox: [],//选择图片
fileIDs: [],//上传云存储后的返回值
openid:"",
address:"",
fileList: [],
canSubmit:false,
show_change_money : false,
show_date : false,
currentDate: new Date(),
minHour: new Date('2020/01/01'),
maxHour:new Date('2027/3/1'),
// 信息
to_name:"",
to_phono:"",
to_get:"",
to_post:"",
to_time:"",
to_money:"",
//旋钮
checked: false,
//弹窗
show: true,
//图片
image_url:""
},
//发布按钮
fb: function (e) {
name1=this.data.to_name
telephone=this.data.to_phono
address1=this.data.to_get
address2=this.data.to_post
deadline= this.data.to_time
money=this.data.to_money
// console.log(money)
if (!this.data.imgbox.length) {
wx.showToast({
icon: 'none',
title: '图片类容为空'
});
} else if (name1==""||telephone==""||address1==""||address2==""||deadline==""||money==""){
wx.showModal({
title: '提示',
content: '请输入完整信息！',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
}) }
else{
//上传图片到云存储
wx.showLoading({
title: '上传中',
})
let promiseArr = [];//图片传输问题只能有一张this.data.imgbox.length;
for (let i = 0; i < 1; i++) {
promiseArr.push(new Promise((reslove, reject) => {
let item = this.data.imgbox[i];
let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名
wx.cloud.uploadFile({
cloudPath: new Date().getTime() + suffix, // 上传至云端的路径
filePath: item, // 小程序临时文件路径
success: res => {
this.setData({
fileIDs: this.data.fileIDs.concat(res.fileID)
});
var a= res.fileID;
console.log(this.data.fileIDs)//输出上传后图片的返回地址
// //添加数据
DB.add({
data:{
name:name1,
telephone:telephone,
address1:this.data.to_get,
address2:this.data.to_post,
deadline:this.data.to_time,
money:this.data.to_money,
image_url: a,
title:title1,
beizhu:beizhu,
zhuangtai:zhuangtai,
people_name:people_name,
people_telephon:people_telephon,
active:1
},success(res){
id=res._id
console.log(id)
url1= url+id_
console.log(url)
console.log("添加成功",res);
}
}),
wx.switchTab({
url: url,
})
reslove();
wx.hideLoading();
wx.showToast({
title: "上传成功",
})
},
fail: res=>{
wx.hideLoading();
wx.showToast({
title: "上传失败",
})
}
})
}));
}
Promise.all(promiseArr).then(res => {//等数组都做完后做then方法
console.log("图片上传完成后再执行")
this.setData({
imgbox:[]
})
})
}
},
（注：之后的类似集市、快递、打印都是类似的思路，只是改变了相应的数据库和一些不要的数据参数）
- 实现图片的上传：
图片使用了微信自带的接口wx.clould.upload()选择对应的类型为image，在每一次选择图片时可以的到对应图片在云端的存储位置，然后将对应的图片保存到相依的数据集里。
/**添加图片 */
// 删除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
// 选择图片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
console.log(imgbox)
var that = this;
var n = 5;
if (5 > imgbox.length > 0) {
n = 5 - imgbox.length;
} else if (imgbox.length == 5) {
n = 1;}
wx.chooseImage({
count: n, // 默认9，设置图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// console.log(res.tempFilePaths)
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else if (5 > imgbox.length) {
imgbox = imgbox.concat(tempFilePaths);
}
that.setData({
imgbox: imgbox
});
}
})
},
//图片
imgbox: function (e) {
this.setData({
imgbox: e.detail.value
})
},
- 在文件打印中有文件的上传：
类似图片上传的思路，只是把上传的类型改成了文件，然后保存相应的文件路径。
//发布按钮
fb: function (e) {
name1=this.data.to_name
telephone=this.data.to_phono
// address1=this.data.to_get
address2=this.data.to_post
deadline= this.data.to_time
money=this.data.to_money
let that = this;
if (name1==""||telephone==""||deadline==""||address2==""){
wx.showModal({
title: '提示',
content: '请输入完整信息！',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}else{
wx.showLoading({
title: '加载中',
})
//上传图片到云存储
//通过uploadFile上传文件
let tempFiles_path= that.data.tempFiles_path
let temfile_name=that.data.temfile_name
wx.cloud.uploadFile({
cloudPath: temfile_name, //仅为示例，非真实的接口地址
filePath: tempFiles_path,
success (res){
that.setData({
fileIDs:res.fileID
})
console.log(res.fileID)
var a= res.fileID;
console.log(res.fileID)//输出上传后图片的返回地址
//添加数据
DB.add({
data:{
name:name1,
telephone:telephone,
address1:address1,
address1:address2,
deadline:deadline,
money:money,
file_url: a,
image_url:"https://img0.baidu.com/it/u=1697148622,3160789974&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=938",
title:title1,
beizhu:beizhu,
zhuangtai:zhuangtai,
people_name:people_name,
people_telephon:people_telephon,
fil_name:temfile_name,
active:1
},success(res){
wx.hideLoading();
id=res._id
console.log(id)
url1= url+id_
console.log(url)
console.log("添加成功",res);
}
}),
wx.switchTab({
url: url,
})
wx.showToast({
title: "上传成功",
})
}
})//添加数据
}},
- 数据中的旋钮使用默认的信息：
运用了Van3中的van-switch组件，然后在点击旋钮时的监听事件取查找对应每个用户_openid的特有的信息赋值到相应的数据上实现数据绑定，再次点击为相应的绑定数据赋值为空。
//按钮
onChange() {
let that=this
// 需要手动对 checked 状态进行更新
if(this.data.checked==true){
that.setData({
to_post:"",
to_name:"",
to_phono:""
})
return this.setData({checked:false})
}else{
//查找数据库得到数据
const DB= wx.cloud.database()
//查询数据
DB.collection("people_adress").where({
_openid:that.data.openid
}). get({
success:res=>{
console.log(res.data[0])
that.setData({
to_post:res.data[0].addressMR,
to_name:res.data[0].nameMR,
to_phono:res.data[0].phoneMR
})
},fail:err=>{
console.log("无法得到数据")
}
})
return this.setData({checked:true})
}
},
标签：console,收集,imgbox,res,信息,let,wx,data,页面 来源： https://www.cnblogs.com/HJZ114152/p/16081236.html