end7less
/
program_lcode_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化支付界面

master
陈裕财 2 years ago
parent
ee4c31911b
commit
188993161f
4 changed files with 159 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/api/mdp/pay/pay.js
  2. 151
      src/views/mdp/mo/moOrder/Form.vue
  3. 48
      src/views/mdp/mo/moOrder/Index.vue
  4. 8
      src/views/order/createOrder.vue

6
src/api/mdp/pay/pay.js
View File

@ -2,6 +2,6 @@ import axios from '@/utils/request'
import config from '@/api/mdp_pub/mdp_config'
let base = config.getPayContext();
export const aliPay = params => { return axios.post(`${base}/alipay/uniOrder`, params) }
export const weixinPay = params => { return axios.post(`${base}/wxpay/uniOrder/native`, params) }
export const checkWxPayStatus = params => { return axios.get(`${base}/wxpay/uniOrder/checkOrderStatus`, {params}) }
export const aliPay = params => { return axios.post(`${base}/pay/alipay/uniOrder`, params) }
export const weixinPay = params => { return axios.post(`${base}/pay/wxpay/uniOrder/native`, params) }
export const checkWxPayStatus = params => { return axios.get(`${base}/pay/wxpay/uniOrder/checkOrderStatus`, {params}) }

151
src/views/mdp/mo/moOrder/Form.vue
View File

