You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

583 lines
14 KiB

4 years ago
<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;
3 years ago
if (this.order.total-this.order.paid_total==i*price) {
4 years ago
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>