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

<div id="app" v-cloak>
    <el-card
        v-loading="loading"
        style="border:0; min-width: 800px;"
        shadow="never"
        body-style="background-color: #f3f3f3;padding: 10px 0 0;"
    >
        <div slot="header">
			<span>配置</span>
		</div>
        <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="180px"
            style="position: relative"
            size="small"
            :rules="rules"
        >
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <template>
                            <el-tabs v-model="activeName">
                                <!-- 更新设置 -->
                                <el-tab-pane label="更新设置" name="second" v-if="1">
                                    <el-row>
                                        <el-col :span="24">
                                            <!-- 自动更新商品现价 -->
                                            <el-form-item label="自动更新商品价格" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.auto_present_price"
                                                    :active-value="1"
                                                    :inactive-value="0">
                                                </el-switch>
                                            </el-form-item>
                                            <!-- 自动更新商品原价 -->
                                            <!-- <el-form-item label="自动更新商品原价" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.auto_original_price"
                                                    active-value="1"
                                                    inactive-value="0">
                                                </el-switch>
                                            </el-form-item> -->
                                            <!-- 自动更新商品成本价 -->
                                            <!-- <el-form-item label="自动更新商品成本价" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.auto_cost_price"
                                                    active-value="1"
                                                    inactive-value="0">
                                                </el-switch>
                                            </el-form-item> -->
                                            <!-- 自动更新商品基本信息 -->
                                            <el-form-item label="自动更新商品基本信息" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.auto_base_info"
                                                    :active-value="1"
                                                    :inactive-value="0">
                                                </el-switch>
                                            </el-form-item>
                                            <!-- 自动更新商品主图 -->
                                            <!-- <el-form-item label="自动更新商品主图" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.auto_main_pic"
                                                    active-value="1"
                                                    inactive-value="0">
                                                </el-switch>
                                            </el-form-item> -->
                                            <!-- 导入时自动匹配分类 -->
                                            <!-- <el-form-item label="导入时自动匹配分类" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.aoto_match_cat"
                                                    active-value="1"
                                                    inactive-value="0">
                                                </el-switch>
                                            </el-form-item> -->
                                            <el-form-item label="自动更新上下架状态" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.auto_display"
                                                    :active-value="1"
                                                    :inactive-value="0">
                                                </el-switch>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                                <!-- 风控策略 -->
                                <el-tab-pane label="风控策略" name="fourth">
                                    <el-row>
                                        <el-col :span="24">
                                            <!-- 风控开关 -->
                                            <el-form-item label="风控开关" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.danger_status"
                                                    :active-value="1"
                                                    :inactive-value="0">
                                                </el-switch>
                                            </el-form-item>
                                            <!-- 风控策略 -->
                                            <el-form-item label="风控策略" prop="status">
                                                <el-radio-group v-model="ruleForm.danger_type" size="medium" class="redio-center">
                                                    <!-- 产品售价 < 成本价 -->
                                                    <el-radio :label="1">
                                                    产品售价 < 成本价
                                                    </el-radio>
                                                    <!-- 利润率 < 设定利润率 -->>
                                                    <el-radio :label="2">{{''}}</el-radio>
                                                    <span class="redio-input">
                                                        <el-input v-model="ruleForm.danger_rate" style="width:300px;">
                                                            <template slot="prepend">利润率 < 设定利润率</template>
                                                            <template slot="append">%</template>
                                                        </el-input>
                                                    </span>
                                                </el-radio-group>
                                                <div class="tab_tpis">
                                                    利润率 = (售价-成本价)/成本价<br>
                                                    下单的时候会触发检测，检测失败则下单失败
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                                <!-- 订单策略 -->
                                <el-tab-pane label="订单策略" name="fifth" v-if="0">
                                    <el-row>
                                        <el-col :span="24">
                                            <!-- 商品拆单 -->
                                            <el-form-item label="商品拆单" prop="status">
                                                <el-switch
                                                    v-model="ruleForm.order_split"
                                                    active-value="1"
                                                    inactive-value="0">
                                                </el-switch>
                                                <div class="tab_tpis">
                                                    开启后,每一个商品拆成一笔订单,订单原有逻辑不变                                        
                                                </div>
                                            </el-form-item>
                                            <!-- 运费设定 -->
                                            <el-form-item label="运费设定" prop="status">
                                                <el-radio-group v-model="ruleForm.postage_setting">
                                                    <el-radio :label="1">供应链运费</el-radio>
                                                    <el-radio :label="2">商品自设运费</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <!-- 运费计算 -->
                                            <el-form-item label="运费计算" prop="status">
                                                <el-radio-group v-model="ruleForm.postage_calculation">
                                                    <el-radio :label="1">协议价</el-radio>
                                                    <el-radio :label="2">售价</el-radio>
                                                </el-radio-group>
                                                <div class="tab_tpis">
                                                    该设置只对京东商品有效<br>
                                                    订单金额<49元，运费8元<br>
                                                    订单金额<99元，运费6元<br>
                                                    订单金额>99元，免运费
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                                <el-tab-pane label="购物车设置" name="shopping_cart">
                                    <el-row>
                                        <el-col :span="24">
                                            <div class="title">
                                                <span>购物车设置</span>
                                            </div>
                                            <div class="form-body">
                                                <!-- 商品拆单 -->
                                                <el-form-item label="开启购物车结算" prop="is_enable_shopping_cart_settle">
                                                    <el-switch
                                                            v-model="ruleForm.is_enable_shopping_cart_settle"
                                                            :active-value="1"
                                                            :inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                                <!-- 运费设定 -->
                                                <el-form-item label="商城名称" prop="shopping_cart_mall_name">
                                                    <el-input style="width:300px;" v-model="ruleForm.shopping_cart_mall_name" maxlength="10" show-word-limit>
                                                    </el-input>
                                                </el-form-item>
                                                <!-- 运费计算 -->
                                                <el-form-item label="商城LOGO" prop="shopping_cart_mall_logo">
                                                    <com-attachment v-if="!ruleForm.shopping_cart_mall_logo" :multiple="false" :max="1" type="images" @selected="selectedImg($event, 'shopping_cart_mall_logo')">
                                                        <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="ruleForm.shopping_cart_mall_logo"></el-image>
                                                        <el-button @click="delPic('shopping_cart_mall_logo')" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
                                                    </div>
                                                </el-form-item>
                                                <el-form-item label="云仓商品满邮金额" prop="shopping_cart_free_amount">
                                                    <span>
                                                        满
                                                    </span>
                                                    <span style="padding: 0 5px">
                                                        <el-input style="width:150px;" v-model="ruleForm.shopping_cart_free_amount" type="number">
                                                            <template #append>元</template>
                                                        </el-input>
                                                    </span>
                                                    <span>包邮</span>
                                                </el-form-item>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" v-loading="submitLoading" size="small" @click="submit('ruleForm')">提  交</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</div>
