官方版本

lyg

2025-03-04 72bbec1590f85974d369ce7aeaa05be8905672a0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<tr>
    <td class="layui-td-gray" colspan="6" style="text-align:left; color:#666"><strong>服务信息</strong> <span class="layui-btn layui-btn-sm" type="button" id="serviceAdd">+ 添加服务</span></td>
</tr>
<tr>
    <td colspan="6">                
        <table id="serviceTable" class="layui-table layui-table-min" style="margin:0">
            <tr>
                <th width="200">服务名称</th>
                <th width="200">服务周期</th>
                <th width="100">服务单价</th>
                <th width="100">服务次数</th>
                <th width="100">小计</th>
                <th>备注信息</th>
                <th width="60">操作</th>
            </tr>
            <tr class="service-tr">
                <td><input type="text" name="service_title[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入服务名称"></td>
                <td><input type="text" name="service_date[]" value="" class="layui-input layui-input-readonly tool-time" data-range="到" lay-verify="required" lay-reqText="请选择服务周期" readonly></td>
                <td><input type="text" name="service_price[]" value="0.00" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入服务单价"></td>
                <td><input type="text" name="service_num[]" value="1" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入服务次数"></td>
                <td><input type="text" name="service_subtotal[]" value="0.00" class="layui-input layui-input-readonly" readonly></td>
                <td><input type="text" name="service_remark[]" value="" class="layui-input"></td>
                <td><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></td>
            </tr>
        </table>
    </td>
</tr>
<script>
function service_fun(layui){
    let form = layui.form;
    //添加服务信息表格
    $('#serviceAdd').on('click',function(){
        var html = '';
        html += '<tr class="service-tr">\
                    <td><input type="text" name="service_title[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入服务名称"></td>\
                    <td><input type="text" name="service_date[]" value="" class="layui-input layui-input-readonly tool-time" data-range="到" lay-verify="required" lay-reqText="请选择服务周期" readonly></td>\
                    <td><input type="text" name="service_price[]" value="0.00" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入服务单价"></td>\
                    <td><input type="text" name="service_num[]" value="1" class="layui-input input-num" lay-verify="required|number" lay-reqText="请输入服务次数"></td>\
                    <td><input type="text" name="service_subtotal[]" value="0.00" class="layui-input layui-input-readonly" readonly></td>\
                    <td><input type="text" name="service_remark[]" value="" class="layui-input"></td>\
                    <td><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></td>\
                </tr>';
        $('#serviceTable').append(html).find('.tr-none').remove();
        form.render();
    });
 
    $('#serviceTable').on('click', '[lay-event="del"]', function() {
        if($('.service-tr').length<2){
            layer.msg('至少保留一个服务选项');
            return false;
        }
        $(this).parents('.service-tr').remove();
        count_cost();
    });    
    
    //计算价格
    $('#serviceTable').on('input', '.input-num', function() {
        var inputs = $(this).parents('.service-tr').find("input");
        var service_price = inputs.eq(2).val();
        var service_num = inputs.eq(3).val();
        var service_amount = (service_price*service_num).toFixed(2);              
        if(isNaN(service_amount)){ 
            service_amount = 0.00;
        }
        inputs.eq(4).val(service_amount);
        count_cost();
    });
     
    //计算总价
    function count_cost(){
        var service_subtotal = $('#serviceTable').find('[name="service_subtotal[]"]');
        var total = 0;
        for (var m = 0; m < service_subtotal.length; m++) {
            total+=$(service_subtotal[m]).val()*1000;
        }
        if(isNaN(total)){ 
            total = 0;
        }
        $('[name="cost"]').val((total/1000).toFixed(2));
    }
}
</script>