qimall/addons/QiDingDong/backend/views/setting/index.php

<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">
            <div style="display: flex; justify-content:space-between">
                <span>基础设置</span>
                <div>
                    <el-button size="small" type="primary" style="padding: 9px 15px !important;" @click="onSubmit">保存配置</el-button>
                </div>
            </div>
        </div>

        <div class="table-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-form size="small" ref="form" label-width="180px" :model="form" :rules="rules">
                    <el-form-item label="是否启用插件" prop="is_enable">
                        <el-switch
                            v-model="form.is_enable"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="自动更新商品售价" prop="auto_update_price">
                        <el-switch
                                v-model="form.auto_update_price"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item v-if="admin_type == 1" label="标准选品库" prop="is_default">
                        <el-switch
                                v-model="form.is_default"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <div v-if="form.is_default">
                        <el-form-item prop="app_key" label="AppKey" prop="app_key" :rules="[{required:true, message: 'AppKey不能为空'}]">
                            <el-col :span="24">
                                <el-input style="width: 500px" v-model="form.app_key">
                                </el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item prop="token" label="Token" prop="token" :rules="[{required:true, message: 'Token不能为空'}]">
                            <el-col :span="24">
                                <el-input style="width: 500px" v-model="form.token"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="Public Key" prop="public_key" :rules="[{required:true, message: '公钥不能为空'}]">
                            <el-input style="width: 500px" v-model="form.public_key" :placeholder="form.public_key" :disabled="true">
                                <template #append>
                                    <input ref="public_key" type="file" accept=".key" :multiple="false" style="display: none"
                                           @change="handleChange">
                                    <el-button size="small" @click="uploadPem('public_key')">上传Public Key</el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="订单通知地址">
                            <el-col :span="24">
                                <el-input style="width: 500px" v-model="order_callback_url" disabled>
                                    <template #append><el-button @click="copyLink(order_callback_url)" class="copy_btn">点击复制</el-button></template>
                                </el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="商品修改通知地址">
                            <el-col :span="24">
                                <el-input style="width: 500px" v-model="goods_callback_url" disabled>
                                    <template #append><el-button @click="copyLink(goods_callback_url)" class="copy_btn">点击复制</el-button></template>
                                </el-input>
                            </el-col>
                        </el-form-item>
                    </div>

                    <h3 style="padding-left: 107px">定价策略</h3>
                    <el-form-item label="售价 定价策略" prop="status">
                        <el-radio-group v-model="form.price.price.type" size="medium" class="redio-center">
                            <!-- 指导价 -->
                            <el-radio label="price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.price.rate.price">
                                    <template slot="prepend">供货价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                            <!-- 协议价 -->
                            <el-radio label="retail_price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.price.rate.retail_price">
                                    <template slot="prepend">建议零售价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                            <el-radio label="lowest_price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.price.rate.lowest_price">
                                    <template slot="prepend">最低售价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                        </el-radio-group>
                        <div class="tab_tpis">
                            举例：供货价50元 建议零售价100元<br>
                            供货价 x 定价系数 即 50 x 130% = 65 元<br>
                            建议零售价 x 定价系数 即 100 x 80% = 80 元<br>
                            默认为供货价 x 150%（建议零售价不变，供货价上涨可能导致亏损!）<br>
                        </div>
                    </el-form-item>
                    <!-- 成本价 定价策略 -->
                    <el-form-item label="成本价 定价策略" prop="status">
                        <el-radio-group v-model="form.price.cost_price.type" size="medium" class="redio-center">
                            <!-- 指导价 -->
                            <el-radio label="price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.cost_price.rate.price">
                                    <template slot="prepend">供货价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                            <!-- 协议价 -->
                            <el-radio label="retail_price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.cost_price.rate.retail_price">
                                    <template slot="prepend">建议零售价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                            <el-radio label="lowest_price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.cost_price.rate.lowest_price">
                                    <template slot="prepend">最低售价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 原价 定价策略 -->
                    <el-form-item label="原价 定价策略" prop="status">
                        <el-radio-group v-model="form.price.original_price.type" size="medium" class="redio-center">
                            <!-- 指导价 -->
                            <el-radio label="price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.original_price.rate.price">
                                    <template slot="prepend">供货价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                            <!-- 协议价 -->
                            <el-radio label="retail_price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.original_price.rate.retail_price">
                                    <template slot="prepend">建议零售价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                            <el-radio label="lowest_price">{{''}}</el-radio>
                            <span class="redio-input">
                                <el-input minlength="1" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width:300px;" v-model="form.price.original_price.rate.lowest_price">
                                    <template slot="prepend">最低售价 x 定价系数</template>
                                    <template slot="append">%</template>
                                </el-input>
                            </span>
                        </el-radio-group>
                    </el-form-item>
                    <div v-if="form.is_default">
                        <h3 style="padding-left: 107px">收款设置</h3>
                        <el-form-item label="联系二维码" prop="contact_image" >
                            <com-attachment v-model="form.contact_image" :multiple="false" :max="1">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:500 * 500" placement="top">
                                    <el-button size="mini">选择图片</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <div v-if="form.contact_image" class="customize-share-title" style="width: 80px; height: 80px; overflow: hidden">
                                <el-image mode="aspectFill" width='80px' height='80px' :src="form.contact_image ? form.contact_image : ''"></el-image>
                                <el-button v-if="form.contact_image" class="del-btn" size="mini"  type="danger" icon="el-icon-close" circle  @click="form.contact_image = ''"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input style="width: 200px" v-model="form.mobile" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                        <el-form-item label="资金低于" prop="min_balance" :rules="[{required: true, message:'请输入资金提醒门槛'}]">
                            <el-input style="width: 400px" v-model="form.min_balance" placeholder="请输入资金提醒门槛">
                                <template #append>元,红色数值提醒</template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </el-tabs>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>

    </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: {
            activeName: '',
            form: {
                is_enable: 0,
                app_key: '',
                token: '',
                public_key: '',
                is_default: 0,
                auto_update_price: 0,
                contact_image: '',
                mobile: '',
                min_balance: 0,
                price: {
                    price: {
                        type: 'price',
                        rate: {
                            price: 150,
                            retail_price: 150,
                            lowest_price: 150
                        },
                    },
                    cost_price: {
                        type: 'price',
                        rate: {
                            price: 150,
                            retail_price: 150,
                            lowest_price: 150
                        },
                    },
                    original_price: {
                        type: 'price',
                        rate: {
                            price: 150,
                            retail_price: 150,
                            lowest_price: 150
                        },
                    }
                }
            },
            pem_value: '',
            rules: {},
            order_callback_url: '<?= $order_callback_url ?>',
            goods_callback_url: '<?= $goods_callback_url ?>',
            admin_type: '<?= $admin_type ?>',
        },
        mounted() {
            // 获取列表首页数据
            this.getData()
        },

        methods: {
            //1.0 跳转详情
            handleClick(tab, event) {
            },
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function (item) {
                    self.choose_list.push(item.id);
                })
            },
            getData() {
                this.loading = true
                request({
                    method: 'get',
                    params: {
                        r: 'qi-ding-dong/setting/index',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        if (!e.data.data.price) e.data.data.price = this.form.price
                        this.form = Object.assign(this.form, e.data.data)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        request({
                            method: 'post',
                            params: {
                                r: 'qi-ding-dong/setting/index',
                            },
                            data: 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)
                    }
                })
            },
            uploadPem(key) {
                this.pem_value = key;
                this.$refs[key].value = null;
                this.$refs[key].click();
            },
            handleChange(e){
                const rawFiles = e.target.files;
                if (rawFiles.length > 1) {
                    this.$message.error('最多一次只能上传一个文件。')
                    return;
                }
                let file = {
                    _complete: false,
                    response: null,
                    rawFile: rawFiles[0],
                };
                let formData = new FormData();
                const params = {};
                params['r'] = 'mall/file/upload';
                for (let i in this.params) {
                    params[i] = this.params[i];
                }
                for (let i in this.fields) {
                    formData.append(i, this.fields[i]);
                }
                formData.append('file', file.rawFile, file.rawFile.name);
                this.$request({
                    headers: {'Content-Type': 'multipart/form-data'},
                    params: params,
                    method: 'post',
                    data: formData,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.form[this.pem_value] = e.data.data.path;
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('上传失败');
                });
            },
            copyLink(url) { //复制链接
                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return url;
                    }
                });

                clipboard.on('success', (e) => {
                    this.$message.success('复制成功!');
                    clipboard.destroy()
                });
                clipboard.on('error', (e) => {
                    this.$message.error('复制失败!');
                    this.clipboard.destroy()
                });
            },
        }
    });
</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;
    }

    .redio-center {
        display: flex;
        align-items: center;
    }
    .redio-input {
        margin-left: -28px;
        margin-right: 20px;
    }
</style>