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.
 
 
 
 
xuan-pay-cweb/pages/index/order-list-details/order-list-details.vue

221 lines
6.6 KiB

<template>
<view>
<view class="mart5 width100 backcorfff">
<view class="notes">
<view class="fcor666 width25">商户名称</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.merName}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">门店名称</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.storeName}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">交易模式</view>
<view class="font14 fcor333 text2 width75 fotrt" v-if="orderByOutTradeOrder.payMode == 'ALIPAY' ">支付宝</view>
<view class="font14 fcor333 text2 width75 fotrt" v-if="orderByOutTradeOrder.payMode == 'WECHAT' ">微信</view>
</view>
<view class="notes">
<view class="fcor666 width25">支付时间</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.payTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">商户交易单号</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.outTradeNo}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">账户端交易单号</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.accTradeNo}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">交易状态</view>
<view class="font14 fcor333 text2 width75 fotrt">{{statusList[orderByOutTradeOrder.status]}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">交易金额</view>
<view class="font14 fcor333 text2 width75 fotrt">¥ {{orderByOutTradeOrder.tradeAmount}}</view>
</view>
<view class="notes" v-if="orderByOutTradeOrder.storeDiscountPrice">
<view class="fcor666 width25">门店优惠</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.storeDiscountPrice}}</view>
</view>
<view class="notes" v-if="orderByOutTradeOrder.userPhone">
<view class="fcor666 width25">客户手机号</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.userPhone}}</view>
</view>
<view class="notes" v-if="orderByOutTradeOrder.userDiscountPrice">
<view class="fcor666 width25">客户优惠券优惠</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.userDiscountPrice}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">交易实际金额</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.tradeActualAmount}}</view>
</view>
<view class="notes" v-if="orderByOutTradeOrder.feeRate">
<view class="fcor666 width25">交易费率</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.feeRate}}</view>
</view>
<view class="notes">
<view class="fcor666 width25">交易创建方式</view>
<view class="font14 fcor333 text2 width75 fotrt">扫一扫</view>
</view>
<view class="notes" v-if="orderByOutTradeOrder.platformMerNo">
<view class="fcor666 width25">平台商户号</view>
<view class="font14 fcor333 text2 width75 fotrt">{{orderByOutTradeOrder.platformMerNo}}</view>
</view>
<!-- 退款按钮 -->
<template v-if="orderByOutTradeOrder&&orderByOutTradeOrder.status==3&&userInfo.secUser.objectType == 4">
<view class="width100 height45"></view>
<view class=" btn-fix backcorfff">
<button class="btn " @click.stop="toRefund">退款</button>
</view>
</template>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog mode="input" title="输入退款金额" :before-close="true" :value="refundAmount"
placeholder="请输入退款金额" @confirm="dialogInputConfirm" @close="close"></uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script>
import {
getOrderByOutTradeOrder,
refund
} from '../../../Utils/Api.js';
let app = getApp();
export default {
data() {
return {
userInfo: app.globalData.userInfo, //登录信息
statusList: {
1: "待支付",
2: "支付中",
3: "支付成功",
4: "支付失败",
5: "已取消",
6: "已退款"
},
orderid: '', //交易流水号,
orderByOutTradeOrder: '' ,//详情
refundAmount:'',//退款金额
}
},
onLoad(options) {
this.orderid = options.orderid;
this.getOrderByOutTradeOrder();
},
methods: {
//查询详情
getOrderByOutTradeOrder() {
uni.showLoading({
title: '加载中...'
})
let datas = {
outTradeOrder: this.orderid
}
getOrderByOutTradeOrder(datas).then(res => {
if (res.return_code == '000000') {
this.orderByOutTradeOrder = res.return_data.order;
}
uni.hideLoading();
})
},
/* 点击退款 */
toRefund(){
this.refundAmount = this.orderByOutTradeOrder.tradeAmount;
this.$refs.inputDialog.open()
},
close(){
this.$refs.inputDialog.close();
},
dialogInputConfirm(e) {
let reg = /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/;
if (!reg.test(e)) {
uni.showToast({
title: '请输入大于0的数字哦!',
icon: 'none',
duration: 2000
})
return
}
if(e>this.orderByOutTradeOrder.tradeAmount){
uni.showToast({
title: '退款金额大于支付金额',
icon: 'none',
duration: 2000
})
return
}
this.refundAmount = e;
this.refund();
},
refund(){
uni.showLoading({
title:'退款中...',
mask:true
})
let params={
"outTradeNo":this.orderid,
"refundAmount":this.refundAmount
}
refund(params).then(res=>{
uni.hideLoading()
this.$refs.inputDialog.close();
if (res.return_code == '000000') {
this.getOrderByOutTradeOrder();
uni.showToast({
title: '退款成功',
icon: 'none',
duration: 2000
})
} else {
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
})
}
})
},
}
}
</script>
<style lang="scss">
page {
background-color: #f6f6f6;
}
.notes {
width: calc(100% - 40rpx);
display: flex;
align-items: center;
padding: 30rpx 0 30rpx 20rpx;
border-bottom: 1px solid #f6f6f6;
}
.btn-fix{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px 0;
.btn{
width: 70%;
color: white;
background-color: #089bf5;
border-radius: 6px;
height: 45px;
line-height: 45px;
}
}
</style>