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, index) in list" :key="item.name">
                <dl :class="index === list.length - 1 ? '' : 'drag-handle'">
                    <img v-if="item.pay_type == '1'" src="@/assets/register/card_pay.png" alt="">
                    <img v-if="item.pay_type == '2'" src="@/assets/register/weixin_pay.png" alt="">
                    <img v-if="item.pay_type == '3'" src="@/assets/register/zhifubao_pay.png" alt="">
                    <img v-if="item.pay_type == '4'" src="@/assets/register/taobao_pay.png" alt="">
                    <dd>
                        <p class="pay-name">{{ item.name }}</p>
                        <p v-if="item.account" class="pay-account">{{ item.account }}</p>
                    </dd>
                </dl>
                <el-form>
                    <GuipSwitch :modelValue="item.status" :active-value="1" :inactive-value="0" activeText="开启" inactiveText="关闭" @change="onSwitchChange(item)">
                    </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':'@/assets/register/weixin_pay.png',
            '2':'@/assets/register/zhifubao_pay.png',
            '3':'@/assets/register/taobao_pay.png',
            '4':'@/assets/register/jingdong_pay.png',
        },
        list:[],
        drag: false,
    }
  },
  watch:{
    paymentList: {
        immediate: true,
        handler(newVal) {
            this.list = newVal;
        },
    },
  },
  methods:{
    onSwitchChange(data){
        data.status = data.status === 1 ? 0 : 1;
        this.$emit('confirm', this.list)
    },
    onEnd() {
        this.drag = false;
        this.$emit('confirm', 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{
        padding: 24px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #DFE2E6;
        dl{
            display: flex;
            align-items: center;
            margin: 0;
        }
        dl img{
            width: 22px;
        }
        dd{
            text-align: left;
            margin-left: 12px;
            font-variation-settings: "opsz" auto;
            letter-spacing: 0.08em;
            .pay-name{
                font-size: 14px;
                line-height: 18px;
                color: #1E2226;
            }
            .pay-account{
              font-size: 12px;
              line-height: 13px;
              margin-top: 6px;
              color: #8A9099;
            }
        }

        .el-form-item{
          margin: 0;
        }
    }
    .drag-handle {
        cursor: move;  /* 鼠标悬停时显示可拖拽光标 */
    }
}
</style>