<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-30 15:34:12
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-11-21 16:19:14
|
* @Description:
|
-->
|
<template>
|
<!-- 商户收款：订单详情页面 -->
|
<div class="orderdetails h-100-g">
|
<x-header title="订单详情" :left-options="{backText:''}">
|
<div v-if="isShowListBtn" slot="right" class="slot-right" @click="$router.push('/facepay/list')">明细</div>
|
</x-header>
|
|
<div class="status" v-if="isShowStatus">
|
<div v-if="isSuccess">
|
<icon type="success" is-msg></icon>
|
<p class="info">交易成功</p>
|
<h3 class="price">￥{{orderInfo.payAmt}}</h3>
|
</div>
|
<div v-else>
|
<icon type="warn" is-msg></icon>
|
<p class="info">订单超时</p>
|
</div>
|
</div>
|
|
<group>
|
<div class="title">
|
<span class="line"></span>
|
订单详情
|
</div>
|
<x-input title="消费金额" readonly :value="(orderInfo.payAmt || '0')+'元'" text-align="right"></x-input>
|
<x-input title="消费时间" readonly :value="$tool.date(orderInfo.creTime, 'YYYY-MM-DD HH:mm:ss')"
|
text-align="right"></x-input>
|
<x-input title="订单号" readonly :value="orderInfo.orderId" text-align="right"></x-input>
|
<x-input title="订单状态" readonly :value="status" text-align="right"></x-input>
|
<x-input title="收银员" readonly :value="orderInfo.mgrName" text-align="right"></x-input>
|
<!-- <cell style="padding: 0.2rem 0.3rem;" v-if="status === '交易成功'">
|
<button class="btn-submit" @click="isShow = true;">退款</button>
|
</cell> -->
|
<cell style="padding: 0.2rem 0.3rem;" v-if="status === '待支付'">
|
<button class="btn-submit"
|
@click="$router.replace(`/facepay/code?url=${orderInfo.payCode}&id=${orderInfo.orderId}`)">展示二维码</button>
|
</cell>
|
</group>
|
|
<div >
|
<f-confirm v-model="isShow" @on-confirm="refund">
|
<p>是否确认退款</p>
|
</f-confirm>
|
<f-confirm v-model="isShow_success" :show-cancel-button="false">
|
<p>退款成功</p>
|
</f-confirm>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {Confirm,Icon, Cell } from 'vux';
|
export default {
|
name: 'facepay_details',
|
components: {
|
Confirm,
|
Icon,
|
Cell
|
},
|
data() {
|
return {
|
isShow: false,
|
isShow_success: false,
|
isSuccess: false,
|
isShowStatus: false,
|
isShowListBtn: false,
|
orderInfo: {}
|
}
|
},
|
computed: {
|
status() {
|
let v = this.orderInfo.status;
|
switch (v) {
|
case 0:
|
return '待支付';
|
case 1:
|
return '交易成功';
|
case 2:
|
return '订单超时';
|
case 3:
|
return '退款成功';
|
}
|
}
|
},
|
created() {
|
let query = this.$route.query,
|
orderStatus = query.orderStatus,
|
page = query.page;
|
if (orderStatus == '1') {
|
this.isSuccess = true;
|
}
|
if (page == 'facepay_code') {
|
this.isShowStatus = true;
|
this.isShowListBtn = true;
|
}
|
this.init();
|
},
|
methods: {
|
init() {
|
this.$api.facepay_orderDetails(this.$route.query.orderId).then(res => {
|
this.orderInfo = res.body;
|
})
|
},
|
// 退款
|
refund() {
|
this.isShow = false;
|
this.$api.facepay_refund(this.orderInfo.orderId).then(() => {
|
this.$router.replace('/facepay/details?orderId=' + this.orderInfo.orderId)
|
location.reload()
|
})
|
}
|
}
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
.orderdetails{
|
padding-top: 54px;
|
background-color: #f1f1f1;
|
}
|
|
.title {
|
padding: 14px 12px;
|
font-size: 15px;
|
color: #333;
|
|
.line {
|
display: inline-block;
|
width: 2px;
|
height: 16px;
|
margin-right: 8px;
|
background: @color-text-three;
|
vertical-align: middle;
|
margin-top: -1px;
|
}
|
}
|
|
.status {
|
text-align: center;
|
padding: 15px 0;
|
|
.info {
|
margin-top: 10px;
|
}
|
|
.price {
|
font-size: 26px;
|
color: #bb8b52;
|
}
|
}
|
|
.btn-submit {
|
height: 26px;
|
line-height: 26px;
|
background-color: #fff;
|
padding: 0 15px;
|
outline: none;
|
border: none;
|
color: #e59a99;
|
border: 1px solid #e59a99;
|
}
|
|
</style>
|
