添加快捷操作页面

app/Admin/Controllers/LiveContinueController.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Admin\Controllers;
+
+use App\Models\Oldman;
+use Dcat\Admin\Form;
+use Dcat\Admin\Grid;
+use Dcat\Admin\Show;
+use Dcat\Admin\Layout\Content;
+use Dcat\Admin\Http\Controllers\AdminController;
+use App\Admin\Pages\LiveContinue;
+use Illuminate\Http\Request;
+
+class LiveContinueController extends AdminController
+{
+    
+    /**
+     * Make a grid builder.
+     *
+     * @return Grid
+     */
+    protected function grid()
+    {
+        // $builder = Oldman::where();
+        return Grid::make(new Oldman(), function (Grid $grid) {
+            $grid->column('name');
+            $grid->column('card_no');
+            $grid->column('client_name');
+            $grid->column('nurse_lv')->sortable();
+            $grid->column('live_in_at')->sortable();
+            $grid->column('avliable_at')->sortable();
+            // $grid->column('created_at')->sortable();
+
+            $grid->disableCreateButton();
+            $grid->tools("
+            <div class='pull-right' data-responsive-table-toolbar='grid-table'>
+                <a href='".admin_route('live_continue.create')."' class='btn btn-primary dialog-create btn-outline' target='_blank'>
+                    <i class='feather icon-plus'></i><span class='d-none d-sm-inline'>&nbsp; 续住</span>
+                </a>
+            </div>");
+        
+            $grid->filter(function (Grid\Filter $filter) {
+                $filter->equal('name')->width(3);
+                $filter->equal('card_no')->width(3);
+                $filter->equal('nurse_lv')->select()->width(3);
+            });
+        });
+    }
+
+     /**
+     * 续住
+     */
+    public function create(Content $content){
+        return $content->header('客人续住')
+                        ->description('表单')
+                        ->body(new LiveContinue());
+    }
+
+    public function toStore(Request $request){
+
+    }
+}

app/Admin/Controllers/LiveInController.php

@@ -6,7 +6,10 @@ use App\Models\Oldman;
 use Dcat\Admin\Form;
 use Dcat\Admin\Grid;
 use Dcat\Admin\Show;
+use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Http\Controllers\AdminController;
+use App\Admin\Pages\LiveIn;
+use Illuminate\Http\Request;
 
 class LiveInController extends AdminController
 {
@@ -30,9 +33,9 @@ class LiveInController extends AdminController
             $grid->disableCreateButton();
             $grid->tools("
             <div class='pull-right' data-responsive-table-toolbar='grid-table'>
-                <button data-url='/admin' class='btn btn-primary dialog-create btn-outline'>
+                <a href='".admin_route('live_in.create')."' class='btn btn-primary dialog-create btn-outline' target='_blank'>
                     <i class='feather icon-plus'></i><span class='d-none d-sm-inline'>&nbsp; 入住</span>
-                </button>
+                </a>
             </div>");
         
             $grid->filter(function (Grid\Filter $filter) {
@@ -76,62 +79,16 @@ class LiveInController extends AdminController
         });
     }
 
-    /**
+     /**
-     * Make a form builder.
+     * 入住
-     *
-     * @return Form
      */
-    protected function form()
+    public function create(Content $content){
-    {
+        return $content->header('客人入住')
-        return Form::make(new Oldman(), function (Form $form) {
+                        ->description('表单')
-            $form->display('id');
+                        ->body(new LiveIn());
-            $form->row(function (Form\Row $form) {
+    }
-                $form->divider('居住人');
-            });
-            $form->row(function (Form\Row $form) {
-                $form->width(6)->text('floor_name');
-                $form->width(6)->text('agreement_no');
-            });
-            $form->row(function (Form\Row $form) {
-                $form->width(6)->text('name')->required();
-                $form->width(3)->radio('sex')->options(['1'=>'男', '2'=>'女'])->required();
-            });
-            $form->row(function (Form\Row $form) {
-                $form->width(6)->text('card_no')->required();
-                $form->width(6)->date('birthday')->required();
-            });
 
-            $form->row(function (Form\Row $form) {
+    public function toStore(Request $request){
-                $form->width(3)->select('card_province_id')->required();
-                $form->width(3)->select('card_city_id')->required();
-                $form->width(3)->select('card_area_id')->required();
-            });
-            $form->row(function (Form\Row $form) {
-                $form->text('card_address')->required();
-            });
-            $form->row(function (Form\Row $form) {
-                $form->select('nurse_lv')->required();
-            });
 
-            $form->row(function (Form\Row $form) {
-                $form->divider('委托人');
-            });
-
-            $form->row(function (Form\Row $form) {
-                $form->width(6)->text('client_name')->required();
-                $form->width(6)->text('client_phone')->required();
-            });
-            $form->row(function (Form\Row $form) {
-                $form->width(3)->select('client_province_id')->required();
-                $form->width(3)->select('client_city_id')->required();
-                $form->width(3)->select('client_area_id')->required();
-            });
-            $form->row(function (Form\Row $form) {
-                $form->text('client_address')->required();
-            });
-        
-            $form->display('created_at');
-            $form->display('updated_at');
-        });
     }
 }

app/Admin/Controllers/LiveOutController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Admin\Controllers;
+
+use App\Models\Oldman;
+use Dcat\Admin\Form;
+use Dcat\Admin\Grid;
+use Dcat\Admin\Show;
+use Dcat\Admin\Layout\Content;
+use Dcat\Admin\Http\Controllers\AdminController;
+use App\Admin\Pages\LiveOut;
+use Illuminate\Http\Request;
+
+class LiveOutController extends AdminController
+{
+     /**
+     * 结算
+     */
+    public function create(Content $content){
+        return $content->header('客人结算')
+                        ->description('表单')
+                        ->body(new LiveOut());
+    }
+
+    public function toStore(Request $request){
+
+    }
+}

app/Admin/Pages/LiveContinue.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Admin\Pages;
+
+use Illuminate\Contracts\Support\Renderable;
+
+class LiveContinue implements Renderable
+{
+    public function render()
+    {
+        // dd(123456);
+        return admin_view('admin.do.live-continue', ['goods'=>'{}']);
+    }
+}

app/Admin/Pages/LiveIn.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Admin\Pages;
+
+use Illuminate\Contracts\Support\Renderable;
+
+class LiveIn implements Renderable
+{
+    public function render()
+    {
+        // dd(123456);
+        return admin_view('admin.do.live-in', ['goods'=>'{}']);
+    }
+}

app/Admin/Pages/LiveOut.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Admin\Pages;
+
+use Illuminate\Contracts\Support\Renderable;
+
+class LiveOut implements Renderable
+{
+    public function render()
+    {
+        // dd(123456);
+        return admin_view('admin.do.live-out', ['goods'=>'{}']);
+    }
+}

app/Admin/routes.php

@@ -17,8 +17,15 @@ Route::group([
     $router->resource('oldmen', 'OldmanController')->names('oldmen');
     $router->resource('cost-advices', 'CostAdviceController')->names('cost_advices');
 
-    $router->get('live-in', 'LiveInController@index');
+    $router->get('live-ins', 'LiveInController@index')->name('live_in.index');
+    $router->get('live-in-do', 'LiveInController@create')->name('live_in.create');
+    $router->post('live-in-do', 'LiveInController@toStore')->name('live_in.store');
 
+    $router->get('live-continues', 'LiveContinueController@index')->name('live_continue.index');
+    $router->get('live-continue-do', 'LiveContinueController@create')->name('live_continue.create');
+    $router->post('live-continue-do', 'LiveContinueController@toStore')->name('live_continue.store');
+    $router->get('live-out-do', 'LiveOutController@create')->name('live_out.create');
+    $router->post('live-out-do', 'LiveOutController@toStore')->name('live_out.store');
     $router->group([
         'prefix' => 'api',
     ], function (Router $router) {

config/admin.php

@@ -11,7 +11,7 @@ return [
     | login page.
     |
     */
-    'name' => 'Dcat Admin',
+    'name' => '老年公寓收费系统',
 
     /*
     |--------------------------------------------------------------------------
@@ -22,7 +22,7 @@ return [
     | `img` tag, eg '<img src="http://logo-url" alt="Admin logo">'.
     |
     */
-    'logo' => '<img src="/vendor/dcat-admin/images/logo.png" width="35"> &nbsp;Dcat Admin',
+    'logo' => '老年公寓收费系统',
 
     /*
     |--------------------------------------------------------------------------

database/seeders/AdminMenuSeeder.php

@@ -24,13 +24,13 @@ class AdminMenuSeeder extends Seeder
             ['title' => '客人信息', 'icon' => 'feather icon-users', 'uri' => '/oldmen'],
             ['title' => '入住管理', 'icon' => 'feather icon-feather', 'uri' => '', 
                 'children' =>[
-                    ['title' => '入住列表', 'icon' => '', 'uri' => '/live-in', 'permission' => ''],
+                    ['title' => '入住列表', 'icon' => '', 'uri' => '/live-ins', 'permission' => ''],
-                    ['title' => '续费列表', 'icon' => '', 'uri' => '/auth/users', 'permission' => ''],
+                    ['title' => '续费列表', 'icon' => '', 'uri' => '/live-continues', 'permission' => ''],
                 ]],
             ['title' => '快捷操作', 'icon' => 'feather icon-fast-forward', 'uri' => '/', 'children' =>[
-                ['title' => '入住', 'icon' => '', 'uri' => '/auth/users', 'permission' => ''],
+                ['title' => '入住', 'icon' => '', 'uri' => '/live-in-do', 'permission' => ''],
-                ['title' => '续费', 'icon' => '', 'uri' => '/auth/users', 'permission' => ''],
+                ['title' => '续费', 'icon' => '', 'uri' => '/live-continue-do', 'permission' => ''],
-                ['title' => '结算', 'icon' => '', 'uri' => '/auth/users', 'permission' => ''],
+                ['title' => '结算', 'icon' => '', 'uri' => '/live-out-do', 'permission' => ''],
             ]],
             ['title' => '费用配置', 'icon' => 'feather icon-stop-circle', 'uri' => '/cost-advices'],
             ['title' => '系统管理', 'icon' => 'feather icon-settings', 'uri' => '',

resources/views/admin/do/live-continue.blade.php

@@ -0,0 +1,220 @@
+
+
+<div class="row create-order">
+    <div class="col-md-8">
+      <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-start pb-0">
+            <div class="card-title">续住信息</div>
+        </div>
+        <div class="metric-content">
+            <div class="card-content" >
+                <div style="height: 74vh;overflow-y: auto;">
+                    
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-start pb-0">
+                <div class="card-title">续住结算</div>
+            </div>
+            <div class="metric-content">
+                <div class="card-content" style="height: 68vh;overflow-y: auto;">
+                    <table class="table custom-data-table" cellspacing="0" cellpadding="0">
+                        <thead>
+                            <tr>
+                                <th width='100px;'>名称</th>
+                                <th>明细</th>
+                                <th>价格</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td width='100px;'rowspan="3" class="text-wrap text-truncate">续住项</td>
+                                <td>
+                                    <label style="padding-left: 23.3px;">养老费</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                <label>体检</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <label >暖气费</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="card-footer">
+                    <span style="float:right;"><h4>合计：￥1000</h4></span>
+                    <form id="create-order-post" action="" method="POST" onsubmit="return false">
+                        {{ csrf_field() }}
+                        <input type="hidden" name="goods_info" :value="getGoods">
+                        <button type="submit" v-on:click="postOrder();" class="btn btn-primary btn-sm submit" >确认续住</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+{!! admin_js(['/vendor/vue/vue.js']) !!}
+<script init=".create-order">
+    // js代码也可以放在模板里面
+    console.log('所有JS脚本都加载完了!!!');
+
+    function copy(obj){
+        return Object.assign({}, obj);
+    }
+
+    var vm = new Vue({
+        el: '#' + id,
+        data: {
+            goods: {!! $goods !!},
+            goods_list: [],
+            all_goods_attrs: [],
+            goods_carts:{},
+        },
+        computed: {
+            getGoods() {
+                return JSON.stringify(this.goods_carts)
+            },
+            totalCartsPrice(){
+                return function(){
+                    let cart_price = 0;
+                    for(var key in this.goods_carts){
+                        cart_price += parseFloat(this.goods_carts[key].goods_price * this.goods_carts[key].goods_num)
+                    }
+                    return cart_price.toFixed(2)
+                }
+            }
+        },
+        created() {
+            this.createData();
+        },
+        methods: {
+            postOrder(){
+                // return false;
+                let _form = $('#create-order-post');
+                let _self = this;
+                Dcat.confirm('确认该订单已支付？', null, function () {
+                    Dcat.Form({
+                        form: _form,
+                        success: function (response) {
+                            console.log(response);
+                            if (! response.status) {
+                                Dcat.error(response.data.message);
+                                return false;
+                            }
+                            Dcat.success(response.data.message);
+                            //清空购物车;
+                            _self.cleanCart();
+                            // location.href = response.data.value;
+                            return false;
+                        },
+                        error: function () {
+                            console.log(response);
+                            // 非200状态码响应错误
+                        }
+                    });
+                });
+            },
+            createData(){
+                for (let i = 0; i < this.goods.length; i++) {
+                    this.addGoods()
+                    this.goods_list[i].goods_id = this.goods[i].goods_id
+                    this.goods_list[i].goods_price = this.goods[i].goods_price
+                    this.addGoodsAttr(i)
+                }
+            },
+            // 添加规格项目
+            addGoods () {
+                this.goods_list.push({
+                    goods_id: 0,
+                    goods_attrs: {},
+                    goods_price: 0
+                })
+            },
+            addGoodsAttr(index){
+                for(var key in this.goods[index].goods_attrs){
+                    this.goods_list[index].goods_attrs[key] = '';
+                    //将所有可用属性单独放在一个数组，好计算商品价格
+                    for (let i = 0; i < this.goods[index].goods_attrs[key].length; i++) {
+                        this.all_goods_attrs[this.goods[index].goods_attrs[key][i].value_id] = this.goods[index].goods_attrs[key][i]
+                    }
+                }
+            },
+            addToCart(index){
+                let key = ""+index
+                for(var attr_name in this.goods_list[index].goods_attrs){
+                    if(this.goods_list[index].goods_attrs[attr_name] == ''){
+                        Dcat.error('请选择属性')
+                        return
+                    }
+                    key+=""+ this.goods_list[index].goods_attrs[attr_name]
+                }
+                //查询当前是否有这个商品，有则商品数+1
+                if( typeof(this.goods_carts[key]) != "undefined"){
+                    let _goods_num = this.goods_carts[key].goods_num + 1
+                    // console.log(this.goods_carts[key].goods_num);
+                    this.$set(this.goods_carts[key], 'goods_num', _goods_num)
+                }else{
+                    let _goods_attrs = copy(this.goods_list[index].goods_attrs)
+                    let _goods_price = this.goods_list[index].goods_price
+                    let _goods = {
+                        'goods_name':this.goods[index].goods_name,
+                        'goods_index':index,
+                        'goods_id':this.goods[index].goods_id,
+                        'goods_attr':_goods_attrs,
+                        'goods_price':_goods_price,
+                        'goods_num':1
+                    }
+                    this.$set(this.goods_carts, key, _goods)
+                }
+                console.log(this.goods_carts);
+                console.log(this.all_goods_attrs);
+            },
+            removeToCart(index){
+                let _goods_carts = copy(this.goods_carts)
+                delete _goods_carts[index];
+                this.goods_carts = _goods_carts;
+            },
+            editGoodsAttr(index, attr_name, attr_id){
+                this.$set(this.goods_list[index].goods_attrs, attr_name, attr_id);
+                //改变商品价格
+                let goods_price = parseFloat(this.goods[index].goods_price)
+                for(var attr_name in this.goods_list[index].goods_attrs){
+                    if(this.goods_list[index].goods_attrs[attr_name]){
+                        goods_price += parseFloat(this.all_goods_attrs[this.goods_list[index].goods_attrs[attr_name]].value_price)
+                    }
+                }
+                this.$set(this.goods_list[index], 'goods_price', goods_price.toFixed(2))
+            },
+            goodsAttr(index, attr_name){
+                return index+attr_name
+            },
+            addOne(index){
+                let _goods_num = this.goods_carts[index].goods_num + 1
+                this.$set(this.goods_carts[index], 'goods_num', _goods_num)
+            },
+            reduceOne(index){
+                let _goods_num = this.goods_carts[index].goods_num - 1
+                if(_goods_num == 0){
+                    this.removeToCart(index)
+                }
+                this.$set(this.goods_carts[index], 'goods_num', _goods_num)
+            },
+            cleanCart(){
+                this.goods_carts = {};
+            }
+        }
+    });
+
+</script>

resources/views/admin/do/live-in.blade.php

@@ -0,0 +1,239 @@
+
+
+<div class="row create-order">
+    <div class="col-md-8">
+      <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-start pb-0">
+            <div class="card-title">入住信息</div>
+        </div>
+        <div class="metric-content">
+            <div class="card-content" >
+                <div style="height: 74vh;overflow-y: auto;">
+                    
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-start pb-0">
+                <div class="card-title">入住结算</div>
+            </div>
+            <div class="metric-content">
+                <div class="card-content" style="height: 68vh;overflow-y: auto;">
+                    <table class="table custom-data-table" cellspacing="0" cellpadding="0">
+                        <thead>
+                            <tr>
+                                <th width='100px;'>名称</th>
+                                <th>明细</th>
+                                <th>价格</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td width='100px;'rowspan="3" class="text-wrap text-truncate">入住项</td>
+                                <td>
+                                    <label style="padding-left: 23.3px;">养老费</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                <label>体检</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <label >暖气费</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td width='100px;' rowspan="3" class="text-wrap text-truncate">保证金</td>
+                                <td>
+                                    <label style="padding-left: 23.3px;">入住</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                <label>房间</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                <label >医疗</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="card-footer">
+                    <span style="float:right;"><h4>合计：￥1000</h4></span>
+                    <form id="create-order-post" action="" method="POST" onsubmit="return false">
+                        {{ csrf_field() }}
+                        <input type="hidden" name="goods_info" :value="getGoods">
+                        <button type="submit" v-on:click="postOrder();" class="btn btn-primary btn-sm submit" >确认入住</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+{!! admin_js(['/vendor/vue/vue.js']) !!}
+<script init=".create-order">
+    // js代码也可以放在模板里面
+    console.log('所有JS脚本都加载完了!!!');
+
+    function copy(obj){
+        return Object.assign({}, obj);
+    }
+
+    var vm = new Vue({
+        el: '#' + id,
+        data: {
+            goods: {!! $goods !!},
+            goods_list: [],
+            all_goods_attrs: [],
+            goods_carts:{},
+        },
+        computed: {
+            getGoods() {
+                return JSON.stringify(this.goods_carts)
+            },
+            totalCartsPrice(){
+                return function(){
+                    let cart_price = 0;
+                    for(var key in this.goods_carts){
+                        cart_price += parseFloat(this.goods_carts[key].goods_price * this.goods_carts[key].goods_num)
+                    }
+                    return cart_price.toFixed(2)
+                }
+            }
+        },
+        created() {
+            this.createData();
+        },
+        methods: {
+            postOrder(){
+                // return false;
+                let _form = $('#create-order-post');
+                let _self = this;
+                Dcat.confirm('确认该订单已支付？', null, function () {
+                    Dcat.Form({
+                        form: _form,
+                        success: function (response) {
+                            console.log(response);
+                            if (! response.status) {
+                                Dcat.error(response.data.message);
+                                return false;
+                            }
+                            Dcat.success(response.data.message);
+                            //清空购物车;
+                            _self.cleanCart();
+                            // location.href = response.data.value;
+                            return false;
+                        },
+                        error: function () {
+                            console.log(response);
+                            // 非200状态码响应错误
+                        }
+                    });
+                });
+            },
+            createData(){
+                for (let i = 0; i < this.goods.length; i++) {
+                    this.addGoods()
+                    this.goods_list[i].goods_id = this.goods[i].goods_id
+                    this.goods_list[i].goods_price = this.goods[i].goods_price
+                    this.addGoodsAttr(i)
+                }
+            },
+            // 添加规格项目
+            addGoods () {
+                this.goods_list.push({
+                    goods_id: 0,
+                    goods_attrs: {},
+                    goods_price: 0
+                })
+            },
+            addGoodsAttr(index){
+                for(var key in this.goods[index].goods_attrs){
+                    this.goods_list[index].goods_attrs[key] = '';
+                    //将所有可用属性单独放在一个数组，好计算商品价格
+                    for (let i = 0; i < this.goods[index].goods_attrs[key].length; i++) {
+                        this.all_goods_attrs[this.goods[index].goods_attrs[key][i].value_id] = this.goods[index].goods_attrs[key][i]
+                    }
+                }
+            },
+            addToCart(index){
+                let key = ""+index
+                for(var attr_name in this.goods_list[index].goods_attrs){
+                    if(this.goods_list[index].goods_attrs[attr_name] == ''){
+                        Dcat.error('请选择属性')
+                        return
+                    }
+                    key+=""+ this.goods_list[index].goods_attrs[attr_name]
+                }
+                //查询当前是否有这个商品，有则商品数+1
+                if( typeof(this.goods_carts[key]) != "undefined"){
+                    let _goods_num = this.goods_carts[key].goods_num + 1
+                    // console.log(this.goods_carts[key].goods_num);
+                    this.$set(this.goods_carts[key], 'goods_num', _goods_num)
+                }else{
+                    let _goods_attrs = copy(this.goods_list[index].goods_attrs)
+                    let _goods_price = this.goods_list[index].goods_price
+                    let _goods = {
+                        'goods_name':this.goods[index].goods_name,
+                        'goods_index':index,
+                        'goods_id':this.goods[index].goods_id,
+                        'goods_attr':_goods_attrs,
+                        'goods_price':_goods_price,
+                        'goods_num':1
+                    }
+                    this.$set(this.goods_carts, key, _goods)
+                }
+                console.log(this.goods_carts);
+                console.log(this.all_goods_attrs);
+            },
+            removeToCart(index){
+                let _goods_carts = copy(this.goods_carts)
+                delete _goods_carts[index];
+                this.goods_carts = _goods_carts;
+            },
+            editGoodsAttr(index, attr_name, attr_id){
+                this.$set(this.goods_list[index].goods_attrs, attr_name, attr_id);
+                //改变商品价格
+                let goods_price = parseFloat(this.goods[index].goods_price)
+                for(var attr_name in this.goods_list[index].goods_attrs){
+                    if(this.goods_list[index].goods_attrs[attr_name]){
+                        goods_price += parseFloat(this.all_goods_attrs[this.goods_list[index].goods_attrs[attr_name]].value_price)
+                    }
+                }
+                this.$set(this.goods_list[index], 'goods_price', goods_price.toFixed(2))
+            },
+            goodsAttr(index, attr_name){
+                return index+attr_name
+            },
+            addOne(index){
+                let _goods_num = this.goods_carts[index].goods_num + 1
+                this.$set(this.goods_carts[index], 'goods_num', _goods_num)
+            },
+            reduceOne(index){
+                let _goods_num = this.goods_carts[index].goods_num - 1
+                if(_goods_num == 0){
+                    this.removeToCart(index)
+                }
+                this.$set(this.goods_carts[index], 'goods_num', _goods_num)
+            },
+            cleanCart(){
+                this.goods_carts = {};
+            }
+        }
+    });
+
+</script>

resources/views/admin/do/live-out.blade.php

@@ -0,0 +1,221 @@
+
+
+
+<div class="row create-order">
+    <div class="col-md-8">
+      <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-start pb-0">
+            <div class="card-title">结算信息</div>
+        </div>
+        <div class="metric-content">
+            <div class="card-content" >
+                <div style="height: 74vh;overflow-y: auto;">
+                    
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-start pb-0">
+                <div class="card-title">离开结算</div>
+            </div>
+            <div class="metric-content">
+                <div class="card-content" style="height: 68vh;overflow-y: auto;">
+                    <table class="table custom-data-table" cellspacing="0" cellpadding="0">
+                        <thead>
+                            <tr>
+                                <th width='100px;'>名称</th>
+                                <th>明细</th>
+                                <th>价格</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td width='100px;'rowspan="3" class="text-wrap text-truncate">续住项</td>
+                                <td>
+                                    <label style="padding-left: 23.3px;">养老费</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                <label>体检</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <label >暖气费</label>
+                                </td>
+                                <td>1,000</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="card-footer">
+                    <span style="float:right;"><h4>合计：￥1000</h4></span>
+                    <form id="create-order-post" action="" method="POST" onsubmit="return false">
+                        {{ csrf_field() }}
+                        <input type="hidden" name="goods_info" :value="getGoods">
+                        <button type="submit" v-on:click="postOrder();" class="btn btn-primary btn-sm submit" >确认结算</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+{!! admin_js(['/vendor/vue/vue.js']) !!}
+<script init=".create-order">
+    // js代码也可以放在模板里面
+    console.log('所有JS脚本都加载完了!!!');
+
+    function copy(obj){
+        return Object.assign({}, obj);
+    }
+
+    var vm = new Vue({
+        el: '#' + id,
+        data: {
+            goods: {!! $goods !!},
+            goods_list: [],
+            all_goods_attrs: [],
+            goods_carts:{},
+        },
+        computed: {
+            getGoods() {
+                return JSON.stringify(this.goods_carts)
+            },
+            totalCartsPrice(){
+                return function(){
+                    let cart_price = 0;
+                    for(var key in this.goods_carts){
+                        cart_price += parseFloat(this.goods_carts[key].goods_price * this.goods_carts[key].goods_num)
+                    }
+                    return cart_price.toFixed(2)
+                }
+            }
+        },
+        created() {
+            this.createData();
+        },
+        methods: {
+            postOrder(){
+                // return false;
+                let _form = $('#create-order-post');
+                let _self = this;
+                Dcat.confirm('确认该订单已支付？', null, function () {
+                    Dcat.Form({
+                        form: _form,
+                        success: function (response) {
+                            console.log(response);
+                            if (! response.status) {
+                                Dcat.error(response.data.message);
+                                return false;
+                            }
+                            Dcat.success(response.data.message);
+                            //清空购物车;
+                            _self.cleanCart();
+                            // location.href = response.data.value;
+                            return false;
+                        },
+                        error: function () {
+                            console.log(response);
+                            // 非200状态码响应错误
+                        }
+                    });
+                });
+            },
+            createData(){
+                for (let i = 0; i < this.goods.length; i++) {
+                    this.addGoods()
+                    this.goods_list[i].goods_id = this.goods[i].goods_id
+                    this.goods_list[i].goods_price = this.goods[i].goods_price
+                    this.addGoodsAttr(i)
+                }
+            },
+            // 添加规格项目
+            addGoods () {
+                this.goods_list.push({
+                    goods_id: 0,
+                    goods_attrs: {},
+                    goods_price: 0
+                })
+            },
+            addGoodsAttr(index){
+                for(var key in this.goods[index].goods_attrs){
+                    this.goods_list[index].goods_attrs[key] = '';
+                    //将所有可用属性单独放在一个数组，好计算商品价格
+                    for (let i = 0; i < this.goods[index].goods_attrs[key].length; i++) {
+                        this.all_goods_attrs[this.goods[index].goods_attrs[key][i].value_id] = this.goods[index].goods_attrs[key][i]
+                    }
+                }
+            },
+            addToCart(index){
+                let key = ""+index
+                for(var attr_name in this.goods_list[index].goods_attrs){
+                    if(this.goods_list[index].goods_attrs[attr_name] == ''){
+                        Dcat.error('请选择属性')
+                        return
+                    }
+                    key+=""+ this.goods_list[index].goods_attrs[attr_name]
+                }
+                //查询当前是否有这个商品，有则商品数+1
+                if( typeof(this.goods_carts[key]) != "undefined"){
+                    let _goods_num = this.goods_carts[key].goods_num + 1
+                    // console.log(this.goods_carts[key].goods_num);
+                    this.$set(this.goods_carts[key], 'goods_num', _goods_num)
+                }else{
+                    let _goods_attrs = copy(this.goods_list[index].goods_attrs)
+                    let _goods_price = this.goods_list[index].goods_price
+                    let _goods = {
+                        'goods_name':this.goods[index].goods_name,
+                        'goods_index':index,
+                        'goods_id':this.goods[index].goods_id,
+                        'goods_attr':_goods_attrs,
+                        'goods_price':_goods_price,
+                        'goods_num':1
+                    }
+                    this.$set(this.goods_carts, key, _goods)
+                }
+                console.log(this.goods_carts);
+                console.log(this.all_goods_attrs);
+            },
+            removeToCart(index){
+                let _goods_carts = copy(this.goods_carts)
+                delete _goods_carts[index];
+                this.goods_carts = _goods_carts;
+            },
+            editGoodsAttr(index, attr_name, attr_id){
+                this.$set(this.goods_list[index].goods_attrs, attr_name, attr_id);
+                //改变商品价格
+                let goods_price = parseFloat(this.goods[index].goods_price)
+                for(var attr_name in this.goods_list[index].goods_attrs){
+                    if(this.goods_list[index].goods_attrs[attr_name]){
+                        goods_price += parseFloat(this.all_goods_attrs[this.goods_list[index].goods_attrs[attr_name]].value_price)
+                    }
+                }
+                this.$set(this.goods_list[index], 'goods_price', goods_price.toFixed(2))
+            },
+            goodsAttr(index, attr_name){
+                return index+attr_name
+            },
+            addOne(index){
+                let _goods_num = this.goods_carts[index].goods_num + 1
+                this.$set(this.goods_carts[index], 'goods_num', _goods_num)
+            },
+            reduceOne(index){
+                let _goods_num = this.goods_carts[index].goods_num - 1
+                if(_goods_num == 0){
+                    this.removeToCart(index)
+                }
+                this.$set(this.goods_carts[index], 'goods_num', _goods_num)
+            },
+            cleanCart(){
+                this.goods_carts = {};
+            }
+        }
+    });
+
+</script>