JiangxiMiniProgram/pages/mineEntry/myOrder/detail/detail.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="订单详情"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="consultItem">
					<view class="top_row">
						<view class="flex">
							<view class="tag" :class="{yellow: (info.orderType==1||info.feeType==1)}">
								{{orderTypeTxt[info.orderType||info.feeType]}}</view>
							<view class="schoolName">{{ $u.utils.truncateText(info.schoolName, 12) }}</view>
						</view>
						<view class="status">
							<view class="text">{{orderStatusTxt[info.orderStatus]}}</view>
							<!-- <view class="icon">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view> -->
						</view>
					</view>
					<view class="target">
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_chexing.png" mode=""></image>
								</view>
								<view class="lab">学驾车型</view>
							</view>
							<view class="name">{{info.trainType}}</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_banxing.png" mode=""></image>
								</view>
								<view class="lab">所选班型</view>
							</view>
							<view class="name">{{info.className}}</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_jiaxiao.png" mode=""></image>
								</view>
								<view class="lab">驾校类型</view>
							</view>
							<view class="name">{{ info.appSchoolType }}</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_xingshi.png" mode=""></image>
								</view>
								<view class="lab">支付形式</view>
							</view>
							<view class="name">{{info.appPayForm}}</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_fangshi.png" mode=""></image>
								</view>
								<view class="lab">支付方式</view>
							</view>
							<view class="name">{{info.appPayType}}</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_shijian.png" mode=""></image>
								</view>
								<view class="lab">支付时间</view>
							</view>
							<view class="name">{{ $u.timeFormat(info.payTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
						</view>
					</view>
					<view class="border_bottom">
						<view class="rows">
							<view class="label">培训费总价</view>
							<view class="value">￥{{$u.utils.priceTo(info.totalAmount)}}</view>
						</view>
						<!-- <view class="rows">
							<view class="label hui">学驾培训费</view>
							<view class="value hui">￥{{$u.utils.priceTo(info.totalAmount)}}</view>
						</view> -->
					</view>
					<view class="border_bottom">
						<view class="rows">
							<view class="label hui">实际支付</view>
							<view class="value hui">￥{{$u.utils.priceTo(info.payActual)}}</view>
						</view>
						<view class="rows" v-if="info.payMent">
							<view class="label hui">已支付定金</view>
							<view class="value blue">￥{{$u.utils.priceTo(info.payMent)}}</view>
						</view>
						<view class="rows" v-if="info.payTail">
							<view class="label hui">待支付尾款</view>
							<view class="value blue">￥{{$u.utils.priceTo(info.payTail)}}</view>
						</view>
						<view class="btn_row">
							<view class="" style="min-width: 120rpx;">
								<view class="refundBtn" @click="goFund" v-if="!info.refundId">申请退款</view>
							</view>
							<view class="rightBtn">
								<view class="btnBorder">下载发票</view>
								<view class="btnBorder">培训缴费电子凭证</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<refundInfo :info="refundData" v-if="refundData.id" />
		</view>
	</view>
</template>

<script>
	import refundInfo from './comp/refundInfo.vue'
	import {
		applyOrderGet,
		selectRefundDetail
	} from '@/config/api.js'
	export default {
		components: {
			refundInfo
		},
		data() {
			return {
				value: '',
				orderId: '',
				info: {},
				refundData: {},
				orderTypeTxt: ['', '学费', '理科费', '考场模拟', '额外学时购买'], //1：驾校培训费用，2：理科培训费用，3：考场适应性费用，4：额外学时购买
				orderStatusTxt: ['待支付', '已支付', '已取消', '支付失败'], //0：待支付，1：已支付，-1：已取消，2：支付失败
			}
		},
		onLoad(options) {


			// setTimeout(obj.say, 500)
			if (options.orderId) {
				this.orderId = options.orderId
				this.applyOrderGetFn()
			}

		},
		onPullDownRefresh() {
			this.applyOrderGetFn()

		},
		methods: {

			debounce(func, wait) {
				this.timeout;
				let context = this; // this
				// let args = arguments; // event
				if(this.timeout) clearTimeout(this.timeout)
				console.log(111)
				this.timeout = setTimeout(function() {
					func()
				}, wait);
			},


			inputFn(val) {
				console.log('1111111111')
			},
			async applyOrderGetFn() {
				const {
					data: res
				} = await applyOrderGet({
					orderId: this.orderId
				})
				this.info = res
				uni.stopPullDownRefresh()
				if (res.refundId) {
					this.selectRefundDetailFn()
				}
			},
			async selectRefundDetailFn() {
				const {
					data: res
				} = await selectRefundDetail({
					id: this.info.refundId
				})
				// console.log(res)
				this.refundData = res
				uni.stopPullDownRefresh()
			},

			goFund() {
				this.$goPage('/pages/mineEntry/refund/refund?orderId=' + this.orderId)
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '../comp/comp.scss';
	.btn_row {
		display: flex;
		justify-content: space-between;
		.rightBtn {
			display: flex;
			justify-content: flex-end;
			.btnBorder {
				margin-left: 14rpx;
				padding: 0 16rpx;
				font-size: 24rpx;
			}
		}
	}
	.feeIcon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 12rpx;
	}

	.card {
		padding: 20rpx;
	}

	.pad {
		padding-bottom: 60rpx;
	}

	.refundBtn {
		width: 200rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #E8E9EC;
		line-height: 72rpx;
		margin: 24rpx 0 0 0;
		font-size: 28rpx;
		color: #ADADAD;
		text-align: center;
	}
</style>