ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

三:信息收集页面

2022-03-31 13:01:11  阅读:159  来源: 互联网

标签:console 收集 imgbox res 信息 let wx data 页面


  1. 每个收集数据的表单:

每一个收集数据的表单都运用了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:[]
   })
  })

 }
},

(注:之后的类似集市、快递、打印都是类似的思路,只是改变了相应的数据库和一些不要的数据参数)

  1. 实现图片的上传:

图片使用了微信自带的接口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
  })
 },
  1. 在文件打印中有文件的上传:

类似图片上传的思路,只是把上传的类型改成了文件,然后保存相应的文件路径。

//发布按钮
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: "上传成功",
      })
    }
  })//添加数据


}},
  1. 数据中的旋钮使用默认的信息:

运用了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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有