CZKJ.XKJ.Helper/src/pages/assistant/add-platform.vue

<template>
    <div class="page">
        <div v-if="step === 1">
            <radio-group @change="radioChange">
                <div class="list">
                    <label
                        class="item"
                        v-for="item of list"
                        :key="item.platform"
                    >
                        <radio
                            :value="item.platform"
                            :checked="false"
                            :disabled="item.enabled"
                        />
                        <div class="name">
                            {{ item.platformName }}
                            <span class="enabled" v-if="item.enabled"
                                >(已关联)</span
                            >
                        </div>
                    </label>
                </div>
            </radio-group>
            <button class="btn" @click="next()">下一步</button>
        </div>

        <div v-if="step === 2">
            <div class="form-card">
                <section class="form-item">
                    <div class="label">
                        <span class="required">*</span>
                        团长id：
                    </div>
                    <div class="box">
                        <div class="con">
                            <input
                                type="text"
                                v-model="pid"
                                placeholder="90000*****"
                            />
                        </div>
                    </div>
                </section>
            </div>
            <button class="btn" @click="save()">保存</button>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            switchChecked: false,
            groupData: {},
            activeValue: "",
            pid: "",
            step: 1,
            list: [],
        };
    },

    onLoad(opts) {
        this.getAvailablePlatforms();
    },
    async onShow() {},
    // 函数
    methods: {
        getAvailablePlatforms() {
            this.api
                .get("/Group/GetAvailablePlatforms", {}, { pass: true })
                .then((res) => {
                    this.list = res.data;
                });
        },

        radioChange: function (v) {
            this.activeValue = v.detail.value;
        },

        next() {
            if (!this.activeValue) {
                return this.fn.showModal({
                    content: "请先选择平台",
                    showCancel: false,
                });
            }
            this.step = 2;
        },

        save() {
            if (!this.pid) {
                return this.fn.showToast(`请输入团长id`);
            }
            uni.showLoading({
                title: "提交中",
            });
            let sendData = {
                pid: this.pid,
                platform: this.activeValue,
            };
            this.api
                .get("/Group/GetGroupInfo", sendData, { pass: true })
                .then((res) => {
                    uni.hideLoading();
                    if (res.success) {
                        if (res.data) {
                            this.fn
                                .showModal({
                                    title: "团长信息",
                                    content: `当前团店铺名称为：${res.data.shopName},是否确认提交`,
                                })
                                .then((res) => {
                                    if (res.confirm) {
                                        this.commitPid(sendData);
                                    } else {
                                    }
                                });
                        } else {
                            this.fn.showModal({
                                title: "获取团长信息失败",
                                content: "当前团长号未获取到团长信息",
                                showCancel: false,
                            });
                        }
                    } else {
                        this.fn.showModal({
                            title: "获取团长信息失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        commitPid(sendData) {
            let pName = "";
            for (let item of this.list) {
                if (item.platform === this.activeValue) {
                    pName = item.platformName;
                }
            }
            this.api
                .get("/Group/AddJDPlatform", sendData, { pass: true })
                .then((res) => {
                    if (res.success) {
                        this.fn.showModal({
                            title: "添加平台成功",
                            content: `你已成功添加${''},如果需要在群内关联平台，请在群详情下关联平台，获取点击“一键关联群”，现在一键关联`,
                            confirmText: "一键关联",
                            cancelText: "稍后关联",
                            confirmColor: "#42b983",
                            success: (res2) => {
                                if (res2.confirm) {
                                    this.enableShopJDPlatform();
                                } else {
                                    this.router.back();
                                }
                            },
                        });
                    } else {
                        this.fn.showModal({
                            title: "团长号提交失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        enableShopJDPlatform() {
            this.api
                .get("/Group/enableShopJDPlatform", {}, { pass: true })
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("一键关联成功");
                        this.router.back();
                    } 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 {
    min-height: 100vh;
    background-color: #fff;
    padding-bottom: 4rem;
}
.list {
    border-top: 1px solid #f1f1f1;
    .item {
        height: px(130);
        padding: 0 px(35);
        font-size: px(44);
        display: flex;
        // justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
    }
    .arrow {
        width: px(40);
        height: px(40);
        flex-shrink: 0;
        transform: rotate(180deg);
        /deep/ img {
            width: px(40);
            height: px(40);
        }
    }
}
switch {
    transform: scale(0.7);
}
.btn {
    position: fixed;
    bottom: 1rem;
    left: px(30);
    right: px(30);
    z-index: 10;
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
}
.form-card {
    background-color: #fff;
    padding: 0 px(30);
    & ~ .form-card {
        margin-top: px(25);
    }
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(140);
        background-color: #fbfbfb;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        font-size: px(44);
    }
}
.form-item {
    display: flex;
    min-height: px(140);
    padding: px(30) 0;
    box-sizing: border-box;
    align-items: center;
    font-size: px(44);
    border-bottom: 1px solid #f1f1f1;
    &.dis-item {
        color: #999;
        background: #f9f9f9;
    }
    .label {
        width: px(240);
        flex-shrink: 0;
        color: #999;
        margin-right: px(10);
    }
    .box {
        width: 100%;
        position: relative;
        input {
            width: 100%;
        }
    }
    .tool {
        flex-shrink: 0;
        color: #999;
        margin-left: px(10);
    }
    .tip {
        font-size: px(36);
        color: #e6a23c;
        margin-top: px(5);
    }
    textarea,
    input {
        max-width: 100%;
        width: 100%;
    }
}
.required {
    color: #f00;
    font-size: px(44);
    &.hide {
        visibility: hidden;
    }
}
.enabled {
    color: #999;
    margin-left: px(30);
}
</style>