qimall/addons/Community/backend/views/default/index.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * 名片
 * Author: james
 * Date: 2020-07-10
 * Time: 15:48
 */

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-district');
ComponentHelper::loadComponentView('com-rich-text');
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>基础设置</span>
        </div>

        <div class="table-body">
            <el-form size="small" ref="form" label-width="160px" :model="form" :rules="rules">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                        <el-tab-pane label="基础设置" name="first">
                            <el-form-item label="启用" prop="is_enable">
                                <el-switch :active-value="1" :inactive-value="0" v-model="form.is_enable"></el-switch>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    开启则会员购买可选择自提
                                </div>
                            </el-form-item>
                            <el-form-item label="自提免运费" prop="is_enable">
                                <el-switch :active-value="1" :inactive-value="0" v-model="form.is_force_free_shipping"></el-switch>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    开启后用户上自提点自提货物则不需要支付运费
                                </div>
                            </el-form-item>
                            <el-form-item label="定位有效范围" prop="position_range">
                                <el-input style="width: 260px;" v-model="form.position_range" placeholder="请输入定位有效范围">
                                    <template #prepend>小于</template>
                                    <template #append>公里内</template>
                                </el-input>
                                <span style="color: #999">显示距离我步行，超出设置范围则不显示</span>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    自提点根据定位来显示，超过1公里的自提点不显示
                                </div>
                            </el-form-item>
                            <el-form-item label="可取货时间" prop="can_receive_day">
                                <el-input style="width: 200px" v-model="form.can_receive_day" placeholder="请输入可取货时间">
                                    <template #append>天</template>
                                </el-input>
                                <div style="color: #999">如，用户下单后需到1天以后才可自提，因下单后平台需发货到自提点，自提点收到货后用户才能自提商品。</div>
                            </el-form-item>
                            <el-form-item label="自提时间段" prop="pick_up_time_range_type">
                                <el-radio-group v-model="form.pick_up_time_range_type">
                                    <el-radio :label="0">全天</el-radio>
                                    <el-radio :label="1">自定义</el-radio>
                                </el-radio-group>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    自提点开门时间，哪个时间段可去自提点提货
                                </div>
                                <div v-if="form.pick_up_time_range_type == 1">
                                    <el-form-item label="" prop="pick_up_time_range_custom">
                                        <el-checkbox-group v-model="form.pick_up_time_range_custom">
                                            <el-checkbox :label="0">周日</el-checkbox>
                                            <el-checkbox :label="1">周一</el-checkbox>
                                            <el-checkbox :label="2">周二</el-checkbox>
                                            <el-checkbox :label="3">周三</el-checkbox>
                                            <el-checkbox :label="4">周四</el-checkbox>
                                            <el-checkbox :label="5">周五</el-checkbox>
                                            <el-checkbox :label="6">周六</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                    <el-form-item label="" prop="pick_up_time_range_custom_at">
                                        <el-time-picker
                                                value-format="yyyy-MM-dd HH:mm"
                                                is-range
                                                v-model="form.pick_up_time_range_custom_at"
                                                range-separator="至"
                                                start-placeholder="开始时间"
                                                end-placeholder="结束时间"
                                                :picker-options="{format: 'HH:mm'}"
                                                placeholder="选择时间范围">
                                        </el-time-picker>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                            <el-form-item label="团长招募图" prop="apply_pic">
                                <com-attachment v-if="!form.apply_pic" :multiple="false" :max="1" type="images" @selected="applyPic">
                                    <div class="card-upload">
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </com-attachment>
                                <div class="card-coverimg" v-else>
                                    <el-image style="width: 80px; height: 80px" :src="form.apply_pic"></el-image>
                                    <el-button @click="delPic()" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
                                </div>
                                <p class="tips-text">作用于社区团长招聘页面展示</p>
                            </el-form-item>
                            <el-form-item label="启用核销" prop="is_enable_write_off">
                                <el-switch :active-value="1" :inactive-value="0" v-model="form.is_enable_write_off"></el-switch>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    若开启核销，则自提订单变为核销码核销，店主聚合页有扫码核销按钮；送货上门订单变为只有用户端的订单有确认收货按钮
                                </div>
                            </el-form-item>
                            <el-form-item label="是否平台配货" prop="is_platform_distribution">
                                <el-switch :active-value="1" :inactive-value="0" v-model="form.is_platform_distribution"></el-switch>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    开启后用户下单成功需平台点击发货才会生成核销码
                                </div>
                            </el-form-item>
                            <h3>团长奖励设置</h3>
                            <el-form-item label="是否启用自提奖励">
                                <el-switch :active-value="1" :inactive-value="0" v-model="form.is_enable_reward"></el-switch>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    设置自提点奖励，开启后团长（自提点管理员）有自提订单就可以获得自提奖励
                                </div>
                            </el-form-item>
                            <el-form-item label="结算方式" prop="settlement_type">
                                <el-radio-group v-model="form.settlement_type">
                                    <el-radio :label="1">订单支付后</el-radio>
                                    <el-radio :label="7">订单取货后</el-radio>
                                </el-radio-group>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    设置自提奖励佣金的结算方式
                                </div>
                            </el-form-item>
                            <el-form-item label="计算方式" prop="calculate_type">
                                <el-radio-group v-model="form.calculate_type">
                                    <el-radio :label="0">实际支付金额</el-radio>
                                    <el-radio :label="1">商品售价</el-radio>
                                    <el-radio :label="2">商品利润</el-radio>
                                </el-radio-group>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    如团长奖励设置为百分比这按这里的计算方式进行计算
                                </div>
                            </el-form-item>
                            <el-form-item label="结算方式" prop="head_commission_type">
                                <el-radio-group v-model="form.head_commission_type">
                                    <el-radio :label="0">固定金额</el-radio>
                                    <el-radio :label="1">百分比</el-radio>
                                </el-radio-group>
                                <br/>
                                <div class="tips-text" style="line-height: 24px;">
                                    自提奖励设置
                                </div>
                                <el-form-item label="" prop="commission">
                                    <el-input style="width: 200px" v-model="form.commission">
                                        <template #append>
                                            {{form.head_commission_type == 0 ? '元' : '%'}}
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-form-item>
                            <el-form-item label="包含地区">
                                <el-button @click="onChooseArea" size="small" type="primary" style="padding: 9px 15px !important;">+新增规则</el-button>
                                <div class="tips-text" style="line-height: 24px;">
                                    可自提地区，这里的设置是针对所有商品，商品可进行单个商品独立设置
                                </div>
                            </el-form-item>
                            <h3>入驻协议</h3>
                            <el-form-item label="入驻协议标题" prop="protocol_title">
                                <el-input style="width: 200px" v-model="form.protocol_title" placeholder="请输入入驻协议标题"></el-input>
                            </el-form-item>
                            <el-form-item label="入驻协议内容" prop="protocol_content">
                                <com-rich-text style="width: 750px" v-model="form.protocol_content"></com-rich-text>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="短信配置" name="sms">
                            <el-table size="mini" border :data="events" style="width: 300px">
                                <el-table-column prop="title" label="短信模板名称" align="center"></el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button @click="onSetSmsConfig(scope.row)"><i class="el-icon-edit-outline"></i></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                </el-tabs>
                <el-form-item style="margin-top: 20px">
                    <el-button size="small" type="primary" style="padding: 9px 15px !important;" @click="onSubmit">保存配置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>

        <el-dialog
                title="地区选择"
                :visible.sync="districtDialogShow"
                width="30%">
            <div>
                <com-district @selected="selectDistrict" :level="3"
                              :edit="area"></com-district>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="districtDialogShow = false">取 消</el-button>
                <el-button type="primary" @click="districtDialogShow = false">确 定</el-button>
              </span>
        </el-dialog>

        <el-dialog
                title="短信模板设置"
                :visible.sync="smsDialogShow"
                width="30%">
            <el-form size="small" ref="smsForm" label-width="160px" :model="smsForm">
                <el-form-item label="模板CODE" prop="id" :rules="[{required: true, message: '模板CODE不能为空'}]">
                    <el-input v-model="smsForm.id" placeholder="请输入模板CODE"></el-input>
                </el-form-item>
                <el-form-item v-if="smsCurrent.type == 'buyer_1'" label="基于用户选择时间发送" prop="send_day">
                    <el-input v-model="smsForm.send_day" placeholder="请输入基于用户选择时间发送">
                        <template #append>天</template>
                    </el-input>
                    <div style="color: red; line-height: 16px; margin-top: 5px;">如果输入0那么当前通知将会直接触发,如果输入3那么当前通知将会延期3天后触发</div>
                </el-form-item>
                <el-form-item label="模板内容" prop="content" :rules="[{required: true, message: '模板内容不能为空'}]">
                    <el-input type="textarea" rows="5" v-model="smsForm.content" placeholder="请输入模板内容" @input="onInputContent"></el-input>
                </el-form-item>
                <el-table v-if="smsForm.vars.length > 0" size="mini" :data="smsForm.vars" border>
                    <el-table-column prop="name" label="变量名" align="center"></el-table-column>
                    <el-table-column label="替换内容" align="center">
                        <template slot-scope="scope">
                            <el-select size="mini" v-model="scope.row.key" placeholder="请选择需要替换的内容">
                                <el-option v-for="(item, key) in smsKeys" :key="key" :label="item" :value="key"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onSmsDialogHide">取 消</el-button>
                <el-button type="primary" @click="onSubmitSmsConfig">确 定</el-button>
              </span>
        </el-dialog>

    </el-card>

