上次文章提到,我们可以利用按钮增减选项。那么当我们增减选项之后,就需要输入选项内容了。
这时候,我们需要绑定input监听。
<input class="input_type" bindinput="get_other_eat" placeholder="请输入奶油" id="other-eat-{{index}}"></input>
bindinput=“get_other_eat”。绑定之后,我们来实现这个方法:
get_other_eat: function (e) {
let index = parseInt(e.currentTarget.id.replace("other-eat-", ""))
let other_eat = e.detail.value
let other_eat_all = this.data.other_eat_all
other_eat_all.other_eats[index].other_eat = other_eat
this.setData({
other_eat_all: other_eat_all
})
},
这样就可以将输入的文字获取到了。
有了基本属性和选项属性,接下来,我们就需要添加图片了。调用云开发之后,上传图片不再是一件困难的事,首先,我们定义一个button
<button style="margin:5vw auto;" type="default" bindtap="upload_main">上传主图</button>
然后,我们需要对upload_main这个方法进行实现:
upload_main:function(e){
var that = this
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
const filePath = res.tempFilePaths[0]
// 上传图片
const cloudPath = timestamp + '-' + app.globalData.openid + '.png'
that.setData({
main_img:filePath,
main_path:cloudPath
})
},
fail: e => {
console.error(e)
}
})
},
在这里,我们选择好图片之后,不用急着上传,先保存好图片的路径。其中,上传云端时我们给图片定义名字的时候,为了避免重复,才用的是时间戳+用户openid的方法进行命名。这样就可以肯定不会有重复名字的图片出现。
当然,外链图也一样设置之后,我们就可以开始上传数据库了。
点击提交按钮,我们开始提交商品详情信息。
var that = this
console.log(that.data)
wx.showLoading({
title: '上传中...',
mask: true,
});
if(that.data.main_img.length>0){
var cloudPath = that.data.main_path
var filePath = that.data.main_img
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上传文件] 成功:', res)
that.setData({
spMainFileID: res.fileID
})
var cloudPath2 = that.data.other_path
var filePath2 = that.data.other_img
wx.cloud.uploadFile({
cloudPath:cloudPath2,
filePath:filePath2,
success: res => {
console.log('[上传文件] 成功:', res)
that.setData({
spOtherFileID: res.fileID
})
const db = wx.cloud.database()
// 查询当前用户所有的 counters
db.collection('company_sp').add({
data: {
spName: that.data.spName,
spPrice: that.data.spPrice,
spDetail: that.data.spDetail,
spUrl: that.data.spUrl,
spClass: that.data.spClass,
sweet_all: that.data.sweet_all,
temp_all: that.data.temp_all,
other_eat_all: that.data.other_eat_all,
spMainImg:that.data.spMainFileID,
spOtherFileID:that.data.spOtherFileID,
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
wx.hideLoading()
wx.showModal({
title: '恭喜您',
content: '信息提交成功',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('点击确认回调')
}
}
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.hideLoading()
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
},
fail: e => {
console.error('[上传文件] 失败:', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
// wx.navigateTo({
// url: '../storageConsole/storageConsole'
// })
},
fail: e => {
console.error('[上传文件] 失败:', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
}else{
console.log("请添加主图")
}
},
首先,我们先上传主图片:
var cloudPath = that.data.main_path
var filePath = that.data.main_img
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
},
fail: e => {
console.error('[上传文件] 失败:', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
如果成功的话,我们需要在添加外链图,当然外链图也可以为空。方法同上传主图片一样。上传完图片之后,我们开始将信息汇总传入数据库。
const db = wx.cloud.database()
// 查询当前用户所有的 counters
db.collection('company_sp').add({
data: {
spName: that.data.spName,
spPrice: that.data.spPrice,
spDetail: that.data.spDetail,
spUrl: that.data.spUrl,
spClass: that.data.spClass,
sweet_all: that.data.sweet_all,
temp_all: that.data.temp_all,
other_eat_all: that.data.other_eat_all,
spMainImg:that.data.spMainFileID,
spOtherFileID:that.data.spOtherFileID,
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
wx.hideLoading()
wx.showModal({
title: '恭喜您',
content: '信息提交成功',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('点击确认回调')
}
}
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.hideLoading()
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
其中,主图片和外链图的连接我们需要用回调回来的图片id来保存,因为这些图片id可以在之后被我们调用。
至此,上传商品详情的页面就完成了。