html
```html
<div>
    <div class="top-1 flex justify-between ">
        <div class="top-left" style="width: 80%;">
            <h1 class="text-center" style="color:#000;font-weight: 400;">{{printPayFeeInfo.storeName}}收据单</h1>
            <div class="flex justify-around" style="color:#000;font-size:20px">
                <div style="width: 25%;">小区名称：{{printPayFeeInfo.communityName}}</div>
                <div style="width: 25%;">栋号：{{printPayFeeInfo.roomInfo.floorNum}}栋</div>
                <div style="width: 25%;">建筑面积：{{printPayFeeInfo.fees && printPayFeeInfo.fees.length>0?printPayFeeInfo.fees[0].area:'无'}}</div>
            </div>
            <div class="flex justify-around" style="color:#000;font-size:20px">
                <div style="width: 25%;">户主姓名：{{printPayFeeInfo.payObjName}}</div>
                <div style="width: 25%;">房号：{{printPayFeeInfo.roomInfo.roomNum}}</div>
                <div style="width: 25%;">房屋编号：{{printPayFeeInfo.fees && printPayFeeInfo.fees.length>0?printPayFeeInfo.fees[0].objName:'无'}}</div>
            </div>
        </div>
        <div class="top-right">
            <img :src="printPayFeeInfo.qrImg" width="100px" height="100px">
        </div>
    </div>

    <div class="context-1">
        <table class="table vc-table-border" style="color:#000;font-size:20px">
            <thead>
                <tr>
                    <th scope="col" class="text-center" width="80px"><span><vc:i18n name="费用名称" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="起始日期" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="结束日期" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="上期读数" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="本期读数" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="本期用量" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="单位" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="单价" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                    <th scope="col" class="text-center"><span><vc:i18n name="小计(元)" namespace="printPayFeeBangTai"></vc:i18n></span></th>
                </tr>
            </thead>
            <tbody class="vc-table-border" style="color:#000;font-size:20px">
                <tr v-for="(item,index) in printPayFeeInfo.fees" class="vc-table-border">
                    <td scope="row" class="text-center">{{item.feeName}}</td>
                    <td class="text-center">{{vc.dateFormat(item.startTime)}}</td>
                    <td class="text-center">{{vc.dateFormat(item.endTime)}}</td>
                    <td class="text-center" v-if="item.preDegrees">{{item.preDegrees}} </td>
                    <td class="text-center" v-else>-</td>
                    <td class="text-center" v-if="item.preDegrees">{{item.curDegrees}}</td>
                    <td class="text-center" v-else>-</td>
                    <td class="text-center" v-if="item.preDegrees">{{item.curDegrees - item.preDegrees}}</td>
                    <td class="text-center" v-else>-</td>
                    <td class="text-center">{{item.units}}</td>
                    <td class="text-center">{{item.squarePrice}}</td>
                    <td class="text-center">{{item.amount}}</td>
                </tr>
                <tr>
                    <td colspan="5" class="text-right "><span><vc:i18n name="合计：" namespace="printPayFeeBangTai"></vc:i18n></span></td>
                    <td colspan="3" class="text-center ">{{vc.changeNumMoneyToChinese(printPayFeeInfo.amount)}}
                    </td>
                    <td class="text-center ">{{printPayFeeInfo.amount}}</td>
                </tr>
                <tr>
                    <td scope="row" class="text-center">物业费预存日期</td>
                    <td scope="row" class="text-center"></td>
                    <td scope="row" class="text-center">上期预存</td>
                    <td scope="row" class="text-center">0.00</td>
                    <td scope="row" class="text-center">预存剩余</td>
                    <td scope="row" class="text-center">0.00</td>
                    <td colspan="2" scope="row" class="text-center">抵扣预存后应缴</td>
                    <td scope="row" class="text-center">{{printPayFeeInfo.amount}}</td>
                </tr>
                <tr height="60px">
                    <td scope="row" class="text-center">备注1</td>
                    <td colspan="8">
                        <p>
                            <!-- {{printPayFeeInfo.content}} -->
                            <div v-html="printPayFeeInfo.content"></div>
                        </p>
                    </td>

                </tr>
                <tr height="60px">
                    <td scope="row" class="text-center">备注2</td>
                    <td colspan="8">
                        <p>

                        </p>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
    <div class="flex justify-around " style="color:#000;font-size:20px">
        <div style="width: 20%;">制单人：{{printPayFeeInfo.userName}}</div>
        <div style="width: 20%;">复核人：</div>
        <div style="width: 20%;">客服管家：</div>
        <div style="width: 20%;">缴费方式：{{printPayFeeInfo.fees && printPayFeeInfo.fees.length>0?printPayFeeInfo.fees[0].primeRate:'无'}}</div>
    </div>
    <div class="flex justify-around " style="color:#000;font-size:20px">
        <div style="width: 20%;">日期：{{vc.dateFormat(new Date())}}</div>
        <div style="width: 20%;"></div>
        <div style="width: 20%;">手机/微信号：</div>
        <div style="width: 20%;">实缴日期：{{printPayFeeInfo.feeTime}}</div>
    </div>
    <div class="text-right margin-top" style="color:#000;font-size:20px">
        <div>{{printPayFeeInfo.storeName}}</div>
        <div>物业服务中心</div>
    </div>
    <div class="text-right" id="print-btn">
        <button class="btn btn-primary float-right" type="button" v-on:click="_printPurchaseApplyDiv()">
            <i class="fa fa-check"></i>&nbsp;打印
        </button>
        <button type="button" class="btn btn-warning float-right" style="margin-right:20px;" v-on:click="_closePage()"><span><vc:i18n name="取消" namespace="printPayFeeBangTai"></vc:i18n></span>
        </button>
    </div>
</div>
```
js
```js
(function(vc) {

    vc.extends({
        data: {
            printPayFeeInfo: {
                communityName: '',
                receiptId: '',
                receiptIds: '',
                detailIds: '',
                roomName: '',
                amount: 0.00,
                fees: [],
                feeTime: '',
                wechatName: '',
                content: '',
                qrImg: '',
                payObjName: '',
                feeReceipt: [],
                apply: 'N',
                userName: vc.getData('/nav/getUserInfo').name,
                storeName: '',
                roomInfo: {

                }
            },
            printFlag: '0'
        },
        _initMethod: function() {
            //vc.component._initPrintPurchaseApplyDateInfo();

            $that.printPayFeeInfo.receiptId = vc.getParam('receiptId');
            $that.printPayFeeInfo.receiptIds = vc.getParam('receiptIds');
            $that.printPayFeeInfo.detailIds = vc.getParam('detailIds');
            $that.printPayFeeInfo.apply = vc.getParam('apply');
            $that.printPayFeeInfo.merge = vc.getParam('merge');


            //$that.printPayFeeInfo.feeTime = vc.dateTimeFormat(new Date());

            $that.printPayFeeInfo.communityName = vc.getCurrentCommunity().name;

            $that._loadReceipt();

            $that._loadPrintSpec();
        },
        _initEvent: function() {


        },
        methods: {
            _initPayFee: function() {

            },
            _loadReceipt: function() {

                var param = {
                    params: {
                        page: 1,
                        row: 30,
                        receiptId: $that.printPayFeeInfo.receiptId,
                        receiptIds: $that.printPayFeeInfo.receiptIds,
                        detailIds: $that.printPayFeeInfo.detailIds,
                        communityId: vc.getCurrentCommunity().communityId
                    }
                };

                //发送get请求
                vc.http.apiGet('/feeReceipt/queryFeeReceipt',
                    param,
                    function(json, res) {
                        var _feeReceiptManageInfo = JSON.parse(json);
                        let _feeReceipt = _feeReceiptManageInfo.data;
                        let _amount = 0;
                        _feeReceipt.forEach(item => {
                            _amount += parseFloat(item.amount)
                        });

                        $that.printPayFeeInfo.amount = _amount.toFixed(2);
                        $that.printPayFeeInfo.roomName = _feeReceipt[0].objName;
                        $that.printPayFeeInfo.feeTime = _feeReceipt[0].createTime;
                        //$that.printPayFeeInfo.receiptNum = _feeReceipt[0].receiptId;
                        $that.printPayFeeInfo.payObjName = _feeReceipt[0].payObjName;
                        $that.printPayFeeInfo.storeName = _feeReceipt[0].storeName;
                        $that.printPayFeeInfo.feeReceipt = _feeReceipt;

                        $that.listRoom(_feeReceipt[0].objId);

                        $that._loadReceiptDetail();

                    },
                    function(errInfo, error) {
                        console.log('请求失败处理');
                    }
                );
            },
            _loadReceiptDetail: function() {

                let param = {
                    params: {
                        page: 1,
                        row: 100,
                        receiptId: $that.printPayFeeInfo.receiptId,
                        receiptIds: $that.printPayFeeInfo.receiptIds,
                        detailIds: $that.printPayFeeInfo.detailIds,
                        communityId: vc.getCurrentCommunity().communityId,
                        mergeFee:$that.printPayFeeInfo.merge
                    }
                };

                //发送get请求
                vc.http.apiGet('/feeReceipt/queryFeeReceiptDetail',
                    param,
                    function(json, res) {
                        var _feeReceiptManageInfo = JSON.parse(json);
                        let _feeReceiptDetails = _feeReceiptManageInfo.data;
                        $that.printPayFeeInfo.receiptNum = _feeReceiptDetails[0].receiptId + "(" + _feeReceiptDetails[0].payOrderId + ")";
                        _feeReceiptDetails.forEach(item => {
                            $that.printPayFeeInfo.feeReceipt.forEach(im => {
                                if (item.receiptId == im.receiptId) {
                                    item.objName = im.objName;
                                    item.feeTypeCd = im.feeTypeCd;
                                }
                            })
                        })
                        $that.printPayFeeInfo.fees = _feeReceiptDetails;


                    },
                    function(errInfo, error) {
                        console.log('请求失败处理');
                    }
                );
            },
            _loadPrintSpec: function() {
                var param = {
                    params: {
                        page: 1,
                        row: 1,
                        specCd: 2020,
                        communityId: vc.getCurrentCommunity().communityId
                    }
                };

                //发送get请求
                vc.http.apiGet('/feePrintSpec/queryFeePrintSpec',
                    param,
                    function(json, res) {
                        var _json = JSON.parse(json);
                        var _data = _json.data;
                        if (_data.length > 0) {
                            $that.printPayFeeInfo.content = _data[0].content;
                            $that.printPayFeeInfo.qrImg = _data[0].qrImg;
                            if (_data[0].printName) {
                                $that.printPayFeeInfo.communityName = _data[0].printName;
                            }
                        }
                    },
                    function(errInfo, error) {
                        console.log('请求失败处理');
                    }
                );

            },

            _printPurchaseApplyDiv: function() {

                $that.printFlag = '1';
                console.log('console.log($that.printFlag);', $that.printFlag);
                document.getElementById("print-btn").style.display = "none"; //隐藏

                window.print();
                //$that.printFlag = false;
                window.opener = null;
                window.close();
            },
            _closePage: function() {
                window.opener = null;
                window.close();
            },

            listRoom: function(_roomId) {
                let param = {
                    params: {
                        page: 1,
                        row: 1,
                        communityId: vc.getCurrentCommunity().communityId,
                        roomId: _roomId
                    }
                };
                //发送get请求
                vc.http.apiGet('/room.queryRooms',
                    param,
                    function(json, res) {
                        let listRoomData = JSON.parse(json);
                        if (!listRoomData.rooms || listRoomData.rooms.length < 1) {
                            return;
                        }
                        vc.component.printPayFeeInfo.roomInfo = listRoomData.rooms[0];
                    },
                    function(errInfo, error) {
                        console.log('请求失败处理');
                    }
                );
            },

        }
    });

})(window.vc);
```