devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【小程序】发布商品（上传图片、数据校验）_10rpx

作者：寸_铁 | 2024-06-19 10:31:33

赞

踩

10rpx

效果

1、主要布局

 重点在分类选择器和时间选择器

1-1.分类选择器

使用官方文档的picker标签，传入的数据为一个对象数组，数组中每一个对象包含两个字段

picker 标签的 

value属性：绑定的是一个数组下标index值；

range属性：绑定data里面的分类数组

range-key: 绑定data分类数组的key值，一般为分类名

用法如下

 selectClassify 方法

 1-2、时间选择器

选择picker mode属性为multiSelector，因为微信官方没有提供日期和时间同时选择器，只有日期和时间分开的选择器，因此我们要自己做一个日期时间选择器，因为这个选择器太复杂，这里只给出代码，里面都有详细注释了

首先在util文件下新建一个js文件

  1. function withData(param) {
  2.   return param < 10 ? '0' + param : '' + param;
  3. }
  4.  
  5. //传入月头和月尾的天数，返回一个天数数组
  6. function getLoopArray(start, end) {
  7.   var start = start || 0;
  8.   var end = end || 1;
  9.   var array = [];
  10.   for (var i = start; i <= end; i++) {
  11.     array.push(withData(i));
  12.   }
  13.   return array;
  14. }
  15. //获取每个月份对应的天数
  16. function getMonthDay(year, month) {
  17.   var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0),
  18.     array = null;
  19.  
  20.   switch (month) {
  21.     case '01':
  22.     case '03':
  23.     case '05':
  24.     case '07':
  25.     case '08':
  26.     case '10':
  27.     case '12':
  28.       array = getLoopArray(1, 31)
  29.       break;
  30.     case '04':
  31.     case '06':
  32.     case '09':
  33.     case '11':
  34.       array = getLoopArray(1, 30)
  35.       break;
  36.     case '02':
  37.       array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
  38.       break;
  39.     default:
  40.       array = '月份格式不正确，请重新输入！'
  41.   }
  42.   return array;
  43. }
  44.  
  45. //获取当前日期时间用来默认显示在滑动块上面
  46. function getNewDateArry() {
  47.   // 当前时间的处理
  48.   var newDate = new Date();
  49.   var year = withData(newDate.getFullYear()),
  50.     mont = withData(newDate.getMonth() + 1),
  51.     date = withData(newDate.getDate()),
  52.     hour = withData(newDate.getHours()),
  53.     minu = withData(newDate.getMinutes()),
  54.     seco = withData(newDate.getSeconds());
  55.  
  56.   return [year, mont, date, hour, minu, seco];
  57. }
  58.  
  59. function dateTimePicker(startYear, endYear, date) {
  60.   // 返回默认显示的数组和联动数组的声明
  61.   var dateTime = [],
  62.     dateTimeArray = [
  63.       [],
  64.       [],
  65.       [],
  66.       [],
  67.       [],
  68.       []
  69.     ];
  70.   var start = startYear || 1978;
  71.   var end = endYear || 2100;
  72.   // 默认开始显示数据
  73.   var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
  74.   // 处理联动列表数据
  75.   /*年月日 时分秒*/
  76.   dateTimeArray[0] = getLoopArray(start, end);
  77.   dateTimeArray[1] = getLoopArray(1, 12);
  78.   dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
  79.   dateTimeArray[3] = getLoopArray(0, 23);
  80.   dateTimeArray[4] = getLoopArray(0, 59);
  81.   dateTimeArray[5] = getLoopArray(0, 59);
  82.  
  83.   dateTimeArray.forEach((current, index) => {
  84.     dateTime.push(current.indexOf(defaultDate[index]));
  85.   });
  86.  
  87.   return {
  88.     dateTimeArray: dateTimeArray,
  89.     dateTime: dateTime
  90.   }
  91. }
  92.  
  93. //导出函数
  94. module.exports = {
  95.   dateTimePicker: dateTimePicker,
  96.   getMonthDay: getMonthDay
  97. }

