qimall/addons/BusinessActivity/backend/views/activity/edit.php

<?php

use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;

ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('goods/goods-dialog-select', AddonHelper::getAddonRootPath('BusinessActivity') . 'backend/views/components/');
ComponentHelper::loadComponentView('goods/com-attr', AddonHelper::getAddonRootPath('BusinessActivity') . 'backend/views/components/');
?>
<div id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>招商活动设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="formData" :rules="rules" size="small" ref="ruleForm" label-width="160px" v-loading="loading">


                <div>
                    <el-row>
                        <el-form-item label="活动标题:" label-width="160px" prop="name" :rules="[{ required: true, message: '请输入活动标题', trigger: 'blur' }]">
                            <el-col :span="12">
                                <el-input placeholder="请输入活动标题" v-model="formData.name" type="text"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="活动时间" label-width="160px" prop="activityTime" :rules="[{ type: 'array',required: true, message: '请输入活动时间', trigger: 'change' }]">
                            <el-col :span="12">
                                <el-date-picker size="small" v-model="formData.activityTime" @change="setActivityTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" align="center">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="关联场地负责人">
                            <el-col :span="12">
                                <div>
                                    <el-button v-if="formData.venue.length <= 0" @click="dialogVisiblePop(1)">+选择负责人</el-button>
                                </div>
                                <div v-if="formData.venue.length > 0">
                                    <el-table max-height="400" :data="formData.venue" size="small" stripe border style="width: 100%;margin-top: 20px;">
                                        <el-table-column prop="id" label="ID" align="center" width="60">
                                        </el-table-column>
                                        <el-table-column prop="nickname" label="会员昵称" align="center" min-width="80"></el-table-column>
                                        <el-table-column prop="mobile" label="手机号" align="center" min-width="80">
                                        </el-table-column>
                                        <el-table-column prop="num" label="操作" align="center" min-width="80">
                                            <template slot-scope="scope">
                                                <el-button type="danger" @click="delSelectUser(scope.$index, 1)">删除</el-button>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="关联招商负责人">
                            <el-col :span="12">
                                <div>
                                    <el-button v-if="formData.merchants.length <= 0" @click="dialogVisiblePop(2)">+选择负责人</el-button>
                                </div>
                                <div v-if="formData.merchants.length > 0">
                                    <el-table max-height="400" :data="formData.merchants" size="small" stripe border style="width: 100%;margin-top: 20px;">
                                        <el-table-column prop="id" label="ID" align="center" width="60">
                                        </el-table-column>
                                        <el-table-column prop="nickname" label="会员昵称" align="center" min-width="80"></el-table-column>
                                        <el-table-column prop="mobile" label="手机号" align="center" min-width="80">
                                        </el-table-column>
                                        <el-table-column prop="num" label="操作" align="center" min-width="80">
                                            <template slot-scope="scope">
                                                <el-button type="danger" @click="delSelectUser(scope.$index, 2)">删除</el-button>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </el-col>
                        </el-form-item>
                        <el-form-item prop="is_alone_commission" label="是否单独设置提成">
                            <el-switch v-model="formData.is_alone_commission" :active-value="1" :inactive-value="0" active-color="#13ce66">
                            </el-switch>
                        </el-form-item>
                        <el-form-item prop="commission_type" label="类型">
                            <template>
                                <el-radio v-model="formData.commission_type" :label="1">百分比</el-radio>
                                <el-radio v-model="formData.commission_type" :label="2">固定值</el-radio>
                            </template>
                        </el-form-item>
                        <el-form-item label="选择商品" label-width="160px">
                            <goods-dialog-select :multiple="true" :url="'business-activity/activity/goods-search'" :params="{activity_id: formData.id}" @selected="goodsSelect" title="商品选择">
                                <el-button type="primary">选择商品</el-button>
                            </goods-dialog-select>
                            <el-col :span="20">
                                <el-table max-height="400" :data="formData.goods_info" size="small" stripe border style="width: 100%;margin-top: 20px;">
                                    <el-table-column type="index" label="序号" align="center" width="60">
                                    </el-table-column>
                                    <el-table-column prop="id" label="商品id" align="center" min-width="80">
                                    </el-table-column>
                                    <el-table-column label="商品信息" min-width="150" align="center">
                                        <template slot-scope="scope">
                                            <div style="display: flex;align-items: center;">
                                                <el-image fit="cover" :src="scope.row.cover_pic" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                                                <div>
                                                    <div>{{scope.row.goods_name}}</div>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="merchants_commission" label="招商负责人" align="center" min-width="150">
                                        <template scope="scope">
                                            <el-input size="small" v-model="scope.row.merchants_commission" type="number" oninput="value=value.replace('-', '')" placeholder="请输入内容">
                                                <template slot="append">
                                                    <span v-if="formData.commission_type == 1">%</span>
                                                    <span v-else>元</span>
                                                </template>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="venue_commission" label="场地负责人" align="center" min-width="150">
                                        <template scope="scope">
                                            <el-input size="small" v-model="scope.row.venue_commission" type="number" oninput="value=value.replace('-', '')" placeholder="请输入内容">
                                                <template slot="append">
                                                    <span v-if="formData.commission_type == 1">%</span>
                                                    <span v-else>元</span>
                                                </template>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="merchants_commission" label="招商负责人上级" align="center" min-width="150">
                                        <template scope="scope">
                                            <el-input size="small" v-model="scope.row.merchants_parent_commission" type="number" oninput="value=value.replace('-', '')" placeholder="请输入内容">
                                                <template slot="append">
                                                    <span v-if="formData.commission_type == 1">%</span>
                                                    <span v-else>元</span>
                                                </template>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="venue_commission" label="场地负责人上级" align="center" min-width="150">
                                        <template scope="scope">
                                            <el-input size="small" v-model="scope.row.venue_parent_commission" type="number" oninput="value=value.replace('-', '')" placeholder="请输入内容">
                                                <template slot="append">
                                                    <span v-if="formData.commission_type == 1">%</span>
                                                    <span v-else>元</span>
                                                </template>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="num" label="操作" align="center" min-width="80">
                                        <template slot-scope="scope">
                                            <el-button type="danger" @click="delFun(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-form-item>
                    </el-row>
                </div>
            </el-form>
            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="save" size="small">
                保存
            </el-button>

        </div>
        <!-- 选择开团会员-->
        <el-dialog title="选择负责人" :visible.sync="dialogVisible" width="50%">
            <el-form class="my_flex" style="margin-bottom: 10px;" v-model="searchForm" label-width="100px">
                <div style="width: 200px;margin-right: 10px;">
                    <el-input size="small" v-model="searchForm.inviter_id" placeholder="请输入会员ID"></el-input>
                </div>
                <div style="width: 200px;margin-right: 10px;">
                    <el-input size="small" v-model="searchForm.keyword" placeholder="请输入会员昵称/手机号"></el-input>
                </div>
                <div>
                    <el-button type="primary" size="small" @click="searchFun">查 询</el-button>
                </div>
                <div class="claer"></div>
            </el-form>
            <div style="color:#909090;">已选：{{selectUser?selectUser.nickname:''}}</div>
            <el-table stripe v-loading="listLoading" :data="searchInfo" style="margin-top: 5px;" @selection-change="selectionChange">
                <el-table-column width="100px" label="ID" props="id" align="center">
                    <template slot-scope="props">
                        <el-radio-group v-model="radioSelection" @change="selectionChange(props.row)">
                            <el-radio :label="props.row.id"></el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="props">
                        <div>
                            <com-image width="40px" height="40px" mode="aspectFill" :src="props.row.avatar_url? props.row.avatar_url:'/resources/img/common/default-avatar.png'" style="border-radius: 50%;"></com-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="昵称" prop="nickname"></el-table-column>
                <el-table-column label="手机" prop="mobile"></el-table-column>
                <el-table-column label="会员等级" prop="level_name"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button :loading="btnLoading" type="primary" @click="confirmSelectUser">确认</el-button>
            </span>
        </el-dialog>
    </el-card>


