<template>
<div class="templatePayURL" style="display: inline-block; float: right; margin-right: 10px;">
<el-popover width="320" trigger="manual" v-model="visible">
<div>
<p style="margin:0 0 15px 0;">二维码收款
<i class="el-icon-circle-close-outline fr" style="cursor: pointer; margin: 3px 0 0 0;" @click="closePic()"></i>
</p>
<div style="margin: 15px 0;" v-show="!isShowPic">
<el-input placeholder="请输入金额" v-model="payMoney"
@input="payMoney=/^\d+\.?\d{0,2}$/.test(payMoney)||payMoney == '' ? payMoney : payMoney=''">
<el-select class='fz12 w120' v-model="payType" slot="prepend" placeholder="请选择费用类型" filterable :readonly="false">
<el-option v-for='item in fylxList' :label="item.Name" :value="item.ID" :key='item.ID'>
</el-option>
</el-select>
</el-input>
<p style="margin: 15px 0; text-indent:5px;">
<el-radio v-model="payWay" label="3">支付宝</el-radio>
<el-radio v-model="payWay" label="1">微信</el-radio>
</p>
<p>
<input type="button" @click="getPayPic(item)" class="normalBtn w280" value="生成收款码" />
</p>
</div>
<div v-show="isShowPic">
<img :src="payPic" style="float: left; margin-right: 15px; width: 150px; height: 150px; border: 1px solid #ccc;" />
<p style="padding-right: 10px; font-size: 12px; line-height: 20px; margin-bottom: 10px;">
<span style="color: #E95252;">{{payWay=="1"?'微信':'支付宝'}}</span>二维码有效时间为5分钟，为了不影响客户支付，请及时转发，以免失效
</p>
<p class="fz12 color333">倒计时</p>
<p style="color: #E95252; font-weight: bold; font-size: 12px; margin: 8px 0;" >{{descMin}}分{{descSecond}}秒</p>
</div>
</div>
<el-select slot="reference" v-model="value" class='w80' placeholder="收款方式" @change='chanceType(item)'>
<!-- <el-option label="二维码" value="1"></el-option> -->
<el-option label="团队收款" value="2"></el-option>
<el-option v-if='item.orderState===1' label="团队退款" value="3"></el-option>
<el-option label="团队小费" value="4"></el-option>
<el-option v-if="photoF" label="照片服务费" value="5"></el-option>
<el-option label="月结平台费" value="6"></el-option>
</el-select>
</el-popover>
</div>
</template>
<script>
export default {
props: ["item","showID","photoF"],
data() {
return {
value:'',
visible:false,
payObj: {},
payWay: '3',
minpay: '0',
payMoney: '0',
payType: '',
lastTime: '',
isShowPic: false,
payPic: '',
isDesc: false,
descMin: 0,
descSecond: 0,
descHour:0,
fylxList: [],
isShowId:-1,
checkValue: '',
begin:0,
nowDate:new Date(),
timer:null,
chaTime:0
};
},
watch:{
showID:{
handler: function(val, oldVal) {
this.isShowId = val;
if(val!=this.item.orderId){
this.visible = false;
this.value = '';
if(this.timer)
{
clearInterval(this.timer)
}
}
},
deep: true
}
},
mounted() {
this.getFylx()
},
methods: {
closePic(){
this.visible=false
this.value=''
if(this.timer)
{
clearInterval(this.timer)
}
},
chanceType(obj){
let TCIDARR=[]
TCIDARR.push(obj.tcid)
if(this.value==='1')
{
this.visible=true
this.getPayDetail(obj,2)
this.$emit("childByValue",obj.orderId)
}else if (this.value ==='2'){
this.visible=false
let orderObj = {
OrderID:obj.orderId,
OrderSource:8,
Obj: {},
SourceID:obj.ID,
TCIDList: TCIDARR
}
this.$router.push({
name: 'ChoiceAddFinancialDocuments',
query:{
"Type":1,
"companyID":obj.outBranchId,
"path": "",
'blank':'y',
'orderObj':JSON.stringify(orderObj),
'tradeWay':obj.tradeWay,
'platformAccount':obj.platformAccount
}
});
} else if (this.value === '3') {
if(this.item.oP_Remarks && this.item.oP_Remarks!=""){
this.visible=false
let orderObj = {
OrderID:obj.orderId,//订单号
OrderSource:8,//12
Obj: {},
SourceID:obj.ID,//机票id
TCIDList: TCIDARR
}
this.$router.push({
name: 'ChoiceAddFinancialDocuments',
query:{
"Type":2,
"companyID":obj.outBranchId,//公司id
"path": "",
'blank':'y',
'orderObj':JSON.stringify(orderObj),
'searchTitle':'溢收团费退款'
}
});
}else{
this.Error("请让OP先填写OP备注，说明退款情况");
}
}else if (this.value === '4') {
this.visible=false
let orderObj = {
OrderID:obj.orderId,
OrderSource:8,
CallType:1,
Obj: {},
SourceID:obj.ID,
TCIDList: TCIDARR
}
this.$router.push({
name: 'ChoiceAddFinancialDocuments',
query:{
"Type":1,
"companyID": obj.outBranchId,
"path": "",
'blank':'y',
'orderObj':JSON.stringify(orderObj)
}
});
}else if (this.value === '5') {
this.visible=false
let orderObj = {
OrderID:obj.orderId,
OrderSource: 8,
CallType: 2,
Obj: {},
TCIDList: []
}
this.$router.push({
name: 'ChoiceAddFinancialDocuments',
query:{
"Type": 1,
"companyID": 49,
"templateID": JSON.stringify([79]),
"path": "",
'blank':'y',
'orderObj':JSON.stringify(orderObj)
}
});
} else if (this.value === '6') {
this.visible=false
let orderObj = {
OrderID:obj.orderId,//订单号
OrderSource:8,//12
Obj: {},
SourceID:obj.ID,//机票id
TCIDList: TCIDARR
}
this.$router.push({
name: 'ChoiceAddFinancialDocuments',
query:{
"Type":2,
"companyID":obj.outBranchId,//公司id
"path": "",
'blank':'y',
'orderObj':JSON.stringify(orderObj),
'searchTitle': '团队成本月结'
}
});
}
this.value = ''
},
getPayDetail(obj, Type) {
let nowTime = new Date()
let ExpireDate = ''
this.apipost('OnlinePay_post_GetURL', {
OrderID: obj.orderId,
OrderSource: 8
}, res => {
if(res.data.resultCode == 1) {
if(Object.keys(res.data.data).length == 0) {
if(Type == 2) {
this.getCodeUrl(obj)
} else {
this.$message.warning('未生成二维码')
}
} else {
this.lastTime = new Date(res.data.data.ExpireDate)
this.nowDate=new Date(res.data.data.NowDate)
this.chaTime=this.lastTime-this.nowDate
ExpireDate = new Date(res.data.data.ExpireDate)
this.timer=setInterval(() => {
this.descTime(this.chaTime)
}, 1000);
this.payPic=res.data.data.CodeURL
this.isShowPic = true
}
} else {
}
}, err => {})
// if(nowTime>=ExpireDate){
// this.$message.warning('二维码过期,请从新生成')
// this.isShowPic=false
// this.getCodeUrl(obj)
// }else{
// this.isShowPic=false
// }
},
getCodeUrl(obj) {
this.apipost('Financial_post_GetLowPrice', {
OrderID: obj.orderId,
OrderResource: 8
}, res => {
if(res.data.resultCode == 1) {
if(res.data.data.LowDeposit != -1) {
this.minpay = res.data.data.LowDeposit
this.payMoney = res.data.data.LowDeposit>this.item.preferPrice?this.item.preferPrice:res.data.data.LowDeposit
}
}
}, err => {})
},
getPayPic(obj) {
let msg = {}
msg.OrderSource = 8
msg.body = obj.description
msg.attach = this.payType + '|' +obj.contactName+'|'+ obj.orderId+'|'+obj.customerId+'|'+obj.outBranchId
msg.total_fee = this.payMoney
msg.payway = this.payWay
if(this.payType==''){
this.$message.warning('请选择费用类型！')
return
}
this.apipost('OnlinePay_post_GetCodeUrl', msg, res => {
if(res.data.resultCode == 1) {
this.payPic = res.data.data.CodeURL
this.lastTime = new Date(res.data.data.ExpireDate)
this.nowDate=new Date(res.data.data.NowDate)
this.chaTime=this.lastTime-this.nowDate
this.begin=this.nowDate.getSeconds()
this.timer=setInterval(() => {
this.descTime(this.chaTime)
}, 1000);
this.isShowPic = true
} else {
this.$message.error(res.data.message)
}
}, err => {})
},
// descTime(dateString) {
// this.begin+=1
// this.nowDate=new Date(this.nowDate.setSeconds(this.begin))
// // 目标日期时间戳
// const end = Date.parse(new Date(dateString))
// // 当前时间戳
// const now = Date.parse(new Date(this.nowDate))
// // 相差的毫秒数
// const msec = end - now
// // 计算时分秒数
// let day = parseInt(msec / 1000 / 60 / 60 / 24)
// let hr = parseInt(msec / 1000 / 60 / 60 % 24)
// let min = parseInt(msec / 1000 / 60 % 60)
// let sec = parseInt(msec / 1000 % 60)
// // 个位数前补零
// hr = hr > 9 ? hr : '0' + hr
// min = min > 9 ? min : '0' + min
// sec = sec > 9 ? sec : '0' + sec
// // 控制台打印
// if(end-now>0){
// this.descMin = min
// this.descSecond = sec
// }else{
// this.isShowPic=false
// this.descMin = 0
// this.descSecond = 0
// }
//
// // 一秒后递归
// },
descTime() {
let day = parseInt(this.chaTime / 1000 / 60 / 60 / 24)
let hr = parseInt(this.chaTime / 1000 / 60 / 60 % 24)
let min = parseInt(this.chaTime / 1000 / 60 % 60)
let sec = parseInt(this.chaTime / 1000 % 60)
// 个位数前补零
hr = hr > 9 ? hr : '0' + hr
min = min > 9 ? min : '0' + min
sec = sec > 9 ? sec : '0' + sec
// 控制台打印
if(this.chaTime>0){
if(hr>0){
this.descHour = hr;
}
this.descMin = min+this.descHour*60;
this.descSecond = sec;
}else{
this.isShowPic=false
this.descMin = 0
this.descSecond = 0
this.descHour = 0
clearInterval(this.timer)
}
this.chaTime-=1000
// 一秒后递归
},
getFylx() {
this.apipost('Financial_post_GetByOrderCostTypeList', {Type:1}, res => {
if(res.data.resultCode == 1) {
this.fylxList = res.data.data
} else {
}
}, err => {})
},
},
};
</script>
<style>
.templatePayURL .el-input--suffix .el-input__inner{padding: 0 10px 0 8px!important; font-size: 12px;}
.templatePayURL .el-input__suffix{right: 0!important;}
</style>