Kirin
/
mccs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {include file="public/head"}
    <link href="/system/frame/css/style.min.css?v=3.0.0" rel="stylesheet">
    <title>{$title|default=''}</title>
    <style>
        .flex {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .no-shink {
            flex-shrink: 0;
        }

        .mar-l-10 {
            margin-left: 10px;
        }

        .mar-b-10 {
            margin-bottom: 10px;
        }

        .padd-15 {
            padding: 0 15px !important;
        }

        .shopBOx {
            margin: 15px 10px !important;
        }

        .alertBottom {
            position: fixed !important;
            bottom: 0;
            left: 0;
            padding-left: 30px !important;
            width: 100%;
            background-color: #ffffff;
        }

        .shopImg {
            width: 100px;
            height: 100px;
        }

        .clamp2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .itemStart {
            align-items: flex-start;
        }

        .flexcontent {
            justify-content: center;

        }

        .text-cente {
            text-align: center
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>在线下单</h5>
                </div>
                <div id="store-attr" class="mp-form" v-cloak="">
                    <Row class="searchBox padd-15 mar-b-10 mar-l-10" v-if="UserCard">
                        <i-Col span="6">
                            <div class="flex">
                                <span class="no-shink">当前会员卡号：{{UserCard}} &nbsp; 会员余额：{{userData.now_money}} &nbsp; 消费券：{{userData.integral}} &nbsp; 手机号：{{userData.phone}}</span>
                            </div>
                        </i-Col>
                    </Row>
                    <Row class="searchBox padd-15" v-if="UserCard">
                        <i-Col span="6">
                            <div class="flex">
                                <span class="no-shink mar-l-10">是否消费券：</span>
                                <radio-group v-model="is_consumer" type="button">
                                    <Radio :label="1">是</Radio>
                                    <Radio :label="0">否</Radio>
                                </radio-group>
                            </div>
                        </i-Col>
                        <i-Col span="12">
                            <div class="flex">
                                <span class="no-shink mar-l-10">条形码：</span>
                                <i-Input ref="code" placeholder="请扫描或输入条形码" @on-enter="getShopNum" v-model="shopId"
                                         type="text"></i-Input>
                                <i-Button class="mar-l-10" type="primary" @click="getShopNum">添加商品</i-Button>
                            </div>
                        </i-Col>
                    </Row>
                    <Row class="searchBox padd-15" v-else>
                        <i-Col span="8">
                            <div class="flex">
                                <span class="no-shink">会员卡号：</span>
                                <i-Input ref="usercard" placeholder="请输入会员卡号" v-model="userCardInput" type="text"
                                         @on-enter="checkedUserCard"></i-Input>
                                <i-Button class="mar-l-10" type="primary" @click="checkedUserCard">开始下单</i-Button>
                            </div>
                        </i-Col>
                    </Row>
                    <Row class="searchBox padd-15 shopBOx" v-if="UserCard">
                        <i-Col span="24">
                            <div>
                                <h4 class="mar-b-10">当前商品信息</h4>
                                <Row class="searchBox padd-15 mar-b-10 ">
                                    <i-Col span="8">
                                        <h4>商品信息</h4>
                                    </i-Col>
                                    <i-Col span="4">
                                        <h4 class="text-cente"> 商品单价</h4>
                                    </i-Col>
                                    <i-Col span="4">
                                        <h4 class="text-cente"> 商品总价</h4>
                                    </i-Col>
                                    <i-Col span="4">
                                        <h4 class="text-cente"> 商品类型</h4>
                                    </i-Col>
                                    <i-Col span="4">
                                        <h4 class="text-cente">
                                            操作 </h4>
                                    </i-Col>
                                </Row>
                                <Row type="flex" align="middle" class="searchBox padd-15 mar-b-10"
                                     v-for="(ls,ind) in shopList" :key="ls.id">
                                    <i-Col span="8">
                                        <div class="flex itemStart">
                                            <img :src="ls.image" class="shopImg">
                                            <div class="titleBox mar-l-10">
                                                <div class="clamp2" :title="ls.name">{{ls.name}}</div>
                                                <div>
                                                    规格：{{ls.typeName}}
                                                </div>
                                                <div>
                                                    数量：{{ls.num}}
                                                </div>
                                            </div>
                                        </div>
                                    </i-Col>
                                    <i-Col span="4" class="text-cente">
                                        {{ls.price}}
                                    </i-Col>
                                    <i-Col span="4" class="text-cente">
                                        {{ls.price*ls.num}}
                                    </i-Col>
                                    <i-Col span="4" class="text-cente">
                                        {{+ls.is_consumer==0?'普通商品':'消费券商品'}}
                                    </i-Col>
                                    <i-Col span="4">
                                        <div class="flex flexcontent">
                                            <i-Button type="error" size="small" @click="delShop(ls,ind)">删除</i-Button>
                                            <i-Button class="mar-l-10" type="success" size="small"
                                                      @click="changeNumShop(ls,1)">增加
                                            </i-Button>
                                            <i-Button class="mar-l-10" type="warning" size="small"
                                                      @click="changeNumShop(ls,-1)">减少
                                            </i-Button>
                                        </div>
                                    </i-Col>
                                </Row>
                            </div>
                        </i-Col>
                    </Row>
                    <Row class="searchBox padd-15 mar-b-10 alertBottom" v-if="UserCard">
                        {eq name="type" value="0"}
                        <i-Col span="6">
                            <div class="flex">
                                <span class="no-shink">选择商家：</span>
                                <i-Select name="store_id" v-model="form.store_id" style="width: 80%" filterable>
                                    {volist name="store" id="v" }
                                    <i-Option value="{$v.id}">{$v.name}（id:{$v.id}）</i-Option>
                                    {/volist}
                                </i-Select>
                            </div>
                        </i-Col>
                        {/eq}
                        <i-Col span="6">
                            <div class="flex">
                                <span class="no-shink mar-l-10">支付方式：</span>
                                <i-Select name="store_id" v-model="form.pay_type" default-label="微信" style="width: 80%"
                                          filterable>
                                    <!--                                    <i-Option value="alipay">支付宝</i-Option>-->
                                    <!--                                    <i-Option value="weixin">微信</i-Option>-->
                                    <i-Option value="jialie">嘉联支付</i-Option>
                                    -->
                                    <i-Option value="yue">余额</i-Option>
                                    <i-Option value="integral">消费券</i-Option>
                                    <!--                                    <i-Option value="consumer">消费券</i-Option>-->
                                    <i-Option value="offline">线下支付</i-Option>
                                </i-Select>
                            </div>
                        </i-Col>
                        <i-Col span="6">
                            <div class="flex">
                                <span class="no-shink mar-l-10">当前金额：￥{{allPayMoney}}</span>
                                <i-Button class="mar-l-10" type="success" @click="submit">确认下单</i-Button>
                            </div>
                        </i-Col>
                    </Row>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    mpFrame.start(function (Vue) {
        new Vue({
            data: function () {
                return {
                    form: {
                        store_id: '{eq name="type" value="1"}{$store.0.id}{/eq}',//商家id
                        pay_type: 'weixin'//支付类型
                    },
                    shopList: [],//当前选中的商品
                    userCardInput: '',//用户输入内容
                    UserCard: '',//当前选中的会员卡号
                    userId: '',//当前选中的用户id
                    userData: {},//保存用户信息
                    shopId: '',//当前商品条形码
                    is_consumer: 0,//当前是否消费券
                }
            },
            mounted() {
                const that = this;
                //获取会员卡号焦点
                that.$nextTick(function () {
                    that.$refs.usercard.focus();
                })
            },
            computed: {
                allPayMoney() {
                    let money = 0;
                    for (let i = 0; i < this.shopList.length; i++) {
                        const item = this.shopList[i]
                        money += item.price * item.num
                    }
                    return money;
                }
            },
            methods: {
                //选中用户卡号
                checkedUserCard(e) {
                    const that = this;
                    if (that.userCardInput.length == 12 || that.userCardInput.length == 15 || that.userCardInput.length == 8 || that.userCardInput.length == 11 || that.userCardInput == '1') {
                        //初始化用户数据
                        that.userId = '';
                        that.userData = {}
                        //请求获取用户信息
                        $eb.axios.post('{:Url("getCardNo")}' + '?card_no=' + that.userCardInput).then(function (res) {
                            console.log(res)
                            const data = res.data;
                            if (data.status == 200) {
                                that.UserCard = that.userCardInput;
                                that.userId = data.data.uid;
                                that.userData = data.data.user
                                console.log('获取焦点')
                                that.$nextTick(function () {
                                    that.$refs.code.focus();
                                })
                            } else {
                                layer.msg(data.msg, {icon: 5});

                            }

                        }).catch(function (err) {
                            console.log(err);
                        })
                        //设置获取焦点
                    } else {
                        layer.msg('请输入8位,12位,17位卡号会员卡号,或输入1', {icon: 5});
                    }
                },
                //删除购物车商品
                delShop(ls, ind) {
                    const that = this;
                    //询问框
                    layer.confirm('是否删除当前商品？', {
                        btn: ['是', '否'] //按钮
                    }, function (index) {
                        layer.close(index);
                        //删除数组数据
                        that.shopList.splice(ind, 1);
                        //重新获取焦点
                        that.$refs.code.focus();
                        //删除购物车数据
                        that.delCartShop([ls.cartId])
                        layer.msg('删除成功!', {icon: 1});
                    }, function (index) {
                        layer.close(index);
                    });
                },
                //删除购物车数据
                delCartShop(ids) {
                    const that = this;
                    $eb.axios.post('{:Url("del")}', {
                        ids: ids,
                        uid: that.userId
                    }).then(function (res) {
                        console.log(res, '购物车删除成功')
                    }).catch(function (err) {
                        console.log(err);
                    })
                },
                //增加减少数量
                changeNumShop(item, type) {
                    const that = this;
                    layer.prompt({
                        title: '请输入需要' + (type > 0 ? '添加' : '减少') + '的数量',
                        formType: 0
                    }, function (pass, index) {
                        layer.close(index);
                        const nt = /^[0-9]*$/g;//匹配数字
                        if (!nt.test(pass)) {
                            console.log(nt.test(pass), '判断是否正确');
                            layer.msg('请输入数字')
                            return false
                        }
                        console.log(pass);
                        if ((item.num * 1) + (pass * type) > 0) {
                            console.log(typeof (item.num * 1))
                            console.log(typeof (pass * type))
                            //修改商品数量
                            that.changeCartShop(item.cartId, (item.num * 1) + pass * type).then(function (data) {
                                console.log(data.data.status);
                                if (data.data.status == 200) {
                                    item.num += pass * type;
                                    layer.msg('成功' + (type > 0 ? '添加' : '减少') + pass + '件商品')
                                } else {
                                    layer.msg(data.data.msg);
                                }
                            }).catch(function (data) {
                                console.log(data.data.status);
                                layer.msg(data.data.msg);
                            })
                        } else {
                            layer.msg('商品数量不可小于0')
                        }
                    });
                },
                //查询商品是否有库存
                getShopNum() {
                    const that = this;
                    let num = 0;
                    let orderId = 0;

                    if (that.shopId.length == 13 && that.shopId.substr(0, 2) == '20') {
                        orderId = that.shopId.substr(2, 5);
                        num = (Math.floor(that.shopId.substr(7, 6) / 10) / 1000).toFixed(3);
                    } else {
                        orderId = that.shopId;
                        num = 1
                    }
                    that.shopId = '';
                    $eb.axios.post('{:Url("getBarCode")}' + (orderId ? '?bar_code=' + orderId : '')).then(function (res) {
                        console.log(res);
                        const data = res.data.data;
                        console.log(data, '返回数据')
                        if (that.is_consumer != data.is_consumer) {
                            if (that.is_consumer == 1) {
                                layer.msg('请选择消费券商品', {icon: 5})
                            }
                            if (that.is_consumer == 0) {
                                layer.msg('请选择普通商品', {icon: 5})
                            }
                        } else {
                            console.log(res, '开始调用购物车');
                            //添加到购物车
                            that.addCart(data, num)
                        }
                        that.$nextTick(function () {
                            that.$refs.code.focus();
                        })
                    }).catch(function (err) {
                        console.log(err);
                    })
                },
                //添加购物车
                addCart(product, num = 1) {
                    const that = this
                    console.log('开始添加购物车');

                    let pushData = {
                        productId: product.product_id,//普通产品编号
                        uid: this.userId,
                        uniqueId: product.unique,//属性唯一值
                        cartNum: num, //购物车数量
                        new: 0,// 1 加入购物车直接购买  0 加入购物车
                    }
                    $eb.axios.post('{:Url("add_cart")}', pushData).then(function (res) {
                        console.log(res)
                        const data = res.data;
                        if (data.status == 200) {
                            //保存购物车id
                            const cartId = data.data.cartId
                            //判断是否有这个商品
                            const ind = that.shopList.findIndex(function (a) {
                                if (a.cartId == cartId) {
                                    return true
                                } else {
                                    return false
                                }
                            })
                            console.log(ind, '当前下标')
                            //判断这个商品是否已经存在数组
                            if (ind > -1) {
                                that.shopList[ind].num = (+that.shopList[ind].num + (+num)).toFixed(3);
                                console.log(that.shopList, '添加数据后对象')

                            } else {
                                //初始化商品
                                that.initShopData(product, cartId, (+num).toFixed(3))
                                console.log(that.shopList, '初始化后数据对象')
                            }
                        } else {
                            layer.msg(data.msg, {icon: 5});

                        }
                    }).catch(function (err) {
                        console.log(err);
                    })
                },
                //初始化购物车商品
                initShopData(product, cartId, num) {
                    const that = this;
                    that.shopList = ([{
                        name: product.store_name,//商品
                        num: num,//购物车中的数量
                        id: product.product_id,//当前商品id
                        cartId: cartId,//保存购物车id
                        typeName: product.suk,//商品规格名称
                        unique: product.unique,//商品规格id
                        image: product.image,//商品主图
                        price: product.price,//商品价格
                        is_consumer: product.is_consumer//商品类型
                    }]).concat(that.shopList);
                    console.log(this, '初始化后this对象')
                    //初始化该商品为1
                    that.changeCartShop(cartId, num)
                },
                //修改购物车物品数量
                changeCartShop(cartId, num) {
                    const that = this;
                    return new Promise(function (ok, erro) {
                        $eb.axios.post('{:Url("num")}', {
                            id: cartId, number: num, uid: that.userId
                        }).then(function (res) {
                            console.log(ok)
                            ok(res)
                        }).catch(function (err) {
                            erro(err)
                            console.log(err);
                        })
                    })
                },
                submit: async function () {
                    let that = this;
                    console.log(that.form.store_id, '当前门店id')
                    //当前门店
                    if (!that.form.store_id) {
                        return layer.msg('请选择门店', {icon: 5});
                    }
                    if (!that.shopList.length > 0) {
                        return layer.msg('请选择商品', {icon: 5});
                    }
                    //用于保存当前选中的商品cardid
                    let pusharr = []
                    for (let i = 0; i < that.shopList.length; i++) {
                        pusharr.push(that.shopList[i].cartId);
                    }
                    //提交订单
                    try {

                        //提交数据
                        let pushData = {
                            cartId: pusharr.join(','),
                            uid: that.userId
                        }

                        let res = await $eb.axios.post('{:Url("confirm")}', pushData);
                        const orderKey = res.data.data.orderKey;
                        let money = await that.computedOrder(orderKey);
                        layer.confirm('订单总金额：￥' + that.allPayMoney.toFixed(2) + '<br/> vip优惠：￥' + ((that.allPayMoney - money.data.data.result.pay_price) > 0 ? (that.allPayMoney - money.data.data.result.pay_price).toFixed(2) : 0) + '<br/> 实际支付：￥' + money.data.data.result.pay_price.toFixed(2), {
                            btn: ['立即支付', '取消'] //按钮
                        }, async function (index) {
                            layer.close(index);
                            try {
                                //微信
                                // if (that.form.pay_type == 'weixin') {
                                //     let qr = await that.weixinPay();
                                //     that.create(orderKey, qr)
                                // }
                                // 余额
                                if (that.form.pay_type == 'yue') {
                                    that.create(orderKey)
                                }
                                //现金
                                if (that.form.pay_type == 'offline') {
                                    that.create(orderKey)
                                }
                                // 积分
                                if (that.form.pay_type == 'integral') {
                                    that.create(orderKey)
                                }
                                //支付宝
                                // if (that.form.pay_type == 'alipay') {
                                //     that.create(orderKey)
                                // }

                                if (that.form.pay_type == 'jialie') {
                                    let qr = await that.jialiePay();
                                    that.create(orderKey, qr)
                                }

                            } catch (e) {
                                console.log(e);
                            }

                        }, function (index) {
                            layer.close(index);
                        });
                        console.log(money, '金额计算');
                    } catch (e) {
                        console.log(e)
                    }
                },
                weixinPay() {
                    return new Promise(function (ok, err) {
                        layer.prompt({title: '请输入微信付款码编号', formType: 0}, function (pass, index) {
                            layer.close(index);
                            ok(pass)
                        });
                    })
                },
                //嘉联支付验证
                jialiePay() {
                    return new Promise(function (ok, err) {
                        layer.prompt({title: '请输入付款码编号', formType: 0}, function (pass, index) {
                            layer.close(index);
                            ok(pass)
                        });
                    })
                },
                //计算订单价格
                computedOrder(key) {
                    const that = this;
                    return new Promise(function (ok, erro) {
                        $eb.axios.post('{:Url("computedOrder")}', {
                            key,
                            uid: that.userId
                        }).then(function (res) {
                            //保存订单key
                            ok(res)
                        }).catch(function (err) {
                            erro(err)
                        })
                    })
                },
                //创建订单
                create(key, qr) {
                    let that = this;
                    let data = {
                        key: key,
                        uid: that.userId,
                        shipping_type: 2,
                        store_id: that.form.store_id,
                        real_name: that.userData.nickname,
                        phone: that.userData.phone,
                        payType: that.form.pay_type//支付方式
                    };
                    //判断是否需要传入code码
                    if (qr) {
                        data.auth_code = qr;
                    }
                    //提交订单
                    $eb.axios.post('{:Url("create")}', data).then(function (res) {
                        layer.confirm(res.data.msg + '<br/>' + '是否刷新？', {
                            btn: ['刷新', '取消'] //按钮
                        }, function (index) {
                            //清除用户卡号信息
                            that.UserCard = '';
                            window.location.reload();
                            //parent.$(".J_iframe:visible")[0].contentWindow.location.reload();
                            layer.close(index);
                        }, function (index) {
                            layer.close(index);
                        });
                        console.log(res)
                    }).catch(function (err) {

                    })
                }
            },
        }).$mount(document.getElementById('store-attr'))
    })
</script>