在app.js中我封裝了雲數據庫操作的方法,因此在頁面js中直接調用,如
app.updateInfo(that.data.setName,_id,theInfo,e=>{})就是封裝的修改數據庫方法,參數分別為雲數據庫集合名稱、被修改的數據id,更改后的數據,回調函數
1 /** 2 * 頁面的初始數據 3 */ 4 data: { 5 setName: '' , //要請求的數據庫庫名 6 7 updateId: '' , //要更新的商品的Id 8 fileList:[], //上傳文件臨時存儲數組 9 folder: 'goods' , //雲存儲中文件上傳的目標文件夾 10 tmpUrlArr: [], //需要預覽的圖片http鏈接列表(雲存儲中File ID) 11 12 13 // delGoodsId: "", //要刪除的商品id 14 cardNum:1, //商品操作選項卡界面,默認第一頁,即添加商品(第二頁上架修改,第三頁送貨管理) 15 time:0, // 16 manageList: [], //添加到雲數據庫庫后,根據創建時間降序排列的數據,即修改數據時需要顯示的數據 17 path:'' , //拼接雲存儲中文件路徑 18 19 20 //上傳的信息 21 classify:'' , //商品所屬類別 22 goodsId: null , //商品編號 23 name:null , //商品名稱 24 price: null , //價格 25 unit: null , //單位 26 detail: "", //商品詳細介紹 27 myClass: 0 , //今日特惠, 0 表示不加入特惠,1表示加入 28 recommend: 0 ,//店主推薦 29 onShow: true, //銷售狀態,默認是上架 30 myClass_Arr: ['否','是'], //特惠商品名單選項,添加商品時可以設置商品是否為今日優惠 31 recommend_Arr: ['否','是'], //是否加入推薦商品名單 32 33 delDBData:[] , //雲存儲中要被刪除的文件列表 34 35 },
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
// console.log('傳遞的商品id',options.id)
// console.log('傳遞的數據庫名setName',options.setName)
//要修改的商品id
// console.log(options.id)
var updateId = options.id ;
this.setData({
updateId: updateId ,
setName: options.setName
})
var that = this ;
app.getInfoWhere(options.setName,{_id: updateId}, e=>{
// console.log(e)
// console.log({_id: updateId})
//商品詳情信息
var goodItem = e.data["0"] ;
that.setData({
classify: goodItem.classify ,
name: goodItem.name ,
price: goodItem.price ,
unit: goodItem.unit ,
detail: goodItem.detail ,
myClass: goodItem.myClass ,
recommend: goodItem.recommend ,
onShow: goodItem.onShow ,
time: goodItem.time,
goodsId: goodItem.goodsId ,
// tmpUrlArr: goodItem.tmpUrlArr,
//臨時文件應顯示數據庫中存儲的圖片,imgUrl和tmpUrlArr數組應該歸零,重新將fileList修改后的圖片添加進去
fileList:goodItem.tmpUrlArr
})
},
/**
* ----------------獲取商品信息-----------------------------
*
*/
//獲取商品類別
getClassify(e){
// console.log(e)
this.setData({
classify: e.detail
})
},
//獲取商品名稱
getName(e){
// console.log(e)
this.setData({
name: e.detail
})
},
//獲取商品價格
getPrice(e){
this.setData({
price: e.detail
})
},
//獲取商品單位
getUnit(e){
this.setData({
unit: e.detail
})
},
//
getInfoText(e){
this.setData({
detail: e.detail
})
},
/**
* -----------------------上傳文件--------------------------
*
*/
//添加圖片事件
afterRead(e){
if(!this.data.name || !this.data.classify){
wx.showToast({
title: '請先輸入商品分類和名稱'
});
return
}
const file = e.detail.file;
// console.log(file)
this.data.fileList.unshift(file) ;
//獲取更新圖片臨時存數組中的數據
var files = this.data.fileList;
this.setData({
fileList: files //重置才能顯示數據
})
},
// 上傳圖片
uploadToCloud() {
// console.log(this.data.fileList)
wx.cloud.init();
//設置文件存儲格式
var path = this.data.folder + '/' + this.data.name + Math.random().toString() ;
this.setData({
path
})
if (!this.data.fileList) {
wx.showToast({
title: '請先選擇圖片'
});
return
} else {
//獲取圖片臨時存數組中的數據
var fileList = this.data.fileList;
// console.log(fileList)
const uploadTasks = fileList.map((file,index) => this.uploadFilePromise(`myImage${index}.png`, file));
Promise.all(uploadTasks)
.then(data => {
// console.log('data',data)
if(data){
// [0:{errMsg:'xxx',fileID'}]
wx.showToast({ title: '上傳成功', icon: 'none' });
const newFileList = data.map(item => ({ url:item.fileID }) )
// console.log('1111111111111',newFileList)
this.setData({
tmpUrlArr: newFileList ,
fileList: []
});
}
})
.catch(e => {
wx.showToast({ title: '上傳失敗', icon: 'none' });
console.log(e);
});
}
//刪除圖片
if(this.data.delDBData.length > 0){
//說明數據庫中有需要刪除的圖片
var fileList = this.data.delDBData;
// console.log(fileList)
//調用刪除雲數據庫文件的方法
this.delDBImgPromise(fileList)
}
},
//上傳圖片-雲存儲方法調用(重點)
uploadFilePromise(fileName, chooseResult) {
var that = this ;
// console.log('----------',fileName, chooseResult)
//需要對上傳的圖片進行判斷,如果是已經存儲到數據庫的圖片,參數為url:,直接保存到tmpUrlArr,
//如果數據庫中沒有該圖片,參數為path,繼續調用雲函數,上傳圖片
if(chooseResult.url){
//說明該圖片存在於數據庫
// console.log('chooseResult',chooseResult)
//直接返回組裝好的數據
return {errMsg: "cloud.uploadFile:ok",fileID:chooseResult.url}
}else{
return wx.cloud.uploadFile({
cloudPath: that.data.path + fileName,
filePath: chooseResult.path
});
}
},
//刪除圖片,最新上傳的圖片下標為0
delUploaderImg:function(e){
// console.log(e.detail.index)
// console.log(this.data.fileList)
//展示的圖片列表
var newfile = this.data.fileList
//被刪除的數據
var delDBData = this.data.delDBData ;
//已存在數據庫中的圖屬性為url,沒有上傳就要刪除的圖片屬性為path,只刪除數據庫中的圖片
// console.log(newfile[e.detail.index])
if(newfile[e.detail.index].url){
delDBData.unshift(newfile[e.detail.index])
// console.log(delDBData)
}
//更新后要顯示的數據
newfile.splice(e.detail.index,1);
this.setData({
fileList: newfile , //要上傳及顯示的圖片
delDBData: delDBData//要被刪除的圖片列表
})
// console.log(this.data.fileList)
},
//雲存儲圖片刪除操作
delDBImgPromise( fileList){
//要刪除的文件路徑
// [
// {url: "cloud://tgnj-zq9ar.7467-tgnj-zq9ar-1300840619/swiperImgList/chaijiyou1.jpeg"}
// ]
// console.log( fileList)
var files = [] ;
for(var i=0;i<fileList.length;i++){
files.push(fileList[i].url)
}
// console.log(files)
//需要修改為 ['','','',''] 格式
if(files.length>0){
wx.cloud.deleteFile({
fileList: files
}).then(res=>{
//被從雲存儲中刪除的文件列表
// console.log(res.fileList)
}).catch(error=>{
console.error(error);
})
}
},
/**
* ---------------------------- 修改商品 確認按鈕 -----------------------------
*/
addGoodsInfo:function(e){
// console.log('確認提交時,tmpUrlArr的值為',this.data.tmpUrlArr)
if( !this.data.tmpUrlArr.length ){
wx.showToast({
title: '請先提交圖片'
});
}
var that = this ;
var _id = that.data.updateId ; //要修改的商品id
// console.log(that.data.classify);
// console.log(that.data.name);
// console.log(that.data.price);
// console.log(that.data.unit);
// console.log(this.data.tmpUrlArr) //上傳的所有圖片數組
// console.log(this.data.tmpUrlArr[0]) //商品默認顯示第一張圖片,因此需要獲取上傳的第一張圖片地址
//檢查商品分類、名稱是否填寫
if(that.data.classify && that.data.name ){
//輸入的信息已存儲到data中,將data中相關信息構建為新的對象,
// 並添加 創建時間time 屬性 和作為商品封面的第一張圖片地址imgUrl 屬性
//使用promise提交數據
new Promise((resolve,reject)=>{
const { classify, name, price, unit, detail, myClass, recommend, tmpUrlArr, onShow } = that.data
const theInfo = { classify, name, price, unit, detail, myClass, recommend, tmpUrlArr, onShow }
theInfo['imgUrl'] = that.data.tmpUrlArr[0] //imgUri為商品默認的封面圖
// theInfo['time'] = parseInt(app.CurrentTime())
// theInfo['goodsId'] = parseInt((new Date()).getTime()) //使用時間戳生成商品編碼
resolve(theInfo)
}).then(theInfo => {
// console.log(theInfo)
// 更新數據(集合名,id,更新后的數據,回調函數)
// updateInfo:function(setName,_id,updateInfoObj,callback){
app.updateInfo(that.data.setName,_id,theInfo,e=>{
// console.log(e)
wx.showToast({
title: '修改商品成功'
})
that.setData({
fileList: []
})
})
//根據添加數據時間進行降序排序后取出數據(集合名,需要排序的字段,排序規則升序或降序,回調函數)
// app.getInfoByOrder(that.data.setName,'time','desc', e=>{
// that.setData({
// manageList: e.data
// })
// // console.log(that.data.manageList)
// })
//刷新頁面
that.onLoad();
})
}else{
wx.showToast({
title: '請將必填項補充完整'
})
}
},
/**
* --------------封裝修改manageList值得方法-------------
*/
getManageList:function(){
var that = this ;
//根據添加數據時間進行降序排序后取出數據(集合名,需要排序的字段,排序規則升序或降序,回調函數)
app.getInfoByOrder(that.data.setName,'time','desc', e=>{
that.setData({
manageList: e.data
})
// console.log(that.data.manageList)
})
},
