mashangyoujiu/Public/Retail/common/js/select-vip-grade.js

/**
 * 选择单个会员等级
 */
Vue.component('select-vip-grade', {
    template: `<el-select v-model="grade_id"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                          size="small"
                          clearable filterable>
                    <el-option v-for="(item,index) in dataList"
                               @click.native="changeGrade(index)"
                               :value-key="item.id"
                               :key="item.id"
                               :label="item.grade_name"
                               :value="item.id">
                            <template v-if="showDiscount">
                                <span style="float: left">{{ item.grade_name }}</span>
                                <span style="float: right; color: #8492A6; font-size: 12px">{{(item.discount*100)/10}}折</span>
                            </template>
                    </el-option>
                </el-select>`,
    props: {
        'gradeId': {
            type: String,
            default: '',
        },//选择的会员等级ID
        'placeholder': {
            type: String,
            default: '选择会员等级',
        },//选择的会员等级ID
        'showDiscount': {
            type: Boolean,
            default: false,
        },//是否显示等级折扣
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'integralRange': {
            type: Boolean,
            default: false,
        },//是否需要等级积分范围
        'minIntegral': {},
        'maxIntegral': {},
    },
    data() {
        return {
            grade_id: '',//已选中的会员等级id
            dataList: [],// 数据
        };
    },
    methods: {
        //切换会员等级
        changeGrade(index) {
            this.$emit('update:gradeId', index !== null ? this.dataList[index].id : '');
            if (this.integralRange) {
                this.$emit('update:minIntegral', index !== null ? this.dataList[index].min_integral : '');
                this.$emit('update:maxIntegral', index !== null ? this.dataList[index].max_integral : '');
                this.$emit('change', index !== null ? this.dataList[index].id : '', {
                    minIntegral: index !== null ? this.dataList[index].min_integral : '',
                    maxIntegral: index !== null ? this.dataList[index].max_integral : '',
                });
            } else {
                this.$emit('change', index !== null ? this.dataList[index].id : '');
            }
        },
        //获取会员等级列表
        getGradeList() {
            this.sendRequest('Retail/Vip/getVipGradeList', {
                data: {
                    integralRange: this.integralRange
                },
                success: (res) => {
                    if (res.status == 1) {
                        this.dataList = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                },
            })
        },
    },
    created() {
        this.grade_id = this.gradeId == '0' ? '' : this.gradeId;
        this.getGradeList();
    },
    watch: {
        grade_id(n) {
            if (!n) {
                this.changeGrade(null)
            }
        },
        gradeId(n) {
            this.grade_id = n == '0' ? '' : n;
        }
    }
})

/**
 * 选择多个会员
 */
Vue.component('select-vip-grade-multiple', {
    template: `<el-select v-model="grade_id_arr"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                           size="small" style="width:100%;max-width: 600px"
                          @change="changeGrade"
                          multiple clearable filterable>
                    <el-option v-for="item in dataList"
                            :value-key="item.id"
                            :key="item.id"
                            :label="item.grade_name"
                            :value="item.id">
                            <template v-if="showDiscount">
                                <span style="float: left">{{ item.grade_name }}</span>
                                <span style="float: right; color: #8492A6; font-size: 12px;padding-right: 16px;">{{(item.discount*100)/10}}折</span>
                            </template>
                    </el-option>
                </el-select>`,
    props: {
        'gradeIdArr': {
            type: Array,
            default() {
                return []
            },
        },//选择的会员等级ID
        'placeholder': {
            type: String,
            default: '选择会员等级',
        },//选择的会员等级ID
        'showDiscount': {
            type: Boolean,
            default: false,
        },//是否显示等级折扣
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
    },
    data() {
        return {
            grade_id_arr: '',//已选中的会员等级id
            dataList: [],// 数据
        };
    },
    methods: {
        //切换会员等级
        changeGrade(val) {
            this.$emit('update:gradeIdArr', val);
            this.$emit('change', val);
        },
        //获取会员等级列表
        getGradeList() {
            this.sendRequest('/index.php/Retail/Vip/getVipGradeList', {
                success: (res) => {
                    if (res.status == 1) {
                        this.dataList = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                },
            })
        },
    },
    created() {
        this.grade_id_arr = [...this.gradeIdArr];
        this.getGradeList();
    },
    watch: {
        gradeIdArr(n) {
            this.grade_id_arr = [...n];
        }
    }
})