|
|
|
@ -1,32 +1,33 @@ |
|
|
|
<template> |
|
|
|
<div class="payment-wrap"> |
|
|
|
|
|
|
|
<div class="payment-item" v-for="item in paymentList" :key="item.name"> |
|
|
|
<dl> |
|
|
|
<dt> |
|
|
|
<img v-if="item.type == '1'" src="@/assets/register/weixin_pay.png" alt=""> |
|
|
|
<img v-if="item.type == '2'" src="@/assets/register/zhifubao_pay.png" alt=""> |
|
|
|
<img v-if="item.type == '3'" src="@/assets/register/taobao_pay.png" alt=""> |
|
|
|
<img v-if="item.type == '4'" src="@/assets/register/jingdong_pay.png" alt=""> |
|
|
|
</dt> |
|
|
|
<dd> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
<p>{{ item.num }}</p> |
|
|
|
</dd> |
|
|
|
</dl> |
|
|
|
<GuipSwitch :modelValue="item.flag" activeText="开启" inactiveText="关闭" @change="onSwitchChange"> |
|
|
|
</GuipSwitch> |
|
|
|
</div> |
|
|
|
<draggable v-model="list" @start="drag=true" @end="onEnd" :move="checkMove" handle=".drag-handle" > |
|
|
|
<div class="payment-item" v-for="item in list" :key="item.name"> |
|
|
|
<dl> |
|
|
|
<dt class="drag-handle"> |
|
|
|
<img :src="item.img" alt=""> |
|
|
|
</dt> |
|
|
|
<dd> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
<p>{{ item.num }}</p> |
|
|
|
</dd> |
|
|
|
</dl> |
|
|
|
<el-form> |
|
|
|
<GuipSwitch :modelValue="item.flag" activeText="开启" inactiveText="关闭" @change="onSwitchChange"> |
|
|
|
</GuipSwitch> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</draggable> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|
|
|
|
|
|
|
import draggable from 'vuedraggable'; |
|
|
|
export default { |
|
|
|
name: '', |
|
|
|
props:['paymentList'], |
|
|
|
components: { |
|
|
|
GuipSwitch |
|
|
|
GuipSwitch, |
|
|
|
draggable |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
@ -35,13 +36,48 @@ export default { |
|
|
|
'2':'zhifubao_pay.png', |
|
|
|
'3':'taobao_pay.png', |
|
|
|
'4':'jingdong_pay.png', |
|
|
|
} |
|
|
|
}, |
|
|
|
list:[], |
|
|
|
drag: false, |
|
|
|
} |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
paymentList: { |
|
|
|
immediate: true, |
|
|
|
handler(newVal) { |
|
|
|
this.list = newVal; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
onSwitchChange(data){ |
|
|
|
// 开关逻辑 |
|
|
|
console.log(data,'---'); |
|
|
|
}, |
|
|
|
onEnd() { |
|
|
|
this.drag = false; |
|
|
|
// list 为排序后的新数据 如果需要修改props 的 paymentList 需要$emit或者其他方法更新 |
|
|
|
console.log('Drag and drop ended', this.list); // 可以处理拖拽结束后的逻辑，例如更新数据等。 |
|
|
|
}, |
|
|
|
checkMove(evt) { |
|
|
|
// 获取将要移动到的位置索引 |
|
|
|
const targetIndex = this.list.length - 1; // 最后一项的索引是列表长度减1 |
|
|
|
// 如果当前拖拽项即将移动到最后一项，则不允许移动 |
|
|
|
// console.log(evt.relatedContext.index === evt.draggedContext.index,targetIndex === evt.draggedContext.index,'0000targetIndex00'); |
|
|
|
if ((evt.relatedContext.index === targetIndex) || (targetIndex === evt.draggedContext.index)) { |
|
|
|
return false; // 不允许移动到最后一项 |
|
|
|
} |
|
|
|
return true; // 其他情况允许移动 |
|
|
|
} |
|
|
|
// onStart(event) { |
|
|
|
// console.log(event,'event===='); |
|
|
|
// // 获取当前拖动的元素索引 |
|
|
|
// const index = this.list.findIndex(item => item.id === event.draggedContext.element.id); |
|
|
|
// // 如果不是最后一项，则允许拖拽；否则阻止拖拽（通过调用 event.cancel()） |
|
|
|
// if (index === this.list.length - 1) { |
|
|
|
// event.cancel(); // 阻止拖拽开始 |
|
|
|
// } |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -77,5 +113,8 @@ export default { |
|
|
|
color: #1E2226; |
|
|
|
} |
|
|
|
} |
|
|
|
.drag-handle { |
|
|
|
cursor: move; /* 鼠标悬停时显示可拖拽光标 */ |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
zq
2 months ago