|
|
<template>
|
|
|
<view>
|
|
|
<topnav :title='pageTitle' @tohome="tohome"></topnav>
|
|
|
<view class="content">
|
|
|
<orderinfo :info="order"></orderinfo>
|
|
|
<view class="pageTitle">请选择收款金额</view>
|
|
|
<view class="moneyBox" style="margin-top: 30rpx;">
|
|
|
<view class="moneyBoxLeft">
|
|
|
<block v-for="(item,index) in moneyArr">
|
|
|
<view class="moneyItem" :class="item.checked?'moneyItemOn':''" :data-index='index'
|
|
|
@click="bindClickMoney">
|
|
|
<text>￥{{item.amt}}元</text>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
<view class="moneyBoxRight">
|
|
|
<view class="btnOther" :class="selectOtherAmt?'btnOther-on':''" @click="bindinputotheramt">
|
|
|
<text>其它金额</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="payList">
|
|
|
<view class="l-box">
|
|
|
<block v-for="(item,index) in paylist">
|
|
|
<view class="l-box-info" @click="tochange" :data-index="index">
|
|
|
<view class="l-box-info-left" :data-index="index">
|
|
|
<view class="l-box-info-left-logo">
|
|
|
<image :src="item.img" class="icon_logo"></image>
|
|
|
</view>
|
|
|
<view class="l-box-info-left-rinfo">
|
|
|
<view class="l-box-info-left-title">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
<view class="l-box-info-left-ftitle">
|
|
|
{{item.comment}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="l-box-info-right">
|
|
|
<text class="iconfont icon-check icon-check-in" v-if="item.chekced"></text>
|
|
|
<text class="iconfont icon-check" v-else></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="payBox">
|
|
|
<view class="listBox mp-20">
|
|
|
<view class="listBoxItem">
|
|
|
<view class="listBoxItemLeft">
|
|
|
<view class="vred"> </view>备注
|
|
|
</view>
|
|
|
<view class="listBoxItemRight">
|
|
|
<input type="text" class="listBoxItemInput" placeholder-class="listBoxItemInputPlaceholder"
|
|
|
placeholder="请输入" @input='bindChangeComment' @confirm='bindPay' />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<view class="bottom">
|
|
|
<view class="bottomLeft">
|
|
|
<text class="priceTitle">收款金额：</text>
|
|
|
<text class="priceInfo">￥{{totalPrice}}</text>
|
|
|
</view>
|
|
|
<view class="bottomRight">
|
|
|
<view class="btnSubmit btn" @click="bindPay">确认收款</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="popup" type="bottom" @change="bindPopChange">
|
|
|
<view class="popupbox-amt"
|
|
|
:style="'width:'+0.8*windowWidth+'px;top:-'+(windowHeight/2+150)+'px;'+'left:'+((windowWidth-0.8*windowWidth)/2)+'px'">
|
|
|
<view class="popupbox-header">
|
|
|
<view class="popupbox-header-tag"></view>
|
|
|
<view class="popupbox-header-title">请填写金额</view>
|
|
|
</view>
|
|
|
<view class="popupbox-body">
|
|
|
<view class="listBox mp-20">
|
|
|
<view class="listBoxItem">
|
|
|
<view class="listBoxItemLeft">
|
|
|
<view class="vred">*</view>金额
|
|
|
</view>
|
|
|
<view class="listBoxItemRight">
|
|
|
<input type="number" class="listBoxItemInput"
|
|
|
placeholder-class="listBoxItemInputPlaceholder" :focus="focusAmtSet"
|
|
|
placeholder="请输入" @input='bindChangeMoney' @confirm="bindPopOk" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="popupbox-bottom">
|
|
|
<view class="popupbox-btn popupbox-btn-cancel" @click="closePop"><text
|
|
|
class="popupbox-btn-txt">取消</text></view>
|
|
|
<view class="popupbox-btn" @click="bindPopOk"><text class="popupbox-btn-txt">确定</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
var util = require("../../utils/util.js");
|
|
|
var app = getApp();
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
pageTitle: "收银台",
|
|
|
windowHeight: 720,
|
|
|
windowWidth: 720,
|
|
|
order: {
|
|
|
"id": 731,
|
|
|
"serial": "",
|
|
|
"customer_id": 16,
|
|
|
"manager_id": null,
|
|
|
"bed_id": 778,
|
|
|
"patient_id": 793,
|
|
|
"project_id": 1,
|
|
|
"product_id": 1,
|
|
|
"product_item_id": 1,
|
|
|
"product_paramedic_level_id": 1,
|
|
|
"from_date": "",
|
|
|
"to_date": "",
|
|
|
"status": 0,
|
|
|
"total": 150,
|
|
|
"paid_total": 0,
|
|
|
"contact": null,
|
|
|
"mobile": "13912797667",
|
|
|
"paramedic_id": 31,
|
|
|
"price": "150.00",
|
|
|
"patient_quantity": null,
|
|
|
"created_at": "",
|
|
|
"updated_at": "",
|
|
|
"balance": "0.00",
|
|
|
"status_name": "",
|
|
|
"days": 0,
|
|
|
"product_item": {
|
|
|
"id": 1,
|
|
|
"name": "一对一"
|
|
|
},
|
|
|
"paramedic_level": {
|
|
|
"id": 8,
|
|
|
"name": "普通护工",
|
|
|
"laravel_through_key": 1
|
|
|
},
|
|
|
"project": {
|
|
|
"id": 1,
|
|
|
"name": "武进中医院",
|
|
|
"logo_url": null,
|
|
|
"banners_url": null
|
|
|
},
|
|
|
"bed": {
|
|
|
"id": 778,
|
|
|
"name": "1",
|
|
|
"room_name": "101",
|
|
|
"area_name": "一楼（十九病区）",
|
|
|
"building_name": "内科楼"
|
|
|
},
|
|
|
"customer": {
|
|
|
"id": 16,
|
|
|
"name": null,
|
|
|
"balance": "0.00"
|
|
|
},
|
|
|
"patient": {
|
|
|
"id": 793,
|
|
|
"name": "",
|
|
|
"sex": null,
|
|
|
"age": null,
|
|
|
"mobile": null
|
|
|
},
|
|
|
"paramedic": {
|
|
|
"id": 31,
|
|
|
"name": "",
|
|
|
"mobile": "15850579275",
|
|
|
"paramedic_level_name": "普通护工",
|
|
|
"avatar_url": null,
|
|
|
"age": "",
|
|
|
"status_name": null
|
|
|
},
|
|
|
"factorjson": [{
|
|
|
"fee": "0.00",
|
|
|
"price": "0.00",
|
|
|
"factor_id": 1,
|
|
|
"factor_name": "所在科室",
|
|
|
"fee_percent": "25.00",
|
|
|
"used_for_fee": 1,
|
|
|
"factor_item_id": 2,
|
|
|
"factor_item_name": "骨科"
|
|
|
}]
|
|
|
},
|
|
|
totalPrice: 0,
|
|
|
paylist: [{
|
|
|
name: "微信支付",
|
|
|
comment: "推荐微信用户使用",
|
|
|
chekced: true,
|
|
|
img: "/static/resources/weixin.png",
|
|
|
type: "weixin"
|
|
|
}, {
|
|
|
name: "支付宝支付",
|
|
|
comment: "推荐支付宝用户使用",
|
|
|
chekced: false,
|
|
|
img: "/static/resources/alipay.png",
|
|
|
type: "alipay"
|
|
|
}, {
|
|
|
name: "刷卡支付",
|
|
|
comment: "推荐刷卡用户使用",
|
|
|
chekced: false,
|
|
|
img: "/static/resources/pos.png",
|
|
|
type: "pos"
|
|
|
}, {
|
|
|
name: "现金支付",
|
|
|
comment: "推荐现金",
|
|
|
chekced: false,
|
|
|
img: "/static/resources/cash.png",
|
|
|
type: "cash"
|
|
|
}],
|
|
|
payType: "weixin",
|
|
|
id: "",
|
|
|
moneyArr: [],
|
|
|
comment: "",
|
|
|
selectOtherAmt: false,
|
|
|
showPopAmt: false,
|
|
|
focusAmtSet: false
|
|
|
}
|
|
|
},
|
|
|
onLoad: function(option) {
|
|
|
var that = this;
|
|
|
this.id = option.id;
|
|
|
util.getOrderInfo(this.id, function(r) {
|
|
|
console.log(r)
|
|
|
that.order = r.data;
|
|
|
that.loadMoneyArr(that.order.price);
|
|
|
}, function() {
|
|
|
|
|
|
})
|
|
|
|
|
|
this.windowHeight = app.globalData.winHeight;
|
|
|
this.windowWidth = app.globalData.winWidth;
|
|
|
},
|
|
|
methods: {
|
|
|
tohome:function(){
|
|
|
uni.navigateTo({
|
|
|
url:"../index/index"
|
|
|
})
|
|
|
},
|
|
|
openPop() {
|
|
|
// 通过组件定义的ref调用uni-popup方法
|
|
|
this.$refs.popup.open();
|
|
|
},
|
|
|
bindPopChange: function() {
|
|
|
var that = this;
|
|
|
that.focusAmtSet = true;
|
|
|
},
|
|
|
closePop() {
|
|
|
// 通过组件定义的ref调用uni-popup方法
|
|
|
this.$refs.popup.close();
|
|
|
|
|
|
this.focusAmtSet = false;
|
|
|
},
|
|
|
bindClickMoney: function(e) {
|
|
|
var index = e.currentTarget.dataset.index;
|
|
|
var _moneyArr = this.moneyArr;
|
|
|
for (var m of _moneyArr) {
|
|
|
m.checked = false;
|
|
|
}
|
|
|
_moneyArr[index].checked = true;
|
|
|
console.log(_moneyArr[index])
|
|
|
this.moneyArr = _moneyArr;
|
|
|
this.totalPrice = _moneyArr[index].amt;
|
|
|
this.selectOtherAmt = false;
|
|
|
this.closePop();
|
|
|
},
|
|
|
tochange: function(e) {
|
|
|
var index = e.currentTarget.dataset.index;
|
|
|
var _paylist = this.paylist;
|
|
|
for (var m of _paylist) {
|
|
|
m.chekced = false;
|
|
|
}
|
|
|
_paylist[index].chekced = true;
|
|
|
this.paylist = _paylist;
|
|
|
this.payType = _paylist[index].type;
|
|
|
},
|
|
|
bindinputotheramt: function() {
|
|
|
var _moneyArr = this.moneyArr;
|
|
|
for (var m of _moneyArr) {
|
|
|
m.checked = false;
|
|
|
}
|
|
|
this.moneyArr = _moneyArr;
|
|
|
this.totalPrice = 0;
|
|
|
this.selectOtherAmt = true;
|
|
|
this.openPop();
|
|
|
},
|
|
|
bindPopOk: function() {
|
|
|
if (this.totalPrice == 0) {
|
|
|
util.alert('请输入金额');
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
this.closePop();
|
|
|
|
|
|
},
|
|
|
bindPay: function(e) {
|
|
|
var that = this;
|
|
|
if (this.totalPrice == 0 || util.isNull(this.totalPrice)) {
|
|
|
util.alert('请输入金额');
|
|
|
return false;
|
|
|
}
|
|
|
if (util.isNull(that.payType)) {
|
|
|
util.alert('请选择收款方式');
|
|
|
return false;
|
|
|
}
|
|
|
switch (that.payType) {
|
|
|
case "weixin": // 只允许通过相机扫码
|
|
|
uni.scanCode({
|
|
|
onlyFromCamera: true,
|
|
|
success: function(res) {
|
|
|
console.log('条码类型：' + res.scanType);
|
|
|
console.log('条码内容：' + res.result);
|
|
|
util.scanPay(that.id, that.totalPrice, res.result, that.payType,
|
|
|
function(res) {
|
|
|
uni.showModal({
|
|
|
title: "收款成功",
|
|
|
success: function() {
|
|
|
that.processAfterPay(res);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
function(res) {
|
|
|
util.alert("收款失败：" + res);
|
|
|
})
|
|
|
|
|
|
}
|
|
|
});
|
|
|
break;
|
|
|
case "alipay": // 只允许通过相机扫码
|
|
|
uni.scanCode({
|
|
|
onlyFromCamera: true,
|
|
|
success: function(res) {
|
|
|
console.log('条码类型：' + res.scanType);
|
|
|
console.log('条码内容：' + res.result);
|
|
|
util.scanPay(that.id, that.totalPrice, res.result, that.payType,
|
|
|
function(res) {
|
|
|
uni.showModal({
|
|
|
title: "收款成功",
|
|
|
success: function() {
|
|
|
that.processAfterPay(res);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
function(res) {
|
|
|
util.alert("收款失败：" + res);
|
|
|
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
break;
|
|
|
case "cash":
|
|
|
case "pos":
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: "确认收款￥[" + that.totalPrice + "]，收款方式[" + (that.payType == 'cash' ? '现金' :
|
|
|
'刷卡') + "]",
|
|
|
confirmText: "确认",
|
|
|
confirmColor: "#000",
|
|
|
cancelColor: "#eee",
|
|
|
success(res) {
|
|
|
if (res.confirm) {
|
|
|
that.doReceivedMoney(that.id);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
},
|
|
|
doReceivedMoney: function(id) {
|
|
|
var that = this;
|
|
|
util.request({
|
|
|
bindThis: that,
|
|
|
method: 'POST',
|
|
|
customLoading: false,
|
|
|
api: 'manager/recharge-for-order/' + id,
|
|
|
data: {
|
|
|
payment: that.payType,
|
|
|
money: that.totalPrice,
|
|
|
remark: that.comment
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
console.log('3：提交成功返回' + res);
|
|
|
uni.showModal({
|
|
|
title: "收款成功",
|
|
|
success: function() {
|
|
|
that.processAfterPay(res);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
console.log('4：提交失败' + res);
|
|
|
util.alert(res);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
bindChangeMoney: function(e) {
|
|
|
this.totalPrice = e.detail.value;
|
|
|
},
|
|
|
processAfterPay: function(res) {
|
|
|
var that = this;
|
|
|
uni.navigateTo({
|
|
|
url: "../../package/packageorder/pages/orderinfo/orderinfo?id=" + that.id
|
|
|
})
|
|
|
},
|
|
|
loadMoneyArr: function(price) {
|
|
|
var moneyArr = [];
|
|
|
var that = this;
|
|
|
for (var i = 1; i <= 6; i++) {
|
|
|
var c = false;
|
|
|
if (this.order.total-this.order.paid_total==i*price) {
|
|
|
c = true;
|
|
|
that.totalPrice = i * price;
|
|
|
|
|
|
}
|
|
|
moneyArr.push({
|
|
|
amt: i * price,
|
|
|
checked: c
|
|
|
});
|
|
|
}
|
|
|
this.moneyArr = moneyArr;
|
|
|
},
|
|
|
bindChangeComment: function(e) {
|
|
|
this.comment = e.detail.value;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
page {
|
|
|
padding-top: 140rpx;
|
|
|
padding-bottom: 100rpx;
|
|
|
}
|
|
|
|
|
|
.l-box-info-left {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.btnOther {
|
|
|
|
|
|
background-color: #0CB790;
|
|
|
height: 200rpx;
|
|
|
width: 100%;
|
|
|
color: #FFFFFF;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8rpx;
|
|
|
display: flex;
|
|
|
font-size: 28rpx;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.btnOther-on {
|
|
|
background-color: orange;
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0 -2rpx 12rpx 0 rgba(0, 0, 0, 0.16), inset 0 1rpx 0 0 #E4E4E4;
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.bottom .bottomLeft {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.bottom .bottomRight {
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
width: 220rpx;
|
|
|
line-height: 100rpx;
|
|
|
text-align: center;
|
|
|
line-height: 100rpx;
|
|
|
font-family: SourceHanSansCN-Medium;
|
|
|
font-size: 32rpx;
|
|
|
letter-spacing: 0;
|
|
|
}
|
|
|
|
|
|
.btnCancel {
|
|
|
|
|
|
color: #666666;
|
|
|
background: #F0F0F0;
|
|
|
}
|
|
|
|
|
|
.btnSubmit {
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
background: #0DC99E;
|
|
|
}
|
|
|
|
|
|
|
|
|
.priceTitle {
|
|
|
font-family: SourceHanSansCN-Normal;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
letter-spacing: 0;
|
|
|
line-height: 28rpx;
|
|
|
margin-left: 32rpx;
|
|
|
}
|
|
|
|
|
|
.priceInfo {
|
|
|
font-family: SourceHanSansCN-Normal;
|
|
|
font-size: 30rpx;
|
|
|
color: orange;
|
|
|
margin-left: 10rpx;
|
|
|
letter-spacing: 0;
|
|
|
line-height: 28rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.icon_logo {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
margin-right: 24rpx;
|
|
|
}
|
|
|
|
|
|
.moneyBox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 20rpx 30rpx;
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
.moneyBoxLeft {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
width: 80%;
|
|
|
}
|
|
|
|
|
|
.moneyBoxRight {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.moneyItem {
|
|
|
height: 90rpx;
|
|
|
width: 31.3%;
|
|
|
font-size: 28rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
border: 1rpx solid #333333;
|
|
|
margin-right: 1%;
|
|
|
margin-left: 1%;
|
|
|
color: #333333;
|
|
|
margin-bottom: 20rpx;
|
|
|
border-radius: 8rpx;
|
|
|
box-sizing: border-box;
|
|
|
line-height: 90rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
.moneyItemOn {
|
|
|
border-color: orange;
|
|
|
color: orange;
|
|
|
}
|
|
|
</style>
|
