liche/admin/views/auto/finance/get.php

<form id="vue-edit" class="am-form am-form-horizontal"  action="/sys/finance/edit"  data-auto="true" method="post" style="width: 90%;padding:25px 30px 20px 0;margin: 0 auto">
    <div class="am-form-group">
        <label class="am-para-label"><span class="com-must-star">*</span>车型：</label>
        <div class="am-para-input">
            <div class="am-form-group am-para-inline w150">
                <select name="brand_id" v-model="info.brand_id">
                    <option value="0">选择品牌</option>
                    <option :value="v.id" v-for="v in brand_arr">{{v.name}}</option>
                </select>
            </div>
            <div class="am-form-group am-para-inline w150">
                <select name="s_id" v-model="info.s_id">
                    <option value="0">选择车系</option>
                    <option :value="v.id" v-for="v in s_arr">{{v.name}}</option>
                </select>
            </div>
            <div class="am-form-group am-para-inline w150">
                <select name="s_id" v-model="info.v_id">
                    <option :value="v.id" v-for="v in v_arr">{{v.name}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label"></label>
        <div class="am-para-input wp40">
            <select name="car_id" v-model="info.car_id">
                <option value="0">选择具体车辆</option>
                <option :value="v.id" v-for="v in cars_arr">{{v.b_name}}{{v.s_name}} {{v.v_name}}-{{v.cor_name}}-内饰{{v.incor_name}}</option>
            </select>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label"><span class="com-must-star">*</span>金融产品：</label>
        <div class="am-para-input wp40">
            <select v-model="info.fin_id">
                <option v-for="(v,i) in finance" :value="v.id">{{v.title}}</option>
            </select>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">期数：</label>
        <div class="am-para-input wp40">
            <select v-model="info.num">
                <option v-for="(v,i) in nums" :value="v">{{v}}</option>
            </select>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">首付：</label>
        <div class="am-para-input">
            <input type="text" name="first_pay" v-model="info.first_pay" style="width: 20%; display: inline"/>
            <span>元</span>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">月供：</label>
        <div class="am-para-input">
            <input type="text" name="mouth_pay" v-model="info.mouth_pay" style="width: 20%; display: inline"/>
            <span>元</span>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">服务费：</label>
        <div class="am-para-input">
            <input type="text" name="srv_pay" v-model="info.srv_pay" style="width: 20%; display: inline"/>
            <span>元</span>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">状态：</label>
        <div class="am-para-input wp40">
            <select name="status" v-model="info.status">
                <option v-for="(v,i) in statusAry" :value="i">{{v}}</option>
            </select>
        </div>
    </div>
    <div class="am-form-group" style="margin-bottom: 2rem">
        <div class="am-para-input"><button class="am-btn am-btn-secondary" type="button" @click="saveEdit">提交</button></div>
    </div>
</form>
<script>
    var loading = 0;
    var vue_obj;
    $(function(){
        vue_obj = new Vue({
            el: '#vue-edit',
            data: {
                info:{},
                statusAry:[],
                action:'',
                finance:[],
                nums:[],
                brand_arr:[],
                s_arr:[],
                v_arr:[],
                cars_arr:[],
            },
            mounted:function(){
                this.info = <?=json_encode($info)?>;
                this.statusAry = <?=json_encode($statusAry)?>;
                this.action = '<?=$action?>';
                this.finance = <?=json_encode($finance)?>;
                this.nums = <?=json_encode($nums)?>;
                this.init_auto();
            },
            methods:{
                init_auto:function(){
                    var vm = this;
                    $.get('common/auto',{type:1,tp:1},function(response){
                        if (response.code == 1) {
                            vm.brand_arr = response.data;
                        }
                    });
                    if(vm.info.brand_id>0){
                        $.get('common/auto',{pid:vm.info.brand_id,type:2,tp:1},function(response){
                            if (response.code == 1) {
                                vm.s_arr = response.data;
                            }
                        });
                    }
                    if(vm.info.s_id>0){
                        $.get('common/auto',{pid:vm.info.s_id,type:3,tp:1},function(response){
                            if (response.code == 1) {
                                vm.v_arr = response.data;
                            }
                        });
                    }
                    if(vm.info.v_id){
                        $.get('auto/finance/get_cars',{brand_id:vm.info.brand_id,s_id:vm.info.s_id,v_id:vm.info.v_id},function(response){
                            if (response.code == 1) {
                                vm.cars_arr = response.data.lists
                            }
                        });
                    }
                },
                saveEdit:function(){
                    $.post(this.action,{info:this.info},function(data){
                        if (data['code']) {
                            layer.msg(data.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                layer.closeAll();
                                $.form.reload();
                            });
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    })
                }
            },
            watch:{
                'info.brand_id':function(nv, ov){
                    var that = this;
                    if(nv == 0){
                        that.cars_arr = [];
                        that.s_arr = [];
                        that.v_arr = [];
                        that.info.s_id = 0;
                        that.info.car_id = 0;
                        that.info.v_id = 0;
                    } else {
                        $.get('common/auto',{pid:that.info.brand_id,type:2,tp:1},function(response){
                            if (response.code == 1) {
                                that.s_arr = response.data
                            }
                        });
                    }
                },
                'info.s_id':function(nv, ov){
                    var that = this;
                    if(nv == 0){
                        that.v_arr = [];
                        that.cars_arr = [];
                        that.info.car_id = 0;
                        that.info.v_id = 0;
                    } else {
                        $.get('common/auto',{pid:that.info.s_id,type:3},function(response){
                            if (response.code == 1) {
                                that.v_arr = response.data;
                            }
                        });
                    }
                },
                'info.v_id':function(nv, ov){
                    var that = this;
                    if(nv == 0){
                        that.cars_arr = [];
                        that.info.car_id = 0;
                    } else {
                        $.get('auto/finance/get_cars',{brand_id:that.info.brand_id,s_id:that.info.s_id,v_id:that.info.v_id},function(response){
                            if (response.code == 1) {
                                that.cars_arr = response.data.lists
                            }
                        });
                    }
                },
            }
        });
    });
</script>