jiaoyi-vue/src/views/merchant/components/star.vue

<!--
 * @Descripttion: 用户选择器
 * @version: 1.0
 * @Author: Zory
 * @Date: 2024年1月10日21:46:29
-->
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <div class="main">
            <div class="main-left">
                <div class="main-top">
                    <el-form class="lv-form-inline" ref="searchForm" :model="searchKey" label-position="right">
                        <el-row :gutter="10">
                            <el-col :span="18" :xs="12">
                                <el-form-item label=" " prop="name">
                                    <el-input v-model="searchKey.name" placeholder="请输入达人昵称" clearable
                                        :style="{width: '100%'}"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="12">
                                <el-form-item>
                                    <div class="search-btn">
                                        <el-button type="primary" @click="searchForm">搜索</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="main-body-wrap" v-if="!multiple">
                    <scTable ref="table" :apiObj="list.apiObj" :hideSetting="true" paginationLayout="total, prev, pager, next" :params="searchKey" @current-change="handleCurrentChange" highlight-current-row :row-key="getRowKeys" @sortChange="sortChange">
                        <el-table-column width="50" fixed="left">
                            <div class="checkbox"></div>
                        </el-table-column>
                        <el-table-column label="达人" width="340" prop="name" fixed="left">
                            <template #default="scope">
                                <div class="goods-img">
                                    <div class="img">
                                        <el-image 
                                        style="width: 54px; height: 54px"
                                        :src="scope.row.avatar_url"
                                        :zoom-rate="1.2"
                                        :max-scale="7"
                                        :min-scale="0.2"
                                        :preview-src-list="[scope.row.avatar_url]"
                                        preview-teleported
                                        z-index="999"
                                        fit="cover"></el-image>
                                    </div>
                                    <div class="name">
                                        <span>{{ scope.row.show_nickname }}</span>
                                        <span class="dec">抖音号：{{ scope.row.unique_id }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="粉丝数" width="200" prop="id">
                            <template #default="scope">
                                <div class="price">{{ scope.row.fans_count }}</div>
                                <div class="goods-price">
                                    <span v-for="value in scope.row.fans_tag_list">{{ value }}</span></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="本地粉丝数" width="120" prop="id">
                            <template #default="scope">
                                <div class="price">{{ scope.row.local_fans_count }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="视频带货力" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.talent_item_level_display">{{ scope.row.talent_item_level_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="直播带货力" prop="talent_live_level_display" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.talent_live_level_display">{{ scope.row.talent_live_level_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="内容力" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.content_level_display">{{ scope.row.content_level_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="信用分" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.credit_score_display">{{ scope.row.credit_score_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="视频榜" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.rank_display">{{ scope.row.city_name }} 第{{ scope.row.rank_display }}名</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="enable" width="120" align="center">
                            <template #default="scope">
                                <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                                <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
                    </scTable>
                </div>
                <div class="main-body-wrap" v-else>
                    <scTable ref="table" :apiObj="list.apiObj" :hideSetting="true" paginationLayout="total, prev, pager, next" :params="searchKey" @selectionChange="selectionChange" row-key="id" @sortChange="sortChange">
                        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
                        <el-table-column label="达人" width="340" prop="name" fixed="left">
                            <template #default="scope">
                                <div class="goods-img">
                                    <div class="img">
                                        <el-image 
                                        style="width: 54px; height: 54px"
                                        :src="scope.row.avatar_url"
                                        :zoom-rate="1.2"
                                        :max-scale="7"
                                        :min-scale="0.2"
                                        :preview-src-list="[scope.row.avatar_url]"
                                        preview-teleported
                                        z-index="999"
                                        fit="cover"></el-image>
                                    </div>
                                    <div class="name">
                                        <span>{{ scope.row.show_nickname }}</span>
                                        <span class="dec">抖音号：{{ scope.row.unique_id }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="粉丝数" width="200" prop="id">
                            <template #default="scope">
                                <div class="price">{{ scope.row.fans_count }}</div>
                                <div class="goods-price">
                                    <span v-for="value in scope.row.fans_tag_list">{{ value }}</span></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="本地粉丝数" width="120" prop="id">
                            <template #default="scope">
                                <div class="price">{{ scope.row.local_fans_count }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="视频带货力" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.talent_item_level_display">{{ scope.row.talent_item_level_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="直播带货力" prop="talent_live_level_display" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.talent_live_level_display">{{ scope.row.talent_live_level_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="内容力" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.content_level_display">{{ scope.row.content_level_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="信用分" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.credit_score_display">{{ scope.row.credit_score_display }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="视频榜" prop="category_id" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.rank_display">{{ scope.row.city_name }} 第{{ scope.row.rank_display }}名</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="enable" width="120" align="center">
                            <template #default="scope">
                                <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                                <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
                    </scTable>
                </div>
            </div>
        </div>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 定</el-button>
		</template>
    </el-dialog>
</template>

<script>
export default{
    emits: ['success', 'closed'],
    props: {
        multiple: { type: Boolean, default: false },
    },
    data(){
        return {
            loading: false,
            mode:"add",
            titleMap:{
                add:"添加已建联达人",
                edit:"添加已建联达人"
            },
            list: {
                apiObj: this.$API.merStar.list
            },
            visible: false,
            isSaveing: false,
            formData:{},
            searchKey:{},
            selectData:[]
        }
    },
    methods:{
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        submit(){
            if (this.selectData.length == 0)
            {
                return this.$message.error("请选择数据");
            }
            this.isSaveing = false;
            this.visible = false;
            if (this.multiple){
                this.$emit('success', this.selectData);
            } else {
                this.$emit('success', this.selectData[0]);
            }
        },
        getRowKeys(data){
            return data.id;
        },
        clearAll(){
            this.selectData = [];
        },
        removeUser(index,name){
            this.selectData.splice(index, 1);
            console.log(name)
        },
        handleCurrentChange(data){
            this.selectData = [data];
        },
        selectionChange(data){
            this.selectData = data;
        },
        searchForm(){
            this.$refs.table.upData(this.searchKey)
        },
        fristName(name){
            return name.substring(0,1);
        },
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.main{
    display: flex;
    border: 1px solid #dfe1e6;
}
.main-left{
    overflow: hidden;
    flex: 1;
    .main-body-wrap{
        position: relative;
        height: 380px;
    }
}
.main-top{
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #dfe1e6;
    &.is-right{
        height:53px;
        display:flex;
        align-items:center;
        padding:0 10px;
        justify-content:space-between;
    }
}
.main-body.is-right{
    padding: 8px 16px;
    overflow-y: auto;
    position: relative;
    height: calc(100% - 53px);
    max-height: 380px;
}
.mx-1{
    margin: 0 0.5rem 0.5rem 0;
}
.main-right{
    flex: 0.4;
}
.el-form-item--default{
    margin-bottom: 0;
}
.checkbox{
    border:1px solid #dfe1e6;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    position:relative
}
.current-row .checkbox{
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}
.current-row .checkbox:after{
    transform: rotate(45deg) scaleY(1);
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
}
</style>