kuailelunwen_new_houtai/src/components/paymentMethod.vue

<template>
    <div class="payment-wrap">
        <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,
    draggable
  },
  data(){
    return {
        payImg:{
            '1':'weixin_pay.png',
            '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>
<style lang="scss">
.payment-wrap{
    .payment-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        dl{
            display: flex;
        }
        dt img{
            width: 32px;
            height: 32px;
        }
        dd{
            margin-left: 12px;
            p{
                font-size: 12px;
                font-weight: normal;
                line-height: 13px;
                letter-spacing: 0.08em;
                font-variation-settings: "opsz" auto;
                text-align: left;
                color: #8A9099;
            }
        }
        dd p:first-child{
            font-size: 14px;
            line-height: 18px;
            margin-bottom: 6px;
            color: #1E2226;
        }
    }
    .drag-handle {
        cursor: move;  /* 鼠标悬停时显示可拖拽光标 */
    }
}
</style>