From e4f3b1dd21ac5bce11bc266d3d9981ea7bc31dba Mon Sep 17 00:00:00 2001 From: zhouwentao Date: Thu, 13 Nov 2025 16:05:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=BF=97=E6=84=BF=E6=98=8E=E7=BB=86?= =?UTF-8?q?=E6=8B=96=E5=8A=A8=E6=9B=B4=E6=94=B9=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/ApiConstant.js | 1 + common/css/uni2.css | 6 +- components/m-drag/m-drag.vue | 95 +- pages/zyb/fillVolunteer/detail.vue | 781 ++++++++--------- pages/zyb/fillVolunteer/index.vue | 4 +- pages/zyb/fillVolunteer/mockList.vue | 6 +- uni_modules/HM-dragSorts/changelog.md | 50 -- .../components/HM-dragSorts/HM-dragSorts.vue | 823 ------------------ .../components/HM-dragSorts/drag.wxs | 371 -------- uni_modules/HM-dragSorts/package.json | 81 -- uni_modules/HM-dragSorts/readme.md | 117 --- 11 files changed, 396 insertions(+), 1939 deletions(-) delete mode 100644 uni_modules/HM-dragSorts/changelog.md delete mode 100644 uni_modules/HM-dragSorts/components/HM-dragSorts/HM-dragSorts.vue delete mode 100644 uni_modules/HM-dragSorts/components/HM-dragSorts/drag.wxs delete mode 100644 uni_modules/HM-dragSorts/package.json delete mode 100644 uni_modules/HM-dragSorts/readme.md diff --git a/common/ApiConstant.js b/common/ApiConstant.js index 865c8ed..89dbbec 100644 --- a/common/ApiConstant.js +++ b/common/ApiConstant.js @@ -74,6 +74,7 @@ export default { switchVolunteer: '/art/volunteer/switchVolunteer',//切换志愿及成绩 exChangeIndexs: '/art/volunteer/exchangeIndexs',//交换志愿位置 updateFctj: '/art/volunteer/updateFctj',//修改服从调剂 + resortVolunteer: '/art/volunteer/resortVolunteer', // 修改批次的志愿顺序 }, Pay: { //vip1: '/wx/pay/v1/jsApiPay',//支付类型1 diff --git a/common/css/uni2.css b/common/css/uni2.css index a21f7e9..b9627ad 100644 --- a/common/css/uni2.css +++ b/common/css/uni2.css @@ -6,7 +6,7 @@ .flexWrap{ display: flex; flex-direction: row; - flex-wrap: wrap + flex-wrap: wrap; } .multiline-text { word-wrap: break-word; /* 对长单词进行换行 */ @@ -195,6 +195,10 @@ padding: 50rpx 100rpx; } +.paddingTopBot20{ + padding: 20rpx 0; +} + /*外边距*/ .margin20 { margin: 20rpx; diff --git a/components/m-drag/m-drag.vue b/components/m-drag/m-drag.vue index 02d4691..2ccdadb 100644 --- a/components/m-drag/m-drag.vue +++ b/components/m-drag/m-drag.vue @@ -4,15 +4,24 @@ :class="{ active: state.currentIndex === index }" :style="{ top: state.itemYList[index].top + 'px' }"> - - - -
- - -
-
- + + + +
+ + +
+ +
+ + + + +
+ +
+
@@ -20,7 +29,8 @@ \ No newline at end of file diff --git a/pages/zyb/fillVolunteer/detail.vue b/pages/zyb/fillVolunteer/detail.vue index 9cd7a9e..5d1a10c 100644 --- a/pages/zyb/fillVolunteer/detail.vue +++ b/pages/zyb/fillVolunteer/detail.vue @@ -2,59 +2,30 @@ import StaticConstant from "@/common/StaticConstant"; import ApiConstant from "@/common/ApiConstant"; import Request from '@/common/request' - import ImagesConstant from "@/common/ImagesConstant"; import { stringIsNotEmpty } from "@/common/util"; import CommonTool from "@/common/js/commonTool"; let request = new Request() - // 缓存每页最多 - const MAX_CACHE_DATA = 100; - // 缓存页签数量 - const MAX_CACHE_PAGE = 3; - const app = getApp() export default { name: "我的志愿明细", - computed: { - ImagesConstant() { - return ImagesConstant - }, - app() { - return app - }, - }, data() { return { + list: [], vipInfo: {}, - paneFlag: false, scoreStatus: true, moveVolunteer: { batch: '', //移动的批次 indexs: '', volunteerId: '' }, - volunteer: {}, volunteerId: '', //志愿id - volunteerName: '', //志愿单名称 - topBackShow: true, //显示回到顶部 - selectForm: { - address: '', - schoolName: '', - paneName: '全部', - batch: '', - }, scoreInfo: {}, //成绩信息 volunteerInfo: {}, //志愿单信息 - tabIndex: 0, //导航栏选中的下标 - scrollInto: "", - newsList: [], - cacheTab: [], filledVolunteer: { volunteerRecordEarlyAdmissionNum: 0, - volunteerUndergraduateANum: 0, - volunteerUndergraduateBNum: 0, volunteerUndergraduateNum: 0, volunteerJuniorCollegeNum: 0, volunteerEarlyAdmissionList: [], //本科提前批 @@ -62,55 +33,61 @@ volunteerJuniorCollegeList: [], //高职高专 volunteerMap: new Map() }, //已填志愿信息 - years: StaticConstant.years, - nowYear: StaticConstant.year, allCollapseItemList: [{ batchLabel: '提前批', batch: '提前批', type: '顺序志愿', max: app.globalData.StaticConstant.tiQianPiZhiYuanNum, - status: false + status: false, + saveStatus: false }, { batchLabel: '本科批', batch: '本科批', type: '平行志愿', max: app.globalData.StaticConstant.benZhiYuanNum, - status: false + status: false, + saveStatus: false }, { batchLabel: '高职高专', batch: '高职高专', type: '平行志愿', max: app.globalData.StaticConstant.zhuanZhiYuanNum, - status: false + status: false, + saveStatus: false }, ], collapseItemList: [], - volunteerPreview: {} + volunteerPreview: {}, + dragOptions: { + isDragging: false, + draggedItem: null, + draggedIndex: -1, + draggedBatch: '', + targetIndex: -1 + }, + dragTimer: null } }, onShow() { // let userInfo = uni.getStorageSync('userInfo') - this.scoreInfo = uni.getStorageSync('scoreInfo') - this.volunteer = uni.getStorageSync('volunteer') + let scoreInfo = uni.getStorageSync('scoreInfo') + let volunteer = uni.getStorageSync('volunteer') + if (userInfo) { //有登录状态 - this.userStatus = true //判断是否有成绩信息 - this.scoreInfo = uni.getStorageSync('scoreInfo') - if (this.scoreInfo === undefined || this.scoreInfo === null || this.scoreInfo === '') { + if (!scoreInfo) { //缓存中没有成绩，后端接口获取成绩 request.getUserScore() - this.scoreInfo = uni.getStorageSync('scoreInfo') - this.volunteer = uni.getStorageSync('volunteer') - if (!this.scoreInfo) { - this.scoreStatus = false - } else { - this.scoreStatus = true - } + scoreInfo = uni.getStorageSync('scoreInfo') + volunteer = uni.getStorageSync('volunteer') + this.scoreStatus = !!scoreInfo } + + this.scoreInfo = scoreInfo this.vipInfo = uni.getStorageSync('vipInfo') } else { //没有登录，跳转到登录页 @@ -119,8 +96,8 @@ } //有成绩信息，且成绩中返回了志愿单信息 - if (this.scoreInfo && this.volunteer) { - this.volunteerId = this.volunteer.id + if (this.scoreInfo && volunteer) { + this.volunteerId = volunteer.id } if (stringIsNotEmpty(this.volunteerId)) { @@ -128,15 +105,37 @@ } }, async onLoad(e) { + if (e.volunteerId) { //从志愿列表进来 this.volunteerId = e.volunteerId; - console.log(e.volunteerId) } // 志愿单打印配置 this.volunteerPreview = await CommonTool.loadStaticConfig('volunteer_preview') }, methods: { + onclick(e) { + console.log('=== onclick start ==='); + console.log('被点击行: ', JSON.stringify(e)); + console.log('=== onclick end ==='); + }, + change(e) { + console.log('=== change start ==='); + console.log('被拖拽行: ', JSON.stringify(e.moveRow)); + console.log('原始下标: ', e.index); + console.log('被拖拽到: ', e.moveTo); + console.log('=== change end ==='); + }, + confirm(e) { + console.log('=== confirm start ==='); + console.log('被拖拽行: ', JSON.stringify(e.moveRow)); + console.log('原始下标: ', e.index); + console.log('被拖拽到: ', e.moveTo); + console.log('排序后的list: ', e.list); + // 如果需要删除列表行，必须要排序后，同步一下排序后的list到页面list + // 因为排序后页面的list和组件内的list已经不一样，不同步list，直接删除页面的list中项目，达不到实际效果。 + console.log('=== confirm end ==='); + }, goto(url) { uni.navigateTo({ url: url @@ -151,10 +150,6 @@ duration: 300 // 滚动动画的时长 }) }, - clearTabData(e) { - this.newsList[e].data.length = 0; - this.newsList[e].loadingText = "加载更多..."; - }, /*获取已填报志愿数据*/ getFilledVolunteerList() { @@ -178,128 +173,59 @@ batch: '本科批', type: '平行志愿', max: 64, - status: false + status: false, + saveStatus: false }, { batchLabel: '高职高专', batch: '高职高专', type: '平行志愿', max: 64, - status: false + status: false, + saveStatus: false }, ] } if (this.scoreInfo.batch) { - this.paneFlag = true - this.selectForm.batch = this.scoreInfo.batch let allCollapseItemList = this.allCollapseItemList let collapseItemList = [] //调整 当前成绩批次可以看到的导航栏 for (let i = 0; i < allCollapseItemList.length; i++) { - if (this.scoreInfo.batch === '高职高专') { - if (allCollapseItemList[i].batch === '本科批') { - continue - } + if (this.scoreInfo.batch === '高职高专' && allCollapseItemList[i].batch === '本科批') { + continue } collapseItemList.push(allCollapseItemList[i]) - this.collapseItemList = collapseItemList } + this.collapseItemList = collapseItemList } - let key = '' - let volunteer = { - indexStr: 0 - } - let indexs = 1; - if (true) { - //==================================提前批 start - let volunteerRecordEarlyAdmissionList = dataResult - .volunteerRecordEarlyAdmissionList; - this.filledVolunteer.volunteerRecordEarlyAdmissionNum = - volunteerRecordEarlyAdmissionList.length; - for (let i = 0; i < volunteerRecordEarlyAdmissionList.length; i++) { - key = volunteerRecordEarlyAdmissionList[i].majorCode + - volunteerRecordEarlyAdmissionList[i].schoolCode - volunteer = volunteerRecordEarlyAdmissionList[i] - volunteerMap.set(key, volunteerRecordEarlyAdmissionList[i]) - } - let volunteerRecordEarlyAdmissionList2 = []; - while (indexs <= 1) { - let record = { - actives: false, - indexs: indexs - } - for (let i = 0; i < volunteerRecordEarlyAdmissionList.length; i++) { - if (volunteerRecordEarlyAdmissionList[i].indexs === indexs) { - record = volunteerRecordEarlyAdmissionList[i] - record.actives = true - } - } - volunteerRecordEarlyAdmissionList2.push(record) - indexs++; - } - this.filledVolunteer.volunteerEarlyAdmissionList = - volunteerRecordEarlyAdmissionList2 - //==================================提前批 end - //==================================本科 start - let volunteerUndergraduateList = dataResult.volunteerRecordUndergraduateList; - this.filledVolunteer.volunteerUndergraduateNum = volunteerUndergraduateList.length; - console.log('//==================================本科 start') - console.log(volunteerUndergraduateList) - for (let i = 0; i < volunteerUndergraduateList.length; i++) { - key = volunteerUndergraduateList[i].majorCode + volunteerUndergraduateList[i] - .schoolCode - volunteerMap.set(key, volunteerUndergraduateList[i]) - } - indexs = 1; - let volunteerUndergraduateList2 = []; - while (indexs <= 64) { - let record = { - actives: false, - indexs: indexs - } - for (let i = 0; i < volunteerUndergraduateList.length; i++) { - if (volunteerUndergraduateList[i].indexs === indexs) { - record = volunteerUndergraduateList[i] - record.actives = true - } - } - volunteerUndergraduateList2.push(record) - indexs++; - } - this.filledVolunteer.volunteerUndergraduateList = volunteerUndergraduateList2 - //==================================本科 end - //==================================高职高专 start - let volunteerJuniorCollegeList = dataResult.volunteerRecordJuniorCollegeList; - this.filledVolunteer.volunteerJuniorCollegeNum = volunteerJuniorCollegeList.length; - for (let i = 0; i < volunteerJuniorCollegeList.length; i++) { - key = volunteerJuniorCollegeList[i].majorCode + volunteerJuniorCollegeList[i] - .schoolCode - volunteerMap.set(key, volunteerJuniorCollegeList[i]) - } - indexs = 1; - let volunteerJuniorCollegeList2 = []; - while (indexs <= 64) { - let record = { - actives: false, - indexs: indexs - } - for (let i = 0; i < volunteerJuniorCollegeList.length; i++) { - if (volunteerJuniorCollegeList[i].indexs === indexs) { - record = volunteerJuniorCollegeList[i] - record.actives = true - } - } - volunteerJuniorCollegeList2.push(record) - indexs++; - } - this.filledVolunteer.volunteerJuniorCollegeList = volunteerJuniorCollegeList2 - //==================================高职高专 end - } + + // 处理提前批数据 + let volunteerRecordEarlyAdmissionList = dataResult.volunteerRecordEarlyAdmissionList || []; + this.filledVolunteer.volunteerRecordEarlyAdmissionNum = volunteerRecordEarlyAdmissionList.length; + + // 按索引排序提前批志愿数据 + volunteerRecordEarlyAdmissionList.sort((a, b) => a.indexs - b.indexs); + this.filledVolunteer.volunteerEarlyAdmissionList = volunteerRecordEarlyAdmissionList; + + // 处理本科批数据 + let volunteerUndergraduateList = dataResult.volunteerRecordUndergraduateList || []; + this.filledVolunteer.volunteerUndergraduateNum = volunteerUndergraduateList.length; + + // 按索引排序本科批志愿数据 + volunteerUndergraduateList.sort((a, b) => a.indexs - b.indexs); + this.filledVolunteer.volunteerUndergraduateList = volunteerUndergraduateList; + + // 处理高职高专批数据 + let volunteerJuniorCollegeList = dataResult.volunteerRecordJuniorCollegeList || []; + this.filledVolunteer.volunteerJuniorCollegeNum = volunteerJuniorCollegeList.length; + + // 按索引排序高职高专批志愿数据 + volunteerJuniorCollegeList.sort((a, b) => a.indexs - b.indexs); + this.filledVolunteer.volunteerJuniorCollegeList = volunteerJuniorCollegeList; } else { this.filledVolunteer.volunteerEarlyAdmissionList = [] this.filledVolunteer.volunteerJuniorCollegeList = [] this.filledVolunteer.volunteerUndergraduateList = [] - this.filledVolunteer.volunteerList = [] } this.filledVolunteer.volunteerMap = volunteerMap } @@ -309,141 +235,56 @@ toPercent(num, total) { return (Math.round(num / total * 10000) / 100.00); // 小数点后两位百分比 }, - /*悬浮按钮*/ - trigger(e) { - console.log(e) - /*this.fab.content[e.index].active = !e.item.active*/ - if (e.item.text === '回到顶部') { - this.topBack() - } - }, - fabClick() {}, - /*点击移动*/ - onClickMove(e) { - this.moveVolunteer.volunteerId = this.volunteerId; - this.moveVolunteer.id = e.id; - this.moveVolunteer.batch = e.batch - this.$refs.inputDialog.open() - }, - /*点击交换*/ - onClickExChange(e) { - this.moveVolunteer.volunteerId = this.volunteerId; - this.moveVolunteer.id = e.id; - this.moveVolunteer.batch = e.batch - this.$refs.inputDialog.open() - }, /*选择是否删除明细*/ confirmDelVolunteerItem(e) { - let that = this - console.log('删除提示') - console.log(e) uni.showModal({ title: '提示', content: '确认要删除志愿' + e.indexs + '吗?', confirmText: '确定', cancelText: '取消', - success: function(res) { + success: (res) => { if (res.confirm) { - that.deleteVolunteerItem(e) + this.deleteVolunteerItem(e) } } }); }, /*确认删除志愿明细*/ deleteVolunteerItem(e) { - let that = this request.delete(ApiConstant.Volunteer.volunteerRecordDelete, { id: e.id }).then(res => { if (res.success) { - setTimeout(function() { - uni.showToast({ - title: '删除成功', - icon: "none" - }); - }, 1000) - setTimeout(function() { - that.getFilledVolunteerList() - }, 1500) - } else { - setTimeout(function() { - uni.showToast({ - title: res.message, - icon: "none" - }); + uni.showToast({ + title: '删除成功', + icon: "none" + }); + setTimeout(() => { + this.getFilledVolunteerList() }, 500) + } else { + uni.showToast({ + title: res.message, + icon: "none" + }); } }).catch(err => {}).finally(() => {}); }, fctjCheckboxChange(e) { - console.log('服从调剂') - console.log(e) request.post(ApiConstant.Volunteer.updateFctj, { id: e }).then(res => {}).catch(err => {}).finally(() => {}); }, toAdd() { uni.navigateTo({ - url: 'mockList?batch=' + this.selectForm.batch + '&volunteerId=' + this.volunteerId + url: 'mockList?batch=' + this.scoreInfo.batch + '&volunteerId=' + this.volunteerId }) }, - change(e) { - console.log(e); - }, - /*确认移动志愿*/ - moveIndexsConfirm() { - if (!this.moveVolunteer.indexs) { - uni.showToast({ - title: '请输入志愿序号', - icon: "none" - }); - return; - } - let indexs = parseFloat(this.moveVolunteer.indexs) - if (this.moveVolunteer.batch === '提前批') { - if (indexs > 4 || indexs < 0) { - uni.showToast({ - title: '您输入的序号超出', - icon: "none" - }); - this.moveVolunteer.indexs = '' - return; - } - } else { - if (indexs > (this.scoreInfo.professionalCategory === '体育类' ? 64:64) || indexs < 0) { - uni.showToast({ - title: '您输入的序号超出', - icon: "none" - }); - this.moveVolunteer.indexs = '' - return; - } - } - let that = this - request.post(ApiConstant.Volunteer.exChangeIndexs, this.moveVolunteer).then(res => { - if (res.success) { - this.moveVolunteer.indexs = '' - this.moveVolunteer.batch = '' - this.moveVolunteer.volunteerId = '' - setTimeout(function() { - that.getFilledVolunteerList(); - }, 1000) - } else { - setTimeout(function() { - uni.showToast({ - title: res.message, - icon: "none" - }); - }, 500) - } - }).catch(err => {}).finally(() => {}); - }, onClickEditUserScore() { this.goto('/pages/zyb/score/edit') }, /*点击创建志愿单*/ onClickCreateVolunteer() { - let that = this request.post(ApiConstant.Volunteer.addNew, { volunteerName: '模拟志愿草表' }, {}).then(res => { @@ -452,10 +293,10 @@ }).catch(err => {}).finally(() => {}); }, /*返回已填志愿数量*/ - getVolunteerNum(citem) { - if (citem.batch === '提前批') { + getVolunteerNum(cItem) { + if (cItem.batch === '提前批') { return this.filledVolunteer.volunteerRecordEarlyAdmissionNum - } else if (citem.batch === '本科批') { + } else if (cItem.batch === '本科批') { return this.filledVolunteer.volunteerUndergraduateNum } else { return this.filledVolunteer.volunteerJuniorCollegeNum @@ -481,197 +322,268 @@ url: '/pages/zyb/other/web-view?url=volunteer_preview' }) } + }, + + // 拖拽完成 + dragComplete(newList, dragItem, cIndex) { + if(!dragItem) return; + // 将 newList中的indexs 从1开始重新赋值 + newList.forEach((item, index) => { + item.indexs = index + 1; + }); + if(dragItem.batch.includes('专')){ + // 专科 + this.filledVolunteer.volunteerJuniorCollegeList = newList; + }else if(dragItem.batch.includes('本')){ + // 本科 + this.filledVolunteer.volunteerUndergraduateList = newList; + }else{ + // 提前批 + this.filledVolunteer.volunteerEarlyAdmissionList = newList; + } + console.log(newList, dragItem) + if(this.collapseItemList[cIndex]){ + this.collapseItemList[cIndex].saveStatus = true + } + }, + // 更新志愿顺序 + saveVolunteerItem(cItem) { + // 【必填提醒】getCurrentBatchList必须返回**已调整最新排序**的当前批次志愿列表！ + let array = []; + this.getCurrentBatchList(cItem.batch).forEach((item, index) => { // 修复：forEach回调补了参数括号！ + array.push({ id: item.id, indexs: item.indexs }); + }); + const params = { + volunteerId: this.volunteerId, + batch: cItem.batch, + volunteerRecordList: array + }; + uni.showLoading({ title: '更新中...' }); + request.post(ApiConstant.Volunteer.resortVolunteer, params).then(res => { + if (res.success) { + uni.showToast({ title: '排序更新成功', icon: "success" }); + this.getFilledVolunteerList(); // 修复：删了傻逼500ms延迟，接口成了直接取数！ + this.collapseItemList.forEach(collItem=>{ + collItem.saveStatus = false; + }) + } else { + uni.showToast({ title: res.message || '排序更新失败', icon: "none" }); + } + }).catch(err => { + uni.showToast({ title: '排序更新失败', icon: "none" }); + }).finally(() => { + uni.hideLoading(); + }); + }, + // 获取当前批次的志愿列表 + confirmSaveVolunteer(cItem) { + if(cItem && cItem.batch){ + uni.showModal({ + title: '提示', + content: `确认要修改${cItem.batch}志愿单吗?`, + confirmText: '确定', + cancelText: '取消', + success: (res) => { + if (res.confirm) { + this.saveVolunteerItem(cItem) + } + } + }); + } + }, + getCurrentBatchList(batch) { + switch(batch) { + case '提前批': + return this.filledVolunteer.volunteerEarlyAdmissionList; + case '本科批': + return this.filledVolunteer.volunteerUndergraduateList; + case '高职高专': + return this.filledVolunteer.volunteerJuniorCollegeList; + default: + return []; + } } - } + }, } diff --git a/uni_modules/HM-dragSorts/components/HM-dragSorts/drag.wxs b/uni_modules/HM-dragSorts/components/HM-dragSorts/drag.wxs deleted file mode 100644 index de7591f..0000000 --- a/uni_modules/HM-dragSorts/components/HM-dragSorts/drag.wxs +++ /dev/null @@ -1,371 +0,0 @@ - - -var scrollTop = {}; //滚动条位置 -// 排序列表 -var sortList={}; -var isMove = false; //是否可拖动 长按事件控制切换这个状态 -var touchTimer = false; //长按事件定时器 -// 当页面有多个当前组件时，guid用来识别当前的列表的。因为一个页面内多个组件的wxs作用域相同。 - - -function setScrollTop(tmpGuid) { - if (typeof scrollTop[tmpGuid] == "undefined") { - scrollTop[tmpGuid] = 0; - } -} - -function scroll(event, instance) { - var dataView = instance.selectComponent('#dataView'); - var viewData = dataView.getDataset(); - setScrollTop(viewData.guid) - scrollTop[viewData.guid] = event.detail.scrollTop; -} - -function initVar(state, instance) { - var dataView = instance.selectComponent('#dataView'); - var viewData = dataView.getDataset(); - // 读取配置项 - // 获取scroll-view id - config = All_Config[viewData.guid]; - - setScrollTop(config.guid); - state.initscrollTop = scrollTop[config.guid]; - -} -function getRowSort(findId,instance){ - for (var i = 0; i < sortList[config.guid].length; i++) { - if(sortList[config.guid][i].id==findId){ - currentRowView = sortList[config.guid][i].rowView; - return sortList[config.guid][i].lastSort; - } - } -} -var shadowRowBoxView=null; -var shadowRowView = null; -var currentRowView=null; -var rowSort=0; -var sorting = false; -function touchstart(event, instance) { - if(sorting){ - return ; - } - sorting = true; - // 兼容setTimeout - if(typeof setTimeout ==="undefined" && typeof instance.setTimeout !== 'undefined'){ - setTimeout = instance.setTimeout; - clearTimeout = instance.clearTimeout; - } - - isMove = false; - var rowData = event.instance.getDataset(); - var state = instance.getState(); - if (event.touches.length == 1) { - state.point = event.touches[0]; - - state.islongTap = true; - state.rowData = rowData; - //读取数据 - initVar(state, instance); - } - var rowStyle = event.instance.getComputedStyle(['height']); - config.rowHeight = parseFloat(rowStyle.height); //获取行高 - // 计算shadowRow.style.top - - rowSort = getRowSort(rowData.id,instance); - var shadowRowTop = rowSort * config.rowHeight; - shadowRowTop = shadowRowTop - scrollTop[config.guid]; - // 加载shadowRow数据 - instance.callMethod("loadShadowRow", { - rowSort: rowSort - }); - state.shadowRowTop = shadowRowTop; - // 设置shadowRow初始位置 - shadowRowBoxView = instance.selectComponent('#shadowRowBox'); - shadowRowBoxView.setStyle({ - 'top': shadowRowTop + 'px' - }) - shadowRowView = instance.selectComponent('#shadowRow') - //长按事件 - if (config.longTouch) { - touchTimer && clearTimeout(touchTimer); - touchTimer = setTimeout(function() { - longpress(event, instance); - }, config.longTouchTime) - } -} - -function longpress(event, instance) { - if (config.longTouch) { - isMove = true; - moveRow(instance, 0) - } -} - -function touchmove(event, instance) { - var state = instance.getState(); - var rowData = event.instance.getDataset(); - var movePoint = event.touches[0]; - var initPoint = state.point; - var moveY = movePoint.pageY - initPoint.pageY; - if (config.longTouch) { - if (Math.abs(moveY) > 10) { - clearTimeout(touchTimer); - } - if (!isMove) { - return; - } - } - moveRow(instance, moveY); - //阻止滚动页面 - if (event.preventDefault) { - event.preventDefault(); - } - return false; -} -function touchend(event, instance) { - if (config.longTouch) { - clearTimeout(touchTimer); - if (!isMove) { - oldOffset = null; - sorting = false; - return; - } - } - if (lastCommand != "stop") { - lastCommand = "stop"; - config.autoScroll && instance.callMethod("pageScroll", { - 'guid': config.guid, - 'command': "stop" - }); - } - var state = instance.getState(); - // 把隐藏的行重新显示 - resetRowStyle(instance,state.rowData.id) - // 隐藏ShadowRow - resetShadowRowStyle(instance,state.offset) - if (typeof state.offset !== "undefined" && rowSort != state.offset && state.offset != null) { - var sortArray=[]; - for (var i = 0; i < sortList[config.guid].length; i++) { - sortList[config.guid][i].lastSort = sortList[config.guid][i].newSort; - sortArray.push(sortList[config.guid][i].newSort); - sortList[config.guid][i].rowView.removeClass('ani'); - } - instance.callMethod("sort", { - index: rowSort, - offset: state.offset, - sortArray:sortArray - }); - } else { - sorting = false; - triggerFeedbackGenerator(instance); //震动反馈 - return false; - } - state.offset = null; - oldOffset = null; - sorting = false; - triggerFeedbackGenerator(instance); //震动反馈 - return false; -} -// 重置列表行 -function resetRowStyle(instance,id) { - currentRowView.removeClass('hide'); -} -// 重置拖拽行 -function resetShadowRowStyle(instance,offset) { - shadowRowBoxView.removeClass('show'); - shadowRowBoxView.addClass('hide'); - shadowRowBoxView.setStyle({}); -} -var lastCommand = ''; - -// move Row -function moveRow(instance, moveY) { - var state = instance.getState(); - - // 显示shadowRowBox - shadowRowBoxView.removeClass('hide'); - shadowRowBoxView.hasClass('show') || shadowRowBoxView.addClass('show'); - // 移动shadowRowBox里面的shadowRow - shadowRowView.setStyle({ - 'transform': 'translate3d(0,' + moveY + 'px,10px)', - '-webkit-transform': 'translate3d(0,' + moveY + 'px,10px)' - }); - // 隐藏列表对应行 - currentRowView.hasClass('hide') || currentRowView.addClass('hide'); - currentRowView.removeClass('ani') - var listClientY = state.shadowRowTop + moveY + config.rowHeight/2; - var tmpscrollListTop = scrollTop[config.guid]; - - // 拖拽至边缘滚动视图 距离顶部距离1.5行高触发上滚动 下滚动同理 - var callMethodData = { - guid: config.guid, - command: listClientY < config.ListHeight * 0.2 ? "up" : listClientY > config.ListHeight - (config.ListHeight * 0.2) ? "down" : - "stop", - scrollTop: tmpscrollListTop, - } - // 把滚动指令发给逻辑层 - if (lastCommand != callMethodData.command) { - lastCommand = callMethodData.command; - config.autoScroll && instance.callMethod("pageScroll", callMethodData); - } - - var moveOffset = moveY + scrollTop[config.guid] - state.initscrollTop; - var offset = calcOffset(rowSort, moveOffset); - if (offset <= 2 || offset >= config.listLength - 2) { - callMethodData.command = 'stop'; - } - // 为减少卡顿，微信小程序端，在滚动视图期间不进行列表位置交换 - if (config.autoScroll && (!config.isAppH5) && callMethodData.command != 'stop') { - return; - } - oldOffset = oldOffset == null ? rowSort : oldOffset; - if (offset < 0 || offset >= config.listLength) { - return; - } - if (offset == oldOffset) { - return; - } - - oldOffset = offset; - state.offset = offset; - //触发change事件 并交换列表位置 - instance.callMethod("change", { - index: rowSort, - moveTo: state.offset - }); - for (var i = 0; i < sortList[config.guid].length; i++) { - var sort = sortList[config.guid][i].lastSort; - var newSort = sortList[config.guid][i].newSort; - if ((sort >= offset && sort <= rowSort) || (sort <= offset && sort >= rowSort)) { - if(sort == rowSort) { - newSort = offset; - }else{ - newSort = sort < rowSort ? sort+1 : sort-1; - } - }else{ - newSort = sort; - } - if(sortList[config.guid][i].newSort == newSort){ - continue; - } - sortList[config.guid][i].newSort = newSort; - var translateY = (sortList[config.guid][i].newSort-sortList[config.guid][i].sort) * 100; - sortList[config.guid][i].rowView.hasClass('ani') || sortList[config.guid][i].rowView.addClass('ani'); - sortList[config.guid][i].rowView.setStyle({ - 'transform': 'translate3d(0,' + translateY + '%,0)', - '-webkit-transform': 'translate3d(0,' + translateY + '%,0)' - }); - } - triggerFeedbackGenerator(instance); //震动反馈 -} -//计算偏移index -var oldOffset = null; -function calcOffset(initSort, moveY) { - var offset = initSort + parseInt(moveY / config.rowHeight); //偏移 行高的倍数 - var rest = moveY % config.rowHeight; - if (rest > 0) { - offset = offset + (rest / config.rowHeight >= 0.6 ? 1 : 0); - if (offset < oldOffset) { - offset = rest / config.rowHeight <= 0.4 ? offset : oldOffset; - } - } else - { - offset = offset + (rest / config.rowHeight <= -0.6 ? -1 : 0); - if (offset > oldOffset) { - offset = rest / config.rowHeight >= -0.4 ? offset : oldOffset; - } - } - return offset; -} - -//触感反馈 -//wxs 不支持条件编译，所以用此方法判断 -var isiOSAPP = typeof plus != "undefined" && plus.os.name == 'iOS'; -var UISelectionFeedbackGenerator; -var impact - -if (isiOSAPP) { - UISelectionFeedbackGenerator = plus.ios.importClass("UISelectionFeedbackGenerator"); - impact = new UISelectionFeedbackGenerator(); - impact.init(); -} -function triggerFeedbackGenerator(instance) { - if (!config.feedbackGenerator) { - //关闭触感反馈 - return; - } - if (isiOSAPP) { - //异步，避免与点击事件冲突 - setTimeout(function(){ - impact.selectionChanged(); - },0) - } else { - if (typeof plus != "undefined") { - plus.device.vibrate(12) - } else { - instance.callMethod("vibrate"); - } - } -} -var All_Config={}; -var config = {}; -function receiveData(e,state, instance){ - var data = JSON.parse(e); - var tmp_config = {}; - var hasGuid = false; - var sortArray=[]; - for(var i=0;i0){ - tmp_row.lastSort = sortArray[i]; - tmp_row.newSort = tmp_row.lastSort; - } - sortList[guid].push(tmp_row); - var translateY = (tmp_row.lastSort-tmp_row.sort) * 100; - tmp_row.rowView.setStyle({ - 'transform': 'translate3d(0,' + translateY + '%,0)', - '-webkit-transform': 'translate3d(0,' + translateY + '%,0)' - }); - } - -} -// 输出 -module.exports = { - receiveData:receiveData, - scroll: scroll, - longpress: longpress, - touchstart: touchstart, - touchmove: touchmove, - touchend: touchend -} \ No newline at end of file diff --git a/uni_modules/HM-dragSorts/package.json b/uni_modules/HM-dragSorts/package.json deleted file mode 100644 index 32e0a05..0000000 --- a/uni_modules/HM-dragSorts/package.json +++ /dev/null @@ -1,81 +0,0 @@ -{ - "id": "HM-dragSorts", - "displayName": "拖动排序列表 HM-dragSorts", - "version": "1.0.6", - "description": "可拖动行，对列表进行排序，拖动触感反馈，兼容APP-VUE、H5、MP-WEIXIN", - "keywords": [ - "拖拽", - "拖动", - "拖动排序", - "drag", - "触感反馈" -], - "repository": "", - "engines": { - "HBuilderX": "^3.6.0" - }, -"dcloudext": { - "sale": { - "regular": { - "price": "0.00" - }, - "sourcecode": { - "price": "0.00" - } - }, - "contact": { - "qq": "" - }, - "declaration": { - "ads": "无", - "data": "无", - "permissions": "震动" - }, - "npmurl": "", - "type": "component-vue" - }, - "uni_modules": { - "dependencies": [], - "encrypt": [], - "platforms": { - "cloud": { - "tcb": "y", - "aliyun": "y" - }, - "client": { - "App": { - "app-vue": "y", - "app-nvue": "n" - }, - "H5-mobile": { - "Safari": "y", - "Android Browser": "y", - "微信浏览器(Android)": "y", - "QQ浏览器(Android)": "y" - }, - "H5-pc": { - "Chrome": "n", - "IE": "n", - "Edge": "n", - "Firefox": "n", - "Safari": "n" - }, - "小程序": { - "微信": "y", - "阿里": "n", - "百度": "n", - "字节跳动": "n", - "QQ": "n" - }, - "快应用": { - "华为": "n", - "联盟": "n" - }, - "Vue": { - "vue2": "y", - "vue3": "n" - } - } - } - } -} \ No newline at end of file diff --git a/uni_modules/HM-dragSorts/readme.md b/uni_modules/HM-dragSorts/readme.md deleted file mode 100644 index 1a50e98..0000000 --- a/uni_modules/HM-dragSorts/readme.md +++ /dev/null @@ -1,117 +0,0 @@ - - -##组件说明 - -> * 这是一个传入列表数据会生成一个可拖动排序列表的组件 -> * 此组件只支持单列多行，UVUE版本支持了多行多列，可以去看看[传送门](https://ext.dcloud.net.cn/plugin?id=15953) -> * 因为废弃了插槽，所以，行的样式需要自行到组件内部去修改 -> * 行内容可以自行到组件，组件只支持每行都相等高度的列表 -> * 拖动会有触感反馈，如果设备支持的话。 -> * 组件使用了wxs，兼容APP-VUE、H5、MP-WEIXIN，其他端未做兼容，不支持。 -> * [BUG] vue3下，只支持长按拖拽 -> * 下载示例并运行，你的很多疑问或得到答案。 - - -###属性说明 - -|属性名 |类型 |说明 | -|-- |-- |-- | -|list|ObjectArray |必填，列表数据，数据格式请参考示例，
注意:数据非双向绑定，拖动并不会直接修改list数据，排序过的数据在confirm中获取 | -|rowHeight|Int |选填，每一行的高度，单位:px，默认44px | -|listHeight|Int |选填，整个列表的高度，默认等于窗口高度 | -|listBackgroundColor|String |选填，列表底色,注意是列表的底色，不是行的底色，默认#FFFFFF | -|feedbackGenerator|Boolean |选填，是否开启拖动触感反馈，可选值true/false，默认true 开启 | -|longTouch|Boolean |选填，是否长按拖动，可选值true/false，默认false 关闭，如果是整行拖拽，请开启长按拖拽，不然页面不能滚动 | -|autoScroll|Boolean |选填，是否拖拽至边缘自动滚动列表，可选值true/false，默认true 开启 | -|longTouchTime|Int |选填，触发长按时长，单位:ms，默认350ms | -|@onclick|EventHandle |点击事件，返回被点击行的数据，event = {index:被点击行的下标,row:被点击行的数据} | -|@confirm|EventHandle |拖拽结束且行位置发生了改变，触发confirm事件，event = {index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'} | -|@change|EventHandle |拖拽过程中，行位置发生交换时，触发change事件，event = {index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'} | - -###内置函数说明 - > ####push，unshift，splice函数 -内置了push，unshift，splice函数，组件设置ref属性，通过$refs调用，实现列表的删除插入，使用方法和数组的push，unshift，splice一致，push，unshift，splice函数修改后会返回修改后的值 -例如： - ``` - let tmplist = this.$refs.dragSorts.splice(5,1,...rows); - ``` - - -##使用示例 -页面: -``` - - -``` -script: - -``` - import dragSorts from '@/uni_modules/components/HM-dragSorts/HM-dragSorts.vue' // 组件符合easycom规范，默认这个可以不写 - export default { - components: {'HM-dragSorts':dragSorts},// 组件符合easycom规范，默认这个可以不写 - data() { - return { - list:[ - {"name": "花呗", "icon": "/static/img/1.png"}, - {"name": "余额宝","icon": "/static/img/2.png"}, - {"name": "账户余额","icon": "/static/img/3.png"}, - {"name": "交通银行信用卡(0001)""icon": "/static/img/4.png"}, - {"name": "中国建设银行信用卡(4401)","icon": "/static/img/5.png"}, - {"name": "网商储蓄卡(7223)","icon": "/static/img/6.png"} - ] - } - }, - methods: { - push(){ - // 和数组的push使用方法一致，可以push单行，也可以push多行 - this.$refs.dragSorts.push({ - "name": "push行", - "icon": "/static/img/2.png" - }); - }, - unshift(){ - // 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行 - this.$refs.dragSorts.unshift({ - "name": "unshift行", - "icon": "/static/img/2.png" - }); - }, - splice(){ - // 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行 - this.$refs.dragSorts.splice(1,1,{ - "name": "splice行", - "icon": "/static/img/2.png" - }); - }, - onclick(e){ - console.log('=== onclick start ==='); - console.log("被点击行: " + JSON.stringify(e.value)); - console.log("被点击下标: " + JSON.stringify(e.index)); - console.log('=== onclick end ==='); - }, - change(e){ - console.log('=== change start ==='); - console.log("被拖动行: " + JSON.stringify(e.moveRow)); - console.log('原始下标：',e.index); - console.log('移动到：',e.moveTo); - console.log('=== change end ==='); - }, - confirm(e){ - console.log('=== confirm start ==='); - console.log("被拖动行: " + JSON.stringify(e.moveRow)); - console.log('原始下标：',e.index); - console.log('移动到：',e.moveTo); - console.log('=== confirm end ==='); - } - } - } -``` - -###更多的说明请下载示例运行查看，有示例对照注释更容易明白。