店铺tab设置

src/pages.json

@@ -589,6 +589,12 @@
             "style": {
                 "navigationBarTitleText": "我的邀请码"
             }
+        },
+        {
+            "path": "pages/manage/shop/set-tab",
+            "style": {
+                "navigationBarTitleText": "修改店铺tab"
+            }
         }
     ]
 }

src/pages/manage/index.vue

@@ -92,7 +92,7 @@
 
         <!-- <button class="btn" @click="layout">退出登录</button> -->
 
-        <div class="ver">0.5.591</div>
+        <div class="ver">0.5.6</div>
         <wyg-bottom-tab
             ref="tabbar"
             :tabIndex="2"

src/pages/manage/shop/index.vue

@@ -22,6 +22,13 @@
                     src="/static/common/arrows_left.png"
                 ></my-image>
             </li>
+            <li class="item" @click="jump('/pages/manage/shop/set-tab')">
+                <div class="name">店铺tab顺序设置</div>
+                <my-image
+                    class="arrow"
+                    src="/static/common/arrows_left.png"
+                ></my-image>
+            </li>
             <li class="item">
                 <div class="name">开启厂商直邮</div>
                 <switch

src/pages/manage/shop/set-tab.vue

@@ -0,0 +1,222 @@
+<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>