cpa-vue/src/views/project/product/components/form.vue

<template>
    <el-drawer v-model="visible" title="在线客服" size="800px" destroy-on-close :close-on-click-modal="false" :with-header="false">
        <el-container class="flex-column">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-form-item label="计划名称" prop="plan_name">
                        <el-input v-model="formData.plan_name" clearable placeholder="请输入"></el-input>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="merchant_phone">
                        <el-input v-model="formData.merchant_phone" clearable placeholder="请输入"></el-input>
                        <div class="el-form-item-msg">必须是真实可用的手机号码，否则计划可能会不通过审核</div>
                    </el-form-item>
                    <el-form-item label="推广团购商品">
                        <el-button type="default" @click="addGoods" v-if="goodsData.length<50">添加团购商品（{{ goodsData.length }}/50</el-button>
                        <el-button type="default" @click="quickGoods" v-if="goodsData.length > 0">一键设置佣金</el-button>
                        <div class="goods-live" v-if="goodsData.length>0">
                            <scTable ref="starTable" :data="goodsData" row-key="id" height="300" hidePagination hideDo style="width: 750px;">
                                <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.image_list[0].url"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2"
                                                :preview-src-list="[scope.row.image_list[0].url]"
                                                preview-teleported
                                                z-index="999"
                                                fit="cover"></el-image>
                                            </div>
                                            <div class="name">
                                                <span>{{ scope.row.product_name }}</span>
                                                <span class="dec">商品编码：{{ scope.row.product_id }}</span>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="佣金比例" prop="types" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.rate" @input="setRate(scope.$index)" @focus="setRate(scope.$index)" placeholder="0%-29%">
                                            <template #suffix>%</template>
                                        </el-input>
                                        <div class="el-form-item-msg">预估每单佣金 {{ scope.row.rate_money }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品类型" prop="types" width="100"></el-table-column>
                                <el-table-column label="价格" width="200" prop="id">
                                    <template #default="scope">
                                        <div class="price">{{ $TOOL.moneyFormat(scope.row.price) }}</div>
                                        <div class="goods-price">
                                            <div class="del">{{ $TOOL.moneyFormat(scope.row.line_price) }}</div>
                                            <span>{{ $TOOL.disFormat(scope.row.price,scope.row.line_price) }}折</span></div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="剩余库存" prop="category_id" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.limit_use_rule==1">{{ scope.row.use_num_per_consume }}</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>
                                        <div class="status-danger" v-if="scope.row.status==0"><sc-status-indicator type="danger"></sc-status-indicator> 审核中</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="left" fixed="right">
                                    <template #default="scope">
                                        <el-button-group>
                                            <el-button type="danger" text size="small" @click="removeGoods(scope.$index)">删除</el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </div>
                    </el-form-item>
                    <el-form-item label="指定带货达人">
                        <el-button type="default" @click="addStar" v-if="starData.length<200">添加达人（{{ starData.length }}/200）</el-button>
                        <div class="goods-live" v-if="starData.length>0">
                            <scTable ref="starTable" :data="starData" row-key="id" height="300" hidePagination hideDo style="width: 750px;">
                                <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>
                                <el-table-column label="操作" width="100" align="left" fixed="right">
                                    <template #default="scope">
                                        <el-button-group>
                                            <el-button type="danger" text size="small" @click="removeStar(scope.$index)">删除</el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="formData.status">
                            <el-radio-button :label="1">正常</el-radio-button>
                            <el-radio-button :label="2">禁用</el-radio-button>
                        </el-radio-group>
                        <div class="el-form-item-msg">禁用后的达人不可绑定直播计划</div>
                    </el-form-item> -->
                </el-form>
            </el-main>
            <el-footer>
                <el-button @click="visible=false" size="large">取 消</el-button>
                <el-button v-if="mode!='show'" size="large" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
    <starMain ref="starMain" :multiple="true" @success="handleStar"></starMain>
    <goodsMain ref="goodsMain" :multiple="true" @success="handleGoods"></goodsMain>
    <el-dialog title="一键设置佣金" v-model="quickData.visible" :width="460" append-to-body destroy-on-close :close-on-click-modal="false">
        <el-form ref="quickForm" :model="quickData.formData" :rules="quickData.rules" label-width="100px" label-position="top">
            <el-form-item label="输入后商品将设置相同佣金" prop="rate">
                <el-input v-model="quickData.formData.rate" clearable placeholder="0%-29%">
                    <template #suffix>%</template>
                </el-input>
                <div class="el-form-item-msg">佣金比例请设置在0%-29%之间</div>
            </el-form-item>
        </el-form>
		<template #footer>
            <el-button @click="quickData.visible=false" size="large">取 消</el-button>
            <el-button size="large" type="primary" :loading="quickData.isSaveing" @click="submitRate()">保 存</el-button>
		</template>
    </el-dialog>
</template>

<script>
export default {
    data(){
        return {
            quickData:{
                visible:false,
                rate:null,
                isSaveing:false,
                formData:{
                    rate:null
                },
                rules:{
                    rate: [
                        {required: true, message: '请输入'}
                    ],
                }
            },
            goodsData:[],
            starData:[],
            loading: false,
            isSaveing: false,
            mode:"add",
            titleMap:{
                add:"创建直播计划",
                edit:"编辑直播计划"
            },
            visible:false,
            formData:{
                status:1
            },
            rules:{
                status: [
                    {required: true, message: '请选择'}
                ],
                plan_name: [
                    {required: true, message: '请输入'}
                ],
                merchant_phone: [
                    {required: true, message: '请输入'}
                ]
            }
        }
    },
    methods:{
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
        },
        setRate(index){
            const goods = this.goodsData[index];
            if (parseFloat(goods.rate) > 29) {
                this.goodsData[index].rate = 0;
                this.goodsData[index].rate_money = 0;
                return ;
            }
            const rateMoney = this.$TOOL.moneyFormat(parseFloat(goods.rate) * goods.price / 100);
            this.goodsData[index].rate_money = rateMoney;
        },
        quickGoods(){
            this.quickData.visible = true;
        },
        addGoods(){
            this.$nextTick(() => {
                this.$refs.goodsMain.open("add")
            })
        },
        removeGoods(index){
            this.goodsData.splice(index,1);
        },
        addStar(){
            this.$nextTick(() => {
                this.$refs.starMain.open("add")
            })
        },
        removeStar(index){
            this.starData.splice(index,1);
        },
        handleStar(data){
            var newData = [];
            data.forEach((value)=>{
                const has = this.starData.some(item => item['id'] === value['id'])
                if (!has) newData.push(value)
            })
            if (newData.length > 0) {
                this.starData = this.starData.concat(newData);
            }
        },
        handleGoods(data){
            var newData = [];
            data.forEach((value)=>{
                value.rate = 0;
                value.rate_money = 0;
                const has = this.goodsData.some(item => item['id'] === value['id'])
                if (!has) newData.push(value)
            })
            if (newData.length > 0) {
                this.goodsData = this.goodsData.concat(newData);
            }
        },
        async submitRate(){
            var validate = await this.$refs.quickForm.validate().catch(()=>{});
            if(!validate){ return false }
            if (parseFloat(this.quickData.formData.rate) > 29) {
                this.quickData.formData.rate = 0;
                return ;
            }
            this.quickData.isSaveing = true;
            var goodsData = this.goodsData;
            goodsData.forEach((item) =>{
                const rateMoney = this.$TOOL.moneyFormat(parseFloat(this.quickData.formData.rate) * item.price / 100);
                item.rate_money = rateMoney;
                item.rate = this.quickData.formData.rate;
            })
            this.goodsData = goodsData;
            this.quickData.isSaveing = false;
            this.quickData.visible = false;
        },
        async submit(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            if (this.goodsData.length == 0) return this.$message.error("请添加团购商品")
            if (this.starData.length == 0) return this.$message.error("请添加达人")
            this.isSaveing = true;
            let submitData = JSON.parse(JSON.stringify(this.formData));
            submitData.goods = JSON.stringify(this.goodsData);
            submitData.star = JSON.stringify(this.starData);
            var resp = await this.$API.merPlan.save.post(submitData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            this.visible = false;
            this.formData = {};
            this.$emit("success");
        }
    }
}
</script>

<style>
.text-center{text-align: center;}
.goods-live{width: 100%;margin-top: 10px;}
</style>