admin_api/resources/views/admin/exchange/gift_add.blade.php

@extends('base.base')
@section('base')
    <!-- 内容区域 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="/assets/js/jquery-3.0.0.min.js"></script>
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="row">
                <div class="col-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.请编辑礼包内容') }}</h4>
                            {{--<p class="card-message">--}}
                            {{--Basic form elements--}}
                            {{--</p>--}}
                            <div class="form-inline" id="test">
                                <div class="form-inline" style="margin-top: 5px">
                                    <label for="exampleInputName1">*奖品名称：</label>&nbsp;&nbsp;
                                    <input v-model="desc" type="text" style="color: black;width: 500px;" class="form-control required" name="desc" placeholder="{{ __('auto.输入奖品名称') }}">
                                </div>
                                <div v-for="(item,index) in allGift" :key="index" class="form-inline" style="margin-top: 5px">
                                    <label for="exampleInputName1">*选择奖品：</label>&nbsp;&nbsp;
                                    <select v-model="item.id" class="form-control required">
                                      <option :value="item.PropID" v-for="(item,index) in giftList" :key="index">@{{item.PropName}}</option>
                                    </select>
                                    <label for="exampleInputName1">*奖品数量：</label>&nbsp;&nbsp;
                                    <input v-model="item.number" class="form-control required">
                                    
                                </div>
                                <div>
                                    <button @click="add()" class="btn btn-sm btn-gradient-primary btn-icon-text">{{ __('auto.增加') }}</button>
                                    <button @click="del()" class="btn btn-sm btn-gradient-primary btn-icon-text">{{ __('auto.减少') }}</button>
                                    <button @click="send()" class="btn btn-sm btn-gradient-primary btn-icon-text">{{ __('auto.提交') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var test = new Vue({
            el:'#test',
            data(){
                return{
                    data:{
                        id:0,
                        BonusNumber:1,
                        BonusString:'',
                        
                    },
                    giftList : [],
                    allGift: [{
                        id: "",
                        number: ""
                    }],
                    desc : ''
                }
            },
            created(){
                var that = this;
                $.get(
                    '/admin/gift/list',
                    function(data){
                        that.giftList = data;
                    },
                )
            },
            methods: {
                add: function () {
                    let oneGift = {
                        id: "",
                        number: ""
                    }
                    this.allGift.push(oneGift)
                },
                del: function () {
                    let oneGift = {
                        id: "",
                        number: ""
                    }
                    this.allGift.pop(oneGift)
                },
                send: function () {
                    $.get('/admin/gift',{'bonus': this.allGift,'desc':this.desc})
                    .then(function (res) {
                        layer.msg(res.msg)
                        if(res.code==200){
                            setTimeout(function(){
                                parent.location.reload();
                            },1500)
                        }
                    });
                }

            }
        })
    </script>
    <script> 
        function add(){
            var a = $("#a").find("option:selected").text();
            var b = parseInt(document.getElementById("b").value);
            $("#c").val(a+b);
        }
        function commit(){
            if(!checkForm()){
                return false;
            }
            var data = $("#form").serializeObject();
            myRequest("/admin/gift/add/","post",data,function(res){
                layer.msg(res.msg)
                setTimeout(function(){
                    parent.location.reload();
                },1500)
            });
        }
        function cancel() {
            parent.location.reload();
        }
    </script>
@endsection