陈裕财
4 years ago
5 changed files with 390 additions and 70 deletions
-
5src/api/xm/core/xmTaskOrder.js
-
114src/views/xm/core/xmTask/XmTaskEdit.vue
-
283src/views/xm/core/xmTaskOrder/ToPay.vue
-
26src/views/xm/core/xmTaskOrder/XmTaskOrderEdit.vue
-
32src/views/xm/core/xmTaskOrder/XmTaskOrderMng.vue
@ -0,0 +1,283 @@ |
|||||
|
<template> |
||||
|
<section class="page-container padding"> |
||||
|
<el-row class="page-header"> |
||||
|
<div class="pay_way"> |
||||
|
<h2>支付方式</h2> |
||||
|
<div class="pay_way_items"> |
||||
|
<div class="oItem" @click="selectPayWay(item)" v-for="(item, index) in payWayOptions" :key="index"> |
||||
|
<img :src="item.icon"> |
||||
|
<span>{{item.label}}</span> |
||||
|
<i v-if="item.isChecked" class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
<el-row class="page-main"> |
||||
|
<div class="pay_allAmount"> |
||||
|
<h2>订单总额</h2> |
||||
|
<p class="allAmount">￥<b>{{editForm?editForm.finalFee:''}}</b></p> |
||||
|
<el-checkbox v-model="agreementChecked">同意</el-checkbox> <a style="font-size: 14px;color: #409EFF">《服务协议》</a> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row class="page-bottom bottom-fixed"> |
||||
|
<el-button @click.native="handleCancel">取消</el-button> |
||||
|
<el-button v-loading="load.edit" type="primary" @click.native="createOrder" :disabled="load.edit==true">提交</el-button> |
||||
|
</el-row> |
||||
|
<el-dialog |
||||
|
title="微信支付" |
||||
|
:visible.sync="weixinPayVisible" |
||||
|
:show-close="false" |
||||
|
@close="closeDialog" |
||||
|
width="350px" |
||||
|
> |
||||
|
<qriously :value="codeUrl" :size="300" /> |
||||
|
</el-dialog> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@/common/js/util';//全局公共库 |
||||
|
import config from "@/common/config"; //全局公共库import |
||||
|
import { initDicts, addXmTaskOrder,editXmTaskOrder,editSomeFieldsXmTaskOrder,calcXmTaskOrder} from '@/api/xm/core/xmTaskOrder'; |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay' |
||||
|
|
||||
|
import aliPayImg from '@/assets/image/module/alipay.png'; |
||||
|
import weixinPayImg from '@/assets/image/module/weixin.png'; |
||||
|
export default { |
||||
|
name:'xmTaskOrderEdit', |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ 'userInfo' ]), |
||||
|
|
||||
|
}, |
||||
|
props:['taskId'], |
||||
|
|
||||
|
watch: { |
||||
|
'visible':function(visible) { |
||||
|
if(visible==true){ |
||||
|
this.calcOrder(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currOpType:'add',//add/edit |
||||
|
load:{ list: false, edit: false, del: false, add: false },//查询中... |
||||
|
dicts:{},//下拉选择框的所有静态数据 params={categoryId:'all',itemCodes:['sex']} 返回结果 {sex: [{id:'1',name:'男'},{id:'2',name:'女'}]} |
||||
|
editFormRules: { |
||||
|
id: [ |
||||
|
//{ required: true, message: '订单编号不能为空', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
editForm: { |
||||
|
ouserid:'',obranchId:'',ostatus:'',ctime:'',ltime:'',payType:'',payStatus:'',payTime:'',prepayId:'',id:'',finalFee:'',othFee:'',originFee:'',payAt:'',payAuthId:'',payOpenid:'',payUserid:'',payUsername:'',discount:'',topFee:'',topStime:'',topEtime:'',hotFee:'',hotStime:'',hotEtime:'',top:'',hot:'',crmSupFee:'',urgentFee:'',urgent:'',crmSup:'',efunds:'',estate:'',etoPlatTime:'',etoDevTime:'',ebackTime:'',taskId:'',topDays:'',hotDays:'',urgentDays:'',urgentStime:'',urgentEtime:'',calcStatus:'',calcTime:'',oshare:'',shareFee:'',payId:'',tranId:'',remark:'',name:'' |
||||
|
}, |
||||
|
maxTableHeight:300, |
||||
|
codeUrl:'', |
||||
|
weixinPayVisible: false, |
||||
|
payType:'1', |
||||
|
payWayOptions: [ |
||||
|
{ |
||||
|
label: '支付宝', |
||||
|
val: '2', |
||||
|
icon: aliPayImg, |
||||
|
isChecked: true |
||||
|
}, |
||||
|
{ |
||||
|
label: '微信', |
||||
|
val: '1', |
||||
|
icon: weixinPayImg, |
||||
|
isChecked: false |
||||
|
} |
||||
|
], |
||||
|
agreementChecked:false, |
||||
|
}//end return |
||||
|
},//end data |
||||
|
methods: { |
||||
|
|
||||
|
...util, |
||||
|
|
||||
|
|
||||
|
selectPayWay(item) { |
||||
|
this.payType = item.val; |
||||
|
this.payWayOptions.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
if(item.val == element.val) { |
||||
|
element.isChecked = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 取消按钮点击 父组件监听@cancel="editFormVisible=false" 监听 |
||||
|
handleCancel:function(){ |
||||
|
this.$emit('cancel'); |
||||
|
}, |
||||
|
calcOrder(){ |
||||
|
var params={taskId:this.taskId,payType:this.payType} |
||||
|
calcXmTaskOrder(params).then(res=>{ |
||||
|
var tips = res.data.tips |
||||
|
if(tips.isOk){ |
||||
|
Object.assign(this.editForm,res.data.data) |
||||
|
}else{ |
||||
|
this.$notify.error(tips.msg); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
createOrder() { |
||||
|
var params={taskId:this.taskId,payType:this.payType} |
||||
|
addXmTaskOrder(params).then(res => { |
||||
|
if(res.data.tips.isOk){ |
||||
|
//获取订单号 |
||||
|
Object.assign(this.editForm,res.data.data) |
||||
|
let orderId = res.data.data.id; |
||||
|
if(this.payType == '2') { |
||||
|
|
||||
|
this.toAliPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
if(this.payType == '1') { |
||||
|
this.toWeixinPay(orderId); |
||||
|
return; |
||||
|
} |
||||
|
}else{ |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
this.$notify.error(err.msg); |
||||
|
}).finally(() => { |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toAliPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: `${window.location.protocol+"//"+window.location.host}/${process.env.CONTEXT}/${process.env.VERSION}/#/my/order/paySuccess` |
||||
|
} |
||||
|
aliPay(params).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
const div = document.createElement("divform"); |
||||
|
div.innerHTML = res.data.data.htmlStr; |
||||
|
document.body.appendChild(div); |
||||
|
document.forms[0].submit(); |
||||
|
}else { |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
setTimeout(() => { |
||||
|
this.load.add = false; |
||||
|
}, 2000); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
toWeixinPay(orderId) { |
||||
|
let params = { |
||||
|
id: orderId, |
||||
|
otype: 1, |
||||
|
returnUrl: "" |
||||
|
} |
||||
|
weixinPay(params).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
this.codeUrl = res.data.data.codeUrl; |
||||
|
this.weixinPayVisible = true; |
||||
|
this.timer = setInterval(() => { |
||||
|
this.queryOrderStatus(orderId) |
||||
|
}, 3000) |
||||
|
}else { |
||||
|
this.$notify.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
setTimeout(() => { |
||||
|
this.load.add = false; |
||||
|
}, 2000); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//查询订单支付状态 |
||||
|
queryOrderStatus(orderId) { |
||||
|
console.log("查询订单"); |
||||
|
checkWxPayStatus({'orderId': orderId, "otype": "1"}).then(res => { |
||||
|
if(res.data.tips.isOk) { |
||||
|
this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.data.amount, out_trade_no: orderId}}); |
||||
|
clearInterval(this.timer); |
||||
|
}else { |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
closeDialog() { |
||||
|
clearInterval(this.timer); |
||||
|
} |
||||
|
},//end method |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.calcOrder(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.pay_way { |
||||
|
margin-top: 50px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.pay_way_items { |
||||
|
display: flex; |
||||
|
.oItem { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
width: 200px; |
||||
|
height: 80px; |
||||
|
margin-right: 30px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
border-radius: 8px; |
||||
|
margin-top: 5px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
img { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
margin: 13px 18px 13px 40px; |
||||
|
} |
||||
|
.select { |
||||
|
font-size: 30px; |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
top: 5px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
margin-top: 10px !important; |
||||
|
width: 440px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pay_allAmount { |
||||
|
margin-top: 30px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.allAmount { |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
color: #FA5A55; |
||||
|
margin-bottom: 20px; |
||||
|
b { |
||||
|
font-size: 38px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue