qimall/backend/modules/mall/views/setting/cart.php

<?php
use common\helpers\ComponentHelper;

?>
<style>
    .app-share {
        padding-top: 12px;
        border-top: 1px solid #e2e2e2;
        margin-top: -20px;
    }

    .app-share .app-share-bg {
        position: relative;
        width: 310px;
        height: 360px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center
    }

    .app-share .app-share-bg .title {
        width: 160px;
        height: 29px;
        line-height: 1;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .app-share .app-share-bg .pic-image {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        width: 160px;
        height: 130px;
    }
    .el-card__header {
        padding: 8px 20px;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin: 5px;
    }
    .el-form-item__content, .el-form-item__label{
        margin-top: 10px;
    }
</style>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <template>
                <el-card>
                <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;margin:10px 0 20px 15px;font-size:18px;">
                    <div style="width: 5px;height: 20px;background-color: #409eff;margin-right: 5px;"></div>
                    <div>购物车设置</div>
                </div>
                <el-form :model="ruleForm" size="small" ref="ruleForm"  label-width="150px">
                    <el-tabs v-model="activeName">
                    <el-row>
                        <el-col :span="24">
                            
                            <el-form-item label-width="180px" label="使用商城购物车">
                                <el-col :span="14">
                                    <el-checkbox-group v-model="ruleForm.cart.cart_type.value">
                                        <el-checkbox v-for="(value,key) in cart_list" v-if="key == 1 || (key == 2 && ruleForm.cart.install_o2o == 1)" :key="key" :label="key" @change="checked => HandleChangeChecked(checked, key)">{{value}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-col>
                            </el-form-item>

                        </el-col>
                    </el-row>
                    <!-- <el-card style="margin-top: 20px;"> -->
                    <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;margin:10px 0 20px 15px;font-size:18px;">
                        <div style="width: 5px;height: 20px;background-color: #409eff;margin-right: 5px;"></div>
                        <div>名称设置</div>
                        <span class="tips-text" style="padding-left:10px;line-height:24px;color:red;margin-top:5px;">注意：购物车设置同时勾选主商城商品和o2o商品才生效</span>
                    </div>
                    <el-row>
                        <el-col :span="16">
                             <el-form-item label="主商城购物车名称:" >
                                <el-input v-model="ruleForm.cart.cart_name.value[1]['name']" style="width: 200px;"></el-input>
                                <el-switch v-model="ruleForm.cart.cart_name.value[1]['is_show']" :active-value="'1'" :inactive-value="'0'"></el-switch>
                                <span class="tips-text">关闭：前端则显示默认名称；开启：前端显示自定义名称。</span>
                            </el-form-item>

                            <el-form-item label="o2o门店购物车名称:" >
                                <el-input v-model="ruleForm.cart.cart_name.value[2]['name']" style="width: 200px;"></el-input>
                                <el-switch v-model="ruleForm.cart.cart_name.value[2]['is_show']" :active-value="'1'" :inactive-value="'0'"></el-switch>
                                <span class="tips-text">关闭：前端则显示默认名称；开启：前端显示自定义名称。</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- </el-card> -->
                    </el-tabs>
                    <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="submit" size="small">保存
                        </el-button>
                </el-form>
                </el-card>
            </template>
        </div>
    </el-card>
</div>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                params: {},
                pay_after_link_show: '我的订单',
                defaultTabs: [
                    {"name":"mall"}
                ],
                activeName: 'mall_cart',
                cart_list: {
                    1: '主商城商品',
                    2: 'o2o门店商品',
                },
                ruleForm: {
                    cart: {
                        install_o2o: 0,
                        cart_type: {
                            'title': '所选商城购物车',
                            'value': ['1'],
                        },
                        cart_name: {
                            'title': '购物车别名',
                            'value':[
                            ],
                        },
                    },
                },
                keyword: ''
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                if(this.loading === true) return;
                this.loading = true;
                request({
                    params: {
                        r: 'mall/setting/edit',
                        type: 'mall_cart',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data) {//有选中的
                            var data = e.data.data;
                            Object.keys(this.ruleForm).forEach((key) => {
                                Object.keys(this.ruleForm[key]).forEach((k) => {
                                    if (data[key][k]) {
                                        var dataValue = data[key][k].value;
                                        if(data[key][k].value!=null){
                                            if (typeof dataValue == 'string' && (dataValue.indexOf("{") !== -1 || dataValue.indexOf("[") !== -1)) {        
                                                // 将json字符串转为对象
                                                if (k == 'pay_after_link') {
                                                    var pay_after_link = JSON.parse(data[key][k].value);
                                                    this.pay_after_link_show = pay_after_link.params.title;
                                                    this.ruleForm[key][k].value = data[key][k].value;
                                                } else {
                                                    this.ruleForm[key][k].value = JSON.parse(data[key][k].value);
                                                }
                                            }else{
                                                this.ruleForm[key][k].value = data[key][k].value;
                                            }
                                        }
                                    }
                                });
                            });
                            this.ruleForm.cart.install_o2o=e.data.data.cart.install_o2o;
                            this.cart_list = e.data.data.cart_list;
                            if (e.data.data.cart.install_o2o == 0) {
                                Object.keys(this.ruleForm.cart.cart_type.value).forEach((key) => {
                                    if (this.ruleForm.cart.cart_type.value[key] == 2) {
                                        this.ruleForm.cart.cart_type.value.splice(key, 1);
                                    }
                                });
                            }
                        }
                    }
                    console.log(this.ruleForm)
                }).catch(e => {
                    this.loading = false;
                })
            },
            submit() {
                if (this.ruleForm.cart.cart_type.value.length < 1) {
                    this.$message.error('最少需要选中一个购物车');
                    return false;
                }
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'mall/setting/edit',
                    },
                    method: 'post',
                    data: {
                        setting: this.ruleForm,
                    },
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.loading = false;
                    this.settingPop = false;

                }).catch(e => {
                    this.btnLoading = false;
                    this.loading = false;
                    this.settingPop = false;
                });
            },

            HandleChangeChecked(val, index) {
                this.$forceUpdate();
            },
        }
    });
</script>