CZKJ.XKJ.Helper/src/pages/manage/shop/set-tab.vue

<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <ul class="classify-list">
            <li class="item" v-for="(item, index) of dataList" :key="index">
                <div class="con">
                    <div class="name">{{ item.title }}</div>
                </div>
                <div class="tool">
                    <div v-if="index!=0" class="setting" @click="move(item,true,index)">上移</div>
                    <div  v-if="index!=dataList.length-1" class="setting" @click="move(item,false,index)">下移</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";

export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            storeConfig:{},
            dataList: [
                { name: "shop", index: 0, title: "店铺" },
                { name: "yx", index: 1, title: "厂商直邮" },
            ],
        };
    },

    onLoad() {},
    async onShow() {
        this.getStoreConfig();
    },
    // 函数
    methods: {
        getStoreConfig() {
            this.api
                .get(
                    "/Shop/gettab",
                    { pass: true }
                )
                .then((infoRes) => {
                    this.dataList = JSON.parse(infoRes.data);
                });
        },

        setData(data) {
            for (let item of data) {
                if (item.name === "shop") {
                    item.title = "店铺商品";
                }
                if (item.name === "yx") {
                    item.title = "厂商直邮";
                }
            }
            data.sort((x, y) => x.index - y.index);
            return data;
        },

        // 移动  up 上移或下移，true-上移，false-下移
        move(val, up,index) {
            if(up){
                let upItem = this.dataList[index-1];
                let item = this.dataList[index];
                let itemIndex = item.index;
                item.index = upItem.index;
                upItem.index = itemIndex;
            }else{
                let downItem = this.dataList[index+1];
                let item = this.dataList[index];
                let itemIndex = item.index;
                item.index = downItem.index;
                downItem.index = itemIndex;
            }
            this.dataList.sort((x, y) => x.index - y.index);
            this.dataList = [...this.dataList];
            this.api
                .get("/Shop/Settab", {
                    tab: JSON.stringify(this.dataList),
                },{pass:true})
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("移动成功");
                    } else {
                        this.fn.showModal({
                            title: "移动失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(180);
    min-height: 100vh;
    background-color: #fff;
}
.add-classify {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: px(150);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: px(44);
    color: #fff;
    background-color: rgb(0, 188, 38);
}
.page--iphoneX {
    .add-classify {
        padding-bottom: px(30);
    }
}
.classify-list {
    .item {
        display: flex;
        padding: px(30) px(35);
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f1f1f1;
        .tool {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .setting {
            width: px(140);
            height: px(80);
            border: 1px solid #b7b7b7;
            border-radius: px(8);
            color: #666;
            font-size: px(40);
            display: flex;
            align-items: center;
            justify-content: center;
            & ~ .setting {
                margin-left: px(30);
            }
        }
        .con {
            width: 50%;
            padding-right: px(44);
            position: relative;
        }
        .name {
            font-size: px(44);
            color: #333;
        }

        .des {
            font-size: px(36);
            margin-top: px(20);
            color: #666;
            @include omit(100%);
        }
        .arrow {
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 10;
            transform: translate(0, -50%) rotate(180deg);
            width: px(44);
            height: px(44);
            transition: all 0.3s;
            /deep/ img {
                height: px(44);
                width: px(44);
            }
            &.up {
                transform: translate(0, -50%) rotate(90deg);
            }
        }
        .status {
            width: px(120);
            height: px(44);
            background-color: #e7faf0;
            border-radius: px(8);
            border: 1px solid #d0f5e0;
            font-size: px(32);
            color: #13ce66;
            padding: px(6) px(3);
            margin-right: px(30);
            display: flex;
            align-items: center;
            justify-content: center;
            &.up {
                background-color: #ffeded;
                border-color: #ffdbdb;
                color: #ff4949;
            }
        }
    }
    .item-child {
        padding-left: px(60);
        background-color: #efefef;
    }
}
</style>