@ -6,7 +6,9 @@
<el-descriptions :column="3" :size="size" border>
<el-descriptions-item label="订单编号">{{editForm.id}}</el-descriptions-item>
<el-descriptions-item label="下单机构" :span="2">{{editForm.obranchName}}</el-descriptions-item>
<el-descriptions-item label="订单金额">￥{{editForm.ofinalFee}}元</el-descriptions-item>
<el-descriptions-item label="折前总价">￥{{editForm.moFinalFee}}元</el-descriptions-item>
<el-descriptions-item label="折扣率">{{editForm.odisRate}}%</el-descriptions-item>
<el-descriptions-item label="折后总价">￥{{editForm.ofinalFee}}元</el-descriptions-item>
<el-descriptions-item label="状态"><mdp-select item-code="mo_order_status" v-model="editForm.status" /></el-descriptions-item>
<el-descriptions-item label="操作类型"><mdp-select item-code="mo_ooper" v-model="editForm.ooper" /></el-descriptions-item>
</el-descriptions>
@ -126,27 +128,37 @@
</el-form-item>
</el-tab-pane>
<el-tab-pane label="付款信息" name="3" >
<el-form-item label="付款时间" prop="payTime" >
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.payTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="付款确认时间" prop="payCtime" >
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.payCtime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="支付方式" prop="payType">
<mdp-select item-code="tpAppPayType" v-model="editForm.payType" @change="editSomeFields(editForm,'payType',$event)"/>
</el-form-item>
<el-form-item label="付款订单号" prop="prepayId">
<el-input v-model="editForm.prepayId" placeholder="付款订单号（第三方返回）" :maxlength="50" @change="editSomeFields(editForm,'prepayId',$event)"></el-input>
</el-form-item>
<el-form-item label="其它费用" prop="othFee">
<el-input v-model="editForm.othFee" placeholder="其它费用" :maxlength="10" @change="editSomeFields(editForm,'othFee',$event)"></el-input>
</el-form-item>
<el-form-item label="应付金额" prop="ofinalFee" >
<el-input v-model="editForm.ofinalFee" placeholder="最终订单价格、最终付款金额" :maxlength="10" @change="editSomeFields(editForm,'ofinalFee',$event)"></el-input>
</el-form-item>
<el-form-item label="付款金额" prop="payAt" >
<el-input v-model="editForm.payAt" placeholder="最终付款金额-客户付款后回填" :maxlength="20" @change="editSomeFields(editForm,'payAt',$event)"></el-input>
</el-form-item>
<el-row :gutter="5">
<el-col :span="12">
<el-form-item label="支付方式" prop="payType">
<mdp-select item-code="tpAppPayType" v-model="editForm.payType"/>
</el-form-item>
<el-form-item label="应付金额" prop="ofinalFee" >
<el-input :disabled="true" v-model="editForm.ofinalFee" placeholder="最终订单价格、最终付款金额" :maxlength="10"></el-input>
</el-form-item>
<div v-if="editForm.status>2">
<el-form-item label="付款时间" prop="payTime" >
<el-date-picker :disabled="true" type="date" placeholder="选择日期" v-model="editForm.payTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="付款确认时间" prop="payCtime" >
<el-date-picker :disabled="true" type="date" placeholder="选择日期" v-model="editForm.payCtime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="付款订单号" prop="prepayId">
<el-input :disabled="true" v-model="editForm.prepayId" placeholder="付款订单号（第三方返回）" :maxlength="50" @change="editSomeFields(editForm,'prepayId',$event)"></el-input>
</el-form-item>
<el-form-item label="实际付款金额" prop="payAt" >
<el-input :disabled="true" v-model="editForm.payAt" placeholder="最终付款金额-客户付款后回填" :maxlength="20" @change="editSomeFields(editForm,'payAt',$event)"></el-input>
</el-form-item>
</div>
</el-col>
<el-col v-if="editForm.payType=='1'" :span="12">
<el-button v-if="!codeUrl" @click="createOrder">创建微信收款码</el-button>
<qriously v-else :value="codeUrl" :size="300" />
</el-col>
<el-col v-else-if="editForm.payType=='2'" :span="12">
<el-button @click="createOrder">创建支付宝收款码</el-button>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="收款信息" name="32" >
<el-form-item label="收款银行编号 " prop="pbankId" >
@ -164,9 +176,10 @@
</el-tab-pane>
<el-tab-pane label="折扣信息" name="4" >
<el-form-item label="订单折扣率" prop="odisRate">
<el-input style="width:30%;" type="number" v-model="editForm.odisRate" :min="0" :max="200" @change="editSomeFields(editForm,'odisRate',$event)"></el-input> %
</el-form-item>
<el-form-item label="最新折扣率" prop="odisRate">
<el-input style="width:30%;" type="number" v-model="odisRate" :min="0" :max="200"></el-input> %
<el-button @click="odisRateConfirm">确认修改折扣率</el-button>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="产品列表" name="5" >
<mo-order-module-index :mo-order="editForm"></mo-order-module-index>
@ -190,6 +203,9 @@ import * as MoOrderApi from '@/api/mdp/mo/moOrder';
import { mapGetters } from 'vuex'
import { MdpFormMixin } from '@/components/mdp-ui/mixin/MdpFormMixin.js';
import {createOrder} from '@/api/mdp/sys/order'
import {aliPay, weixinPay, checkWxPayStatus} from '@/api/mdp/pay/pay'
import MoOrderModuleIndex from '../moOrderModule/Index.vue';
export default {
name:'moOrderForm',
@ -217,6 +233,9 @@ export default {
editForm: {
id:'',name:'',obranchId:'',ouserid:'',ousername:'',moFinalFee:'',status:'',sstatus:'',ctime:'',payTime:'',payCtime:'',moOrginFee:'',ousers:'',ocates:'',omodules:'',poid:'',startTime:'',endTime:'',payType:'',payId:'',prepayId:'',topenId:'',pbankId:'',pbankName:'',pbankCardNo:'',pbankUsername:'',remark:'',finishTime:'',closeTime:'',setTime:'',odays:'',ofinalFee:'',odisRate:'',othFee:'',otype:'',osource:'',memType:'',atype:'',saleUserid:'',saleUsername:'',custPhone:'',custAddress:'',payAt:'',obranchName:'',ooper:'',tranId:'',invoice:'',invoiceTime:'',invoiceId:''
},
odisRate:null,
codeUrl:null,
timer:0,
//增删改查(含批量)接口
apis:{
queryById: MoOrderApi.queryMoOrderById,
@ -258,6 +277,88 @@ export default {
params[fieldName]=$event
return true;
},
odisRateConfirm(){
var params={$pks:[this.editForm.id],odisRate:this.odisRate}
this.apis.editSomeFields(params).then(res=>{
var tips = res.data.tips
if(tips.isOk){
Object.assign(this.editForm,res.data.data)
}
this.$notify({ message: tips.msg, type: tips.isOk?'success':'error' });
})
},
createOrder() {
let orderId = this.editForm.id;
if(this.editForm.payType == '2') {
this.toAliPay(orderId);
return;
}else if(this.editForm.payType == '1') {
this.toWeixinPay(orderId);
return;
}else{
this.$notify({ message: "请选则支付方式", type:'error' });
return;
}
},
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.timer = setInterval(() => {
this.queryOrderStatus(orderId,res.data.data.payId)
}, 3000)
}else {
this.$notify.error(res.data.tips.msg);
}
}).finally(() => {
setTimeout(() => {
this.load.add = false;
}, 2000);
})
},
//查询订单支付状态
queryOrderStatus(orderId,payId) {
console.log("查询订单");
checkWxPayStatus({'orderId': orderId, "otype": "1","payId":payId}).then(res => {
if(res.data.tips.isOk) {
this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.editForm.ofinalFee, out_trade_no: orderId,pay_id:payId}});
clearInterval(this.timer);
}else {
}
}).finally(() => {
})
},
},
mounted() {

48
src/views/mdp/mo/moOrder/Index.vue
View File

@ -1,8 +1,12 @@
<template>
<section class="border padding">
<el-row>
<el-input v-model="filters.id" style="width: 20%;" placeholder="订单编号查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
<el-button v-loading="load.list" :disabled="load.list==true" @click="searchTableDatas()" icon="el-icon-search" type="primary">查询</el-button>
<el-input v-model="filters.id" style="width: 20%;" placeholder="订单编号查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
<el-input v-model="filters.name" style="width: 20%;" placeholder="订单名称查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
<el-input v-model="filters.ousername" style="width: 20%;" placeholder="下单用户名称查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
<mdp-select item-code="mo_order_status" v-model="filters.status" placeholder="订单状态"/>
<el-button v-loading="load.list" :disabled="load.list==true" @click="searchTableDatas()" icon="el-icon-search" type="primary">查询</el-button>
<span style="float:right;" v-if="currOpType=='mng'">
<el-button :disabled="disabledJudge('addBtn') || !checkBtnQx('addBtn',menuDefId) " type="primary" @click="openForm({parentOpType:currOpType,subOpType:'add',formData:addForm,title:'新增'})" icon="el-icon-plus"/>
<el-button :disabled="disabledJudge('delBtn') || !checkBtnQx('delBtn',menuDefId) || this.sels.length===0 || load.del==true" type="danger" v-loading="load.del" @click="batchDel" icon="el-icon-delete"/>
@ -41,7 +45,7 @@
<mdp-input show-style="tag" v-model="scope.row.ousername" :maxlength="255" @change="editSomeFields(editForm,'ousername',$event)" :disabled="disabledJudge('ousername')"/>
</template>
</el-table-column>
<el-table-column prop="moFinalFee" label="模块合计总金额=模块中的final_fee合计" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('moFinalFee')">
<el-table-column prop="moFinalFee" label="模块合计总金额" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('moFinalFee')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.moFinalFee" :maxlength="10" :disabled="disabledJudge('moFinalFee')"/>
</template>
@ -71,9 +75,19 @@
<mdp-date type="date" placeholder="选择日期" show-style="tag" v-model="scope.row.payCtime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" :disabled="disabledJudge('payCtime')"/>
</template>
</el-table-column>
<el-table-column prop="moOrginFee" label="折扣前总价=模块中orgin_fee合计" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('moOrginFee')">
<el-table-column prop="odisRate" label="折扣率" min-width="120" show-overflow-tooltip col-type="Integer" v-if="showCol('odisRate')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.moOrginFee" :maxlength="10" :disabled="disabledJudge('moOrginFee')"/>
<mdp-number show-style="tag" v-model="scope.row.odisRate" :precision="0" :disabled="disabledJudge('odisRate')"/>
</template>
</el-table-column>
<el-table-column prop="ofinalFee" label="折后总价" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('ofinalFee')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.ofinalFee" :maxlength="10" :disabled="disabledJudge('ofinalFee')"/>
</template>
</el-table-column>
<el-table-column prop="othFee" label="其它费用" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('othFee')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.othFee" :maxlength="10" :disabled="disabledJudge('othFee')"/>
</template>
</el-table-column>
<el-table-column prop="ousers" label="购买人数" min-width="120" show-overflow-tooltip col-type="Integer" v-if="showCol('ousers')">
@ -106,7 +120,7 @@
<mdp-select item-code="tpAppPayType" show-style="tag" v-model="scope.row.payType" :maxlength="1" @change="editSomeFields(editForm,'payType',$event)" :disabled="disabledJudge('payType')"/>
</template>
</el-table-column>
<el-table-column prop="payId" label="付款流水号(内部生成，传给第三方原样传回，如果不正确，不允许更新数据库，防止作弊)" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('payId')">
<el-table-column prop="payId" label="付款流水号" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('payId')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.payId" :maxlength="50" @change="editSomeFields(editForm,'payId',$event)" :disabled="disabledJudge('payId')"/>
</template>
@ -171,21 +185,6 @@
<mdp-number show-style="tag" v-model="scope.row.odays" :precision="0" :disabled="disabledJudge('odays')"/>
</template>
</el-table-column>
<el-table-column prop="ofinalFee" label="订单总价" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('ofinalFee')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.ofinalFee" :maxlength="10" :disabled="disabledJudge('ofinalFee')"/>
</template>
</el-table-column>
<el-table-column prop="odisRate" label="折扣率" min-width="120" show-overflow-tooltip col-type="Integer" v-if="showCol('odisRate')">
<template slot-scope="scope">
<mdp-number show-style="tag" v-model="scope.row.odisRate" :precision="0" :disabled="disabledJudge('odisRate')"/>
</template>
</el-table-column>
<el-table-column prop="othFee" label="其它费用" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('othFee')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.othFee" :maxlength="10" :disabled="disabledJudge('othFee')"/>
</template>
</el-table-column>
<el-table-column prop="otype" label="订单类型" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('otype')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.otype" :maxlength="1" @change="editSomeFields(editForm,'otype',$event)" :disabled="disabledJudge('otype')"/>
@ -256,6 +255,11 @@
<mdp-input show-style="tag" v-model="scope.row.invoiceId" :maxlength="50" @change="editSomeFields(editForm,'invoiceId',$event)" :disabled="disabledJudge('invoiceId')"/>
</template>
</el-table-column>
<el-table-column prop="moOrginFee" label="原始总价" min-width="120" show-overflow-tooltip col-type="BigDecimal" v-if="showCol('moOrginFee')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.moOrginFee" :maxlength="10" :disabled="disabledJudge('moOrginFee')"/>
</template>
</el-table-column>
<el-table-column prop="poid" label="上级订单" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('poid')">
<template slot-scope="scope">
<mdp-input show-style="tag" v-model="scope.row.poid" :maxlength="50" @change="editSomeFields(editForm,'poid',$event)" :disabled="disabledJudge('poid')"/>
@ -344,7 +348,7 @@ export default {
},
defaultCheckColumnNum:8,//默认展示的表格列数，前8列
defaultCheckColumnNum:15,//默认展示的表格列数，前8列
//增删改查(含批量)接口
apis:{

8
src/views/order/createOrder.vue
View File

@ -193,7 +193,7 @@ export default {
this.codeUrl = res.data.data.codeUrl;
this.weixinPayVisible = true;
this.timer = setInterval(() => {
this.queryOrderStatus(orderId)
this.queryOrderStatus(orderId,res.data.data.payId)
}, 3000)
}else {
this.$notify.error(res.data.tips.msg);
@ -206,11 +206,11 @@ export default {
},
//查询订单支付状态
queryOrderStatus(orderId) {
queryOrderStatus(orderId,payId) {
console.log("查询订单");
checkWxPayStatus({'orderId': orderId, "otype": "1"}).then(res => {
checkWxPayStatus({'orderId': orderId, "otype": "1","payId":payId}).then(res => {
if(res.data.tips.isOk) {
this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.data.amount, out_trade_no: orderId}});
this.$router.push({path:'/my/order/paySuccess', query:{total_amount: this.data.amount, out_trade_no: orderId,payId:payId}});
clearInterval(this.timer);
}else {
}

Write Preview
Loading…
Cancel
Save