MicroCommunityWeb/public/pages/property/payFeeOrder/payFeeOrder.html
2020-08-31 09:01:15 +08:00

136 lines
8.2 KiB
HTML

<div>
<div class="row">
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title">
<h5>订单收费</h5>
<div class="ibox-tools" style="top:10px;">
<button type="button" class="btn btn-primary btn-sm" style="margin-left:10px"
v-on:click="_goBack()">
返回
</button>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-7" style="border-right: solid #f4f4f4 1px;padding-left: 30px;">
<div class="form-group row">
<label class="col-sm-2 col-form-label">费用ID</label>
<div class="col-sm-10">
<label class=" col-form-label">{{payFeeOrderInfo.feeId}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">费用项目</label>
<div class="col-sm-10">
<label class=" col-form-label">{{payFeeOrderInfo.feeName}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">费用类型</label>
<div class="col-sm-10">
<label class=" col-form-label">{{payFeeOrderInfo.feeTypeCdName}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">到期时间</label>
<div class="col-sm-10">
<label class=" col-form-label">{{payFeeOrderInfo.endTime}}</label>
</div>
</div>
<div class="form-group row" v-if="payFeeOrderInfo.feeFlag != '2006012'">
<label class="col-sm-2 col-form-label">缴费周期</label>
<div class="col-sm-6">
<select class="custom-select" v-model="payFeeOrderInfo.tempCycles"
@change="_changeMonth(payFeeOrderInfo.tempCycles)">
<option value="">请选择缴费周期</option>
<option v-for="item in payFeeOrderInfo.paymentCycles" :value="item">{{item}}个月
</option>
<option value="-102">自定义周期</option>
</select>
</div>
</div>
<div class="form-group row" v-if="payFeeOrderInfo.tempCycles == '-102'">
<label class="col-sm-2 col-form-label">实际周期</label>
<div class="col-sm-6">
<input type="text" placeholder="请输入实际周期" v-model="payFeeOrderInfo.cycles"
oninput="value=value.replace(/[^\d]/g,'')"
v-on:change="changeCycle(payFeeOrderInfo.cycles)" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" style="padding-right:0px;">备注</label>
<div class="col-sm-8" style="padding-left:5px;">
<textarea placeholder="可填,请填写备注" class="form-control"
v-model="payFeeOrderInfo.remark"></textarea>
</div>
</div>
</div>
<div class="col-4" style="padding-left: 30px;">
<div class="row" v-if="payFeeOrderInfo.builtUpArea">
<label class="col-sm-3 col-form-label">面积:</label>
<label class="col-sm-8 col-form-label">{{payFeeOrderInfo.builtUpArea}}</label>
</div>
<div class="row" v-if="payFeeOrderInfo.builtUpArea">
<label class="col-sm-3 col-form-label">单价:</label>
<label class="col-sm-8 col-form-label">{{payFeeOrderInfo.squarePrice}}</label>
</div>
<div class="row" v-if="payFeeOrderInfo.builtUpArea">
<label class="col-sm-3 col-form-label">附加费:</label>
<label class="col-sm-8 col-form-label">{{payFeeOrderInfo.additionalAmount}}</label>
</div>
<div class="row" v-else>
<label class="col-sm-3 col-form-label">固定费:</label>
<label class="col-sm-8 col-form-label">{{payFeeOrderInfo.additionalAmount}}</label>
</div>
<div class="row">
<label class="col-sm-3 col-form-label"
style="line-height: 50px;padding-right:0px;">应收款:</label>
<label class="col-sm-8 col-form-label"
style="font-size: 30px;color: red;padding-left:0px;">¥{{_mathCeil(payFeeOrderInfo.totalFeePrice)}}</label>
</div>
<div class="row form-group">
<label class="col-sm-3 col-form-label" style="padding-right:0px;">支付方式:</label>
<label class="col-sm-4 col-form-label" style="padding-left:5px;">现金</label>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" style="padding-right:0px;">实收款</label>
<div class="col-sm-8" style="padding-left:5px;"><input type="text"
placeholder="请输入实际收款金额" v-model="payFeeOrderInfo.receivedAmount"
class="form-control"></div>
</div>
<div class="form-group row">
</div>
<div class="form-group row">
<div class="col-sm-8">
<button type="button" class="btn btn-warning btn-lg btn-block"
@click="_payFee()">提交收费</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="payFeeResult" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">缴费提示</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>缴费成功</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="_back()">返回</button>
<button type="button" class="btn btn-primary" @click="_printAndBack()">打印收据</button>
</div>
</div>
</div>
</div>
</div>