<script>
const app = new Vue({
        el: '#app',
        data() {
            return {
                hideStatus_1: true,
                hideStatus_2: true,
                loading: false,
                submitLoading: false,
                activeName: getQuery('tab') ? getQuery('tab') :'second',
                ruleForm: {
                    management_tactics: 1,
                    danger_status: 0,
                    danger_type: 1,
                    is_enable_shopping_cart_settle: 0,
                    shopping_cart_mall_name: '',
                    shopping_cart_mall_logo: '',
                    shopping_cart_free_amount: 59
                },
                rules: {
  
                },
            };
        },
        created() {
            this.loadData();
        },
        mounted: function () {
            this.getTab();
        },
        methods: {
            // 点击显示apikey
            updateHideStatus(type) {
                if (type == 1) {
                    this.hideStatus_1 = false;
                }
                if (type == 2) {
                    this.hideStatus_2 = false;
                }
            },
            getTab() {
                let tab_name = getQuery('tab');
            },
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'qi-juhe/default/index',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        let copyForm = Object.assign({}, this.ruleForm)
                        let form = Object.assign(copyForm, e.data.data)
                        this.ruleForm = form
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            submit(formName) {
                console.log(this.ruleForm)
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'qi-juhe/default/submit',
                            },
                            method: 'post',
                            data: {
                                setting: this.ruleForm
                            },
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                        });
                    } else {
                        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()
                });
            },
            selectedImg(e, key) {
                this.ruleForm[key] = e[0].url;
            },
            delPic(key) {
                this.ruleForm[key] = '';
            },
        },
        computed: {

        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .padding-top {
        margin-bottom: 10px;
    }
</style>