// pages/index.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
images:[],
imageWitdh:0,
x:0, // movable-view的坐标
y:0,
areaHeight:0, // movable-area的高度
hidden: true, // movable-view是否隐藏
currentImg:'', // movable-view的图片地址
currentIndex:0, // 要改变顺序的图片的下标
pointsArr:[], // 每张图片的坐标
flag:true, // 是否是长按
scrollTop:0, // 滚动条距离顶部的距离
},
// 计算图片宽度
_handleComputedImage:function(e){
console.log(app.globalData.systemInfo)
const windowWidth = 390;
const width = windowWidth - 16;
const imageWitdh = (width - 16) / 3;
this.setData({
imageWitdh
})
},
onShow(){
my.setCanPullDown({canPullDown: false})
},
// 选择图片
handleChooseImage: function (e) {
console.log(e,"-->")
let length = this.data.images.length;
if (length == 9) {
my.showToast({
title: "亲，最多只能选择九张图哦~",
icon: "none",
duration: 2000
})
return false;
}
var that = this;
my.chooseImage({
count: 9 - this.data.images.length,
sizeType: ['compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: res => {
let images = that.data.images;
for (let i = 0; i < res.tempFilePaths.length;i++){
images.push(res.tempFilePaths[i]);
}
that.setData({
images
},function(){
//上传完之后更新面积
that._handleComputedArea();
console.log('that._handleComputedArea()')
});
},
fail: err => console.log(err)
})
},
// 预览图片
handlePreview:function(e){
let index = e.target.dataset.index;
let images = this.data.images;
my.previewImage({
current: images[index], //当前预览的图片
urls: images, //所有要预览的图片数组
})
},
// 删除图片
handleDelete:function(e){
let index = e.target.dataset.index;
let images = this.data.images;
images.splice(index, 1);
this.setData({
images
},function(){
this._handleComputedArea();
});
},
// 计算movable-area的高度
_handleComputedArea:function(e){
console.log('333')
let that = this;
my.createSelectorQuery().selectAll('.image-choose-container').boundingClientRect().exec(function(rect){
console.log(rect[0].height, rect,"--->")
that.setData({
areaHeight: rect[0][0].height
})
// console.log(rect[0][0].height, rect,"--->")
})
},
// 计算每张图片的坐标
_handleComputedPoints(e){
let that = this;
var query = my.createSelectorQuery();
var nodesRef = query.selectAll(".image-item");
nodesRef.fields({
dataset: true,
rect: true
}, (result) => {
console.log(result,"rs")
that.setData({
pointsArr: result
})
}).exec()
},
// 长按图片
handleLongTap:function(e){
console.log(e, 'long')
// 计算每张图片的坐标
this._handleComputedPoints();
this.setData({
currentImg: e.currentTarget.dataset.url,
currentIndex: e.currentTarget.dataset.index,
hidden: false,
flag: true,
x: e.currentTarget.offsetLeft,
y: e.currentTarget.offsetTop
})
console.log(e.currentTarget.offsetLeft, e.currentTarget.offsetTop)
},
// 移动的过程中
handleTouchMove:function(e){
console.log(e, 'handleTouchMove')
let x = e.touches[0].pageX;
let y = e.touches[0].pageY;
// 首先先获得当前image-choose-container距离顶部的距离
let that = this;
my.createSelectorQuery().selectAll('.image-choose-container').boundingClientRect().exec(function (rect) {
let top = rect[0][0].top;
y = y - that.data.scrollTop - top;
that.setData({
// x: x - that.data.imageWitdh / 2 > 0 ? x - that.data.imageWitdh / 2:0,
// y: y - that.data.imageWitdh / 2 > 0 ? y - that.data.imageWitdh / 2:0,
x: x,
y: y,
})
})
},
// 移动结束的时候
handleTouchEnd:function(e){
console.log(e, "handleTouchEnd")
if (!this.data.flag) {
// 非长按情况下
return;
}
let x = e.changedTouches[0].pageX;
let y = e.changedTouches[0].pageY - this.data.scrollTop;
const pointsArr = this.data.pointsArr;
let data = this.data.images;
for (var j = 0; j < pointsArr.length; j++) {
const item = pointsArr[j];
if (x > item.left && x < item.right && y > item.top && y < item.bottom) {
const endIndex = item.dataset.index;
const beginIndex = this.data.currentIndex;
//临时保存移动的目标数据
let temp = data[beginIndex];
//将移动目标的下标值替换为被移动目标的下标值
data[beginIndex] = data[endIndex];
//将被移动目标的下标值替换为beginIndex
data[endIndex] = temp;
}
}
this.setData({
images: data,
hidden: true,
flag: false,
currentImg: ''
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 计算图片
this._handleComputedImage();
},
// 监听滚动
onPageScroll:function(e){
this.data.scrollTop = e.scrollTop;
}
})
