qimall/addons/ShortVideo/backend/views/config/index.php

<?php

/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Author: james
 * Date: 2020-04-20
 * Time: 15:41
 */

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
?>
<style>
    @media screen and (min-width:1370px) {
        .form-body {
            padding: 20px 0;
            padding-right: 50%;
            min-width: 1400px;
        }
    }

    @media screen and (max-width:1369px) {
        .form-body {
            padding: 20px 0;
            padding-right: 20%;
        }
    }

    .form-body {
        background-color: #fff;
        margin-bottom: 20px;
    }


    .form-button {
        margin: 0 !important;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

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

    .agent-item-input {
        display: flex;
        align-items: center;
        margin-top: 16px;
    }

    .agent-item-input .item-lab-title {
        width: 80px;
        margin-right: 20px;
    }
</style>
<div id="app" v-cloak>
    <el-card style="border:0;min-width: 800px;" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="loading">
        <div slot="header">基础设置</div>
        <div v-if="load">
            <div class="form-body">
                <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
                    <el-form-item label="插件是否开启" prop="is_enabled">
                        <el-switch v-model="form.is_enabled" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                        </el-switch>
                        <div class="tips-text" style="line-height: 24px;">
                            是否开启短视频功能
                        </div>
                    </el-form-item>
                    <el-form-item label="推广中心显示" prop="is_show_at_center">
                        <div>
                            <el-switch v-model="form.is_show_at_center" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                            </el-switch>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否需要审核" prop="is_check">
                        <el-switch v-model="form.is_check" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                        </el-switch>
                        <div class="tips-text" style="line-height: 24px;">
                            用户发布的视频是否需要后台审核才在前端展示
                        </div>
                    </el-form-item>
                    <!-- 全局带货奖励 -->
                    <el-form-item label="全局带货奖励" prop="award_status">
                        <el-switch v-model="form.award_status" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" @change="awardChange">
                        </el-switch>
                        <div v-if="form.award_status==1">
                            <el-radio v-model="form.award_type" :label="0">金额</el-radio>
                            <el-radio v-model="form.award_type" :label="1">百分比</el-radio>
                        </div>
                        <div class="tips-text" style="line-height: 24px;">
                            短视频是否有带货奖励。开启后,发布者发布视频时关联上商城商品,其他用户点击视频下方的商品购买后,该发布者获得奖励.
                        </div>
                    </el-form-item>
                    <el-form-item v-if="form.award_status==1 && form.award_type==0" label="" prop="award_money">
                        <el-input type="number" :min="0" class="member-money" v-model="form.award_money" placeholder="">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="form.award_status==1 && form.award_type==1" label="" prop="award_percentage">
                        <el-input type="number" :min="0" class="member-money" v-model="form.award_percentage" placeholder="">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>

                    <!-- 发布权限 -->
                    <el-form-item label="发布权限" prop="status,purchase_times">
                        <el-switch v-model="form.release_rule" :active-value="1" :inactive-value="0" active-text="有条件" inactive-text="无条件">
                        </el-switch>
                        <div v-if="form.release_rule==1">
                            <el-checkbox-group @change="checkBoxArr" v-model="checkedCities1">
                                <el-checkbox v-for="(city, index) in cities" :label="index" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="tips-text" style="line-height: 24px;">
                            发布视频的权限。如果三个条件都选择的话，那么需要用户同时满足这三个条件才会升级。
                        </div>
                    </el-form-item>
                    <el-form-item v-for="(item, index) in checkedCities1" :key="index" v-if="form.release_rule==1 && item==0" label="消费次数" prop="purchase_times">
                        <el-input type="number" :min="0" v-model="form.purchase_times" class="member-money" placeholder="">
                            <template slot="append">次</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-for="(item, index) in checkedCities1" :key="index" v-if="form.release_rule==1 && item==1" label="消费金额" prop="purchase_cost">
                        <el-input type="number" :min="0" v-model="form.purchase_cost" class="member-money" placeholder="">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-for="(item, index) in checkedCities1" :key="index" v-if="form.release_rule==1 && item==2" label="消费商品" prop="purchase_goods_id">
                        <com-dialog-select :multiple="false" @selected="goodsSelect" title="商品选择">
                            <el-button type="text">选择商品</el-button>
                        </com-dialog-select>
                    </el-form-item>
                    <el-form-item v-if="form.purchase_goods_id && form.release_rule==1" prop="purchase_goods_id">
                        <template>
                            <div style="color: #ff4544;">最多可关联1个商品</div>
                            <div style="max-height: 300px;overflow-y: auto">
                                <el-table :data="selectedGoodList" :show-header="false" border>
                                    <el-table-column label="">
                                        <template slot-scope="scope">
                                            <div flex>
                                                <div style="padding-right: 10px;flex-grow: 0">
                                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                </div>
                                                <div style="flex-grow: 1;">
                                                    <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                                                    <com-ellipsis :line="2">{{scope.row.price}}</com-ellipsis>
                                                </div>
                                                <div style="flex-grow: 0;">
                                                    <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                        删除
                                                    </el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </template>
                    </el-form-item>

                    <!-- 敏感词过滤 -->
                    <el-form-item label="评论敏感词过滤" prop="status">
                        <el-switch @change="CheckSwich" v-model="form.client_status" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                        </el-switch>
                        <div class="tips-text" style="line-height: 24px;">
                            评论敏感词过滤配置，可联系七件事客服获取申请敏感词的教程
                        </div>
                    </el-form-item>

                    <el-form-item label="随机播放" prop="status">
                        <el-switch v-model="form.is_shuffle" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                        </el-switch>
                        <div class="tips-text" style="line-height: 24px;">
                            开启后将无法使用视频置顶功能
                        </div>
                    </el-form-item>


                    <el-form-item label="自定义分享标题">
                        <label slot="label">
                            <span>自定义分享标题</span>
                            <el-tooltip effect="dark" content="分享给好友时，作为分享标题" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <el-input type="text" v-model="form.share_title" class="member-money" placeholder="">
                        </el-input>
                        <div class="tips-text" style="line-height: 24px;">
                            用户分享短视频页面时，显示的标题
                        </div>
                    </el-form-item>
                    <el-form-item label="自定义分享内容">
                        <label slot="label">
                            <span>自定义分享内容</span>
                            <el-tooltip effect="dark" content="分享给好友时，作为分享内容" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <el-input type="text" v-model="form.share_content" class="member-money" placeholder="">
                        </el-input>
                        <div class="tips-text" style="line-height: 24px;">
                            用户分享短视频页面时，显示的描述
                        </div>
                    </el-form-item>
                    <el-form-item prop="share_img">
                        <label slot="label">
                            <span>自定义分享图片</span>
                            <el-tooltip effect="dark" content="分享给好友时，作为分享图片" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <com-attachment v-model="form.share_img" :multiple="false" :max="1">
                            <el-tooltip class="item" effect="dark" content="" placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                        </com-attachment>
                        <div class="customize-share-img">
                            <com-image mode="aspectFill" width='80px' height='80px' :src="form.share_img ? form.share_img : ''"></com-image>
                            <el-button v-if="form.share_img" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="form.share_img = ''"></el-button>
                        </div>
                        <div class="tips-text" style="line-height: 24px;">
                            用户分享短视频页面时，显示的图片
                        </div>
                    </el-form-item>
                    <el-form-item label="用户协议" prop="agreement">
                        <el-input v-model.number="form.agreement" type="textarea" :rows="10" style="width: 50%" placeholder="用户协议"></el-input>
                    </el-form-item>

                </el-form>
            </div>
            <el-button class="button-item" :loading="btnLoading" type="primary" size="small" @click="store('form')" style="margin-bottom: 15px;">保存</el-button>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                testSelect: '',
                loading: false,
                load: false,
                btnLoading: false,
                selectedGoodList: [],
                checkedCities1: [0], //这个放多选选中的项
                cities: ['消费次数', '消费金额', '消费商品'],
                form: {
                    is_enabled: 0, //是否开启插件
                    is_show_at_center: 1, //是否开启插件
                    is_check: 0, //是否需要审核
                    release_rule: 0, //发布权限
                    award_status: 0, //是否开启带货奖励
                    award_type: 0,
                    award_money: 0,
                    award_percentage: 0,
                    purchase_times_status: 1, //有条件发布
                    purchase_times: 0,
                    purchase_cost_status: 1,
                    purchase_cost: 0,
                    purchase_goods_status: 1,
                    purchase_goods_id: 0,
                    client_status: 0, //文本审核
                    video_lenght: 0, //视频时长
                    // client_id: "",
                    // client_secret: "",
                    agreement: '', //视频协议
                    start_up_diagram: '',
                    share_img: '',
                    share_title: '',
                    share_content: '',
                    is_can_use_sensitive: false, // 是否可以打开敏感词检测
                    is_shuffle: 0,
                },
                rules: {
                    award_money: [{
                        required: true,
                        message: '请填写全局带货奖励金额',
                        trigger: 'change'
                    }, ],
                    award_percentage: [{
                        required: true,
                        message: '请填写全局带货奖励百分比',
                        trigger: 'change'
                    }, ],
                    purchase_times: [{
                        required: true,
                        message: '请填写消费次数',
                        trigger: 'change'
                    }, ],
                    purchase_cost: [{
                        required: true,
                        message: '请填写消费金额',
                        trigger: 'change'
                    }, ],
                    purchase_goods_id: [{
                        required: true,
                        message: '请选择消费商品',
                        trigger: 'change'
                    }, ],
                    client_secret: [{
                        required: true,
                        message: '请填写文本审核Secret Key',
                        trigger: 'change'
                    }, ],
                    client_id: [{
                        required: true,
                        message: '请填写文本审核API Key',
                        trigger: 'change'
                    }, ],
                    video_lenght: [{
                        required: true,
                        message: '请填写发布视频时长',
                        trigger: 'change'
                    }, ],
                    agreement: [{
                        required: true,
                        message: '请填写用户协议',
                        trigger: 'change'
                    }, ],
                },
            };
        },
        created() {
            this.getDepartment();
        },

        methods: {
            // 0.1 全局带货swich切换
            awardChange() {
                this.form.award_type = 0;
                this.form.award_money = 0;
                this.form.award_percentage = 0;
            },

            // select的change事件
            selectChange() {
                if (this.is_default_goods) {
                    this.is_default_goods = false;
                }
            },
            // 敏感词检测开关切换
            CheckSwich(val) {
                if (val == 1 && !this.is_can_use_sensitive) {
                    this.$alert('系统尚未配置百度敏感词检测功能，请先到 设置->商城设置->敏感词过滤 配置相应数据', '提示', {
                        confirmButtonText: '确定',
                    });
                    this.form.client_status = 0;
                    return false;
                }
            },

            // 0.0.1 选中状态的值
            checkBoxArr() {
                console.log(this.checkedCities1);
            },

            // 0.1 拿商品信息和回显数据
            getDepartment() {
                request({
                    params: {
                        r: 'short-video/config/goods-list',
                        limit: 100,
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.purchase_goods = e.data.data;
                        this.loadData();
                    } else {

                    }
                    this.load = true;
                })
            },
            // 0.2 拿到设置信息
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'short-video/default/basic-setting'
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.is_can_use_sensitive = e.data.data.is_can_use_sensitive;
                        this.selectedGoodList = e.data.data.good;
                        if (e.data.data.config) {
                            // 判断后台传来的参数和form的参数长度是否一致
                            for (let item in this.form) {
                                if (!e.data.data.config.hasOwnProperty(item)) {
                                    e.data.data.config[item] = this.form[item];
                                }
                            }
                            this.form = e.data.data.config;
                            let checkedCities1 = [];
                            if (this.form.purchase_times_status) {
                                checkedCities1.push(0);
                            }
                            if (this.form.purchase_cost_status) {
                                checkedCities1.push(1);
                            }
                            if (this.form.purchase_goods_status) {
                                checkedCities1.push(2);
                            }
                            this.checkedCities1 = checkedCities1;
                        }
                        this.load = true;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            // 提交表单
            store(formName) {
                console.log(this.form);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let postForm = this.form;
                        if (this.is_default_goods) {
                            postForm.purchase_goods_id = this.default_goods_id;
                        }
                        if (postForm.release_rule == 1) { //如果发布权限开关打开
                            // 查询多选选中状态
                            postForm.purchase_times_status = 0;
                            postForm.purchase_cost_status = 0;
                            postForm.purchase_goods_status = 0;
                            if (this.checkedCities1.length == 0) {
                                this.$message.error('请完善发布权限对应条件');
                                this.btnLoading = false;
                                return false;
                            } else {
                                this.checkedCities1.forEach(item => {
                                    console.log(item);
                                    item == 0 ? postForm.purchase_times_status = 1 : '';
                                    item == 1 ? postForm.purchase_cost_status = 1 : '';
                                    item == 2 ? postForm.purchase_goods_status = 1 : '';
                                });
                            }
                            if (postForm.purchase_goods_status == 1 && !this.selectedGoodList.length) {
                                this.$message.error('请选择消费商品');
                                this.btnLoading = false;
                                return false;
                            }
                        }
                        // console.log(postForm);
                        // return
                        request({
                            params: {
                                r: 'short-video/default/basic-setting'
                            },
                            method: 'post',
                            data: {
                                // form: JSON.stringify(postForm),
                                form: postForm
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                this.loadData();
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        }).catch(e => {
                            // this.$message.error(e);
                            this.btnLoading = false;
                        });
                    } else {
                        this.btnLoading = false;
                        return false;
                    }
                })
            },

            // 选择商品回调
            goodsSelect(good) {
                let good_obj = {};
                this.selectedGoodList = [];
                good_obj.id = good.id;
                good_obj.goods_name = good.goods_name;
                good_obj.cover_pic = good.cover_pic;
                good_obj.price = good.price;
                this.selectedGoodList.push(good_obj);
                this.form.purchase_goods_id = good.id;
            },
            // 删除选择的商品
            deleteGoods(index) {
                console.log(index);
                this.selectedGoodList.splice(index, 1);
                this.form.purchase_goods_id = 0;
            },

            // continueAdd() {
            //     if (!this.form.continue) {
            //         this.form.continue = [];
            //     }
            //     console.log(this.continue_temp,'this.continue_tempthis.continue_temp')
            //     this.form.continue.push(JSON.parse(JSON.stringify(this.continue_temp)));
            // },

            // totalAdd() {
            //     if (!this.form.total) {
            //         this.form.total = [];
            //     }
            //     this.form.total.push(JSON.parse(JSON.stringify(this.integral_rules)));
            // },

            // continueDel(index) {
            //     if (this.form.continue && this.form.continue.length > index) {
            //         this.form.continue.splice(index, 1);
            //     }
            // },

        },
        filters: {
            checkedStatus(status) {
                if (this.checkedCities1.indexOf(status) > -1) {
                    return true
                } else {
                    return false;
                }
            }
        },
    });
</script>