</div>
<script>
    const validateNumber = (rule, value, callback) => {
        if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
            callback(new Error('请输入数字值'))
        } else {
            callback()
        }
    };
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            activeName: 'first',
            districts: [],
            districtDialogShow: false,
            form: {
                is_enable: 1,
                settlement_type: 1,
                calculate_type: 0,
                head_commission_type: 0,
                commission: '',
                pick_up_time_range_custom: [],
                pick_up_time_range_custom_at: [
                    new Date(), new Date()
                ],
                pick_up_time_range_type: 0,
                can_receive_day: 1,
                position_range: 1,
                area: [],
                not_area: [], // 存储区域中未选但是需要存储的区域ID
                all_area: [], // 存储区域中未选但是需要存储的区域ID
                apply_pic: '',
                protocol_title: '',
                protocol_content: '',
                is_enable_reward: 0,
                sms: {},
                is_enable_write_off: 0,
                is_platform_distribution: 0,
                is_force_free_shipping: 0,
                is_select_area: 0,
            },
            events: [
                {
                    title: '提醒送货上门订单收货通知',
                    type: 'buyer_1',
                    tips: ''
                },
                {
                    title: '用户下单通知',
                    type: 'seller_1',
                    tips: ''
                }
            ],
            smsForm: {
                id: '',
                content: '',
                key: '',
                name: '',
                vars: [],
                send_day: 0
            },
            area: [],
            rules: {
                position_range: [
                    { required: true, message: '定位有效范围不能为空' },
                    { validator: validateNumber, trigger: 'blur' },
                ],
                can_receive_day: [
                    { required: true, message: '可取货时间不能为空' },
                    { validator: validateNumber, trigger: 'blur' },
                ],
                commission: [
                    { required: true, message: '佣金不能为空' },
                    { validator: validateNumber, trigger: 'blur' },
                ],
                apply_pic: [
                    { required: true, message: '招募图片不能为空' },
                ],
                pick_up_time_range_custom: [
                    { type: 'array', required: true, message: '自定义时间段至少选择一项', trigger: 'change' }
                ],
                pick_up_time_range_custom_at: [
                    { type: 'array', required: true, message: '自定义时间段不能为空', trigger: 'change' }
                ]
            },
            smsDialogShow: false,
            smsCurrentKey: null,
            smsCurrent: {
                title: '用户下单通知',
                type: 'seller_1',
                tips: ''
            },
            smsKeys: []
        },
        mounted() {
            // 获取列表首页数据
            this.getData()
            this.getSmsKeys()
        },

        methods: {
            getSmsKeys() {
                request({
                    method: 'get',
                    params: {
                        r: 'community/default/sms-keys',
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.smsKeys = e.data.data
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            handleClick(tab, event) {
            },
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function (item) {
                    self.choose_list.push(item.id);
                })
            },
            applyPic(e) { // 选择图片
                this.$set(this.form, 'apply_pic', e[0].url)
            },
            delPic() {
                this.form.apply_pic = ''
            },
            getData() {
                this.loading = true
                request({
                    method: 'get',
                    params: {
                        r: 'community/default/index',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        try {
                            if (e.data.data.pick_up_time_range_custom_at && e.data.data.pick_up_time_range_custom_at.length === 0) {
                                e.data.data.pick_up_time_range_custom_at = [
                                    new Date(), new Date()
                                ]
                            } else {
                                if (e.data.data.pick_up_time_range_custom_at) {
                                    e.data.data.pick_up_time_range_custom_at = [
                                        new Date(e.data.data.pick_up_time_range_custom_at[0]), new Date(e.data.data.pick_up_time_range_custom_at[1])
                                    ]
                                }
                            }
                            if (e.data.data.area.length > 0) {
                                let ids = []
                                for (let i = 0; i < e.data.data.area.length; i++) {
                                    ids.push({
                                        id: e.data.data.area[i]
                                    })
                                }
                                this.area = ids
                            }
                            this.all_area = e.data.data.all_area;

                            if (e.data.data.sms && e.data.data.sms instanceof Array) {
                                e.data.data.sms = {}
                            }

                            this.form = Object.assign(this.form, e.data.data)
                        } catch (e) {
                            console.error(e)
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            onChooseArea() {
                this.districtDialogShow = true
            },
            selectDistrict(e, u, list) {
                list.forEach(rootNode => {
                    this.getIndeterminateIds(rootNode, e);
                })
                this.area = e
                this.is_select_area = 1;
            },
            getIndeterminateIds(node, result) {
                // 判断当前id是否已在result中在则不执行
                if (result.some(item => item.id === node.id)) {
                    return;
                }
                if (node.isIndeterminate === true) {
                    this.form.not_area.push(node.id)
                    result.push({
                        id: node.id,
                        name: node.name
                    });
                }
                if (node.children && node.children.length > 0) {
                    node.children.forEach((child) => {
                        this.getIndeterminateIds(child, result);
                    });
                }
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.form.area = [];
                        if (this.area.length > 0) {
                            for (let i = 0; i < this.area.length; i++) {
                                this.form.area.push(this.area[i].id)
                            }
                            if(this.is_select_area != 1 && this.all_area){
                                for (let i = 0; i < this.all_area.length; i++) {
                                    this.form.area.push(this.all_area[i])
                                }
                                this.form.not_area = this.all_area;
                            }
                        }
                        request({
                            method: 'post',
                            params: {
                                r: 'community/default/index',
                            },
                            data: {
                                body: JSON.stringify(this.form)
                            }
                        }).then(e => {
                            this.loading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                        });
                    } else {
                        console.log(valid)
                    }
                })
            },
            onSubmitSmsConfig() {
                this.$refs['smsForm'].validate((valid) => {
                    if (valid) {
                        this.form.sms[this.smsCurrentKey] = this.smsForm
                        this.onSmsDialogHide()
                    }
                })
            },
            onSetSmsConfig(item) {
                this.smsCurrentKey = item.type
                this.smsCurrent = item
                this.smsForm = Object.assign(this.smsForm, this.form.sms !== undefined && this.form.sms[this.smsCurrentKey] !== undefined ?
                    this.form.sms[this.smsCurrentKey] : {})
                this.smsDialogShow = true
            },
            onInputContent(val) {
                let p = /(\$\{[0-9A-Za-z_]+\})/g
                let ms = val.match(p)
                if (ms && ms.length > 0) {
                    let vars = []
                    for (let msKey in ms) {
                        vars.push({
                            name: ms[msKey],
                            key: ''
                        })
                    }
                    this.$set(this.smsForm, 'vars', vars)
                }
            },
            onSmsDialogHide() {
                this.smsCurrentKey = null
                this.smsCurrent = {
                    title: '用户下单通知',
                    type: 'seller_1',
                    tips: ''
                }
                this.smsForm = {
                    id: '',
                    content: '',
                    key: '',
                    name: '',
                    vars: [],
                    send_day: 0
                }
                this.smsDialogShow = false
            }
        }
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .item-box{
        margin-right: 20px;
    }
    .item-box .label{
        margin-right: 8px;
    }
    .item-box .symbol{
        margin: 0 6px;
    }

    .form-nickname{
        width: 180px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .index-video-url{
        width: 300px;
    }
    .index-video-url video{
        width: 100%;
    }
    .index-related-info{
        width: 500px;
    }
    .video-top{
        width: 100%;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 20px;
        /* opacity: .5; */
        background-color: #FFFFFF;
    }

    .video-top .top-right{
        line-height: 26px;
    }
    .video-top .top-right .top-title{
        font-size: 18px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        width: 360px;
    }

    .video-top .top-right .wrapper{
        display: flex;
        /* align-items: flex-start; */
    }
    .video-top .top-right .wrapper .to-copy{
        /* color: #03C5FF; */
        margin-left: 20px;
    }
    .video-top .top-right .detail-price{
        color: #BC0100;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
    }
    /* .atooltip {
      background: #FFFFFF !important;
      border: none !important;
    } */


    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        /*border-bottom: 1.4px solid #D6D6D6;*/
    }

    .price_col{
        color: #FF5D05;
    }
</style>