</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                radio: 0,
                dialogVisible: false,
                listLoading: false,
                searchForm: {
                    inviter_id: '',
                    keyword: '',
                },
                radioSelection: 0, //选中用户ID
                selectUser: '', //选中的用户
                searchInfo: [],
                select_user_list: [],
                select_user_list2: [],
                from: 1,
                formData: {
                    id: 0,
                    name: '',
                    goods_id: 0,
                    is_edit: 0,
                    is_alone_commission: 0,
                    commission_type: 1,
                    goods_info: [],
                    merchants: [],
                    venue: [],
                    activityTime: [],
                    start_at: '',
                    end_at: ''
                },
                loading: false,
                btnLoading: false,
                goods_list: [],
                goods_ids: [],
                goods_attr_list: [],

                rules: {},
            }
        },
        mounted: function() {
            if (getQuery('id')) {
                this.loadData(getQuery('id')); //请求详情的数据
            } else {
                this.loadData();
            }

        },
        methods: {
            // 打开修改推荐人窗口
            dialogVisiblePop(from) {
                this.searchForm = {
                    inviter_id: '',
                    keyword: '',
                }
                this.searchInfo.splice(0, this.searchInfo.length);
                this.radioSelection = 0;
                this.selectUser = null;
                this.dialogVisible = true;
                this.from = from;
            },
            confirmSelectUser() {
                this.dialogVisible = false;
                this.btnLoading = false;
                let user_info = this.searchInfo[0];
                let data = {
                    id: user_info.id,
                    avatar_url: user_info.avatar_url,
                    nickname: user_info.nickname,
                    mobile: user_info.mobile,
                };
                if (this.from == 1) {
                    this.formData.venue.push(data);
                } else {
                    this.formData.merchants.push(data);
                }
            },

            selectionChange(e) {
                this.selectUser = e;
            },
            // 搜索
            searchFun() {
                if (!this.searchForm.inviter_id && !this.searchForm.keyword) {
                    this.$message.error('查询内容不能为空');
                    this.listLoading = false;
                    return false;
                }
                this.listLoading = true;
                request({
                    params: {
                        r: 'business-activity/activity/get-can-bind-inviter',
                        inviter_id: this.searchForm.inviter_id,
                        keyword: this.searchForm.keyword,
                        user_id: this.user_id,
                    },
                }).then(e => {
                    this.listLoading = false;
                    if (e.data.code === 0) {
                        this.searchInfo = e.data.data.list.list;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },

            // 选中商品处理
            goodsSelect(param) {
                let params = param;
                for (let j in params) {
                    let item = params[j];
                    let flag = true;
                    if (this.goods_ids.indexOf(item.id) > -1) {
                        flag = false;
                    }
                    if (flag) {
                        this.formData.goods_info.push({
                            id: item.id,
                            price: item.price,
                            goods_name: item.goods_name,
                            cover_pic: item.cover_pic,
                            merchants_commission: 0,
                            merchants_parent_commission: 0,
                            venue_commission: 0,
                            venue_parent_commission: 0,
                        });
                        this.goods_ids.push(item.id);
                    }
                }
            },
            // 删除商品
            delFun(index) {
                this.formData.goods_info.splice(index, 1);
            },

            // 删除会员
            delSelectUser(index, from = 1) {
                if (from == 1) {
                    this.formData.venue.splice(index, 1);
                } else {
                    this.formData.merchants.splice(index, 1)
                }
            },
            save() {
                if (this.formData.goods_info.length <= 0) return this.$message.error("请选择商品");
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        if (this.btnLoading) return;
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'business-activity/activity/edit',
                            },
                            method: 'post',
                            data: this.formData
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$navigate({
                                    r: 'business-activity/activity/index'
                                })
                                this.$message(e.data.msg);
                            } else {
                                this.btnLoading = false;
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            console.log(e);
                            this.$message.error('网络错误');
                            this.btnLoading = false;
                        })
                    } else {
                        this.$message.error('请填写必要的参数！');
                        return false;
                    }
                });
            },

            loadData(id) {
                if (this.loading === true) return;
                this.loading = true;
                request({
                    params: {
                        r: 'business-activity/activity/edit',
                        id: id
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.formData = Object.assign(this.formData, e.data.data);

                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            setActivityTime(params) {
                if (params) {
                    let begin = params[0];
                    let end = params[1];
                    this.formData.start_at = begin;
                    this.formData.end_at = end;
                } else {
                    this.formData.end_at = '';
                    this.formData.end_at = '';
                }
            },
        },
    });
</script>
<style>
    .form_box {
        /* background-color: #f3f3f3;
        padding: 0 0 20px; */
        background-color: #fff;
        padding: 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }


    .el-card__body {
        padding: 0;
    }

    .el-card {
        border: none;
    }


    .el-table thead {
        font-size: 14px;
        color: #333;
    }

    /* .el-table__footer-wrapper, .el-table__header-wrapper{
	  border-bottom: 1.4px solid #D6D6D6;
	 } */
    .dialogClass .el-dialog__body {
        padding-bottom: 0;
    }

    .el-date-editor .el-range-separator {
        /* 设置选择日期框的中间的 ‘至’ 的宽度 */
        width: 8%;
    }

    .el-textarea__inner {
        display: block;
        resize: vertical;
        padding: 5px 15px !important;
    }

    .el-input-number .el-input__inner {
        text-align: left;
    }

    .my_flex {
        display: flex;
    }

    .message-font-size {
        font-size: 24px;
        padding-right: 6px;
    }

    .custom-bg-color {
        background-color: #f0f9eb;
        border-color: #e1f3d8;
        opacity: .85;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100% !important;
    }

    /* .edui-default .edui-editor{
		height: 250px;
	} */
</style>