在页面js文件的onLoad函数里面初始化data

 记得先引入dateTimePicker

 选择时间后的处理

  1. //处理选择的时间
  2.   changeDateTime(e) {
  3.     let dateTimeArray = this.data.dateTimeArray,
  4.       {
  5.         type,
  6.         param
  7.       } = e.currentTarget.dataset;
  8.     this.setData({
  9.       [type]: e.detail.value,
  10.       [param]: dateTimeArray[0][e.detail.value[0]] + '-' + dateTimeArray[1][e.detail.value[1]] + '-' + dateTimeArray[2][e.detail.value[2]] + ' ' + dateTimeArray[3][e.detail.value[3]] + ':' + dateTimeArray[4][e.detail.value[4]] + ':' + dateTimeArray[5][e.detail.value[5]]
  11.     })
  12.   },
  13.   //滑动时间触发
  14.   changeDateTimeColumn(e) {
  15.     var dateArr = this.data.dateTimeArray,
  16.       {
  17.         type
  18.       } = e.currentTarget.dataset,
  19.       arr = this.data[type];
  20.     arr[e.detail.column] = e.detail.value;
  21.     dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
  22.     this.setData({
  23.       dateTimeArray: dateArr,
  24.       [type]: arr
  25.     })
  26.   }

在wxml页面引入使用时间选择器

 1-3、选择器效果

2、上传图片到云存储

2-1、wx.cloud.upLoadFile 接口

将递归函数整体放进Promise里面

  1.  //上传图片到云存储,异步函数，防止图片还没上传，就执行插入云数据库
  2.   uploadImages() {
  3.     let _this = this
  4.     return new Promise(function(resolve,reject){
  5.       function upload(index){
  6.         wx.showLoading({
  7.           title: '上传第' + index + '张图片'
  8.         })
  9.         console.log(_this.data.selectImgs)
  10.         wx.cloud.uploadFile({
  11.           cloudPath: 'goodsImgs/' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000) + '.jpg', //给图片命名
  12.           filePath: _this.data.selectImgs[index], //本地图片路径
  13.           success: (res) => {
  14.             console.log('上传成功', res.fileID)
  15.             _this.data.uploadImgs[index] = res.fileID
  16.             wx.hideLoading({
  17.               success: (res) => {},
  18.             })
  19.             //判断是否全部上传
  20.             if (_this.data.selectImgs.length - 1 <= index) {
  21.               console.log('已全部上传')
  22.               resolve('success')
  23.               return 
  24.             } else {
  25.               upload(index + 1)
  26.             }
  27.           },
  28.           fail: (err) => {
  29.             reject('error')
  30.             wx.showToast({
  31.               title: '上传失败，请重新上传',
  32.               type: 'none'
  33.             })
  34.           }
  35.         })
  36.       }
  37.       upload(0)
  38.     })
  39.   },

3、保存商品数据到云数据库

 3-1、保存数据前的数据校验

我们要校验起拍价是否输入正确，起拍价规定只能是正数，并且第一位不能为0，小数点后面只能输入2位

 还要校验商品描述，因为我是已拍卖形式交易，价高者才可以获得发布者的联系方式，所以不允许用户在发布商品时暴露联系方式

