VUE 结合 vue-resource 进行ajax操作

有意思的！

初始化需要ajax获取数据！

搜索商品需要ajax获取数据！

提交数据需要ajax传递数据！

有了 vue-resource ，操作挺方便的。

这是html

<form class="form-horizontal addForm"
      id="edit_form">

    <div class="form-group">
        <label for="goods_id" class="col-lg-2 control-label">商品ID</label>
        <div class="col-lg-3"> <!-- 通过div控制长度 -->
            <input type="text" class="form-control" id="goods_id" placeholder="请输入商品id进行搜索">
        </div>

        <label for="goods_type" class="col-lg-2 control-label">类型</label>
        <div class="col-lg-2">
            <select id="goods_type" class="form-control">
                <option value="1">线上</option>
                <option value="2">门店</option>
            </select>
        </div>

        <label class="control-label col-lg-1 del-btn">
            <button type="button" class="btn btn-sm btn-primary"  @click="search">搜索</button>
        </label>
    </div>


    <div class="form-group col-lg-12">
        <label class="control-label col-lg-4"></label>
        <label class="col-lg-5 text-left">相关商品</label>
        <label class="control-label col-lg-1"></label>
    </div>


    <div class="form-group" v-for="(item, i) in items">
        <label class="col-lg-1 control-label">ID:{{item.goods_id}}</label>
        <label class="col-lg-1 control-label">类型:
            <span v-if="item.type == 1">
                线上
            </span>
            <sapn v-else>
                门店
            </sapn>
        </label>

        <label class="col-lg-2 control-label">名称:{{item.name}}</label>
        <label class="col-lg-1 control-label">图片:</label>
        <div class="col-lg-2">
            <img :src="item.img_url" width="120px;">
        </div>


        <label for="is_heavy" class="col-lg-1 control-label">是否头部：</label>
        <div class="col-lg-1">
            <input type="checkbox" class="" id="is_heavy" v-model="item.is_heavy">
        </div>

        <label class="control-label col-lg-1 del-btn">
            <button type="button" class="btn btn-xs btn-danger del-img"  @click="remove_item(i)">删除</button>
        </label>
    </div>


    <input type="hidden" name="id" id="id" value="{$id}" />
    <input type="hidden" name="page" id="page" value="{$page}" />
    <div class="form-group">
        <div class="col-lg-2 col-lg-offset-3">
            <button type="button" class="btn btn-primary col-lg-8" @click="submit">保存</button>
        </div>

        <div class="col-lg-2">
            <button type="button" class="btn btn-danger col-lg-8" @click="cancel">取消</button>
        </div>
        <div class="clear"></div>
    </div>
</form>

这是js

<script>
    // 定义全局锁
    var lock_flag = false;
    var page = $('#page').val();

    var app = new Vue({
        el: '#edit_form',
        data: {
            items: []
        },
        mounted() {
            // 获取数据并进行初始化操作
            var id = GetQueryString('id');
            this.$http.post('step_3_init',{
                id:id,
            },{emulateJSON:true}).then(function(res){
                if (res.body.errno !== 0) {
                    layer.msg(res.body.errdesc);
                    return false;
                }

                res.body.data.forEach(function (item,index) {
                    res.body.data[index]['is_heavy'] = parseInt(res.body.data[index]['is_heavy']);
                });

                this.items = res.body.data;
            },function(res){
                console.log(res.status);
            });
        },
        methods: {
            remove_item:function(index) {
                this.items.splice(index,1);
            },
            cancel:function() {
                window1;= 'true' ? 1 : 0,
                    'is_del'    => 0
                ];
                $mill_dishes_cross_model->where(['id'=>$item['id']])->save($op_data);
            } else { // 添加
                $op_data = [
                    'dishes_id' => $id,
                    'goods_id'      => $item['goods_id'],
                    'type'     => $item['type'],
                    'is_heavy'     => $item['is_heavy'] == 'true' ? 1 : 0,
                    'add_time'  => time()
                ];
                $mill_dishes_cross_model->add($op_data);
            }
        }

        $json->setErr(0, '操作成功');
        $json->setAttr('id', $id);
        $json->send();
    }

    // 搜索商品
    public function get_search_goods() {
        vendor('Func.Json');
        $json = new Json();
        $goods_id = $_POST['goods_id'];
        if (!$goods_id){
            $json->setErr('10001','缺少参数goods_id');
            $json->Send();
        }

        $goods_type = $_POST['goods_type'];
        if (!$goods_type){
            $json->setErr('10002','缺少参数goods_type');
            $json->Send();
        }

        $out_data = [];
        if ($goods_type == 1) { // 获取线上商品
            $goods_model = M('goods');
            $info = $goods_model->where(['id'=>$goods_id,'is_sold'=>1,'status'=>1])->find();
            if (!$info) {
                $json->setErr('10003','商品不存在或已下架');
                $json->Send();
            }

            $out_data = [
                'id' => 0,
                'goods_id' => $info['id'],
                'name' => $info['name'],
                'img_url' =>C('CDN_HOST') . $info['img_list'],
                'type' => 1,
                'is_heavy' => 0
            ];

        } else { // 获取门店商品
            $store_goods_model = M('store_goods');
            $info = $store_goods_model->where(['id'=>$goods_id,'is_sale'=>1,'is_del'=>0])->find();
            if (!$info) {
                $json->setErr('10003','商品不存在或已下架');
                $json->Send();
            }

            $out_data = [
                'id' => 0,
                'goods_id' => $info['id'],
                'name' => $info['name'],
                'img_url' =>C('CDN_HOST') . $info['main_image'],
                'type' => 2,
                'is_heavy' => 0
            ];
        }

        $json->setErr(0, '操作成功');
        $json->setAttr('data', $out_data);
        $json->send();
    }

VUE 结合 vue-resource 进行ajax操作

浏览过的版块