card-mini/pages/mine/setting/columnsetting.js

// pages/mine/setting/columnsetting.js
const app = getApp()
Page({
    data: {
        activeNames: ['1'],
        curIndex: 0,
        menuList: [],
        imgUrl: app.urls.baseImgUrl,
        inputColumnName: '',
        isShowInput: false,
        curId: '',
        curIndex: 0,
        curIdx: 0,
        pageInfo: {
            rowHeight: 64,
            scrollHeight: 85,
            startIndex: null,
            scrollY: true,
            readyPlaceIndex: null,
            startY: 0,
            selectedIndex: null,
            startIdx: null,
            selectedIdx: null
        },
        movableViewInfo: {
            y: 0,
            showClass: 'none',
            data: {}
        },
        pageInfoX: {
            rowWidth: 96,
            scrollHeight: 85,
            startIndex: null,
            scrollX: true,
            readyPlaceIndex: null,
            startX: 0,
            selectedIndex: null,
            startIdx: null,
            selectedIdx: null
        },
        movableViewInfoX: {
            x: 0,
            showClass: 'none',
            data: {}
        },
    },
    onLoad: function (options) {
        this.getColumnList()
        try {
            var isFrist = wx.getStorageSync('isFirst')
            if (isFrist) {

            } else {
                wx.setStorage({
                    key: 'isFirst',
                    data: true
                })
                wx.showModal({
                    title: '提示',
                    content: '点击列表条目名称可以自定义栏目名称,点击开关可以控制是否在首页展示该条目.',
                    showCancel: false,
                    success(res) {

                    }
                })
            }
        } catch (err) {
            console.log('获取失败')
            wx.showModal({
                title: '提示',
                content: '点击列表条目名称可以自定义栏目名称,点击开关可以控制是否在首页展示该条目.',
                showCancel: false,
                success(res) {

                }
            })
        }
    },
    getColumnList() {
        wx.showLoading({
            title: '加载中...',
        })
        var _self = this
        app.http.get(app.urls.getMineColumnList, {
                header: {
                    token: app.globalData.token
                }
            })
            .then(res => {
                var data = res.data
                wx.hideLoading({})
                data.forEach((it, index) => {
                    it.phoneOrder = index
                })
                _self.setData({
                    menuList: data
                })
            })
            .catch(err => {
                wx.hideLoading({})
            })
    },
    //保存我的栏目是否显示
    doSaveColumnDisplay(e) {
        // configColumnId  
        var id = e.currentTarget.dataset.id
        var index = e.currentTarget.dataset.index
        var idx = e.currentTarget.dataset.idx
        console.log(id + '===' + idx + '===' + index)
        var _self = this
        wx.showLoading({
            title: '保存中...',
        })
        app.http.post(app.urls.doSaveColumnDisplay, {
                header: {
                    token: app.globalData.token
                },
                data: {
                    configColumnId: id
                }
            })
            .then(res => {
                wx.hideLoading({})
                var setMode = _self.data.menuList[index].configColumnList[idx].configColumnSet
                if (setMode == '0') {
                    setMode = '1'
                } else {
                    setMode = '0'
                }
                _self.data.menuList[index].configColumnList[idx].configColumnSet = setMode
                _self.setData({
                    menuList: _self.data.menuList
                })
            })
            .catch(err => {
                console.log(err)
                wx.hideLoading({})
                wx.showToast({
                    title: '保存失败',
                    icon: 'error'
                })
            })
    },
    //保存我的栏目名称
    doSaveColumnName() {
        var _self = this
        wx.showLoading({
            title: '修改中...',
        })
        app.http.post(app.urls.doSaveColumnName, {
                header: {
                    token: app.globalData.token
                },
                data: {
                    configColumnId: _self.data.curId,
                    configColumnName: _self.data.inputColumnName
                }
            })
            .then(res => {
                wx.hideLoading({})
                _self.data.menuList[_self.data.curIndex].configColumnList[_self.data.curIdx].configColumnRemark = _self.data.menuList[_self.data.curIndex].configColumnList[_self.data.curIdx].configColumnName
                _self.data.menuList[_self.data.curIndex].configColumnList[_self.data.curIdx].configColumnName = _self.data.inputColumnName
                // 刷新数据
                _self.setData({
                    menuList: _self.data.menuList,
                    inputColumnName: '',
                })
            })
            .catch(err => {
                wx.hideLoading({})
                wx.showToast({
                    title: '修改失败',
                    icon: 'error'
                })
            })
    },
    showInput(e) {
        var id = e.currentTarget.dataset.id //栏目
        var index = e.currentTarget.dataset.index //栏目组
        var idx = e.currentTarget.dataset.idx //栏目
        this.setData({
            isShowInput: true,
            curId: id,
            curIndex: index,
            curIdx: idx
        })
    },
    //保存自定义栏目名称
    addName(e) {
        var _self = this
        _self.setData({
            isShowInput: false,
        })
        _self.doSaveColumnName()
    },
    //栏目名称输入监听
    textInput(e) {
        this.setData({
            inputColumnName: e.detail.value
        })
    },
    onHide(e) {
        this.setData({
            isShowInput: false
        })
    },
    dragStart: function (event) {
        var startIndex = event.currentTarget.dataset.index
        var startIdx = event.currentTarget.dataset.idx
        console.log('获取到的元素为', this.data.menuList[startIndex].configColumnList[startIdx])
        // 初始化页面数据
        var pageInfo = this.data.pageInfo
        pageInfo.startY = event.touches[0].clientY
        pageInfo.readyPlaceIndex = startIndex
        pageInfo.selectedIndex = startIndex
        pageInfo.selectedIdx = startIdx
        pageInfo.scrollY = false
        pageInfo.startIndex = startIndex
        pageInfo.startIdx = startIdx
        this.setData({
            'movableViewInfo.y': pageInfo.startY - (pageInfo.rowHeight / 2)
        })
        // 初始化拖动控件数据
        var movableViewInfo = this.data.movableViewInfo
        movableViewInfo.data = this.data.menuList[startIndex].configColumnList[startIdx]
        movableViewInfo.showClass = "inline"

        this.setData({
            movableViewInfo: movableViewInfo,
            pageInfo: pageInfo
        })
    },

    dragMove: function (event) {
        var optionList = this.data.menuList
        var pageInfo = this.data.pageInfo
        // 计算拖拽距离
        var movableViewInfo = this.data.movableViewInfo
        var movedDistance = event.touches[0].clientY - pageInfo.startY
        movableViewInfo.y = pageInfo.startY - (pageInfo.rowHeight / 2) + movedDistance
        console.log('移动的距离为', movedDistance)

        // 修改预计放置位置
        var movedIndex = parseInt(movedDistance / pageInfo.rowHeight)
        var readyPlaceIndex = pageInfo.startIdx + movedIndex
        if (readyPlaceIndex < 0) {
            readyPlaceIndex = 0
        } else if (readyPlaceIndex >= optionList[pageInfo.selectedIndex].configColumnList.length) {
            readyPlaceIndex = optionList[pageInfo.selectedIndex].configColumnList.length - 1
        }

        if (readyPlaceIndex != pageInfo.selectedIdx) {
            var selectedData = optionList[pageInfo.selectedIndex].configColumnList[pageInfo.selectedIdx]

            optionList[pageInfo.selectedIndex].configColumnList.splice(pageInfo.selectedIdx, 1)
            optionList[pageInfo.selectedIndex].configColumnList.splice(readyPlaceIndex, 0, selectedData)
            pageInfo.selectedIdx = readyPlaceIndex
        }
        // 移动movableView
        pageInfo.readyPlaceIndex = readyPlaceIndex
        // console.log('移动到了索引', readyPlaceIndex, '选项为', optionList[readyPlaceIndex])

        this.setData({
            movableViewInfo: movableViewInfo,
            menuList: optionList,
            pageInfo: pageInfo
        })
    },

    dragEnd: function (event) {
        // 重置页面数据
        var pageInfo = this.data.pageInfo
        var order = order = pageInfo.readyPlaceIndex + 1
        this.doSaveOrder(pageInfo.selectedIndex)
        pageInfo.readyPlaceIndex = null
        pageInfo.startY = null
        pageInfo.selectedIndex = null
        pageInfo.selectedIdx = null
        pageInfo.startIndex = null
        pageInfo.startIdx = null
        pageInfo.scrollY = true
        // 隐藏movableView
        var movableViewInfo = this.data.movableViewInfo
        movableViewInfo.showClass = 'none'

        this.setData({
            pageInfo: pageInfo,
            movableViewInfo: movableViewInfo
        })
    },
    dragStartX(e) {
        var startIndex = e.currentTarget.dataset.index
        var startIdx = e.currentTarget.dataset.idx
        console.log('获取到的元素为', this.data.menuList[startIndex].configColumnList[startIdx])
        // 初始化页面数据
        var pageInfo = this.data.pageInfoX
        pageInfo.startX = e.touches[0].clientX
        console.log(pageInfo.startX)
        pageInfo.readyPlaceIndex = startIndex
        pageInfo.selectedIndex = startIndex
        pageInfo.selectedIdx = startIdx
        pageInfo.scrollX = false
        pageInfo.startIndex = startIndex
        pageInfo.startIdx = startIdx
        this.setData({
            'movableViewInfoX.x': pageInfo.startX - (pageInfo.rowWidth / 2)
        })
        // 初始化拖动控件数据
        var movableViewInfo = this.data.movableViewInfoX
        movableViewInfo.data = this.data.menuList[startIndex].configColumnList[startIdx]
        movableViewInfo.showClass = "inline"
        console.log(movableViewInfo)
        this.setData({
            movableViewInfoX: movableViewInfo,
            pageInfoX: pageInfo
        })
    },
    dragMoveX(event) {
        var optionList = this.data.menuList
        var pageInfo = this.data.pageInfoX
        // 计算拖拽距离
        var movableViewInfo = this.data.movableViewInfoX
        var movedDistance = event.touches[0].clientX - pageInfo.startX
        movableViewInfo.x = pageInfo.startX - (pageInfo.rowWidth / 2) + movedDistance
        console.log('移动的距离为', movedDistance)

        // 修改预计放置位置
        var movedIndex = parseInt(movedDistance / pageInfo.rowWidth)
        var readyPlaceIndex = pageInfo.startIdx + movedIndex
        if (readyPlaceIndex < 0) {
            readyPlaceIndex = 0
        } else if (readyPlaceIndex >= optionList[pageInfo.selectedIndex].configColumnList.length) {
            readyPlaceIndex = optionList[pageInfo.selectedIndex].configColumnList.length - 1
        }

        if (readyPlaceIndex != pageInfo.selectedIdx) {
            var selectedData = optionList[pageInfo.selectedIndex].configColumnList[pageInfo.selectedIdx]

            optionList[pageInfo.selectedIndex].configColumnList.splice(pageInfo.selectedIdx, 1)
            optionList[pageInfo.selectedIndex].configColumnList.splice(readyPlaceIndex, 0, selectedData)
            pageInfo.selectedIdx = readyPlaceIndex
        }
        // 移动movableView
        pageInfo.readyPlaceIndex = readyPlaceIndex
        // console.log('移动到了索引', readyPlaceIndex, '选项为', optionList[readyPlaceIndex])

        this.setData({
            movableViewInfoX: movableViewInfo,
            menuList: optionList,
            pageInfoX: pageInfo
        })
    },
    dragEndX(e) {
        // 重置页面数据
        var pageInfo = this.data.pageInfoX
        // var order = order = pageInfo.readyPlaceIndex + 1
        // this.doSaveOrder(order, this.data.movableViewInfo.data.configColumnId)
        pageInfo.readyPlaceIndex = null
        pageInfo.startX = null
        pageInfo.selectedIndex = null
        pageInfo.selectedIdx = null
        pageInfo.startIndex = null
        pageInfo.startIdx = null
        pageInfo.scrollY = true
        // 隐藏movableView
        var movableViewInfo = this.data.movableViewInfoX
        movableViewInfo.showClass = 'none'

        this.setData({
            pageInfoX: pageInfo,
            movableViewInfoX: movableViewInfo
        })
    },

    //保存排序
    doSaveOrder(index) {
        wx.showLoading({
            title: '保存中...',
        })
        var _self = this

        var orders = {}
        _self.data.menuList[index].configColumnList.forEach((it, index) => {
            orders[it.configColumnId] = index + 1
        })
        app.http.post(app.urls.doOrderColumn, {
                header: {
                    token: app.globalData.token
                },
                data: {
                    configColumnOrder: orders
                }
            })
            .then(res => {
                wx.hideLoading({})
            })
            .catch(err => {})
    },
    onChange(e) {
        this.setData({
            activeNames: e.detail
        })
    }
})