3-2、提交数据

  1.  //提交表单,保存商品到云数据库
  2.   submit(e) {
  3.     let dateEndTime = Date.parse(this.data.end_time_p) / 1000; //转时间戳,精确到毫秒
  4.     let goodsName = e.detail.value.name //商品名
  5.     let startPrice = e.detail.value.start_price //起拍价
  6.     let describe = e.detail.value.describe //商品描述
  7.     let publisherId = wx.getStorageSync('userInfo')._id //获取发布者id
  8.     let startTime = Math.floor(new Date().getTime() / 1000) //起拍时间默认为当前时间
  9.     let classId = this.data.classifys[this.data.objectIndex] // 当前选择的分类
  10.     //先上传图片再添加到云数据库
  11.     //点击提交的时候再次校验输入是否有误
  12.     if (!this.data.isNum || !this.data.checkDescribe) {
  13.       wx.showToast({
  14.         title: '起拍价或描述输入不符，请重新输入',
  15.         icon: 'none'
  16.       })
  17.     } else {
  18.       this.uploadImages().then((resolve, reject) => {
  19.         let imagesUrl = this.data.uploadImgs //云存储的图片列表
  20.         wx.showLoading({
  21.           title: '发布中'
  22.         })
  23.         setTimeout(() => {}, 500)
  24.         wx.cloud.database().collection('goods').add({
  25.           data: {
  26.             name: goodsName,
  27.             start_price: startPrice,
  28.             describe: describe,
  29.             current_price: startPrice,
  30.             images: imagesUrl,
  31.             publisher_id: publisherId,
  32.             end_time: dateEndTime,
  33.             clicks: 0,
  34.             class_id: classId,
  35.             start_time: startTime,
  36.             auctioning: true
  37.           },
  38.           success: (res) => {
  39.             console.log('添加商品')
  40.             wx.hideLoading({
  41.               success: (res) => {
  42.                 wx.navigateBack({
  43.                   delta: 1,
  44.                 })
  45.               },
  46.             })
  47.           }
  48.         })
  49.       })
  50.     }
  51.   },

 4、完整页面和js代码

4-1、wxml

  1. <view class="container">
  2.   <scroll-view class="main" scroll-y="true">
  3.     <form bindsubmit="submit" bindreset="reset">
  4.       <view class="addGoods">
  5.         <view>
  6.           <label>标题：</label>
  7.           <input type="text" name="name" />
  8.         </view>
  9.         <view>
  10.           <label>起拍价：</label>
  11.           <input type="number" name="start_price" bindblur="checkPrice"/>
  12.         </view>
  13.         <view>
  14.           <view>
  15.             <picker bindchange="selectClassify" value="{{objectIndex}}" range="{{classifys}}" range-key="className">
  16.               <view class="picker" style="display: flex;">
  17.                 选择分类：{{classifys[objectIndex].className}}
  18.                 <image src="/image/select.png" style="width: 50rpx;height: 50rpx;"></image>
  19.               </view>
  20.             </picker>
  21.           </view>
  22.         </view>
  23.         <view>
  24.           <label>描述：</label>
  25.           <textarea name="describe" bindblur="checkDescribe"></textarea>
  26.         </view>
  27.         <view>
  28.           <picker mode="multiSelector" value="{{end_time}}" data-type="end_time" data-param='end_time_p' bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
  29.             <view class="selectTime" style="display: flex;">
  30.               结束时间：
  31.               <image src="/image/select.png" wx:if="{{!end_time_p}}" style="width: 50rpx;height: 50rpx;"></image>
  32.               <text wx:else >{{end_time_p}}</text>
  33.             </view>
  34.           </picker>
  35.         </view>
  36.         <view style="display: flex;">
  37.         选择图片：<image src="/image/camera.png" style="width: 60rpx;height: 60rpx;" bindtap="selectImg"></image>
  38.         </view>
  39.         <view class="selectImg">
  40.           <block wx:for="{{selectImgs}}" wx:key="index1">
  41.             <image src="{{item}}" style="height: 200rpx;width: 200rpx; margin: 10rpx; border-radius: 7rpx;"  data-url="{{item}}"></image>
  42.           </block>
  43.         </view>
  44.         <button form-type="submit" type="primary">提交</button>
  45.         <button form-type="reset" type="default">重置</button>
  46.       </view>
  47.     </form>
  48.   </scroll-view>
  49. </view>>

