feat:志愿明细拖动更改顺序
This commit is contained in:
zhouwentao
parent
87508cd1f6
commit
e4f3b1dd21
|
|
@ -74,6 +74,7 @@ export default {
|
||||||
switchVolunteer: '/art/volunteer/switchVolunteer',//切换志愿及成绩
|
switchVolunteer: '/art/volunteer/switchVolunteer',//切换志愿及成绩
|
||||||
exChangeIndexs: '/art/volunteer/exchangeIndexs',//交换志愿位置
|
exChangeIndexs: '/art/volunteer/exchangeIndexs',//交换志愿位置
|
||||||
updateFctj: '/art/volunteer/updateFctj',//修改服从调剂
|
updateFctj: '/art/volunteer/updateFctj',//修改服从调剂
|
||||||
|
resortVolunteer: '/art/volunteer/resortVolunteer', // 修改批次的志愿顺序
|
||||||
},
|
},
|
||||||
Pay: {
|
Pay: {
|
||||||
//vip1: '/wx/pay/v1/jsApiPay',//支付类型1
|
//vip1: '/wx/pay/v1/jsApiPay',//支付类型1
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
.flexWrap{
|
.flexWrap{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.multiline-text {
|
.multiline-text {
|
||||||
word-wrap: break-word; /* 对长单词进行换行 */
|
word-wrap: break-word; /* 对长单词进行换行 */
|
||||||
|
|
@ -195,6 +195,10 @@
|
||||||
padding: 50rpx 100rpx;
|
padding: 50rpx 100rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paddingTopBot20{
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
/*外边距*/
|
/*外边距*/
|
||||||
.margin20 {
|
.margin20 {
|
||||||
margin: 20rpx;
|
margin: 20rpx;
|
||||||
|
|
|
||||||
|
|
@ -4,23 +4,33 @@
|
||||||
:class="{ active: state.currentIndex === index }" :style="{
|
:class="{ active: state.currentIndex === index }" :style="{
|
||||||
top: state.itemYList[index].top + 'px'
|
top: state.itemYList[index].top + 'px'
|
||||||
}">
|
}">
|
||||||
<slot :item="item" />
|
<slot name="item-handle" :item="item" />
|
||||||
<!-- css实现拖拽图标 -->
|
<!-- 拖拽按钮插槽 -->
|
||||||
|
|
||||||
<div class="icon" @touchstart.stop="touchStart($event, index)" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
|
<div style="position: absolute;display: flex;right: 10rpx;top: 20rpx;">
|
||||||
|
<slot name="drag-handle" :item="item">
|
||||||
|
<!-- 默认拖拽图标 -->
|
||||||
|
<div class="drag-icon" @touchstart.stop="touchStart($event, index)" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
|
||||||
<image src="/static/icons/move.png" class="icon50 margin-left-30" />
|
<image src="/static/icons/move.png" class="icon50 margin-left-30" />
|
||||||
<!-- <i class="lines" /> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="icon" >
|
</slot>
|
||||||
|
<!-- 删除按钮插槽 -->
|
||||||
|
<slot
|
||||||
|
name="delete-handle" :item="item">
|
||||||
|
<!-- 默认删除图标 -->
|
||||||
|
<div class="delete-icon" @click="handleDelete(index)">
|
||||||
<image src="/static/icons/delete.png" class="icon50 margin-left-30" />
|
<image src="/static/icons/delete.png" class="icon50 margin-left-30" />
|
||||||
</div>
|
</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, watch } from 'vue'
|
import { reactive, watch } from 'vue'
|
||||||
const emits = defineEmits(['change'])
|
const emits = defineEmits(['change', 'delete'])
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
// 每一项item高度，必须
|
// 每一项item高度，必须
|
||||||
itemHeight: {
|
itemHeight: {
|
||||||
|
|
@ -36,7 +46,11 @@ const props = defineProps({
|
||||||
readonly: {
|
readonly: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
},
|
||||||
|
cIndex:{
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
|
@ -99,8 +113,6 @@ function touchStart(event, index) {
|
||||||
state.currentItemY = state.itemYList[index]
|
state.currentItemY = state.itemYList[index]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function touchMove(event) {
|
function touchMove(event) {
|
||||||
if (props.readonly || !state.isDragging) return
|
if (props.readonly || !state.isDragging) return
|
||||||
|
|
||||||
|
|
@ -128,9 +140,6 @@ function touchMove(event) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** @手指松开 */
|
/** @手指松开 */
|
||||||
function touchEnd() {
|
function touchEnd() {
|
||||||
if (props.readonly) return
|
if (props.readonly) return
|
||||||
|
|
@ -148,8 +157,6 @@ function touchEnd() {
|
||||||
h5BodyScroll(true)
|
h5BodyScroll(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** @交换位置 **/
|
/** @交换位置 **/
|
||||||
// index 需要与第几个下标交换位置
|
// index 需要与第几个下标交换位置
|
||||||
function changePosition(index) {
|
function changePosition(index) {
|
||||||
|
|
@ -176,7 +183,7 @@ function change() {
|
||||||
// 如果顺序未发生改变，则不触发change事件
|
// 如果顺序未发生改变，则不触发change事件
|
||||||
if (JSON.stringify(state.newList) == JSON.stringify(state.initialList)) return
|
if (JSON.stringify(state.newList) == JSON.stringify(state.initialList)) return
|
||||||
// 传给父组件新数据
|
// 传给父组件新数据
|
||||||
emits('change', state.newList, state.newList[state.currentIndex])
|
emits('change', state.newList, state.newList[state.currentIndex], props.cIndex)
|
||||||
}
|
}
|
||||||
|
|
||||||
// h5 ios回弹
|
// h5 ios回弹
|
||||||
|
|
@ -187,6 +194,12 @@ function h5BodyScroll(flag) {
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleDelete(index) {
|
||||||
|
// 触发父组件的删除事件
|
||||||
|
emits('delete', index, state.newList[index])
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
@ -199,7 +212,7 @@ function h5BodyScroll(flag) {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
transition: all ease 0.25s;
|
transition: all ease 0.25s;
|
||||||
display: flex;
|
// display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
// ⚠️ 防止长按选中文字或图片
|
// ⚠️ 防止长按选中文字或图片
|
||||||
|
|
@ -216,54 +229,12 @@ function h5BodyScroll(flag) {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -40rpx;
|
top: -40rpx;
|
||||||
// padding: 30rpx;
|
// padding: 30rpx;
|
||||||
.lines {
|
|
||||||
background: #e0e0e0;
|
|
||||||
width: 20px;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 100rpx;
|
|
||||||
margin-left: auto;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
transition: all ease 0.25s;
|
|
||||||
top: -40rpx;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
border-radius: inherit;
|
|
||||||
background: #e0e0e0;
|
|
||||||
transition: inherit;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: -14rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
bottom: -14rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.08);
|
box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.08);
|
||||||
transition: initial;
|
transition: initial;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
.icon .lines {
|
|
||||||
background: #2e97f9;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
background: #2e97f9;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -2,59 +2,30 @@
|
||||||
import StaticConstant from "@/common/StaticConstant";
|
import StaticConstant from "@/common/StaticConstant";
|
||||||
import ApiConstant from "@/common/ApiConstant";
|
import ApiConstant from "@/common/ApiConstant";
|
||||||
import Request from '@/common/request'
|
import Request from '@/common/request'
|
||||||
import ImagesConstant from "@/common/ImagesConstant";
|
|
||||||
import {
|
import {
|
||||||
stringIsNotEmpty
|
stringIsNotEmpty
|
||||||
} from "@/common/util";
|
} from "@/common/util";
|
||||||
import CommonTool from "@/common/js/commonTool";
|
import CommonTool from "@/common/js/commonTool";
|
||||||
|
|
||||||
let request = new Request()
|
let request = new Request()
|
||||||
// 缓存每页最多
|
|
||||||
const MAX_CACHE_DATA = 100;
|
|
||||||
// 缓存页签数量
|
|
||||||
const MAX_CACHE_PAGE = 3;
|
|
||||||
|
|
||||||
const app = getApp()
|
const app = getApp()
|
||||||
export default {
|
export default {
|
||||||
name: "我的志愿明细",
|
name: "我的志愿明细",
|
||||||
computed: {
|
|
||||||
ImagesConstant() {
|
|
||||||
return ImagesConstant
|
|
||||||
},
|
|
||||||
app() {
|
|
||||||
return app
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
list: [],
|
||||||
vipInfo: {},
|
vipInfo: {},
|
||||||
paneFlag: false,
|
|
||||||
scoreStatus: true,
|
scoreStatus: true,
|
||||||
moveVolunteer: {
|
moveVolunteer: {
|
||||||
batch: '', //移动的批次
|
batch: '', //移动的批次
|
||||||
indexs: '',
|
indexs: '',
|
||||||
volunteerId: ''
|
volunteerId: ''
|
||||||
},
|
},
|
||||||
volunteer: {},
|
|
||||||
volunteerId: '', //志愿id
|
volunteerId: '', //志愿id
|
||||||
volunteerName: '', //志愿单名称
|
|
||||||
topBackShow: true, //显示回到顶部
|
|
||||||
selectForm: {
|
|
||||||
address: '',
|
|
||||||
schoolName: '',
|
|
||||||
paneName: '全部',
|
|
||||||
batch: '',
|
|
||||||
},
|
|
||||||
scoreInfo: {}, //成绩信息
|
scoreInfo: {}, //成绩信息
|
||||||
volunteerInfo: {}, //志愿单信息
|
volunteerInfo: {}, //志愿单信息
|
||||||
tabIndex: 0, //导航栏选中的下标
|
|
||||||
scrollInto: "",
|
|
||||||
newsList: [],
|
|
||||||
cacheTab: [],
|
|
||||||
filledVolunteer: {
|
filledVolunteer: {
|
||||||
volunteerRecordEarlyAdmissionNum: 0,
|
volunteerRecordEarlyAdmissionNum: 0,
|
||||||
volunteerUndergraduateANum: 0,
|
|
||||||
volunteerUndergraduateBNum: 0,
|
|
||||||
volunteerUndergraduateNum: 0,
|
volunteerUndergraduateNum: 0,
|
||||||
volunteerJuniorCollegeNum: 0,
|
volunteerJuniorCollegeNum: 0,
|
||||||
volunteerEarlyAdmissionList: [], //本科提前批
|
volunteerEarlyAdmissionList: [], //本科提前批
|
||||||
|
|
@ -62,55 +33,61 @@
|
||||||
volunteerJuniorCollegeList: [], //高职高专
|
volunteerJuniorCollegeList: [], //高职高专
|
||||||
volunteerMap: new Map()
|
volunteerMap: new Map()
|
||||||
}, //已填志愿信息
|
}, //已填志愿信息
|
||||||
years: StaticConstant.years,
|
|
||||||
nowYear: StaticConstant.year,
|
|
||||||
allCollapseItemList: [{
|
allCollapseItemList: [{
|
||||||
batchLabel: '提前批',
|
batchLabel: '提前批',
|
||||||
batch: '提前批',
|
batch: '提前批',
|
||||||
type: '顺序志愿',
|
type: '顺序志愿',
|
||||||
max: app.globalData.StaticConstant.tiQianPiZhiYuanNum,
|
max: app.globalData.StaticConstant.tiQianPiZhiYuanNum,
|
||||||
status: false
|
status: false,
|
||||||
|
saveStatus: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
batchLabel: '本科批',
|
batchLabel: '本科批',
|
||||||
batch: '本科批',
|
batch: '本科批',
|
||||||
type: '平行志愿',
|
type: '平行志愿',
|
||||||
max: app.globalData.StaticConstant.benZhiYuanNum,
|
max: app.globalData.StaticConstant.benZhiYuanNum,
|
||||||
status: false
|
status: false,
|
||||||
|
saveStatus: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
batchLabel: '高职高专',
|
batchLabel: '高职高专',
|
||||||
batch: '高职高专',
|
batch: '高职高专',
|
||||||
type: '平行志愿',
|
type: '平行志愿',
|
||||||
max: app.globalData.StaticConstant.zhuanZhiYuanNum,
|
max: app.globalData.StaticConstant.zhuanZhiYuanNum,
|
||||||
status: false
|
status: false,
|
||||||
|
saveStatus: false
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
collapseItemList: [],
|
collapseItemList: [],
|
||||||
volunteerPreview: {}
|
volunteerPreview: {},
|
||||||
|
dragOptions: {
|
||||||
|
isDragging: false,
|
||||||
|
draggedItem: null,
|
||||||
|
draggedIndex: -1,
|
||||||
|
draggedBatch: '',
|
||||||
|
targetIndex: -1
|
||||||
|
},
|
||||||
|
dragTimer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
//
|
//
|
||||||
let userInfo = uni.getStorageSync('userInfo')
|
let userInfo = uni.getStorageSync('userInfo')
|
||||||
this.scoreInfo = uni.getStorageSync('scoreInfo')
|
let scoreInfo = uni.getStorageSync('scoreInfo')
|
||||||
this.volunteer = uni.getStorageSync('volunteer')
|
let volunteer = uni.getStorageSync('volunteer')
|
||||||
|
|
||||||
if (userInfo) {
|
if (userInfo) {
|
||||||
//有登录状态
|
//有登录状态
|
||||||
this.userStatus = true
|
|
||||||
//判断是否有成绩信息
|
//判断是否有成绩信息
|
||||||
this.scoreInfo = uni.getStorageSync('scoreInfo')
|
if (!scoreInfo) {
|
||||||
if (this.scoreInfo === undefined || this.scoreInfo === null || this.scoreInfo === '') {
|
|
||||||
//缓存中没有成绩，后端接口获取成绩
|
//缓存中没有成绩，后端接口获取成绩
|
||||||
request.getUserScore()
|
request.getUserScore()
|
||||||
this.scoreInfo = uni.getStorageSync('scoreInfo')
|
scoreInfo = uni.getStorageSync('scoreInfo')
|
||||||
this.volunteer = uni.getStorageSync('volunteer')
|
volunteer = uni.getStorageSync('volunteer')
|
||||||
if (!this.scoreInfo) {
|
this.scoreStatus = !!scoreInfo
|
||||||
this.scoreStatus = false
|
|
||||||
} else {
|
|
||||||
this.scoreStatus = true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.scoreInfo = scoreInfo
|
||||||
this.vipInfo = uni.getStorageSync('vipInfo')
|
this.vipInfo = uni.getStorageSync('vipInfo')
|
||||||
} else {
|
} else {
|
||||||
//没有登录，跳转到登录页
|
//没有登录，跳转到登录页
|
||||||
|
|
@ -119,8 +96,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
//有成绩信息，且成绩中返回了志愿单信息
|
//有成绩信息，且成绩中返回了志愿单信息
|
||||||
if (this.scoreInfo && this.volunteer) {
|
if (this.scoreInfo && volunteer) {
|
||||||
this.volunteerId = this.volunteer.id
|
this.volunteerId = volunteer.id
|
||||||
}
|
}
|
||||||
|
|
||||||
if (stringIsNotEmpty(this.volunteerId)) {
|
if (stringIsNotEmpty(this.volunteerId)) {
|
||||||
|
|
@ -128,15 +105,37 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async onLoad(e) {
|
async onLoad(e) {
|
||||||
|
|
||||||
if (e.volunteerId) {
|
if (e.volunteerId) {
|
||||||
//从志愿列表进来
|
//从志愿列表进来
|
||||||
this.volunteerId = e.volunteerId;
|
this.volunteerId = e.volunteerId;
|
||||||
console.log(e.volunteerId)
|
|
||||||
}
|
}
|
||||||
// 志愿单打印配置
|
// 志愿单打印配置
|
||||||
this.volunteerPreview = await CommonTool.loadStaticConfig('volunteer_preview')
|
this.volunteerPreview = await CommonTool.loadStaticConfig('volunteer_preview')
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
goto(url) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: url
|
url: url
|
||||||
|
|
@ -151,10 +150,6 @@
|
||||||
duration: 300 // 滚动动画的时长
|
duration: 300 // 滚动动画的时长
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
clearTabData(e) {
|
|
||||||
this.newsList[e].data.length = 0;
|
|
||||||
this.newsList[e].loadingText = "加载更多...";
|
|
||||||
},
|
|
||||||
|
|
||||||
/*获取已填报志愿数据*/
|
/*获取已填报志愿数据*/
|
||||||
getFilledVolunteerList() {
|
getFilledVolunteerList() {
|
||||||
|
|
@ -178,128 +173,59 @@
|
||||||
batch: '本科批',
|
batch: '本科批',
|
||||||
type: '平行志愿',
|
type: '平行志愿',
|
||||||
max: 64,
|
max: 64,
|
||||||
status: false
|
status: false,
|
||||||
|
saveStatus: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
batchLabel: '高职高专',
|
batchLabel: '高职高专',
|
||||||
batch: '高职高专',
|
batch: '高职高专',
|
||||||
type: '平行志愿',
|
type: '平行志愿',
|
||||||
max: 64,
|
max: 64,
|
||||||
status: false
|
status: false,
|
||||||
|
saveStatus: false
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
if (this.scoreInfo.batch) {
|
if (this.scoreInfo.batch) {
|
||||||
this.paneFlag = true
|
|
||||||
this.selectForm.batch = this.scoreInfo.batch
|
|
||||||
let allCollapseItemList = this.allCollapseItemList
|
let allCollapseItemList = this.allCollapseItemList
|
||||||
let collapseItemList = []
|
let collapseItemList = []
|
||||||
//调整 当前成绩批次可以看到的导航栏
|
//调整 当前成绩批次可以看到的导航栏
|
||||||
for (let i = 0; i < allCollapseItemList.length; i++) {
|
for (let i = 0; i < allCollapseItemList.length; i++) {
|
||||||
if (this.scoreInfo.batch === '高职高专') {
|
if (this.scoreInfo.batch === '高职高专' && allCollapseItemList[i].batch === '本科批') {
|
||||||
if (allCollapseItemList[i].batch === '本科批') {
|
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
}
|
|
||||||
collapseItemList.push(allCollapseItemList[i])
|
collapseItemList.push(allCollapseItemList[i])
|
||||||
|
}
|
||||||
this.collapseItemList = collapseItemList
|
this.collapseItemList = collapseItemList
|
||||||
}
|
}
|
||||||
}
|
|
||||||
let key = ''
|
// 处理提前批数据
|
||||||
let volunteer = {
|
let volunteerRecordEarlyAdmissionList = dataResult.volunteerRecordEarlyAdmissionList || [];
|
||||||
indexStr: 0
|
this.filledVolunteer.volunteerRecordEarlyAdmissionNum = volunteerRecordEarlyAdmissionList.length;
|
||||||
}
|
|
||||||
let indexs = 1;
|
// 按索引排序提前批志愿数据
|
||||||
if (true) {
|
volunteerRecordEarlyAdmissionList.sort((a, b) => a.indexs - b.indexs);
|
||||||
//==================================提前批 start
|
this.filledVolunteer.volunteerEarlyAdmissionList = volunteerRecordEarlyAdmissionList;
|
||||||
let volunteerRecordEarlyAdmissionList = dataResult
|
|
||||||
.volunteerRecordEarlyAdmissionList;
|
// 处理本科批数据
|
||||||
this.filledVolunteer.volunteerRecordEarlyAdmissionNum =
|
let volunteerUndergraduateList = dataResult.volunteerRecordUndergraduateList || [];
|
||||||
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;
|
this.filledVolunteer.volunteerUndergraduateNum = volunteerUndergraduateList.length;
|
||||||
console.log('//==================================本科 start')
|
|
||||||
console.log(volunteerUndergraduateList)
|
// 按索引排序本科批志愿数据
|
||||||
for (let i = 0; i < volunteerUndergraduateList.length; i++) {
|
volunteerUndergraduateList.sort((a, b) => a.indexs - b.indexs);
|
||||||
key = volunteerUndergraduateList[i].majorCode + volunteerUndergraduateList[i]
|
this.filledVolunteer.volunteerUndergraduateList = volunteerUndergraduateList;
|
||||||
.schoolCode
|
|
||||||
volunteerMap.set(key, volunteerUndergraduateList[i])
|
// 处理高职高专批数据
|
||||||
}
|
let volunteerJuniorCollegeList = dataResult.volunteerRecordJuniorCollegeList || [];
|
||||||
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;
|
this.filledVolunteer.volunteerJuniorCollegeNum = volunteerJuniorCollegeList.length;
|
||||||
for (let i = 0; i < volunteerJuniorCollegeList.length; i++) {
|
|
||||||
key = volunteerJuniorCollegeList[i].majorCode + volunteerJuniorCollegeList[i]
|
// 按索引排序高职高专批志愿数据
|
||||||
.schoolCode
|
volunteerJuniorCollegeList.sort((a, b) => a.indexs - b.indexs);
|
||||||
volunteerMap.set(key, volunteerJuniorCollegeList[i])
|
this.filledVolunteer.volunteerJuniorCollegeList = volunteerJuniorCollegeList;
|
||||||
}
|
|
||||||
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
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.filledVolunteer.volunteerEarlyAdmissionList = []
|
this.filledVolunteer.volunteerEarlyAdmissionList = []
|
||||||
this.filledVolunteer.volunteerJuniorCollegeList = []
|
this.filledVolunteer.volunteerJuniorCollegeList = []
|
||||||
this.filledVolunteer.volunteerUndergraduateList = []
|
this.filledVolunteer.volunteerUndergraduateList = []
|
||||||
this.filledVolunteer.volunteerList = []
|
|
||||||
}
|
}
|
||||||
this.filledVolunteer.volunteerMap = volunteerMap
|
this.filledVolunteer.volunteerMap = volunteerMap
|
||||||
}
|
}
|
||||||
|
|
@ -309,141 +235,56 @@
|
||||||
toPercent(num, total) {
|
toPercent(num, total) {
|
||||||
return (Math.round(num / total * 10000) / 100.00); // 小数点后两位百分比
|
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) {
|
confirmDelVolunteerItem(e) {
|
||||||
let that = this
|
|
||||||
console.log('删除提示')
|
|
||||||
console.log(e)
|
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '确认要删除志愿' + e.indexs + '吗?',
|
content: '确认要删除志愿' + e.indexs + '吗?',
|
||||||
confirmText: '确定',
|
confirmText: '确定',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
success: function(res) {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
that.deleteVolunteerItem(e)
|
this.deleteVolunteerItem(e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/*确认删除志愿明细*/
|
/*确认删除志愿明细*/
|
||||||
deleteVolunteerItem(e) {
|
deleteVolunteerItem(e) {
|
||||||
let that = this
|
|
||||||
request.delete(ApiConstant.Volunteer.volunteerRecordDelete, {
|
request.delete(ApiConstant.Volunteer.volunteerRecordDelete, {
|
||||||
id: e.id
|
id: e.id
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
setTimeout(function() {
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '删除成功',
|
title: '删除成功',
|
||||||
icon: "none"
|
icon: "none"
|
||||||
});
|
});
|
||||||
}, 1000)
|
setTimeout(() => {
|
||||||
setTimeout(function() {
|
this.getFilledVolunteerList()
|
||||||
that.getFilledVolunteerList()
|
}, 500)
|
||||||
}, 1500)
|
|
||||||
} else {
|
} else {
|
||||||
setTimeout(function() {
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.message,
|
title: res.message,
|
||||||
icon: "none"
|
icon: "none"
|
||||||
});
|
});
|
||||||
}, 500)
|
|
||||||
}
|
}
|
||||||
}).catch(err => {}).finally(() => {});
|
}).catch(err => {}).finally(() => {});
|
||||||
},
|
},
|
||||||
fctjCheckboxChange(e) {
|
fctjCheckboxChange(e) {
|
||||||
console.log('服从调剂')
|
|
||||||
console.log(e)
|
|
||||||
request.post(ApiConstant.Volunteer.updateFctj, {
|
request.post(ApiConstant.Volunteer.updateFctj, {
|
||||||
id: e
|
id: e
|
||||||
}).then(res => {}).catch(err => {}).finally(() => {});
|
}).then(res => {}).catch(err => {}).finally(() => {});
|
||||||
},
|
},
|
||||||
toAdd() {
|
toAdd() {
|
||||||
uni.navigateTo({
|
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() {
|
onClickEditUserScore() {
|
||||||
this.goto('/pages/zyb/score/edit')
|
this.goto('/pages/zyb/score/edit')
|
||||||
},
|
},
|
||||||
/*点击创建志愿单*/
|
/*点击创建志愿单*/
|
||||||
onClickCreateVolunteer() {
|
onClickCreateVolunteer() {
|
||||||
let that = this
|
|
||||||
request.post(ApiConstant.Volunteer.addNew, {
|
request.post(ApiConstant.Volunteer.addNew, {
|
||||||
volunteerName: '模拟志愿草表'
|
volunteerName: '模拟志愿草表'
|
||||||
}, {}).then(res => {
|
}, {}).then(res => {
|
||||||
|
|
@ -452,10 +293,10 @@
|
||||||
}).catch(err => {}).finally(() => {});
|
}).catch(err => {}).finally(() => {});
|
||||||
},
|
},
|
||||||
/*返回已填志愿数量*/
|
/*返回已填志愿数量*/
|
||||||
getVolunteerNum(citem) {
|
getVolunteerNum(cItem) {
|
||||||
if (citem.batch === '提前批') {
|
if (cItem.batch === '提前批') {
|
||||||
return this.filledVolunteer.volunteerRecordEarlyAdmissionNum
|
return this.filledVolunteer.volunteerRecordEarlyAdmissionNum
|
||||||
} else if (citem.batch === '本科批') {
|
} else if (cItem.batch === '本科批') {
|
||||||
return this.filledVolunteer.volunteerUndergraduateNum
|
return this.filledVolunteer.volunteerUndergraduateNum
|
||||||
} else {
|
} else {
|
||||||
return this.filledVolunteer.volunteerJuniorCollegeNum
|
return this.filledVolunteer.volunteerJuniorCollegeNum
|
||||||
|
|
@ -481,13 +322,94 @@
|
||||||
url: '/pages/zyb/other/web-view?url=volunteer_preview'
|
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 [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<view>
|
||||||
<view class="divider" />
|
<view class="divider" />
|
||||||
<!-- 没有成绩界面 -->
|
<!-- 没有成绩界面 -->
|
||||||
<view class="container" v-if="!this.scoreInfo">
|
<view class="container" v-if="!this.scoreInfo">
|
||||||
|
|
@ -505,7 +427,6 @@
|
||||||
<button v-show="volunteerId" type="primary" style="height: 42rpx;line-height: 42rpx"
|
<button v-show="volunteerId" type="primary" style="height: 42rpx;line-height: 42rpx"
|
||||||
@click="onPreview">打印</button>
|
@click="onPreview">打印</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="flexWrap tags font-size-mini2" v-if="scoreInfo">
|
<view class="flexWrap tags font-size-mini2" v-if="scoreInfo">
|
||||||
<view class="tag">{{ scoreInfo.province }}</view>
|
<view class="tag">{{ scoreInfo.province }}</view>
|
||||||
|
|
@ -559,37 +480,40 @@
|
||||||
<!--志愿信息-->
|
<!--志愿信息-->
|
||||||
<view class="fillVolunteerList" v-if="collapseItemList.length>0">
|
<view class="fillVolunteerList" v-if="collapseItemList.length>0">
|
||||||
<view class="collapse">
|
<view class="collapse">
|
||||||
<view class="collapse-item" v-for="(citem,cindex) in collapseItemList" :key="cindex">
|
<view class="collapse-item" v-for="(cItem,cIndex) in collapseItemList" :key="cIndex">
|
||||||
<view class="collapse-head"
|
<view class="collapse-head">
|
||||||
@click="collapseItemList[cindex].status=!collapseItemList[cindex].status">
|
|
||||||
<view class="flexWrap" style="background-color: #f5f5f5;line-height: 80rpx;">
|
<view class="flexWrap" style="background-color: #f5f5f5;line-height: 80rpx;">
|
||||||
<view class="flex-item-8">
|
<view class="flex-item-6">
|
||||||
<view style="padding-left: 30rpx;">
|
<view style="padding-left: 30rpx;">
|
||||||
<text
|
<text
|
||||||
class="font-size-mini3 font-weight-b">{{ citem.batchLabel }}({{getVolunteerNum(citem)}}/{{ citem.max }})</text>
|
class="font-size-mini3 font-weight-b">{{ cItem.batchLabel }}({{getVolunteerNum(cItem)}}/{{ cItem.max }})</text>
|
||||||
<text class="font-size-mini margin-left-10 slateGray">{{ citem.type }}</text>
|
<text class="font-size-mini margin-left-10 slateGray">{{ cItem.type }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-item-2">
|
<view class="flex-item-4">
|
||||||
<text class="float-right"
|
<text class="float-right" @click="collapseItemList[cIndex].status=!collapseItemList[cIndex].status"
|
||||||
style="margin-right: 30rpx">{{ citem.status ? '收起' : '展开' }}</text>
|
style="margin-right: 30rpx">{{ cItem.status ? '收起' : '展开' }}</text>
|
||||||
|
<button v-show="cItem.saveStatus" @click="confirmSaveVolunteer(cItem)" class="float-right" style="height: 60rpx;width: 120rpx;font-size: 30rpx;line-height: 60rpx;margin: 10rpx;">保存</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="collapse-body" v-show="citem.status" style="">
|
<view class="collapse-body" v-show="cItem.status" style="">
|
||||||
<view class="volunteerItem" v-for="(item,index) in (citem.batch==='高职高专')?filledVolunteer.volunteerJuniorCollegeList:
|
<m-drag v-if="(cItem.batch == '提前批' ? filledVolunteer.volunteerEarlyAdmissionList :
|
||||||
citem.batch==='提前批'?filledVolunteer.volunteerEarlyAdmissionList:filledVolunteer.volunteerUndergraduateList"
|
cItem.batch == '本科批' ? filledVolunteer.volunteerUndergraduateList :
|
||||||
:key="item.indexs">
|
filledVolunteer.volunteerJuniorCollegeList).length>0" :itemHeight="69" :list="
|
||||||
<view v-if="item.majorCode">
|
cItem.batch == '提前批' ? filledVolunteer.volunteerEarlyAdmissionList :
|
||||||
|
cItem.batch == '本科批' ? filledVolunteer.volunteerUndergraduateList :
|
||||||
|
filledVolunteer.volunteerJuniorCollegeList" :cIndex="cIndex" @change="dragComplete">
|
||||||
|
<template #item-handle="{ item }">
|
||||||
|
<div class="content-wrapper volunteerItem">
|
||||||
<view class="flexWrap">
|
<view class="flexWrap">
|
||||||
<view class="flex-item-15 select">
|
<view class="flex-item-15 select">
|
||||||
<view class="selectIndex">
|
<view class="selectIndex">
|
||||||
<text style="line-height: 50rpx">{{ item.indexs }}</text>
|
<text style="line-height: 50rpx">{{ item.indexs }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-item-85" @click="gotoSchool(item.schoolCode)">
|
<view class="flex-item-65" style="height: 60rpx;" @click="gotoSchool(item.schoolCode)">
|
||||||
<text
|
<text>[{{ item.schoolCode }}]{{ item.schoolName }}</text>
|
||||||
style="line-height: 50rpx">[{{ item.schoolCode }}]{{ item.schoolName }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="flexWrap marginTopBot20">
|
<view class="flexWrap marginTopBot20">
|
||||||
|
|
@ -608,11 +532,10 @@
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!--操作栏-->
|
<view class="flexWrap border-top" v-show="false" style="line-height: 60rpx">
|
||||||
<view class="flexWrap border-top" style="line-height: 60rpx">
|
|
||||||
<view class="flex-item-4">
|
<view class="flex-item-4">
|
||||||
<checkbox-group @change="fctjCheckboxChange(item.id)"
|
<checkbox-group @change="fctjCheckboxChange(item.id)"
|
||||||
v-if="citem.batch==='提前批'">
|
v-if="cItem.batch==='提前批'">
|
||||||
<label>
|
<label>
|
||||||
<checkbox value="cb" :checked="item.fctj===1" color="#FFCC33"
|
<checkbox value="cb" :checked="item.fctj===1" color="#FFCC33"
|
||||||
style="transform:scale(0.7)" />
|
style="transform:scale(0.7)" />
|
||||||
|
|
@ -622,20 +545,26 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-item-6">
|
<view class="flex-item-6">
|
||||||
<view class="float-right">
|
<view class="float-right">
|
||||||
<image @click="onClickExChange(item)" src="/static/icons/move.png"
|
|
||||||
class="icon50 margin-left-50" />
|
|
||||||
<!-- <image src="/static/icons/edit.png" class="icon50 margin-left-50"/>-->
|
|
||||||
<image @click="confirmDelVolunteerItem(item)" src="/static/icons/delete.png"
|
<image @click="confirmDelVolunteerItem(item)" src="/static/icons/delete.png"
|
||||||
class="icon50 margin-left-50" />
|
class="icon50 margin-left-50" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 自定义删除按钮 -->
|
||||||
|
<template #delete-handle="{ item, index }">
|
||||||
|
<div class="icon delete-icon" @click="confirmDelVolunteerItem(item)">
|
||||||
|
<image src="/static/icons/delete.png" class="icon50 margin-left-30" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</m-drag>
|
||||||
|
|
||||||
<!--空白专业-->
|
<!--空白专业-->
|
||||||
<view v-else @click="toAdd()">
|
<view v-else @click="toAdd()" class="volunteerItem">
|
||||||
<view class="notSelect flexWrap">
|
<view class="notSelect flexWrap">
|
||||||
<view class="notSelectIndex">
|
<view class="notSelectIndex">
|
||||||
<text style="line-height: 50rpx">{{ item.indexs }}</text>
|
<text style="line-height: 50rpx"></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="margin-left-30">
|
<view class="margin-left-30">
|
||||||
点击添加专业志愿
|
点击添加专业志愿
|
||||||
|
|
@ -646,7 +575,6 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
|
|
||||||
<!--有成绩，没有志愿信息-->
|
<!--有成绩，没有志愿信息-->
|
||||||
<view class="" v-if="this.scoreInfo && !this.volunteerId">
|
<view class="" v-if="this.scoreInfo && !this.volunteerId">
|
||||||
|
|
@ -655,23 +583,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<uni-popup ref="inputDialog" type="dialog">
|
|
||||||
<uni-popup-dialog ref="inputClose" mode="input" placeholder="N" @confirm="moveIndexsConfirm">
|
|
||||||
<view>
|
|
||||||
<view class="flexWrap" style="height: 50rpx;line-height: 50rpx">
|
|
||||||
<view class="flex-item-3">
|
|
||||||
移动志愿
|
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-item-3">
|
|
||||||
<view style="border: 1rpx solid #979797">
|
|
||||||
<input type="number" v-model="moveVolunteer.indexs" placeholder="N" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-popup-dialog>
|
|
||||||
</uni-popup>
|
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
page {
|
page {
|
||||||
|
|
@ -730,9 +642,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-body .volunteerItem {
|
.collapse-body .volunteerItem {
|
||||||
|
// width: 130%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
padding: 10rpx 30rpx;
|
padding: 10rpx 10rpx 0rpx 0rpx;
|
||||||
|
|
||||||
.notSelect {
|
.notSelect {
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
|
|
@ -770,6 +683,16 @@
|
||||||
border-top: 1rpx solid #f5f5f5;
|
border-top: 1rpx solid #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.volunteerItem.drag-over {
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
border: 1rpx dashed #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volunteerItem.dragging {
|
||||||
|
opacity: 0.5;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
/*志源列表 end*/
|
/*志源列表 end*/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -900,7 +900,7 @@ export default {
|
||||||
<view class="flex-item-35">
|
<view class="flex-item-35">
|
||||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
||||||
<text class="font-size-mini" :style="'color:'+checkColorText(item.enrollProbability)">
|
<text class="font-size-mini" :style="'color:'+checkColorText(item.enrollProbability)">
|
||||||
{{ vipInfo && vipInfo.vipLevel >= 2 ? item.enrollProbability : '??' }}%
|
{{ vipInfo && vipInfo.vipLevel >= 2 ? item.enrollProbability : '??' }}
|
||||||
</text>
|
</text>
|
||||||
<image :src="checkBao(item.enrollProbability)" class="icon50" v-if="vipInfo && vipInfo.vipLevel>=2"/>
|
<image :src="checkBao(item.enrollProbability)" class="icon50" v-if="vipInfo && vipInfo.vipLevel>=2"/>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -1011,7 +1011,7 @@ export default {
|
||||||
<view class="flex-item-35">
|
<view class="flex-item-35">
|
||||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
||||||
<text class="font-size-mini" :style="'color:'+checkColorText(otherMajor.nowMajor.enrollProbability)">
|
<text class="font-size-mini" :style="'color:'+checkColorText(otherMajor.nowMajor.enrollProbability)">
|
||||||
{{ (vipInfo && vipInfo.vipLevel >= 2) ? otherMajor.nowMajor.enrollProbability : '??' }}%
|
{{ (vipInfo && vipInfo.vipLevel >= 2) ? otherMajor.nowMajor.enrollProbability : '??' }}
|
||||||
</text>
|
</text>
|
||||||
<image :src="checkBao(otherMajor.nowMajor.enrollProbability)" class="icon50"
|
<image :src="checkBao(otherMajor.nowMajor.enrollProbability)" class="icon50"
|
||||||
v-if="(vipInfo&&vipInfo.vipLevel>=2)"/>
|
v-if="(vipInfo&&vipInfo.vipLevel>=2)"/>
|
||||||
|
|
|
||||||
|
|
@ -1012,7 +1012,7 @@ export default {
|
||||||
<view class="flex-item-35" v-if="selectForm.kslx==='统考'">
|
<view class="flex-item-35" v-if="selectForm.kslx==='统考'">
|
||||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
<view style="float: right;line-height: 50rpx;" class="font-weight-600">
|
||||||
<text class="font-size-mini" :style="'color:'+checkColorText(item.enrollProbability)">
|
<text class="font-size-mini" :style="'color:'+checkColorText(item.enrollProbability)">
|
||||||
{{ vipInfo && vipInfo.vipLevel >= 2 ? formatDecimal(item.enrollProbability) : '??' }}%
|
{{ vipInfo && vipInfo.vipLevel >= 2 ? formatDecimal(item.enrollProbability) : '??' }}
|
||||||
</text>
|
</text>
|
||||||
<image :src="checkBao(item.enrollProbability)" class="icon50" v-if="vipInfo && vipInfo.vipLevel>=2"/>
|
<image :src="checkBao(item.enrollProbability)" class="icon50" v-if="vipInfo && vipInfo.vipLevel>=2"/>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -1126,7 +1126,7 @@ export default {
|
||||||
<view class="flex-item-35">
|
<view class="flex-item-35">
|
||||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600" v-if="selectForm.kslx==='统考'">
|
<view style="float: right;line-height: 50rpx;" class="font-weight-600" v-if="selectForm.kslx==='统考'">
|
||||||
<text class="font-size-mini" :style="'color:'+checkColorText(otherMajor.nowMajor.enrollProbability)">
|
<text class="font-size-mini" :style="'color:'+checkColorText(otherMajor.nowMajor.enrollProbability)">
|
||||||
{{ (vipInfo && vipInfo.vipLevel >= 2) ? formatDecimal(otherMajor.nowMajor.enrollProbability) : '??' }}%
|
{{ (vipInfo && vipInfo.vipLevel >= 2) ? formatDecimal(otherMajor.nowMajor.enrollProbability) : '??' }}
|
||||||
</text>
|
</text>
|
||||||
<image :src="checkBao(otherMajor.nowMajor.enrollProbability)" class="icon50"
|
<image :src="checkBao(otherMajor.nowMajor.enrollProbability)" class="icon50"
|
||||||
v-if="(vipInfo&&vipInfo.vipLevel>=2)"/>
|
v-if="(vipInfo&&vipInfo.vipLevel>=2)"/>
|
||||||
|
|
@ -1206,7 +1206,7 @@ export default {
|
||||||
<view class="flex-item-35">
|
<view class="flex-item-35">
|
||||||
<view style="float: right;line-height: 50rpx;" class="font-weight-600" v-if="selectForm.kslx==='统考'">
|
<view style="float: right;line-height: 50rpx;" class="font-weight-600" v-if="selectForm.kslx==='统考'">
|
||||||
<text class="font-size-mini" :style="'color:'+checkColorText(item.enrollProbability)">
|
<text class="font-size-mini" :style="'color:'+checkColorText(item.enrollProbability)">
|
||||||
{{ (vipInfo && vipInfo.vipLevel >= 2) ? formatDecimal(item.enrollProbability) : '??' }}%
|
{{ (vipInfo && vipInfo.vipLevel >= 2) ? formatDecimal(item.enrollProbability) : '??' }}
|
||||||
</text>
|
</text>
|
||||||
<image :src="checkBao(item.enrollProbability)" class="icon50" v-if="vipInfo&&vipInfo.vipLevel>=2"/>
|
<image :src="checkBao(item.enrollProbability)" class="icon50" v-if="vipInfo&&vipInfo.vipLevel>=2"/>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
## 1.0.6（2023-12-19）
|
|
||||||
* 修复vue3app环境下，拖动丢失行的问题
|
|
||||||
* UVUE版本支持了多行多列，可以去看看[传送门](https://ext.dcloud.net.cn/plugin?id=15953)
|
|
||||||
## 1.0.5（2023-01-09）
|
|
||||||
* 修复拖动后，@onclick返回错误行下标
|
|
||||||
* 增加push()，unshift()，splice()返回值，现在通过这三个函数修改后，会返回修改后的列表数组
|
|
||||||
## 1.0.4（2022-11-17）
|
|
||||||
* 新增push，unshift，splice函数，实现列表的删除插入
|
|
||||||
* 重写了给wxs传递数据的逻辑
|
|
||||||
## 1.0.3（2022-08-19）
|
|
||||||
* [重写] 拖拽排序的算法，提升渲染性能
|
|
||||||
* [修复] 修复删除行，排序出错的问题
|
|
||||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
|
||||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
|
||||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
|
||||||
## 1.0.2（2022-08-19）
|
|
||||||
* <font color=#f00>[重写] 拖拽排序的算法，提升渲染性能</font>
|
|
||||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
|
||||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
|
||||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
|
||||||
## 1.0.1（2022-08-19）
|
|
||||||
* <font color=#f00>[重写] 拖拽排序的算法，提升渲染性能</font>
|
|
||||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
|
||||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
|
||||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
|
||||||
## 1.0.0（2022-08-19）
|
|
||||||
* <font color=#f00>[重写] 拖拽排序的算法，提升渲染性能</font>
|
|
||||||
* <font color=#f00>[废弃] 因为微信循环插槽会无限警告，所以废弃插槽</font>
|
|
||||||
* [兼容] 触发长按时长属性(longTouchTime)增加兼容微信小程序(微信基础库2.14.2或以上)
|
|
||||||
* <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
|
||||||
## 0.2.5（2021-09-09）
|
|
||||||
* 修复 wxs使用了es6语法导致编译到微信小程序出错 感谢 @小小贝 反馈
|
|
||||||
## 0.2.4（2021-09-01）
|
|
||||||
* 修复 iOS在整行拖拽情况下，触感反馈与点击事件冲突的问题 感谢 @粲然 反馈
|
|
||||||
## 0.2.3（2021-08-09）
|
|
||||||
* 修复 修改list导致拖拽报错
|
|
||||||
## 0.2.2（2021-07-06）
|
|
||||||
更新confirm的bug问题，这是我手贱写出的bug。
|
|
||||||
## 0.2.1（2021-07-02）
|
|
||||||
* 修复 数据中传入id导致不触发回调事件的问题 感谢@layu反馈
|
|
||||||
* 优化 拖拽和位置交换动画使用translate3d 感谢@pwiz反馈
|
|
||||||
## 0.2.0（2021-06-23）
|
|
||||||
* 修复 页面滚动后拖拽位置不正确问题
|
|
||||||
* 修复 页面使用多个组件时，组件间互相影响问题
|
|
||||||
* 修复 微信小程序设置列表高度不生效的问题
|
|
||||||
## 0.1.2（2021-02-02）
|
|
||||||
* 修复moveRow取值错误问题 感谢@诗人的咸鱼 反馈
|
|
||||||
## 0.1.1（2021-02-02）
|
|
||||||
* 增加开关触感反馈参数feedbackGeneratorState
|
|
||||||
* 发布uni_modules版本(需HX3.1.0以上)
|
|
||||||
|
|
@ -1,823 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="HM-drag-sort" :style="{'height': ListHeight+'px','background-color': listBackgroundColor}">
|
|
||||||
<!-- 拖拽中显示的行 -->
|
|
||||||
<view class="rowBox-shadow" id="shadowRowBox">
|
|
||||||
<view class="hm-row-shadow move" id="shadowRow">
|
|
||||||
<view class="modules">
|
|
||||||
<!-- 内容 -->
|
|
||||||
<view class="row-content">
|
|
||||||
<view class="row" :style="{'height': rowHeight+'px'}">
|
|
||||||
<image v-if="shadowRow.icon" class="icon" :src="shadowRow.icon"></image>
|
|
||||||
<text class="text">{{shadowRow.name}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 拖拽图标 -->
|
|
||||||
<view class="drag-content">
|
|
||||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
|
||||||
<text class="iconfont icon-drag"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 拖拽列表 -->
|
|
||||||
<scroll-view class="color scroll-view" :id="'scrollView_'+guid" :scroll-y="true"
|
|
||||||
:style="{'height': ListHeight+'px'}" :scroll-top="scrollViewTop" @scroll="drag.scroll"
|
|
||||||
:scroll-with-animation="scrollAnimation">
|
|
||||||
<view class="list">
|
|
||||||
<view v-for="(row,index) in dragList" :key="row.HMDrag_id" class="rowBox ani">
|
|
||||||
<!-- 注意,这里的style只有在行首次渲染出来才有效,后面拖动列表,style会被wxs修改,这里的style就不会再生效了 -->
|
|
||||||
<view class="hm-row" :style="{'transform': 'translate3d(0,' + (row.HMDrag_sort-index)*100 + '%,-1px)'}" :data-sort="row.HMDrag_sort" :data-id="row.HMDrag_id" :id="row.HMDrag_id">
|
|
||||||
<view class="modules">
|
|
||||||
<!-- 内容 -->
|
|
||||||
<view class="row-content">
|
|
||||||
<view class="row" @tap="triggerClick(row.HMDrag_sort, row)" :style="{'height': rowHeight+'px'}">
|
|
||||||
<image v-if="row.icon" class="icon" :src="row.icon"></image>
|
|
||||||
<text class="text">{{row.name}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 拖拽图标 -->
|
|
||||||
<view v-if="row.disabled" class="drag-content" >
|
|
||||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
|
||||||
<text class="iconfont icon-drag disabled"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-else class="drag-content" :data-id="row.HMDrag_id" @touchstart="drag.touchstart"
|
|
||||||
@touchmove="drag.touchmove" @touchend="drag.touchend">
|
|
||||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
|
||||||
<text class="iconfont icon-drag"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
|
|
||||||
<!-- 数据跳板 -->
|
|
||||||
<view id="dataView" style="display: none !important;" :data-guid="guid" :prop="wxsDataStr" :change:prop="drag.receiveData">触发wxs跳板,请勿删除</view>
|
|
||||||
<!-- #ifdef APP-VUE || H5 -->
|
|
||||||
<view style="display: none !important;" :prop="scrollCommand" :change:prop="renderjs.runCommand">触发renderjs跳板,请勿删除</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<script src="./drag.wxs" module="drag" lang="wxs"></script>
|
|
||||||
<script module="renderjs" lang="renderjs">
|
|
||||||
// APP or H5端 renderjs 实现拖拽中的自动滚动列表
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
e: null,
|
|
||||||
ScrollView: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
runCommand(e) {
|
|
||||||
if (e == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.e = e;
|
|
||||||
this.getScrollView(document.getElementById('scrollView_' + this.e.guid))
|
|
||||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
|
||||||
this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
|
|
||||||
if (e.command == "stop") {
|
|
||||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
Animation() {
|
|
||||||
if (this.e.command == "stop") {
|
|
||||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 计算最大滚动高度
|
|
||||||
let maxScrollTop = this.e.rowLength * this.e.rowHeight - this.e.ListHeight;
|
|
||||||
if (this.e.command == "up") {
|
|
||||||
this.ScrollView.scrollTop -= 3
|
|
||||||
} else if (this.e.command == "down") {
|
|
||||||
this.ScrollView.scrollTop += 3;
|
|
||||||
}
|
|
||||||
if (this.ScrollView.scrollTop < 0) {
|
|
||||||
this.ScrollView.scrollTop = 0;
|
|
||||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
|
||||||
}
|
|
||||||
if (this.ScrollView.scrollTop > maxScrollTop) {
|
|
||||||
this.ScrollView.scrollTop = maxScrollTop;
|
|
||||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
|
||||||
}
|
|
||||||
this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
|
|
||||||
},
|
|
||||||
getScrollView(DOM) {
|
|
||||||
|
|
||||||
if (this.ScrollView != null) {
|
|
||||||
return this.ScrollView;
|
|
||||||
}
|
|
||||||
let styleStr = DOM.getAttribute('style');
|
|
||||||
|
|
||||||
if (DOM.className == 'uni-scroll-view' && styleStr != null && styleStr.indexOf('overflow') > -1 && styleStr
|
|
||||||
.indexOf(
|
|
||||||
'auto') > -1) {
|
|
||||||
this.ScrollView = DOM;
|
|
||||||
return DOM;
|
|
||||||
} else {
|
|
||||||
this.getScrollView(DOM.firstChild);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* 拖拽排序组件 HM-dragSort
|
|
||||||
* @description 拖拽排序组件 HM-dragSort
|
|
||||||
* @property {ObjectArray} list = [] 列表数据,数据格式[{"name": "花呗","icon": "/static/img/1.png",}]
|
|
||||||
* @property {Boolean} feedbackGenerator = [true|false] 是否拖动触感反馈
|
|
||||||
* @property {Boolean} longTouch = [true|false] 是否长按拖动
|
|
||||||
* @property {Boolean} autoScroll = [true|false] 是否拖拽至边缘自动滚动列表
|
|
||||||
* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序
|
|
||||||
* @property {Number} listHeight = 0 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度
|
|
||||||
* @property {Number} rowHeight = 44 选填,行高,单位:px,默认44px
|
|
||||||
* @property {String} listBackgroundColor 选填,列表底色,注意是列表的底色,不是行的底色,默认#FFFFFF
|
|
||||||
* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}
|
|
||||||
* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'HM-dragSort',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
guid: "",
|
|
||||||
isAppH5: true, //是否APPH5 无需手动配置
|
|
||||||
shadowRow: {}, // 存放被拖拽行数据
|
|
||||||
// 列表数据
|
|
||||||
dragList: [],
|
|
||||||
ListHeight: this.listHeight, // scroll-view列表高度
|
|
||||||
|
|
||||||
// 控制滑动
|
|
||||||
scrollViewTop: 0, // 滚动条位置
|
|
||||||
scrollCommand: null, //传递renderjs数据
|
|
||||||
isHoldTouch: false, //是否正在拖拽
|
|
||||||
isScrolling: false, //是否正在滚动视图
|
|
||||||
scrollAnimation: false, //滚动动画 在微信端开启
|
|
||||||
scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
|
|
||||||
wxsDataObj: [],
|
|
||||||
wxsDataStr: "[]"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// #ifdef VUE3
|
|
||||||
emits: ['change', 'confirm'],
|
|
||||||
// #endif
|
|
||||||
props: {
|
|
||||||
//是否开启拖动震动反馈
|
|
||||||
feedbackGenerator: {
|
|
||||||
value: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 是否开启长按拖动
|
|
||||||
longTouch: {
|
|
||||||
value: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
autoScroll: {
|
|
||||||
value: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
longTouchTime: {
|
|
||||||
value: Number,
|
|
||||||
default: 300
|
|
||||||
},
|
|
||||||
// 列表数据
|
|
||||||
list: {
|
|
||||||
value: Array,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
// 行高度 默认44行高
|
|
||||||
rowHeight: {
|
|
||||||
value: Number,
|
|
||||||
default: 44
|
|
||||||
},
|
|
||||||
// 组件高度 默认windowHeight满屏
|
|
||||||
listHeight: {
|
|
||||||
value: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
listBackgroundColor: {
|
|
||||||
value: String,
|
|
||||||
default: "#fff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
longTouch(val) {
|
|
||||||
// #ifdef VUE3
|
|
||||||
if (!val) {
|
|
||||||
console.error('vue3目前仅支持长按拖拽!');
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
this.pushWxsData('longTouch', val);
|
|
||||||
},
|
|
||||||
longTouchTime(val) {
|
|
||||||
this.pushWxsData('longTouchTime', val);
|
|
||||||
},
|
|
||||||
feedbackGenerator(val) {
|
|
||||||
this.pushWxsData('feedbackGenerator', val);
|
|
||||||
},
|
|
||||||
autoScroll(val) {
|
|
||||||
this.pushWxsData('autoScroll', val);
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
handler(val) {
|
|
||||||
this.initList(val); //数据变化重新初始化list
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
listHeight: {
|
|
||||||
handler(val) {
|
|
||||||
|
|
||||||
this.ListHeight = val;
|
|
||||||
this.pushWxsData('ListHeight', this.ListHeight);
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.guid = this.getGuid();
|
|
||||||
|
|
||||||
const res = uni.getSystemInfoSync();
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
let state = this.compareVersion(res.hostVersion, '2.14.2');
|
|
||||||
if (state < 0) {
|
|
||||||
console.error('当前微信基础库:' + res.hostVersion + ',HM-dragSorts组件仅支持微信基础库2.14.2+,请切换基础库!');
|
|
||||||
}
|
|
||||||
this.scrollAnimation = true;
|
|
||||||
this.isAppH5 = false;
|
|
||||||
// #endif
|
|
||||||
if (this.listHeight == 0) {
|
|
||||||
this.ListHeight = res.windowHeight;
|
|
||||||
// #ifdef VUE3
|
|
||||||
// vue3 要减去导航栏和状态栏高度
|
|
||||||
if (res.windowHeight == res.screenHeight) {
|
|
||||||
this.ListHeight = res.windowHeight - 45 - res.statusBarHeight;
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
this.pushWxsData('isAppH5', this.isAppH5);
|
|
||||||
this.pushWxsData('ListHeight', this.ListHeight);
|
|
||||||
this.pushWxsData('longTouch', this.longTouch);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getGuid() {
|
|
||||||
function S4() {
|
|
||||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
||||||
}
|
|
||||||
return (S4() + S4() + "_" + S4() + "_" + S4() + "_" + S4() + "_" + S4() + S4() + S4());
|
|
||||||
},
|
|
||||||
|
|
||||||
initList() {
|
|
||||||
let tmpList = JSON.parse(JSON.stringify(this.list));
|
|
||||||
for (let i = 0, len = tmpList.length; i < len; i++) {
|
|
||||||
// 组件内赋予临时id和sort
|
|
||||||
if (!tmpList[i].hasOwnProperty('HMDrag_id')) {
|
|
||||||
tmpList[i].HMDrag_id = 'HMDragId_' + this.getGuid();
|
|
||||||
}
|
|
||||||
tmpList[i].HMDrag_sort = i;
|
|
||||||
}
|
|
||||||
if (this.dragList.length > 0) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.dragList.splice(0, this.dragList.length, ...tmpList);
|
|
||||||
}, 50)
|
|
||||||
} else {
|
|
||||||
this.dragList = JSON.parse(JSON.stringify(tmpList));
|
|
||||||
}
|
|
||||||
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
|
||||||
},
|
|
||||||
loadShadowRow(e) {
|
|
||||||
|
|
||||||
this.shadowRow = this.getMoveRow(e.rowSort);
|
|
||||||
},
|
|
||||||
|
|
||||||
//兼容微信小程序震动
|
|
||||||
vibrate() {
|
|
||||||
uni.vibrateShort()
|
|
||||||
},
|
|
||||||
// 控制自动滚动视图
|
|
||||||
pageScroll(e) {
|
|
||||||
// 滚动 up-上滚动 down-下滚动
|
|
||||||
if (e.command == "up" || e.command == "down") {
|
|
||||||
if (!this.isHoldTouch) {
|
|
||||||
this.isHoldTouch = true;
|
|
||||||
this.scrollViewTop = e.scrollTop;
|
|
||||||
}
|
|
||||||
if (this.isScrolling) {
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
this.isScrolling = true;
|
|
||||||
|
|
||||||
if (this.isAppH5) {
|
|
||||||
// APP端和H5端 执行renderjs的滚动
|
|
||||||
e.ListHeight = this.ListHeight;
|
|
||||||
e.rowHeight = this.rowHeight;
|
|
||||||
e.rowLength = this.dragList.length;
|
|
||||||
this.scrollCommand = e;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 微信小程序执行以下逻辑
|
|
||||||
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
|
||||||
let maxHeight = this.rowHeight * this.dragList.length + 1 - this.ListHeight;
|
|
||||||
let runTick = true;
|
|
||||||
// 逻辑层传递到视图层需要时间，可能会出现滚动不流畅现象
|
|
||||||
this.scrollTimer = setInterval(() => {
|
|
||||||
if (!runTick) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.runScroll(e.command, maxHeight);
|
|
||||||
runTick = false;
|
|
||||||
this.$nextTick(function() {
|
|
||||||
runTick = true;
|
|
||||||
})
|
|
||||||
}, 16.6)
|
|
||||||
}
|
|
||||||
// 停止滚动
|
|
||||||
if (e.command == "stop") {
|
|
||||||
// #ifdef APP-PLUS || H5
|
|
||||||
// 停止指定传递到renderjs
|
|
||||||
this.scrollCommand = e;
|
|
||||||
// #endif
|
|
||||||
this.isScrolling && this.stopScroll();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 微信端的滚动
|
|
||||||
runScroll(command, maxHeight) {
|
|
||||||
if (command == "up") {
|
|
||||||
this.scrollViewTop -= 5
|
|
||||||
}
|
|
||||||
if (command == "down") {
|
|
||||||
this.scrollViewTop += 5;
|
|
||||||
}
|
|
||||||
if (this.scrollViewTop < 0) {
|
|
||||||
this.scrollViewTop = 0;
|
|
||||||
clearInterval(this.scrollTimer);
|
|
||||||
}
|
|
||||||
if (this.scrollViewTop > maxHeight) {
|
|
||||||
this.scrollViewTop = maxHeight;
|
|
||||||
clearInterval(this.scrollTimer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//停止滚动
|
|
||||||
stopScroll() {
|
|
||||||
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
|
||||||
this.isScrolling = false;
|
|
||||||
this.scrollingtop = 0;
|
|
||||||
},
|
|
||||||
//
|
|
||||||
getMoveRow(HMDrag_sort) {
|
|
||||||
for (let i = 0, len = this.dragList.length; i < len; i++) {
|
|
||||||
if (this.dragList[i].HMDrag_sort == HMDrag_sort) {
|
|
||||||
return JSON.parse(JSON.stringify(this.dragList[i]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//
|
|
||||||
triggerClick(index, row) {
|
|
||||||
let tmpRow = JSON.parse(JSON.stringify(row));
|
|
||||||
// 清除临时id和sort
|
|
||||||
delete tmpRow.HMDrag_id;
|
|
||||||
delete tmpRow.HMDrag_sort;
|
|
||||||
this.$emit('onclick', {
|
|
||||||
index: index,
|
|
||||||
row: JSON.parse(JSON.stringify(tmpRow))
|
|
||||||
});
|
|
||||||
},
|
|
||||||
change(e) {
|
|
||||||
e.moveRow = this.getMoveRow(e.index);
|
|
||||||
// 清除组件临时赋予的id
|
|
||||||
delete e.moveRow.HMDrag_id;
|
|
||||||
delete e.moveRow.HMDrag_sort;
|
|
||||||
this.$emit('change', e);
|
|
||||||
},
|
|
||||||
sort(e) {
|
|
||||||
this.stopScroll();
|
|
||||||
this.isHoldTouch = false;
|
|
||||||
let moveRow = this.getMoveRow(e.index);
|
|
||||||
// 检测清除临时id和sort
|
|
||||||
delete moveRow.HMDrag_id;
|
|
||||||
delete moveRow.HMDrag_sort;
|
|
||||||
|
|
||||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
|
||||||
let tmpList = [];
|
|
||||||
for (let i = 0, len = list.length; i < len; i++) {
|
|
||||||
// 检测清除临时id和sort
|
|
||||||
delete list[i].HMDrag_id;
|
|
||||||
delete list[i].HMDrag_sort;
|
|
||||||
let index = e.sortArray[i];
|
|
||||||
this.dragList[i].HMDrag_sort = index;
|
|
||||||
tmpList[index] = list[i];
|
|
||||||
}
|
|
||||||
// 触发组件confirm 并传递数据
|
|
||||||
this.$emit('confirm', {
|
|
||||||
list: tmpList,
|
|
||||||
index: e.index,
|
|
||||||
moveTo: e.offset,
|
|
||||||
moveRow: moveRow
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
getNowList(){
|
|
||||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
|
||||||
let tmpList = [];
|
|
||||||
for (let i = 0, len = list.length; i < len; i++) {
|
|
||||||
let tmpSotr = list[i].HMDrag_sort;
|
|
||||||
tmpList[tmpSotr] = list[i];
|
|
||||||
// 检测清除临时id和sort
|
|
||||||
delete tmpList[tmpSotr].HMDrag_id;
|
|
||||||
delete tmpList[tmpSotr].HMDrag_sort;
|
|
||||||
}
|
|
||||||
return tmpList;
|
|
||||||
},
|
|
||||||
splice() {
|
|
||||||
let deleteIndex = arguments[0];
|
|
||||||
let deleteLength = arguments[1];
|
|
||||||
let len = arguments.length;
|
|
||||||
let waitPushList = [];
|
|
||||||
for (let i = 2; i < len; i++) {
|
|
||||||
let newRow = arguments[i]
|
|
||||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
|
||||||
newRow.HMDrag_sort = deleteIndex+i-2;
|
|
||||||
waitPushList.push(newRow);
|
|
||||||
}
|
|
||||||
let minDeleteSort = deleteIndex;
|
|
||||||
let maxDeleteSort = deleteLength>0?deleteIndex+deleteLength-1:deleteIndex;
|
|
||||||
let offsetSort = waitPushList.length - deleteLength;
|
|
||||||
let deleteIndexArray = [];
|
|
||||||
|
|
||||||
for (let i = this.dragList.length-1; i >=0; i--) {
|
|
||||||
let row = this.dragList[i];
|
|
||||||
let rowSort = row.HMDrag_sort;
|
|
||||||
// 跳过
|
|
||||||
if(rowSort<minDeleteSort){
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
// 删除
|
|
||||||
if(deleteLength>0 && rowSort >= minDeleteSort && rowSort <=maxDeleteSort){
|
|
||||||
this.dragList.splice(i,1);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
if(offsetSort!=0 && rowSort>=maxDeleteSort){
|
|
||||||
let newSort = rowSort + offsetSort;
|
|
||||||
this.dragList[i].HMDrag_sort = newSort;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.dragList.push(...waitPushList);
|
|
||||||
this.pushNewSort();
|
|
||||||
|
|
||||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
|
||||||
let tmpList = this.getNowList();
|
|
||||||
return tmpList;
|
|
||||||
},
|
|
||||||
push(){
|
|
||||||
let len = arguments.length;
|
|
||||||
let waitPushList = [];
|
|
||||||
let startSotr = this.dragList.length;
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
let newRow = arguments[i]
|
|
||||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
|
||||||
newRow.HMDrag_sort = startSotr+i;
|
|
||||||
waitPushList.push(newRow);
|
|
||||||
}
|
|
||||||
this.dragList.push(...waitPushList);
|
|
||||||
this.pushNewSort();
|
|
||||||
let tmpList = this.getNowList();
|
|
||||||
return tmpList;
|
|
||||||
},
|
|
||||||
unshift(){
|
|
||||||
let len = arguments.length;
|
|
||||||
let waitPushList = [];
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
let newRow = arguments[i]
|
|
||||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
|
||||||
newRow.HMDrag_sort = i;
|
|
||||||
waitPushList.push(newRow);
|
|
||||||
}
|
|
||||||
for (let i = this.dragList.length-1; i >=0; i--) {
|
|
||||||
let row = this.dragList[i];
|
|
||||||
let rowSort = row.HMDrag_sort;
|
|
||||||
let newSort = rowSort + len;
|
|
||||||
this.dragList[i].HMDrag_sort = newSort;
|
|
||||||
}
|
|
||||||
this.dragList.push(...waitPushList);
|
|
||||||
this.pushNewSort();
|
|
||||||
let tmpList = this.getNowList();
|
|
||||||
return tmpList;
|
|
||||||
},
|
|
||||||
pushNewSort(){
|
|
||||||
let sortArray=[];
|
|
||||||
for (let i = 0,len = this.dragList.length; i<len; i++) {
|
|
||||||
sortArray.push(this.dragList[i].HMDrag_sort);
|
|
||||||
}
|
|
||||||
this.pushWxsData('sortArray', sortArray);
|
|
||||||
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
|
||||||
},
|
|
||||||
pushWxsData(key=null, val=null) {
|
|
||||||
this.wxsDataObj.splice(0,8,['guid', this.guid],
|
|
||||||
['listLength', this.dragList.length],
|
|
||||||
['ListHeight', this.ListHeight],
|
|
||||||
['isAppH5', this.isAppH5],
|
|
||||||
['longTouch', this.longTouch],
|
|
||||||
['longTouchTime', this.longTouchTime],
|
|
||||||
['feedbackGenerator', this.feedbackGenerator],
|
|
||||||
['autoScroll', this.autoScroll]);
|
|
||||||
let index = -1;
|
|
||||||
let sotrArrayIndex = -1;
|
|
||||||
for (let i = 0; i < this.wxsDataObj.length; i++) {
|
|
||||||
if (this.wxsDataObj[i][0] == key) {
|
|
||||||
index = i;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (index > -1) {
|
|
||||||
this.wxsDataObj[index][1] = val;
|
|
||||||
if(key == 'sortArray'){
|
|
||||||
sotrArrayIndex = index;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.wxsDataObj.push([key, val]);
|
|
||||||
if(key == 'sortArray'){
|
|
||||||
sotrArrayIndex = this.wxsDataObj.length-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.guid == "") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.wxsDataStr = JSON.stringify(this.wxsDataObj);
|
|
||||||
},
|
|
||||||
compareVersion(v1, v2) {
|
|
||||||
v1 = v1.split('.')
|
|
||||||
v2 = v2.split('.')
|
|
||||||
const len = Math.max(v1.length, v2.length)
|
|
||||||
|
|
||||||
while (v1.length < len) {
|
|
||||||
v1.push('0')
|
|
||||||
}
|
|
||||||
while (v2.length < len) {
|
|
||||||
v2.push('0')
|
|
||||||
}
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
const num1 = parseInt(v1[i])
|
|
||||||
const num2 = parseInt(v2[i])
|
|
||||||
|
|
||||||
if (num1 > num2) {
|
|
||||||
return 1
|
|
||||||
} else if (num1 < num2) {
|
|
||||||
return -1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
//默认
|
|
||||||
$row-background-color:#fff;
|
|
||||||
$border-color :#c8c7cb;
|
|
||||||
$shadow-color-moveing :rgba(0, 0, 0, 0.5);
|
|
||||||
$drag-icon-color:#c7c7cb;
|
|
||||||
$drag-icon-color-disabled:#e7e7eb;
|
|
||||||
//Dark模式
|
|
||||||
$Dark-row-background-color:#000;
|
|
||||||
$Dark-border-color :#3d3d40;
|
|
||||||
$Dark-shadow-color-moveing :rgba(0, 0, 0, 0.5);
|
|
||||||
$Dark-drag-icon-color:#c7c7cb;
|
|
||||||
$Dark-drag-icon-color-disabled:#e7e7eb;
|
|
||||||
|
|
||||||
//字体图标 拖拽图标
|
|
||||||
@font-face {
|
|
||||||
font-family: "HM-DS-font";
|
|
||||||
src: url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYqxv5sAAAYsAAAAHEdERUYAKQAKAAAGDAAAAB5PUy8yPVJI1gAAAVgAAABWY21hcAAP6o8AAAHAAAABQmdhc3D//wADAAAGBAAAAAhnbHlmwsmUEgAAAxAAAAA0aGVhZBgr3I8AAADcAAAANmhoZWEH3gOFAAABFAAAACRobXR4DAAAAAAAAbAAAAAQbG9jYQAaAAAAAAMEAAAACm1heHABEQAYAAABOAAAACBuYW1lKeYRVQAAA0QAAAKIcG9zdEdJTj8AAAXMAAAANwABAAAAAQAAXdXjiV8PPPUACwQAAAAAANqGzEkAAAAA2obMSQAAALsEAAJFAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEAAwAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5uTm5AOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAAAAAAEAAAABAAAAAAAAAMAAAADAAAAHAABAAAAAAA8AAMAAQAAABwABAAgAAAABAAEAAEAAObk//8AAObk//8ZHwABAAAAAAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoAAAADAAAAuwQAAkUAAwAHAAsAABEhFSEVIRUhFSEVIQQA/AAEAPwABAD8AAJFRlxGXEYAAAAAAAASAN4AAQAAAAAAAAAVACwAAQAAAAAAAQAIAFQAAQAAAAAAAgAHAG0AAQAAAAAAAwAIAIcAAQAAAAAABAAIAKIAAQAAAAAABQALAMMAAQAAAAAABgAIAOEAAQAAAAAACgArAUIAAQAAAAAACwATAZYAAwABBAkAAAAqAAAAAwABBAkAAQAQAEIAAwABBAkAAgAOAF0AAwABBAkAAwAQAHUAAwABBAkABAAQAJAAAwABBAkABQAWAKsAAwABBAkABgAQAM8AAwABBAkACgBWAOoAAwABBAkACwAmAW4ACgBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AAoAAApDcmVhdGVkIGJ5IGljb25mb250CgAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgAAR2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0LgAAaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAaHR0cDovL2ZvbnRlbGxvLmNvbQAAAgAAAAAAAAAKAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAQACAQIMZHJhZ3NlcXVlbmNlAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2obMSQAAAADahsxJ') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-family: "HM-DS-font" !important;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
&.icon-drag {
|
|
||||||
&:before {
|
|
||||||
content: "\e6e4";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义颜色 start
|
|
||||||
//默认颜色
|
|
||||||
.color,
|
|
||||||
.rowBox-shadow {
|
|
||||||
&.scroll-view {
|
|
||||||
border-bottom: 1rpx $border-color solid;
|
|
||||||
border-top: 1rpx $border-color solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hm-row-shadow,
|
|
||||||
.hm-row {
|
|
||||||
.modules {
|
|
||||||
.row-content {
|
|
||||||
.row {
|
|
||||||
border-bottom: solid 1rpx $border-color;
|
|
||||||
background-color: $row-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-content {
|
|
||||||
.drag-icon {
|
|
||||||
border-bottom: solid 1rpx $border-color;
|
|
||||||
background-color: $row-background-color;
|
|
||||||
.iconfont {
|
|
||||||
color: $drag-icon-color;
|
|
||||||
}
|
|
||||||
.disabled{
|
|
||||||
color: $drag-icon-color-disabled;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.move {
|
|
||||||
box-shadow: 0 1px 5px $shadow-color-moveing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暗黑模式
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
|
|
||||||
//Dark模式
|
|
||||||
.color .rowBox-shadow {
|
|
||||||
&.scroll-view {
|
|
||||||
border-bottom: 1rpx $Dark-border-color solid;
|
|
||||||
border-top: 1rpx $Dark-border-color solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hm-row-shadow,
|
|
||||||
.hm-row {
|
|
||||||
.modules {
|
|
||||||
.row-content {
|
|
||||||
.row {
|
|
||||||
border-bottom: solid 1rpx $Dark-border-color;
|
|
||||||
background-color: $Dark-row-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-content {
|
|
||||||
.drag-icon {
|
|
||||||
border-bottom: solid 1rpx $Dark-border-color;
|
|
||||||
background-color: $Dark-row-background-color;
|
|
||||||
.iconfont {
|
|
||||||
color: $Dark-drag-icon-color;
|
|
||||||
}
|
|
||||||
.disabled{
|
|
||||||
color: $Dark-drag-icon-color-disabled;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.move {
|
|
||||||
box-shadow: 0 1px 5px $Dark-shadow-color-moveing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义颜色 end
|
|
||||||
.HM-drag-sort {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.scroll-view {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rowBox,
|
|
||||||
.rowBox-shadow {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.hm-row-shadow,
|
|
||||||
.hm-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.modules {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.row-content {
|
|
||||||
width: 100%;
|
|
||||||
flex-shrink: 1;
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 12px;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-right: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-content {
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
.drag-icon {
|
|
||||||
width: 50px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-size: 22px;
|
|
||||||
color: #c7c7cb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hm-row-shadow {
|
|
||||||
|
|
||||||
&.move {
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
view {
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hm-row {
|
|
||||||
opacity: 1;
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ani {
|
|
||||||
transition: transform 0.2s;
|
|
||||||
-webkit-transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
.hm-row {
|
|
||||||
view {
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rowBox-shadow {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
display: flex !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
// transform-style:preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -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;i<data.length;i++){
|
|
||||||
var arr = data[i];
|
|
||||||
switch (arr[0]){
|
|
||||||
case "sortArray":
|
|
||||||
sortArray = arr[1];
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
if(arr[0]=='guid'){
|
|
||||||
hasGuid = true;
|
|
||||||
}
|
|
||||||
tmp_config[arr[0]] = arr[1];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(!hasGuid){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var isUpdateList = false;
|
|
||||||
if(typeof All_Config[tmp_config.guid] == "undefined" ||typeof All_Config[tmp_config.guid].lastInitTime == "undefined" || All_Config[tmp_config.guid].lastInitTime!=tmp_config.lastInitTime){
|
|
||||||
isUpdateList = true;
|
|
||||||
}
|
|
||||||
All_Config[tmp_config.guid] = tmp_config;
|
|
||||||
if(isUpdateList){
|
|
||||||
updateSortList(tmp_config.guid, instance,sortArray);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 更新guid对应的排序列表
|
|
||||||
function updateSortList(guid, instance,sortArray) {
|
|
||||||
|
|
||||||
sortList[guid]=[];
|
|
||||||
var pageSortList = instance.selectAllComponents('.hm-row');
|
|
||||||
for (var i = 0; i < pageSortList.length; i++){
|
|
||||||
var tmp_row = {id:pageSortList[i].getDataset().id,sort:i,lastSort:parseInt(pageSortList[i].getDataset().sort),newSort:i,rowView:pageSortList[i]};
|
|
||||||
if(sortArray.length>0){
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,117 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
##组件说明
|
|
||||||
|
|
||||||
> * 这是一个传入列表数据会生成一个可拖动排序列表的组件
|
|
||||||
> * 此组件只支持单列多行，UVUE版本支持了多行多列，可以去看看[传送门](https://ext.dcloud.net.cn/plugin?id=15953)
|
|
||||||
> * 因为废弃了插槽，所以，行的样式需要自行到组件内部去修改
|
|
||||||
> * 行内容可以自行到组件，组件只支持每行都相等高度的列表
|
|
||||||
> * 拖动会有触感反馈，如果设备支持的话。
|
|
||||||
> * 组件使用了wxs，兼容APP-VUE、H5、MP-WEIXIN，其他端未做兼容，不支持。
|
|
||||||
> * <font color=#f00>[BUG] vue3下，只支持长按拖拽</font>
|
|
||||||
> * 下载示例并运行，你的很多疑问或得到答案。
|
|
||||||
|
|
||||||
|
|
||||||
###属性说明
|
|
||||||
|
|
||||||
|属性名 |类型 |说明 |
|
|
||||||
|-- |-- |-- |
|
|
||||||
|list|ObjectArray |必填，列表数据，数据格式请参考示例，<br><font color=#f00>注意:数据非双向绑定，拖动并不会直接修改list数据，排序过的数据在confirm中获取</font> |
|
|
||||||
|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);
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
##使用示例
|
|
||||||
页面:
|
|
||||||
```
|
|
||||||
<template>
|
|
||||||
<view class="content">
|
|
||||||
<HM-dragSorts ref="dragSorts" :list="list" :autoScroll="true" :feedbackGenerator="true" :listHeight="300" :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick" ></HM-dragSorts>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
//scoped css只在当前页生效 不影响子组件
|
|
||||||
page {background-color: #efeff4;}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
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 ===');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
###更多的说明请下载示例运行查看，有示例对照注释更容易明白。
|
|
||||||
Loading…
Reference in New Issue