micro_vue/src/scrm_pages/sms/sms_send.vue

<template>
    <div class="main-contain" v-loading="sending">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
        </div>
        <div class="app-container" style="padding: 0 5px; background-color: #f6f8f9;">
            <div class="main-panel">
                <div class="preview-panel">
                    <div class="form-title">
                        <img class="icon" src="@/assets/img/sa_06.png" />
                        <span>预览</span>
                    </div>
                    <div class="form-content">
                        <div class="preview">
                            <div class="bg">
                                <div class="scroll">
                                    <div class="fake-time">9:41</div>
                                    <div class="content">
                                        {{ content_preview }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="edit-panel">
                    <div class="form-title">
                        <img class="icon" src="@/assets/img/sa_7.png" />
                        <span>短信编辑</span>
                    </div>
                    <div class="form-content">
                        <div class="input-panel">
                            <el-input v-model="sms_content" type="textarea" :rows="4" resize="none" maxlength="500"></el-input>
                            <div class="hint-text">已输入{{ total_content_length }}字（含签名和尾缀）按{{ sms_charge_count }}条短信计费</div>
                        </div>
                        <div v-if="designated_targets.length == 0" class="filters-panel">
                            <div class="send-all-panel">
                                <div class="text">
                                    <p class="title">推送全部客户</p>
                                    <p class="desc">将该短信推送给系统里的所有客户</p>
                                </div>
                                <div class="btn">
                                    <el-button type="primary" @click="sendToAllCustomersAction">发送</el-button>
                                </div>
                            </div>
                            <div class="tag-filter-panel">
                                <p class="title">按标签推送</p>
                                <p class="desc">将该短信推送给相应标签客户</p>
                                <div class="tag-panel">
                                    <div v-for="(tag, index) in tags" class="item-panel" :key="index">
                                        <el-tag :effect="tagEffect(tag)" @click="selectTagAction(tag)" @close="cancelSelectTagAction(tag)" :closable="isTagSelected(tag)">{{ tag.tag_name }}</el-tag>
                                    </div>
                                </div>
                                <p class="hint-text">*选择标签发送可以帮助您精准营销</p>
                                <div class="send">
                                    <p class="text">已为您筛选 {{ tag_filtered_count }} 位客户</p>
                                    <div class="btn">
                                        <el-button type="primary" @click="sendToTagCustomersAction">发送</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="designated-targets-panel" v-else>
                            <div class="send-panel">
                                <div class="title">
                                    推送指定客户
                                </div>
                                <div class="btn">
                                    <el-button type="primary" @click="sendToDesignatedCustomersAction">发送</el-button>
                                </div>
                            </div>
                            <el-table :data="designated_targets" border max-height="500px">
                                <el-table-column label="客户" prop="name" align="center"></el-table-column>
                                <el-table-column label="手机号" prop="mobile" align="center"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from "@/scrm_pages/components/bread-crumb"
import { sendsInitData, tagFilterCustomerCount, send2AllCustomers, send2TagCustomers, send2SpecificCustomers } from "@/api/sms"

export default {
    name: "SMSSend",
    components: {
        BreadCrumb,
    },
    data() {
        return {
            crumbs: [
                { path: false, name: "短信管理" },
                { path: false, name: "群发短信" },
            ],

            sending: false,
            sms_content: "",
            tags: [],
            selecting_tags: [],
            tag_filtered_count: 0,

            action: 0,
            id: 0,
            designated_targets: [],
        }
    },
    computed: {
        content_preview: function() {
            return "【酷医聚客】" + this.sms_content + "退订回TD"
        },
        total_content_length: function() {
            return this.content_preview.length
        },
        sms_charge_count: function() {
            return parseInt(Math.ceil(this.total_content_length / 67.0))
        },
    },
    mounted() {
        this.designated_targets = this.$store.getters.sms_designated_targets.targets
        if (this.designated_targets.length > 0) {
            this.$store.dispatch("SMSClearTargets")
        } else {
            var action = this.$route.query.action
            var id = this.$route.query.id
            if (action != undefined && id != undefined) {
                this.action = action
                this.id = id
            }

            this.getInitData()
        }
    },
    methods: {
        getInitData: function() {
            sendsInitData(this.action, this.id).then(rs => {
                var resp = rs.data
                if (resp.state == 1) {
                    this.tags = resp.data.tags
                    this.sms_content = resp.data.default_content

                } else {
                    this.$message.error(resp.msg)
                }

            }).catch(err => {
                this.$message.error(err)
            })
        },
        getTagCustomerCount: function() {
            var tag_ids = []
            for (let index = 0; index < this.selecting_tags.length; index++) {
                tag_ids.push(this.selecting_tags[index].id)
            }
            if (tag_ids.length == 0) {
                this.tag_filtered_count = 0
                return
            }
            tagFilterCustomerCount(tag_ids.join(",")).then(rs => {
                var resp = rs.data
                if (resp.state == 1) {
                    this.tag_filtered_count = resp.data.count
                } else {
                    console.log(resp.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },

        tagEffect: function(tag) {
            if (this.isTagSelected(tag)) {
                return "dark"
            } else {
                return "plain"
            }
        },
        isTagSelected: function(tag) {
            for (let index = 0; index < this.selecting_tags.length; index++) {
                if (this.selecting_tags[index].id == tag.id) {
                    return true
                }
            }
            return false
        },
        selectTagAction: function(tag) {
            if (!this.isTagSelected(tag)) {
                this.selecting_tags.push(tag)
                this.getTagCustomerCount()
            }
        },
        cancelSelectTagAction: function(tag) {
            for (let index = 0; index < this.selecting_tags.length; index++) {
                if (this.selecting_tags[index].id == tag.id) {
                    this.selecting_tags.splice(index, 1)
                    this.getTagCustomerCount()
                    break
                }
            }
        },

        isSMSContentValid: function() {
            if (this.sms_content.length == 0) {
                this.$message.error("请编辑短信内容")
                return false
            }
            if (this.sms_content.indexOf("【") >= 0 || this.sms_content.indexOf("】") >= 0) {
                this.$message.error("短信内容不得包含【】")
                return false
            }
            return true
        },
        sendToAllCustomersAction: function() {
            if (!this.isSMSContentValid()) {
                return
            }
            this.sending = true
            send2AllCustomers(this.sms_content).then(rs => {
                this.sending = false
                var resp = rs.data
                if (resp.state == 1) {
                    this.$message.success("发送成功")
                } else {
                    this.$message.error(resp.msg)
                }

            }).catch(err => {
                this.sending = false
                this.$message.error(err)
            })
        },
        sendToTagCustomersAction: function() {
            if (!this.isSMSContentValid()) {
                return
            }
            if (this.selecting_tags.length == 0) {
                this.$message.error("请选择标签")
                return
            }

            var tag_ids = []
            for (let index = 0; index < this.selecting_tags.length; index++) {
                tag_ids.push(this.selecting_tags[index].id)
            }

            this.sending = true
            send2TagCustomers(this.sms_content, tag_ids.join(",")).then(rs => {
                this.sending = false
                var resp = rs.data
                if (resp.state == 1) {
                    this.$message.success("发送成功")
                } else {
                    this.$message.error(resp.msg)
                }

            }).catch(err => {
                this.sending = false
                this.$message.error(err)
            })
        },
        sendToDesignatedCustomersAction: function() {
            if (!this.isSMSContentValid()) {
                return
            }
            var customer_ids = []
            for (let index = 0; index < this.designated_targets.length; index++) {
                customer_ids.push(this.designated_targets[index].id)
            }

            this.sending = true
            send2SpecificCustomers(this.sms_content, customer_ids.join(",")).then(rs => {
                this.sending = false
                var resp = rs.data
                if (resp.state == 1) {
                    this.$message.success("发送成功")
                } else {
                    this.$message.error(resp.msg)
                }

            }).catch(err => {
                this.sending = false
                this.$message.error(err)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.main-panel {
    width: 100%;
    display: flex;
    min-height: 600px;
    height: auto;
    box-sizing: border-box;

    .preview-panel {
        flex: 3;
        margin-right: 1rem;
        background-color: #fff;

        .form-content {
            width: 100%;
            padding: 14px 30px 14px 30px;

            .preview {
                width: 320px;
                height: 568px;
                background: #fff;
                position: relative;
                margin: 0 auto;

                .bg {
                    position: relative;
                    padding-top: 85px;
                    padding-bottom: 40px;
                    width: 320px;
                    height: 568px;
                    background: url(../../assets/img/message_preview_bg.png) 50% no-repeat;
                    background-image: -webkit-image-set(url(../../assets/img/message_preview_bg.png) 1x,url(../../assets/img/message_preview_bg@2x.png) 2x);
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;

                    .scroll {
                        height: 430px;
                        overflow-x: hidden;
                        overflow-y: auto;

                        .fake-time {
                            margin: auto;
                            width: 310px;
                            line-height: 40px;
                            font-size: 12px;
                            text-align: center;
                            color: #999;
                            background: #fff;
                        }

                        .content {
                            display: inline-block;
                            position: relative;
                            left: 20px;
                            margin-bottom: 12px;
                            padding: 8px 15px;
                            max-width: 260px;
                            word-break: break-all;
                            font-size: 16px;
                            line-height: 1.25;
                            color: #000;
                            background: #e5e5ea;
                            border-radius: 17px;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            box-sizing: border-box;
                        }
                        .content::before {
                            content: "";
                            position: absolute;
                            bottom: -2px;
                            left: -7px;
                            height: 20px;
                            border-left: 20px solid #e5e5ea;
                            border-bottom-right-radius: 16px 14px;
                            -webkit-transform: translateY(-2px);
                            -moz-transform: translateY(-2px);
                            -ms-transform: translateY(-2px);
                            transform: translateY(-2px);
                        }
                        .content::after {
                            content: "";
                            position: absolute;
                            bottom: -2px;
                            left: 20px;
                            width: 10px;
                            height: 20px;
                            background: #fff;
                            border-bottom-right-radius: 10px;
                            -webkit-transform: translate(-30px,-2px);
                            -moz-transform: translate(-30px,-2px);
                            -ms-transform: translate(-30px,-2px);
                            transform: translate(-30px,-2px);
                        }
                    }
                    .scroll::-webkit-scrollbar {
                        width: 5px;
                    }
                }
            }
        }
    }

    .edit-panel {
        flex: 4;
        padding-bottom: 80px;
        background-color: #fff;

        .form-content {
            width: 100%;
            padding: 14px 30px 14px 30px;

            .input-panel {
                padding-top: 10px;

                .hint-text {
                    margin-top: 5px;
                    font-size: 12px;
                    color: #a8b3ba;
                    line-height: 30px;
                }
            }

            .filters-panel {
                margin-top: 50px;

                .send-all-panel {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .text {
                        flex: 1;

                        .title {
                            font-size: 16px;
                            color: #485b6d;
                            font-weight: bold;
                            height: 30px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                        .desc {
                            font-size: 14px;
                            color: #7b8a97;
                        }
                    }
                    .btn {
                        text-align: right;
                    }
                }
                .tag-filter-panel {
                    margin-top: 50px;

                    .title {
                        font-size: 16px;
                        color: #485b6d;
                        font-weight: bold;
                        height: 30px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .desc {
                        font-size: 14px;
                        color: #7b8a97;
                    }
                    .tag-panel {
                        margin-top: 15px;
                        padding: 10px 15px 5px;
                        background: #f4f7fa;

                        .item-panel {
                            display: inline-block;
                            margin-bottom: 5px;
                            margin-right: 5px;
                        }
                    }
                    .hint-text {
                        font-size: 12px;
                        color: #a8b3ba;
                        line-height: 30px;
                        margin-top: 10px;
                    }
                    .send {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 15px;

                        .text {
                            flex: 1;
                            color: #7b8a97;
                            font-size: 14px;
                        }
                        .btn {
                            text-align: right;
                        }
                    }
                }
            }

            .designated-targets-panel {
                margin-top: 20px;

                .send-panel {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 10px;

                    .title {
                        flex: 1;
                        font-size: 16px;
                        color: #485b6d;
                        font-weight: bold;
                        height: 100%;
                    }
                    .btn {
                        text-align: right;
                    }
                }
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.form-title {
    width: 100%;
    height: 60px;
    padding: 20px 0 20px 30px;
    border-bottom: 1px #dee2e5 solid;

    .icon {
        margin-top: -4px;
        vertical-align: middle;
    }

    span {
        font-size: 18px;
        font-weight: 500;
        color: #485b6d;
        margin-left: 10px;
    }
}
</style>