CZKJ.XKJ.Helper/src/pages/assistant/set-welcome.vue

<template>
    <div class="page">
        <div class="list-item" v-for="(item, index) of welcome" :key="index">
            <div class="con">
                <div class="l-con">
                    <div class="index">第{{ index + 1 }}条：</div>
                    <div class="type">{{ item.type | welcomeType }}</div>
                </div>
                <div class="r-con">
                    <block v-if="item.type === 1">
                        <div @click="viewImg(item.content)">
                            <my-image
                                class="main-img"
                                :src="item.content"
                            ></my-image>
                        </div>
                    </block>
                    <block v-else>{{ item.content }}</block>
                </div>
            </div>
            <div class="tool" @click="menu(item, index)">
                <my-image class="menu" src="/static/icon/menu.png"></my-image>
            </div>
        </div>

        <div class="btns">
            <button type="button" class="btn" @click="add">
                添加群欢迎消息
            </button>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
let welcomeType = {
    0: "文字",
    1: "图片",
    2: "视频",
    3: "网页链接",
    4: "小程序",
    5: "产品",
    6: "优惠券",
    7: "产品列表",
    8: "首页",
    9: "会员码",
    10: "今日推荐",
    11: "京东首页",
    12: "京东秒杀",
    13: "微信名片",
    14: "平台店铺首页",
    15: "平台产品页",
    16: "平台优惠券",
    17: "平台会员码",
    18: "平台今日推荐",
    19: "平台产品分类页",
    999: "登录码",
};
export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            groupData: {},
            welcome: [],
        };
    },
    filters: {
        welcomeType(v) {
            return welcomeType[v] || "";
        },
    },

    onLoad(opts) {},
    async onShow() {
        this.getList();
    },
    // 函数
    methods: {
        getList() {
            let gid = this.$store.state.common.groupData._id;
            this.api
                .get("/Group/GetGroup", { gid }, { pass: true })
                .then((res) => {
                    this.groupData = res.data;
                    this.welcome = this.groupData.welcome || [];
                });
        },
        menu(item, index) {
            // "上移", "下移"
            let arr = ["编辑", "删除"];
            if (index !== 0) {
                arr.push("上移");
            }
            if (index !== this.welcome.length - 1) {
                arr.push("下移");
            }
            uni.showActionSheet({
                itemList: arr,
                success: (res) => {
                    let tapIndex = res.tapIndex;
                    switch (arr[tapIndex]) {
                        case "编辑":
                            this.edit(item, index);
                            break;
                        case "删除":
                            this.remove(item, index);
                            break;
                        case "上移":
                            this.up(item, index);
                            break;
                        case "下移":
                            this.down(item, index);
                            break;
                    }
                    console.log(res, item);
                },
            });
        },
        edit(v, index) {
            this.$store.commit("common/update", {
                welcomeData: this.welcome,
                welcomeItemData: v,
            });
            this.router.push({
                path: "/pages/assistant/welcome-item",
                query: {
                    type: index,
                    gid: this.groupData._id,
                    index
                },
            });
        },
        up(v, index) {
            let arr = [...this.welcome];
            arr.splice(index, 1);
            arr.splice(index - 1, 0, v);
            let data = {
                id: this.groupData._id,
                welcome: [...arr],
            };
            this.api
                .post("/Group/SetWelcome", data, { pass: true })
                .then((res) => {
                    this.submitLoading = false;
                    if (res.success) {
                        this.fn.showToast("移动成功");
                        this.welcome = arr;
                    } else {
                        this.fn.showModal({
                            title: "移动失败",
                            content: "错误信息:" + res.message,
                            showCancel: false,
                        });
                    }
                });
        },
        down(v, index) {
            let arr = [...this.welcome];
            arr.splice(index, 1);
            arr.splice(index + 1, 0, v);

            let data = {
                id: this.groupData._id,
                welcome: [...arr],
            };
            this.api
                .post("/Group/SetWelcome", data, { pass: true })
                .then((res) => {
                    this.submitLoading = false;
                    if (res.success) {
                        this.fn.showToast("移动成功");
                        this.welcome = arr;
                    } else {
                        this.fn.showModal({
                            title: "移动失败",
                            content: "错误信息:" + res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        remove(v, index) {
            this.welcome.splice(index, 1);
            console.log(this.welcome, index);
            let data = {
                id: this.groupData._id,
                welcome: this.welcome,
            };
            this.api
                .post("/Group/SetWelcome", data, { pass: true })
                .then((res) => {
                    this.submitLoading = false;
                    uni.hideLoading();
                    if (res.success) {
                        this.fn.showToast("删除成功");
                    } else {
                        this.fn.showModal({
                            title: "删除失败",
                            content: "错误信息:" + res.message,
                            showCancel: false,
                        });
                    }
                });
        },
        add() {
            uni.showActionSheet({
                //, , "小程序消息"
                itemList: ["文字消息", "图片消息"],
                success: (res) => {
                    let index = res.tapIndex;

                    this.$store.commit("common/update", {
                        welcomeData: this.welcome,
                    });
                    this.router.push({
                        path: "/pages/assistant/welcome-item",
                        query: {
                            type: index,
                            gid: this.groupData._id,
                        },
                    });
                },
            });
        },

        viewImg(url) {
            uni.previewImage({
                urls: [url],
            });
        },
    },

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

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

<style lang="scss" scoped>
.page {
    padding-bottom: 4em;
}
.list-item {
    padding: px(40);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1;
    .menu {
        width: px(60);
        height: px(60);
        flex-shrink: 0;
        margin-left: px(40);
        /deep/ img {
            width: px(60);
            height: px(60);
        }
    }
    .con {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .l-con {
        width: px(220);
        flex-shrink: 0;
        margin-right: px(10);
        .index {
            font-size: px(44);
        }
        .type {
            font-size: px(42);
            margin-top: px(10);
            color: #666;
        }
    }
    .r-con {
        width: 100%;
        font-size: px(44);
        line-height: 1.5;
    }
}
.btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    .btn {
        background-color: rgb(0, 188, 38);
        color: #fff;
        border-radius: 0;
        font-size: px(50);
        border: none;
        width: 100%;
        & ~ .btn {
            border-left: 1px solid #999;
        }
    }
}
.main-img {
    width: px(200);
    height: px(200);
    /deep/ img {
        width: px(200);
        height: px(200);
    }
}
</style>