hemall.terabimsoft.com.cn/plugins/help-user-buying/views/buying/goods.blade.php

@extends('layouts.base')
@section('title', "代客下单")
@section('content')
<style>
    .rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
    .rightlist #app{margin-left:30px;}
    .rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
    /* .el-form-item__label{padding-right:30px;} */
    .tip{font-size:12px;color:#999;font-weight:500}
    .rightlist-head-con{padding-right:20px;font-size:16px;color:#888;}
    /* .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;} */
    .el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
    .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
    /* 滑块选择小白点 */
    .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
    .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
    .tip1{font-size:12px;color:red;font-weight:500}
    [v-cloak]{
        display:none;
    }
    /* 计数器样式 */
    .el-input-number__decrease, .el-input-number__increase {width: 25px;}
    .el-input-number .el-input__inner {padding-left: 0px;padding-right: 0px;}
</style>
<div class="rightlist">
    <div id="app"  v-cloak v-loading="loading">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.help-user-buying.admin.index.index') }}">返回选择</a></el-breadcrumb-item>
            {{--<el-breadcrumb-item>[[store.id==0?'平台自营':store.store_name]]</el-breadcrumb-item>--}}
            <el-breadcrumb-item v-html="title"></el-breadcrumb-item>

        </el-breadcrumb>
        <el-form :inline="true" :model="search_form" ref="search_form">
            <el-form-item>
                <el-input v-model="search_form.goods_name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="search_form.id_v1" placeholder="请选择一级分类" clearable @change="changeV1()">
                    <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="search_form.id_v2" placeholder="请选择二级分类" clearable @change="changeV2()">
                    <el-option v-for="item in category_list_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="search_form.id_v3" placeholder="请选择三级分类" clearable v-if="category_level==3">
                    <el-option v-for="item in category_list_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item style="float:right;text-align:right;">
                <el-button type="success" icon="el-icon-search" @click="search(1)">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="50">
            <!-- left -->
            <el-col :span="12">
                <!-- 表格start -->
                <el-table :data="list" style="width: 100%" max-height="500" v-loading="all_loading">
                    <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                    <el-table-column label="商品" min-width="180">
                        <template slot-scope="scope">
                            <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                                <img :src="scope.row.thumb" style="width:40px;height:40px;">
                                [[scope.row.title]]
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格" max-width="120" align="center"></el-table-column>
                    <el-table-column label="库存" prop="stock"  max-width="120" align="center"></el-table-column>
                    <el-table-column label="选择"  width="80" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="choose(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                    <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="total"
                        :page-size="per_size" :current-page="current_page"></el-pagination>
                </el-col>
                <!-- 表格end -->
            </el-col>
            <!-- right -->
            <el-col :span="12">
                <div style="background:#f9f9f9;padding:15px 10px;font-weight:900;border:1px solid #e9e9e9;">
                    订单信息
                    <el-button type="danger" size="small" style="margin-left:20px" @click="delAll">清空购物车</el-button>
                </div>
                <!-- 表格start -->
                <el-table :data="cart_list" style="width: 100%;border:1px solid #e9e9e9" v-loading="loading" max-height="500">
                    <el-table-column prop="id" label="商品名称" min-width="150" align="center">
                        <template slot-scope="scope">
                            <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                                <div>[[scope.row.title]]</div>
                                <div v-if="scope.row.option_title" style="color:#999;font-size:12px;">[ [[scope.row.option_title]] ]</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格"  max-width="120" align="center"></el-table-column>
                    <el-table-column prop="digitization_name" label="数量" width="120" align="center">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.num" :step="1" :min="0" style="width:110px;" @change="changeNum(scope.$index)"></el-input-number>
                    </template>
                    </el-table-column>
                    <el-table-column label="金额" prop="total" max-width="120" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" width="80" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 表格end -->
                <div style="background:#f9f9f9;padding:15px 10px;font-weight:900;border:1px solid #e9e9e9;">
                    <span>(不包含运费)</span>
                    <span>合计：<span style="color:red">[[total_money]]</span>元</span>
                    <el-button type="primary" size="small" style="margin-left:20px" @click="openMember">结算</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 选择会员弹出框 -->
        <el-dialog title="选择会员" :visible.sync="is_choose_member" width="60%">
            <div>
                <div v-if="member.uid" style="font-weight:900;margin-bottom:30px;">
                    <div>已选会员：</div>
                    <div style="float:left;width:120px">
                        <img :src="member.avatar_image" alt="" style="width:100px;height:100px">
                    </div>
                    <div style="display:inline-block;">
                        <div>[[member.nickname]]</div>
                        <div>[[member.mobile]]</div>
                        <el-button type="danger" size="small" @click="delMember">清除选择</el-button>
                    </div>
                </div>
                <el-form>
                    <el-form-item label="" prop="">
                        <el-input v-model="member_info" placeholder="请输入粉丝昵称/姓名/手机号" style="width:90%;"></el-input>
                        <el-button type="success" icon="el-icon-search" @click="searchMember()" v-loading="table_loading">搜索</el-button>
                    </el-form-item>
                    
                </el-form>
                <template>
                    <!-- 表格start -->
                    <el-table :data="member_list" style="width: 100%;" max-height="500" v-if="member_list.length>0" v-loading="table_loading">
                        <el-table-column label="头像" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.avatar_image" alt="" style="width:30px;height:30px;">
                            </template> 
                        </el-table-column>
                        <el-table-column prop="nickname" label="姓名"  min-width="120" align="center"></el-table-column>
                        <el-table-column prop="mobile" label="手机号"  min-width="120"  align="center"></el-table-column>
                        <el-table-column label="操作" min-width="80" align="center">
                            <template slot-scope="scope">                          
                                <el-button @click="chooseMember(scope.row)" size="small">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 表格end -->
                </template>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="is_choose_member = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 选择规格弹出框 -->
        <el-dialog title="选择商品规格" :visible.sync="is_option" width="60%">
            <div>
                <div v-for="(item,index) in option_list" :key="index">
                    <h5 style="border-bottom:1px solid #ddd;font-weight:900;">
                        [[item.title]]
                    </h5>
                    <div style="display:inline-block;margin:5px;" >
                        <el-radio-group v-model="status[index]" v-for="(item1,index1) in item.specitem" :key="index1" style="margin-bottom: 30px;">
                            <el-radio-button :label="item1.id">[[item1.title]]</el-radio-button>
                        </el-radio-group>
                    </div>
                    
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="is_option = false">取 消</el-button>
                <el-button type="primary" @click="confirmOption">确 定</el-button>
            </span>
        </el-dialog>
    </div>
<script>
    var app = new Vue({
        el:"#app",     
        delimiters: ['[[', ']]'],
        data() {
            let goods_url = '{!! $goods_url !!}';
            let category_level = {!! $category_level !!};
            console.log(category_level)
            let category_list = {!! $category_list !!};
            console.log(category_list)
            let owner_id =  {!! $owner_id !!};
            let order_type =  {!! $order_type !!};
            let title = '{!! $title!!}';
            // console.log(store);
            return{
                title:title,
                type:1,
                loading:false,
                table_loading:false,
                all_loading:false,
                order_type:order_type,
                owner_id:owner_id,//门店数据
                total_money:"0",//总金额
                is_exist:0,//商品是否已存在购物车
                is_choose_member:false,//选择会员弹出框
                is_option:false,//选择规格弹出框
                option_list:[],//规格列表
                choose_row:{},//选择商品的信息
                status:[],//选择的商品规格的值
                goods_url:goods_url,//搜索商品接口
                member_info:"",
                member:{},//选择的会员信息回显
                member_list:[],//会员列表
                search_form:{
                    id_v1:"",
                    id_v2:"",
                    id_v3:"",
                },
                category_level:category_level,//分类等级
                category_list:category_list,
                category_list_v2:[],
                category_list_v3:[],
                list:[],
                cart_list:[],
                rules:{},
                 //分页
                total:0,
                per_size:0,
                current_page:0,
                rules:{},
            }
            
        },
        created() {

            document.onkeydown = function(){
                if(window.event.keyCode == 13) {
                    window.event.keyCode = 0;
                    window.event.returnValue = false;
                }
            };

            let json = {search:{owner_id:this.owner_id}};

            this.getGoodsList(json);
        },
        methods: {
            // 获得商品列表
            getGoodsList(json) {
                var that = this;
                that.all_loading = true;
                that.$http.post(this.goods_url,json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        console.log(response);
                        this.list = response.data.data.data;
                        this.total = response.data.data.total;
                        this.current_page = response.data.data.current_page;
                        this.per_size = response.data.data.per_page;
                        that.all_loading = false;
                    }
                    else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },

            // 选择商品
            choose(row) {
                this.is_exist = 0;
                this.choose_row = row;
                // 如果商品有规格
                if(row.has_option == 1){
                    this.status = [];//初始化规格选择状态
                    this.is_option = true;
                    this.option_list = row.has_many_specs;
                }
                else {
                    this.cart_list.some((item,index) =>{
                        if(item.id == row.id){
                            this.is_exist = 1;
                            item.num++;
                            this.changeNum(index);
                            this.countTotalPrice();
                            return true;
                        }
                    })
                    if(this.is_exist==1){//如果购物车已存在此商品或商品规格
                        return false;
                    }
                    this.pushCart(row)
                    
                    console.log(this.cart_list)
                    this.countTotalPrice();

                }
            },
            // 加入购物车
            pushCart(row) {
                this.cart_list.push(
                    {
                        id:row.id,
                        num:1,
                        total:row.price,
                        price:row.price,
                        thumb:row.thumb,
                        title:row.title,
                        option_id:0,//规格id
                    }
                );
            },
            // 改变数量
            changeNum(index) {
                var that = this;
                console.log(index)
                if(this.cart_list[index].num < 1) {
                    this.del(index);
                    return false;
                }
                that.$http.post("{!! yzWebUrl('plugin.help-user-buying.admin.index.goods-increase') !!}",{'id':this.cart_list[index].id, 'num':this.cart_list[index].num,'option_id':this.cart_list[index].option_id}).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        console.log(response);
                        that.all_loading = false;
                        if(response.data.data.code==1){
                            that.$message.error("超过库存");
                            this.cart_list[index].num = response.data.data.num;
                        }
                    }
                    else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                        this.cart_list[index].num--;

                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
                this.cart_list[index].total = this.cart_list[index].num * this.cart_list[index].price;
                this.countTotalPrice();
            },
            // 删除
            del(index) {
                this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    // this.delGoods(index);
                    this.cart_list.splice(index,1);
                    this.countTotalPrice();
                }).catch(() => {
                    this.cart_list[index].num++;
                    this.$message({type: 'info',message: '已取消删除'});
                    });
            },
            // 清空购物车
            delAll() {
                this.$confirm('确定清空购物车吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    // this.delGoods(index);
                    this.cart_list = []
                    this.countTotalPrice();
                }).catch(() => {
                    this.$message({type: 'info',message: '已取消操作'});
                    });
            },
            // 打开会员弹出框
            openMember(json) {
                var that = this;
                if(this.cart_list.length<=0) {
                    this.$message.error("请选择下单商品！");
                    return false;
                }
                that.is_choose_member = true;
                // that.searchMember('{}');
            },
            // 搜索会员
            searchMember(json) {
                var that = this;
                that.is_choose_member = true;
                that.table_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.help-user-buying.admin.index.getSearchMember') !!}",{keyword:this.member_info}).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        console.log(response);
                        this.member_list = response.data.data;
                        that.table_loading = false;
                    }
                    else{
                        that.$message.error(response.data);
                        that.table_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.table_loading = false;
                };
            },
            // 选择会员
            chooseMember(row) {
                this.member = row;
            },
            // 确认选择会员
            confirm() {
                // 判断是否选择了会员
                if(!this.member.uid){
                    this.$message.error("请选择会员")
                    return false;
                }
                console.log(this.cart_list);
                let new_arr = [];
                // let dispatch_type_id: 1
                this.cart_list.forEach((item,index) => {
                    new_arr.push({
                        goods_id:item.id,
                        total:item.num,
                        option_id:item.option_id,
                    })
                });
                console.log()
                // let store_name = ""
                // if(this.title){
                //     store_name = this.store.store_name
                // }
                let data = {
                    uid:this.member.uid,
                    goods:new_arr,
                    owner_id:this.owner_id,
                    order_type:this.order_type,
                    title:this.title,
                }
                console.log(data)
                {{--window.location.href="{!! yzWebFullUrl('plugin.help-user-buying.admin.index.set-member-id',['data' => '']) !!}"+JSON.stringify(data);--}}
                this.$http.post("{!! yzWebFullUrl('plugin.help-user-buying.admin.index.set-member-id') !!}",{data:JSON.stringify(data)}).then(response => {
                    console.log(response,123);
                    if(response.data.msg == "该类型订单无配送方式，无法正常下单"){
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        location.reload();
                        return 
                    }
                    window.location.href="{!! yzWebFullUrl('plugin.help-user-buying.admin.index.set-member-id',['data' => '']) !!}"+JSON.stringify(data);
                }),function(res){
                    console.log(res);
                };
                this.is_choose_member = false;
            },
            // 清除选择会员
            delMember() {
                this.member = {};
            },
            // 确认选择规格
            confirmOption() {
                // 判断是否所有规格都已经选择
                for(let i=0;i<this.option_list.length;i++) {
                    if(!this.status[i]){
                        this.$message.error("请选择完整规格信息")
                        return false;
                    }
                }
                // 拼接id
                let id = this.status.join("_");
                //重新排序，处理后台返回的规格拼接id没规律问题
                
                console.log(this.permute(this.status));
                let arr_ids = this.permute(this.status);
                let str_ids = [];

                for(let i=0;i<arr_ids.length;i++) {
                    str_ids[i] = arr_ids[i].join("_");
                }
                // 判断选中的规格是否已存在购物车
                for(let i=0;i<str_ids.length;i++) {
                    this.cart_list.some((item,index) =>{
                        if(item.specs == str_ids[i]){
                            console.log(id)
                            this.is_exist = 1;
                            item.num++;
                            this.changeNum(index);
                            this.countTotalPrice();
                            return true;
                        }
                    })
                }
                
                if(this.is_exist == 1) {
                    this.is_option = false;
                    return  false;
                }
                // 加入购物车

                for(let i=0;i<this.choose_row.has_many_options.length;i++){
                    for(let j=0;j<str_ids.length;j++) {
                        if(str_ids[j]==this.choose_row.has_many_options[i].specs){
                            this.cart_list.push({
                                id:this.choose_row.has_many_options[i].goods_id,
                                specs:this.choose_row.has_many_options[i].specs,
                                option_id:this.choose_row.has_many_options[i].id,//规格id
                                title:this.choose_row.title,
                                option_title:this.choose_row.has_many_options[i].title,
                                thumb:this.choose_row.thumb,
                                num:1,
                                total:this.choose_row.has_many_options[i].product_price,
                                price:this.choose_row.has_many_options[i].product_price,
                            })
                            this.is_option = false;
                            break;
                        }
                    }

                    
                }
                this.countTotalPrice();
                console.log(this.cart_list)
                
            },
            // 分页
            currentChange(page) {
                var that = this;
                // let json = {page:page};
                that.search(page);
            },
            // 一级分类改变
            changeV1(){
                this.search_form.id_v2 = "";
                this.search_form.id_v3 =  "";
                this.category_list_v2 = [];
                this.category_list_v3 = [];
                this.category_list.find(item => {
                    if(item.id == this.search_form.id_v1) {
                        this.category_list_v2 = item.childrens;
                    }
                });
            },
            // 二级分类改变
            changeV2(){
                this.search_form.id_v3 =  "";
                this.category_list_v3 = [];
                if(this.category_level==3) {
                    this.category_list_v2.find(item => {
                        if(item.id == this.search_form.id_v2) {
                            this.category_list_v3 = item.childrens;
                        }
                    })
                }
            },
            // 搜索
            search(page) {
                var that = this;
                console.log(that.search_form)
                var arr = [];
                if(this.search_form.id_v1){
                    arr.push(this.search_form.id_v1)
                }
                if(this.search_form.id_v2){
                    arr.push(this.search_form.id_v2)
                }
                if(this.search_form.id_v3){
                    arr.push(this.search_form.id_v3)
                }
                let str;
                let json;
                if(arr.length<=0) {
                    str = "";
                    json = {page:page,search:{keyword:this.search_form.goods_name,owner_id:this.owner_id}};
                }
                else{
                    str = arr.join(",");
                    json = {page:page,search:{category:str,keyword:this.search_form.goods_name,owner_id:this.owner_id}};
                }
                that.getGoodsList(json);
            },
            //计算总价格&总数
            countTotalPrice() {
                this.total_money = 0.0; //初始化
                for (var i = 0; i < this.cart_list.length; i++) {
                    this.total_money += this.cart_list[i].price * this.cart_list[i].num;
                }
                this.total_money = Number(this.total_money.toString().match(/^\d+(?:\.\d{0,2})?/));
            },
            // 数组全排序
            permute(arr){
                var rst=[],cur=[]
                function fn(arr){
                    var ch
                    for(var i=0;i<arr.length;i++){
                        ch=arr.splice(i,1)[0]
                        cur.push(ch)
                        if(arr.length==0){
                            rst.push(cur.slice())
                        }
                        fn(arr)
                        arr.splice(i,0,ch)
                        cur.pop()
                    }
                    return rst
                }
                return fn(arr)
            }
        },
    })

</script>
@endsection