qimall/addons/Printer/backend/views/default/add_template.php

<?php


?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;width:100%;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>打印机设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="ruleForm" :rules="rules"  size="small" ref="ruleForm" label-width="150px">
                <el-card shadow="never" class="printer_right">
                    <div slot="header">
                        <div>
                            <span>编辑</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="16">
                                <div >
                                <el-form-item label="模板名称" style="margin-bottom: 10" prop="name">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.name"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="小票名称" style="margin-bottom: 10" prop="ticket_nam">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.ticket_nam"></el-input>
                                    </el-col>
                                    <br>
                                    <div style="font-size: 13px; color: #999">不输入小票名称，则不打印</div>
                                </el-form-item>
                                </div>
                                <el-form-item label="头部内容" style="margin-bottom: 10" prop="head_info">
                                    <el-col :span="12">
                                        <el-checkbox-group v-model="ruleForm.head_info">
                                            <el-checkbox value=1 label=1>商城名称</el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="自提码" style="margin-bottom: 10" prop="pickup_code">
                                    <el-col :span="12">
                                        <el-checkbox-group v-model="ruleForm.pickup_code">
                                            <el-checkbox value=1 label=1>自提码</el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="商品信息" style="margin-bottom: 10" prop="goods_info">
                                    <el-col :span="12">
                                        <el-checkbox-group v-model="ruleForm.goods_info">
                                            <el-checkbox value=1 label=1>商品金额</el-checkbox>
                                            <el-checkbox value=2 label=2>商品条码</el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="商品金额" prop="price_info">
                                    <el-radio-group  v-model="ruleForm.price_info" size="small">
                                        <el-radio label="1" >售价</el-radio>
                                        <el-radio label="2" >实付价</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="备注" style="margin-bottom: 10" prop="remarks_info">
                                    <el-col :span="12">
                                        <el-checkbox-group v-model="ruleForm.remarks_info">
                                            <el-checkbox value=1 label=1>买家留言</el-checkbox>
                                            <el-checkbox value=2 label=2>商家备注</el-checkbox>
                                        </el-checkbox-group>
                                        <div style="font-size: 13px; color: #999">订单有备注信息小票才会打印</div>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="收货信息" style="margin-bottom: 10" prop="buyer_info">
                                    <el-col :span="12">
                                        <el-checkbox-group v-model="ruleForm.buyer_info">
                                            <el-checkbox value=1 label=1>姓名</el-checkbox>
                                            <el-checkbox value=2 label=2>联系方式</el-checkbox>
                                            <el-checkbox value=3 label=3>地址</el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="商城信息" style="margin-bottom: 10" prop="mall_info">
                                    <el-col :span="12">
                                        <el-checkbox-group v-model="ruleForm.mall_info">
                                            <el-checkbox value=1 label=1>地址</el-checkbox>
                                            <el-checkbox value=2 label=2>联系方式</el-checkbox>
                                            <el-checkbox value=3 label=3>商城二维码</el-checkbox>
                                        </el-checkbox-group>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="二维码连接" style="margin-bottom: 10" prop="qrcode_url">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.qrcode_url"></el-input>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="底部信息" style="margin-bottom: 10" prop="bottom_info">
                                    <el-col :span="12">
                                        <el-input v-model="ruleForm.bottom_info"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card class="printer_img">
                    <div slot="header">
                        <div><span>预览图</span></div>
                    </div>
                    <div class="main_div">
                        <div v-if="ruleForm.ticket_nam" class="div_line">小票名称</div>
                        <div v-if="ruleForm.head_info.indexOf('1')>=0" class="div_line" style="font-size: 20px; line-height: 50px;">商城名称</div>
                        <div class="div_order" v-if="ruleForm.pickup_code.indexOf('1')>=0">自提码：A001</div>
                        <div class="div_order">订单类型：商场订单</div>
                        <div class="div_order">订单编号：SW20180702231831547866</div>
                        <div class="div_order border_bottom">下单时间：2022-06-09 10:20:00</div>
                        <div class="goods_data">
                            <ul>
                                <li><div>名称</div><div>数量</div>
                                    <div v-if="ruleForm.goods_info.indexOf('1')>=0">单价</div>
                                </li>
                                <li><div>男子运动外套</div><div>2</div>
                                    <div v-if="ruleForm.goods_info.indexOf('1')>=0">2500.00</div>
                                </li>
                                <li v-if="ruleForm.goods_info.indexOf('2')>=0" class="div_order" style="text-align: center;margin-top: 5px;">
                                    <img height="100px" :src="diy_img_prefix+'/static/addons/printer/tiaoxing.png'">
                                </li>
                                <li><div>白色跑步鞋</div><div>1</div>
                                    <div v-if="ruleForm.goods_info.indexOf('1')>=0">500.00</div>
                                </li>
                                <li v-if="ruleForm.goods_info.indexOf('2')>=0" class="div_order" style="text-align: center;margin-top: 5px;">
                                    <img height="100px" :src="diy_img_prefix+'/static/addons/printer/tiaoxing.png'">
                                </li>
                                <li class="border_bottom"><div>红色裙子</div><div>1</div>
                                    <div v-if="ruleForm.goods_info.indexOf('1')>=0">300.00</div>
                                </li>
                                <li v-if="ruleForm.goods_info.indexOf('2')>=0" class="div_order" style="text-align: center;margin-top: 5px;">
                                    <img height="100px" :src="diy_img_prefix+'/static/addons/printer/tiaoxing.png'">
                                </li>
                            </ul>
                        </div>
                        <div class="div_order">商品总计：3300.00</div>
                        <div class="div_order">运费：20</div>
                        <div class="div_order">积分抵扣：0.00</div>
                        <div class="div_order border_bottom">实际支付：3300.00</div>
                        <div v-if="ruleForm.buyer_info.indexOf('1')>=0" class="div_order">收货人：李四</div>
                        <div v-if="ruleForm.buyer_info.indexOf('2')>=0" class="div_order">收货地址：广东省广州市白云区新市墟</div>
                        <div v-if="ruleForm.buyer_info.indexOf('3')>=0" class="div_order border_bottom">收货电话：15013095107</div>
                        <div v-if="ruleForm.mall_info.indexOf('1')>=0" class="div_order">商家联系方式：15013095108</div>
                        <div v-if="ruleForm.mall_info.indexOf('2')>=0" class="div_order border_bottom">商家地址：广东省广州市白云区新市墟</div>
                        <div v-if="ruleForm.mall_info.indexOf('3')>=0" class="div_order" style="text-align: center;margin-top: 5px;">
                            <img height="100px" :src="diy_img_prefix+'/static/addons/printer/qrode.png'">
                        </div>
                        <div v-if="ruleForm.remarks_info.indexOf('1')>=0" class="div_order">备注：周末派件额</div>
                        <div v-if="ruleForm.remarks_info.indexOf('2')>=0" class="div_order border_bottom">商家留言：收到，祝你周末愉快</div>
                        <div  class="div_order" style="text-align: center; margin-top: 5px;">
                            <img height="100px" v-if="ruleForm.qrcode_url" :src="diy_img_prefix+'/static/addons/printer/qrode.png'">
                            <div v-if="ruleForm.bottom_info">{{ruleForm.bottom_info?ruleForm.bottom_info:'谢谢惠顾，欢迎下次光临'}}</div>
                        </div>
                    </div>

                </el-card>
            </el-form>
            <div class="clear_float"></div>
            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;"
                       @click="submitForm('ruleForm')" size="small">保存
            </el-button>
        </div>


    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
                ruleForm: {
                    name: '',
                    ticket_nam:'',
                    head_info:[],
                    pickup_code: [], 
                    goods_info:['1'],
                    price_info:'1',
                    remarks_info:[],
                    buyer_info:[],
                    mall_info:[],
                    qrcode_url:'',
                    bottom_info:'',
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请填写打印机名称',
                        trigger: 'change'
                    }, ],
                    ticket_nam: [{
                        required: true,
                        message: '请填写小票名称',
                        trigger: 'change'
                    }, ],
                    secret_key: [{
                        required: true,
                        message: '请选择填写打印机秘钥',
                        trigger: 'change'
                    }, ],
                    api_key: [{
                        required: true,
                        message: '请选择填写api_key',
                        trigger: 'change'
                    }, ],
                    user_id: [{
                        required: true,
                        message: '请选择填写user_id',
                        trigger: 'change'
                    }, ],
                    url: [{
                        required: true,
                        message: '请选择填写url',
                        trigger: 'change'
                    }, ]
                },
            }
        },
        mounted: function () {

        },
        methods: {
            is_select(array_data,num){
                if(array_data.indexOf(num)>=0){
                    return true;
                }else{
                    return false;
                }
            },
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'printer/default/edit-printer',
                        id: this.ruleForm.id
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if(e.data.code==0){

                    }else{
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                    this.$message.error(e.data.msg);
                })
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        this.ruleForm['set_type']=2;
                        request({
                            params: {
                                r: 'printer/default/edit-template',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                let info = {r: 'printer/default/template'};
                                navigateTo(info)
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    });
</script>
<style>
    .goods_data{
        width: 90%;
        margin: 0 auto;
        font-size: 13px;
        padding-top: 20px;
    }
    .goods_data li{
        min-height: 25px;
        width: 100%;
        clear: both;
        line-height: 25px;
    }
    .goods_data li div{
        width: 33%;
        float: left;
    }
    .div_order{
        width: 90%;
        line-height: 30px;
        margin: 0 auto;
        font-size: 13px;
    }
    .border_bottom{
        border-bottom: dashed 1px #e8e6e6;
    }
    .div_line{
        width: 90%;
        line-height: 40px;
        margin: 0 auto;
        text-align: center;
        font-size: 13px;
        border-bottom: dashed 1px #e8e6e6;
    }
    .main_div{
        width: 90%;
        min-height: 500px;
        margin: 0 auto;
        border: 1px solid #e8e6e6;
    }
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;

    }
    .clear_float{
        clear: both;
    }
    .printer_right{
        width: 70%;
        float: left;
    }
    .printer_img{
        width: 28%;
        margin-left: 2%;
        float: left;
        height: 685px;
        overflow: scroll;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }
</style>