4-2、wxss

  1. .container{
  2.   position: fixed;
  3.   top: 0;
  4.   left: 0;
  5.   right: 0;
  6.   bottom: 0;
  7.   background-color: white
  8. }
  9. .main{
  10.   position: fixed;
  11.   width: 80%;
  12.   top: 5%;
  13.   left: 10%;
  14.   bottom: 10rpx;
  15. }
  16. .addGoods view{
  17.   margin-bottom: 10rpx;
  18. }
  19. .addGoods input{
  20.   border: black solid 1px;
  21.   min-height: 60rpx;
  22.   margin-bottom: 15rpx;
  23. }
  24. .addGoods textarea{
  25.   height: 150rpx;
  26.   border: black solid 1px;
  27. }
  28. .addGoods button{
  29.   margin-top: 20rpx;
  30. }
  31. .selectTime{
  32.   margin-top: 15rpx;
  33. }
  34.  
  35. .selectImg{
  36.   display: flex;
  37.   flex-wrap: wrap;
  38.   height: auto
  39. }

 4-3、js代码

  1. var dateTimePicker = require('../../util/dateTimer.js')
  2. Page({
  3.  
  4.   data: {
  5.     end_time: '',
  6.     dateTimeArray: '', //时间数组
  7.     startYear: 2022, //最小年份
  8.     endYear: 2050, // 最大年份
  9.     end_time_p: '', //显示的结束时间
  10.     classifys: null,
  11.     objectIndex: 0, //默认显示位置
  12.     selectImgs: null,
  13.     uploadImgs: []
  14.   },
  15.  
  16.   onLoad(options) {
  17.     // 获取完整的年月日 时分秒，以及默认显示的数组
  18.     var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear)
  19.     this.setData({
  20.       end_time: obj.dateTime,
  21.       dateTimeArray: obj.dateTimeArray,
  22.     })
  23.     //获取数据库分类信息
  24.     wx.cloud.database().collection('classifys').get({
  25.       success: (res) => {
  26.         this.setData({
  27.           classifys: res.data
  28.         })
  29.       }
  30.     })
  31.   },
  32.   //选择分类
  33.   selectClassify(e) {
  34.     this.setData({
  35.       objectIndex: e.detail.value
  36.     })
  37.   },
  38.   //选择图片
  39.   selectImg() {
  40.     wx.chooseImage({
  41.       count: 9,
  42.       success: (res) => {
  43.         this.setData({
  44.           selectImgs: res.tempFilePaths
  45.         })
  46.       }
  47.     })
  48.   },
  49.   //上传图片到云存储,异步函数，防止图片还没上传，就执行插入云数据库
  50.   uploadImages() {
  51.     let _this = this
  52.     return new Promise(function (resolve, reject) {
  53.       function upload(index) {
  54.         var picnum = index+1
  55.         wx.showLoading({
  56.           title: '上传第' + picnum + '张图片'
  57.         })
  58.         console.log(_this.data.selectImgs)
  59.         wx.cloud.uploadFile({
  60.           cloudPath: 'goodsImgs/' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000) + '.jpg', //给图片命名
  61.           filePath: _this.data.selectImgs[index], //本地图片路径
  62.           success: (res) => {
  63.             _this.data.uploadImgs[index] = res.fileID
  64.             wx.hideLoading({
  65.               success: (res) => {},
  66.             })
  67.             //判断是否全部上传
  68.             if (_this.data.selectImgs.length - 1 <= index) {
  69.               console.log('已全部上传')
  70.               resolve('success')
  71.               return
  72.             } else {
  73.               upload(index + 1)
  74.             }
  75.           },
  76.           fail: (err) => {
  77.             reject('error')
  78.             wx.showToast({
  79.               title: '上传失败，请重新上传',
  80.               type: 'none'
  81.             })
  82.           }
  83.         })
  84.       }
  85.       upload(0)
  86.     })
  87.   },
  88.   //提交表单,保存商品到云数据库
  89.   submit(e) {
  90.     let dateEndTime = Date.parse(this.data.end_time_p) / 1000; //转时间戳,精确到毫秒
  91.     console.log('time',this.data.end_time_p)
  92.     let goodsName = e.detail.value.name //商品名
  93.     let startPrice = e.detail.value.start_price //起拍价
  94.     let describe = e.detail.value.describe //商品描述
  95.     let publisherId = wx.getStorageSync('userInfo')._id //获取发布者id
  96.     let startTime = Math.floor(new Date().getTime() / 1000) //起拍时间默认为当前时间
  97.     let classId = this.data.classifys[this.data.objectIndex]._id // 当前选择的分类
  98.     //先上传图片再添加到云数据库
  99.     //点击提交的时候再次校验输入是否有误
  100.     if (!this.data.isNum || !this.data.checkDescribe) {
  101.       wx.showToast({
  102.         title: '起拍价或描述输入不符，请重新输入',
  103.         icon: 'none'
  104.       })
  105.     } else if(goodsName=='' || startPrice==null || classId=='' || this.data.end_time_p=='' || this.data.selectImgs==null){
  106.       wx.showToast({
  107.         title: '每一项输入信息都不能为空',
  108.         icon: 'none'
  109.       })
  110.     }else{
  111.       this.uploadImages().then((resolve, reject) => {
  112.         let imagesUrl = this.data.uploadImgs //云存储的图片列表
  113.         wx.showLoading({
  114.           title: '发布中'
  115.         })
  116.         setTimeout(() => {}, 500)
  117.         wx.cloud.database().collection('goods').add({
  118.           data: {
  119.             name: goodsName,
  120.             start_price: startPrice *1,
  121.             describe: describe,
  122.             current_price: startPrice *1,
  123.             images: imagesUrl,
  124.             publisher_id: publisherId,
  125.             end_time: dateEndTime,
  126.             clicks: 0,
  127.             class_id: classId,
  128.             start_time: startTime,
  129.             auctioning: true
  130.           },
  131.           success: (res) => {
  132.             wx.hideLoading({
  133.               success: (res) => {
  134.                 wx.navigateBack({
  135.                   delta: 1,
  136.                 })
  137.               },
  138.             })
  139.           }
  140.         })
  141.       })
  142.     }
  143.   },
  144.   reset() {
  145.     //重置图片和时间
  146.     this.setData({
  147.       selectImgs: null,
  148.       end_time: null,
  149.       end_time_p: null
  150.     })
  151.   },
  152.   //处理选择的时间
  153.   changeDateTime(e) {
  154.     let dateTimeArray = this.data.dateTimeArray,
  155.       {
  156.         type,
  157.         param
  158.       } = e.currentTarget.dataset;
  159.     this.setData({
  160.       [type]: e.detail.value,
  161.       [param]: dateTimeArray[0][e.detail.value[0]] + '-' + dateTimeArray[1][e.detail.value[1]] + '-' + dateTimeArray[2][e.detail.value[2]] + ' ' + dateTimeArray[3][e.detail.value[3]] + ':' + dateTimeArray[4][e.detail.value[4]] + ':' + dateTimeArray[5][e.detail.value[5]]
  162.     })
  163.   },
  164.   //滑动时间触发
  165.   changeDateTimeColumn(e) {
  166.     var dateArr = this.data.dateTimeArray,
  167.       {
  168.         type
  169.       } = e.currentTarget.dataset,
  170.       arr = this.data[type];
  171.     arr[e.detail.column] = e.detail.value;
  172.     dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
  173.     this.setData({
  174.       dateTimeArray: dateArr,
  175.       [type]: arr
  176.     })
  177.   },
  178.   //校验价格输入格式
  179.   checkPrice(e) {
  180.     let price = e.detail.value
  181.     let isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
  182.     if (isNum.test(price)) {
  183.       this.setData({
  184.         isNum: true
  185.       })
  186.     } else {
  187.       this.setData({
  188.         isNum: false
  189.       })
  190.       wx.showToast({
  191.         title: '起拍价输入有误',
  192.         icon: 'none'
  193.       })
  194.     }
  195.   },
  196.   //校验描述，不能输入数字，防止透露联系方式
  197.   checkDescribe(e) {
  198.     let describe = e.detail.value
  199.     let notNum = /[0-9]$/
  200.     if (notNum.test(describe)) {
  201.       wx.showToast({
  202.         title: '描述不能含有数字',
  203.         icon: 'none'
  204.       })
  205.       this.setData({
  206.         checkDescribe: false
  207.       })
  208.     } else {
  209.       this.setData({
  210.         checkDescribe: true
  211.       })
  212.     }
  213.   }
  214. })

发布商品就到这里结束了，期间也发现了好多细节，通过自己踏踏实实的敲每一行代码，真的学到了很多！ 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/736221
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号