<template>
<div
<van-col :span="24">
<van-list
v-model="loading"
:finished="finished"
:finished-text="加载中"
@load="onLoadShopProductList"
>
<vuedraggable v-model="list" draggable=".item" @update="datadragEnd" :delay="80" :options = "{animation:800}" :disabled="this.disabled">
<transition-group>
<div v-for="(item, k) in list" :key="k" class="item">
<div class="shop_roduct_list_bor">
<van-row>
<van-col span="6">
<van-image class="shop_roduct_list_img" src="https://img.yzcdn.cn/vant/cat.jpeg" />
</van-col>
<van-col span="18">
<van-col span="24" class="shop_roduct_list_title"> {{ item.shop_name }}</van-col
<van-col span="20" offset="4" class="shop_roduct_list_bottom">
<van-row gutter="10">
<van-col span="6" class="shop_roduct_list_edit" @click="addShop(item.id)">编辑</van-col>
<van-col span="6" class="shop_roduct_list_edit" @click="deleteShop(item.id)">删除</van-col>
</van-row>
</van-col>
</van-col>
</van-row>
</div>
</div>
</transition-group>
</vuedraggable>
</van-list>
</van-col>
</div>
</template>
<script>
import axios from "axios";
import { Toast, Dialog } from 'vant'
import vuedraggable from 'vuedraggable'
export default {
name: "draggable",
components:{ vuedraggable },
data() {
return {
disabled: false,
list: [
{
"name": ''
'id' :48
'status':0,
'user_id' : 200743,
"order": 2,
"fixed": false
}, {
"name": ''
'id' :48
'status':0,
'user_id' : 200743,
"order": 2,
"fixed": false
}, {
"name": ''
'id' :48
'status':0,
'user_id' : 200743,
"order": 2,
"fixed": false
},
{
"name": ''
'id' :48
'status':0,
'user_id' : 200743,
"order": 2,
"fixed": false
},
],
loading: false,
finished: false,
longClick:false,
page: 0,
isLoading: false,
}
},
created: function () {
document.title = ‘标题’;
},
methods: {
datadragEnd(e) {
// 最大key值
const oldIndex = e.oldIndex
// 最小key值
const newIndex = e.newIndex
let i = newIndex > oldIndex ? oldIndex : newIndex
const d = newIndex > oldIndex ? newIndex : oldIndex
let indexAaary = []
for(i; i <= d; i++) {
let indexValue = {}
if(newIndex > oldIndex){
// 向下排序
if( i === newIndex){
indexValue.id = this.list[newIndex].id
indexValue.order = this.list[newIndex - 1].order - 1
}else{
indexValue.id = this.list[i].id
indexValue.order = this.list[i].order + 1
}
}else{
// 向上排序
indexValue.id = this.list[i].id
indexValue.order = i === newIndex ? this.list[newIndex + 1].order : this.list[i].order - 1
}
this.list[i].id = indexValue.id
this.list[i].order = indexValue.order
indexAaary.push(indexValue)
}
this.updateOrder(indexAaary);
},
updateOrder(indexAaary) {
const uid = this.$route.query.uid;
const token = this.$route.query.token;
axios.get(this.baseUrlApi + "/mapi/public/index.php/api/shop_api/goods_order", {
params: {
uid: uid,
token: token,
order: JSON.stringify(indexAaary)
}
}).then(res => {});
},
addShop(id) {
// 添加商
},
onLoadShopProductList: function () {
// ajax请求数据
}
}
}
</script>
<style scoped>
</style>