mashangyoujiu/Public/Retail/js/vip/edit-vip-label.js

//编辑会员资料
Vue.component('edit-vip-label', {
    template: `<el-dialog title="修改标签" :modal-append-to-body="false"
                          :visible.sync="show"
                          width="600px"
                          :before-close="closeDialog"
                          :close-on-click-modal="false">
                    <el-select v-model="choose_tag.name"
                               placeholder="请选择标签"
                               v-load-more="getTagList"
                               clearable
                               filterable
                               remote
                               :disabled="vipTags.length>=20?true:false"
                               :remote-method="searchTag"
                               @change="chooseTag"
                               size="small">
                        <el-option v-for="(item,index) in tagList"
                                   :disabled="verifyTag(item.id)"
                                   :label="item.name"
                                   :key="item.id+''+index"
                                   :value="item"></el-option>
                    </el-select>
                    <br>
                    <el-tag v-for="item in vipTags"
                            :key="item.vip_label_id"
                            closable
                            class="tags"
                            @close="delLabel(item.vip_label_id)">
                        {{item.name}}
                    </el-tag>
                    <span slot="footer" class="dialog-footer">
                            <el-button type="text" size="small">标签数量：{{vipTags.length}}/20</el-button>
                        </span>
                </el-dialog>`,
    props: {
        'show': {
            type: Boolean,
            default: false,
        },
        'vid': {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            vipTags: [],//当前会员的标签列表
            tagList: [],//标签列表
            choose_tag: {},
            tag_keyword: '',
            tag_page: 1,
            tag_canLoad: true,
        };
    },
    methods: {
        closeDialog() {
            this.vipTags = [];
            this.$emit('end');
        },
        //搜索会员标签
        searchTag(value) {
            this.tag_page = 0;
            this.tag_keyword = value;
            this.tag_canLoad = true;
            this.getTagList();
        },
        //获取会员标签列表
        getTagList() {
            if (!this.tag_canLoad) {
                return;
            }
            this.tag_canLoad = false;
            this.sendRequest('Retail/VipLabel/getVipLabel', {
                data: {
                    page: this.tag_page,
                    pageSize: 20,
                    name: this.tag_keyword,
                },
                success: (res) => {
                    if (res.status == 1) {
                        if (this.tag_page != 1) {
                            this.tagList.push.apply(this.tagList, res.data.list);
                        } else {
                            this.tagList = res.data.list;
                        }
                        this.tag_page = this.tag_page + 1;
                        this.$nextTick(() => {
                            if (res.data.list.length > 10) {
                                this.tag_canLoad = true;
                            }
                        })
                    }
                }
            })
        },
        //获取当前会员标签
        getUserLabel() {
            this.sendRequest('Retail/VipLabel/getUserLabel', {
                data: {
                    vid: this.vid
                },
                success: res => {
                    if (res.status == 1) {
                        this.vipTags = res.data.list;
                    } else {
                        this.vipTags = [];
                    }
                }
            });
        },
        //选择会员标签
        chooseTag(item) {
            if (item) {
                this.choose_tag = {...item};
                let obj = {
                    vip_label_id: item.id,
                    name: item.name,
                };
                this.vipTags.push(obj);

                this.sendRequest('Retail/VipLabel/addUserLabel', {
                    data: {
                        vip_label_id: this.choose_tag.id,
                        vid: this.vid
                    },
                    success: res => {
                        if (res.status == 1) {
                            this.choose_tag = {};
                            this.$message.success(res.message);
                            this.getTagList();
                        }else{
                            this.$message.error(res.message);
                        }
                    }
                })
            }
        },
        //验证会员标签是否禁用
        verifyTag(id) {
            for (let i = 0; i < this.vipTags.length; i++) {
                if (this.vipTags[i].vip_label_id == id) {
                    return true;
                }
            }
            return false;
        },
        //删除会员已选标签
        delLabel(id) {
            this.sendRequest('Retail/VipLabel/delUserLabel', {
                data: {
                    vip_label_id: id,
                    vid: this.vid
                },
                success: res => {
                    if (res.status == 1) {
                        this.getUserLabel();//获取会员标签
                        this.$message.success(res.message);
                    } else {
                        this.$message.error(res.message);
                    }
                }
            })
        },
    },
    created() {
        this.getTagList();//获取可选会员标签
        this.getUserLabel();//获取会员标签
    },
    watch: {
        show(n) {
            if (n) {
                this.getTagList();//获取可选会员标签
                this.getUserLabel();//获取会员标签
            }
        }
    }
});