小程序點擊圖片從新排序寫法

寫了個小程序已上傳圖片位置調換的方法,留做備份

具體效果如圖所示

 

<view class="addredBox_img" bindtap="goodsIntroImg">
<view class="addredBox_l">
<view class="nameBox">商品詳情圖</view>
<view class="proposalBox">建議尺寸(w700px)</view>
<view class="proposalBox1">(提示:點擊圖片能夠刪除)</view>
</view>
<view class="textRbox">
<view class="tx1">點擊上傳詳情圖</view>
<view class="tx2">(提示:圖片請小於1MB)</view>
</view>
</view>

<view class="adjustmentBox" wx:if="{{info.goods_detail_imgs[0]}}">
<view class="adjustmentBox_text">請按順序點擊您想要展現的圖片前後順序</view>
<view class="adjustmentBox_btn" bindtap="exChangeAdressBtn1">{{imgMove?'完成調整':'調整位置'}}</view>
</view>
<view class="addredBox_img" wx:if="{{info.goods_detail_imgs[0]}}">
<view class="addredBox_r_image">
<view class="addredBox_r_image_inBox4 {{imgMove1?'imgMoveShake':''}}" wx:for="{{info.goods_detail_imgs}}" data-nowThing="{{item}}" bindtap="exChangeImgBtn1" data-index="{{index}}">
<image src="{{item}}" mode="widthFix" data-url="{{item}}" bindtap="seeImgBtn1"></image>
<view class="nowNumber" wx:if="{{imgMove1 && putOrderNum1[index]}}">{{putOrderNum1[index]}}</view>
<view class="del_boxBtn1" bindtap="upImgArr3Btn" data-index="{{index}}" wx:if="{{!imgMove1}}">
<image src="../../../../images/delIco1.png"></image>
</view>
</view>
</view>
</view>

 

js

data: {
info:{},
radioFlag:false,
radioFlag1:true,
radioFlag2:false,
radioFlag3:["1","",""],
date: '2016-11-08',
date2:'2016-11-08',
groupPrice:"",
declinePrice:"",
intoGroupPrice:"",
manNumArr:[],
seeFlage:false,
oneceNum:[],
secondNum:[],
upImgBoxArr1:[],
upImgBoxArr2:[],
upImgBoxArr3:[],
redMonArr:[],
redMonId:[],
redMonName:[],
redMonStr:"點擊選擇紅包",
mustManNum:0,
thatId:0,
redId1:0,
thatOnBtn:0,
time2:"00:00",
introTxtFlage:false,
imgMove:false,
exChangeNum:0,
imgMove1:false,
exChangeNum1:0,
putOrder:[],
putOrderNum:[],
putOrderJs:1,
putOrder1:[],
putOrderNum1:[],
putOrderJs1:1,
},

// 點擊從新調整位置
exChangeAdressBtn1:function(e){
var that = this;
var putOrder = that.data.putOrder1;
var info = that.data.info;
if(that.data.imgMove1){
if(putOrder.length<info.goods_detail_imgs.length){
wx.showModal({
title: '提示',
content: '您有未選擇排序的文件,請排序完成後點擊肯定',
showCancel:false,
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
})
return;
}else{
info.goods_detail_imgs = putOrder;
that.setData({
imgMove1:false,
info:info,
putOrder1:[],
putOrderNum1:[],
putOrderJs1:1,
})
}

}else {
that.setData({
imgMove1:true,
})
}
},

// 開始重整順序
exChangeImgBtn1:function(e){
var that = this;
if(that.data.imgMove1){
var putOrder = that.data.putOrder1;
var info = that.data.info;
var index = e.currentTarget.dataset.index;
var putOrderNum = that.data.putOrderNum1;
var putOrderJs = that.data.putOrderJs1;
if(putOrderNum[index]){
wx.showModal({
title: '提示',
content: '請勿重複選擇',
showCancel:false,
success: function(res) {
if (res.confirm) {
console.log('用戶點擊肯定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
return;
}else{
var goods_slide = info.goods_detail_imgs[index];
putOrderNum[index] = putOrderJs;
putOrder.push(goods_slide);
console.log(putOrder);
putOrderJs++;
that.setData({
putOrder1:putOrder,
putOrderNum1:putOrderNum,
putOrderJs1:putOrderJs
})
}
}
},