zhibo/pages_shopping/live/refundOrderDetail.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<image class="bg" src="../../static/images/order_top_bg.png" mode=""></image>
			<view class="top-inner">
				<!-- 这里是状态栏 -->
				<view class="fixed-top-box">
					<view class="status_bar" :style="{height: statusBarHeight}"></view>
					<view class="back-box" @click="back">
						<image src="../../static/images/back_white.png" mode=""></image>
						<text class="title">售后详情</text>
						<text></text>
					</view>
				</view>

				<!-- 顶部固定后站位元素 -->
				<view style="padding-bottom: 88upx;">
					<view :style="{height: statusBarHeight}"></view>
				</view>
				<!-- 订单状态 -->
				<view class="order-status">
					<!-- 处理中 -->
					<view v-if="sales.salesStatus == 0" class="inner">
						<view class="img-box">
							<image src="../../static/images/deal96.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">售后中</text>
							<text class="desc">请等待客服处理...</text>
						</view>
					</view>
					<view v-if="sales.salesStatus == 1" class="inner">
						<view class="img-box">
							<image src="../../static/images/close_trade.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">售后取消</text>
							<text class="desc">用户已取消售后</text>
						</view>
					</view>
					<view v-if="sales.salesStatus == 2" class="inner">
						<view class="img-box">
							<image src="../../static/images/close_trade.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">售后取消</text>
							<text class="desc">商家已拒绝...</text>
						</view>
					</view>
					<!-- 退款成功 -->
					<view v-if="sales.salesStatus == 3" class="inner">
						<view class="img-box">
							<image src="../../static/images/compel96.png" mode=""></image>
						</view>
						<view class="status-box">
							<text class="status">退款成功</text>
							<text class="desc">已退款，退款金额将按原支付退回</text>
						</view>
					</view>

				</view>
				<!-- 退款信息 -->
				<view class="refund-info">
					<view class="inner">
						<view class="title-box">
							<view class="left">
								<text class="title">退款金额</text>
								<view class="price-box">
									<text class="unit">¥</text>
									<text class="num"
										v-if="sales.refundAmount!=null">{{sales.refundAmount.toFixed(2)}}</text>
								</view>
							</view>
							<view class="right">
								<text class="text" v-if="sales.salesStatus==0">
									<text
										class="text success">{{utils.getDictLabelName("storeAfterSalesStatus",sales.status)}}</text>
								</text>
							</view>
						</view>

						<view class="refund-item" v-if="sales.status>=1&&sales.serviceType==1">
							<view class="text">收件人:{{sales.consignee}} </view>
							<view class="text">电话:{{sales.address}} </view>
							<view class="text">收件地址:{{sales.phoneNumber}}</view>
						</view>
						<view class="btn-box" v-if="sales.salesStatus==0">
							<view v-if="sales.status==1" class="btn cancel" @click="addDeliverySn()">填写物流</view>
							<view v-if="sales.status==0" class="btn cancel" @click="revoke()">撤销申请
							</view>
							<!-- <view  class="btn cancel" @click="showLogs()" >查看进度</view> -->
						</view>
						<view class="refund-item" v-if="sales.status==0">
							<view class="text">已提交等待平台审核 </view>
						</view>
						<view class="refund-item" v-if="sales.status==1">
							<view class="text">平台已审核,等待用户发货 </view>
						</view>
						<view class="refund-item" v-if="sales.status==2">
							<view class="text">用户已发货,等待仓库审核 </view>
						</view>
						<view class="refund-item" v-if="sales.status==3">
							<view class="text">财务审核 </view>
						</view>
						<view class="refund-item" v-if="sales.status==4">
							<view class="text">已完成 </view>
						</view>
					</view>
				</view>
				<view class="content">
					<!-- 退货信息 -->
					<view class="return-info">
						<!-- <view class="title-box">
							<text class="label">退货信息</text>
							<text class="ret-num">共2件</text>
						</view> -->
						<!-- 退货列表 -->
						<view class="goods-list">
							<view v-if="sales!=null&&sales.isPackage!=1" v-for="(item,index) in items" :key="index"
								class="item">
								<view class="img-box">
									<image :src="JSON.parse(item.jsonInfo).image" mode="aspectFill"></image>
								</view>
								<view class="info-box">
									<view>
										<view class="title ellipsis2">{{JSON.parse(item.jsonInfo).productName}}</view>
										<view class="spec">规格：{{JSON.parse(item.jsonInfo).sku}}</view>
									</view>
									<view class="price-num">
										<view class="price">
											<text class="unit">¥</text>
											<text class="num">{{JSON.parse(item.jsonInfo).price.toFixed(2)}}</text>
										</view>
										<view class="num">x{{JSON.parse(item.jsonInfo).num}}</view>
									</view>
								</view>
							</view>
							<view v-if="sales!=null&&sales.isPackage==1" class="item">
								<view class="img-box">
									<image :src="JSON.parse(sales.packageJson).imgUrl" mode="aspectFill"></image>
								</view>
								<view class="info-box">
									<view>
										<view class="title ellipsis2">
											<!-- <view class="tag">处方药</view> -->
											<view class="tag">套餐</view>{{JSON.parse(sales.packageJson).title}}
										</view>
										<view class="spec">{{JSON.parse(sales.packageJson).descs}}</view>
									</view>
								</view>
							</view>
							<!-- 详细信息 -->
							<view class="refund-det-info">
								<view class="det-item">
									<text class="label">退货原因</text>
									<text class="text">{{sales.reasons}}</text>
								</view>
								<view class="det-item">
									<text class="label">退货说明</text>
									<text class="text">{{sales.explains}}</text>
								</view>
								<view class="det-item">
									<text class="label">退款金额</text>
									<text class="text"
										v-if="sales.refundAmount!=null">¥{{sales.refundAmount.toFixed(2)}}</text>
								</view>
								<view class="det-item">
									<text class="label">订单编号</text>
									<text class="text">{{order.orderCode}}</text>
								</view>
								<view class="det-item">
									<text class="label">申请时间</text>
									<!-- {{sales.createTime}} -->
									<text class="text">{{formattedCreateTime}} </text>
								</view>

							</view>
						</view>
					</view>
				</view>
<!-- 按钮 -->
		<view class="btn-box">
			<button class="btn cancel contact-btn" open-type="contact">
				<text>售后客服</text>
			</button>
		</view>
			</view>
		</view>

	</view>
</template>

<script>

import {
		getDicts
	} from '@/api/index.js'
	import {
		getStoreAfterSalesById,
		revoke
	} from '@/api/order.js'
	export default {
		data() {
			return {
				modalTitle: "请输入快递单号",
				sales: {},
				items: [],
				order: null,
				id: null,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,

			};
		},
		onLoad(option) {
			console.log("option是", option)
			this.id = option.id
			this.getDicts()

		},
		onShow() {
			this.getStoreAfterSalesById()
		},
		computed: {
			formattedCreateTime() {
				if (!this.sales.createTime) return '';

				// 如果是时间戳格式
				if (typeof this.sales.createTime === 'number') {
					const date = new Date(this.sales.createTime);
					return this.formatDate(date);
				}

				// 如果是字符串格式，尝试解析
				const date = new Date(this.sales.createTime);
				if (!isNaN(date.getTime())) {
					return this.formatDate(date);
				}

				// 如果无法解析，返回原值
				return this.sales.createTime;
			},
		},
		methods: { 
			getDicts: function() {
				getDicts().then(
					res => {
						if (res.code == 200) {
							uni.setStorageSync('dicts', JSON.stringify(res));
						}
					},
					rej => {}
				);
			},
			
			
			// 日期格式化方法
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},

			addDeliverySn() {
				uni.navigateTo({
					url: './refundOrderDelivery?id=' + this.id
				})
			},
			revoke() {
				var data = {
					id: this.id
				};
				revoke(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '操作成功'
						});
						setTimeout(function() {
							uni.$emit('refreshAfterSales');
							uni.navigateBack({
								delta: 1
							})
						}, 500);

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});

					}
				});
			},
			getStoreAfterSalesById() {
				//联网加载数据
				getStoreAfterSalesById(this.id).then(res => {
					if (res.code == 200) {
						//设置列表数据
						this.sales = res.sales;
						this.items = res.items;
						this.order = res.order;

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});

					}
				});
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},

		}
	}
</script>

<style lang="scss">
	.fixed-top-box {
		width: 100%;
		background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.top-cont {
		width: 100%;
		height: 500upx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.top-inner {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;

			.back-box {
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;

				image {
					width: 40upx;
					height: 40upx;
				}

				.title {
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.order-status {
				margin-top: 60upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30upx;

				.inner {
					display: flex;
					align-items: center;

					.img-box {
						width: 96upx;
						height: 96upx;
						margin-right: 30upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.status-box {
						height: 96upx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.status {
							font-size: 40upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 1;
						}

						.desc {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 1;
							margin-top: 30upx;
						}

						.det-box {
							display: flex;
							align-items: center;

							image {
								width: 14upx;
								height: 24upx;
								margin-left: 12upx;
								margin-top: 30upx;
							}
						}
					}
				}
			}

			.refund-info {
				margin-top: 50upx;
				padding: 0 20upx;

				.inner {

					background: #FFFFFF;
					border-radius: 16upx;
					padding: 0 30upx 15upx 30upx;

					.title-box {
						height: 88upx;
						border-bottom: 1px solid #F0F0F0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							.title {
								font-size: 30upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
								line-height: 1;
								margin-right: 20upx;
							}

							.price-box {
								display: flex;
								align-items: flex-end;

								.unit {
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FF6633;
									line-height: 1.2;
									margin-right: 4upx;
								}

								.num {
									font-size: 32upx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #FF6633;
									line-height: 1;
								}
							}
						}

						.right {
							display: flex;
							align-items: center;

							.text {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
								margin-right: 10upx;
							}

							image {
								width: 12upx;
								height: 22upx;
							}
						}
					}

					.refund-item {
						margin-top: 40upx;

						.text {
							margin-bottom: 10upx;
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 1;
						}
					}
				}
			}
		}
	}

	.content {
		padding: 0 20upx 20upx;

		.return-info {
			margin-top: 30upx;
			background: #FFFFFF;
			border-radius: 16upx;

			.title-box {
				height: 88upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.label {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.ret-num {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.goods-list {
				padding: 0 30upx;
				background-color: #FFFFFF;
				border-radius: 16upx;

				.item {
					padding: 30upx 0;
					border-bottom: 1px solid #EDEEEF;
					display: flex;
					align-items: center;

					.img-box {
						width: 160upx;
						height: 160upx;
						margin-right: 30upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info-box {
						width: calc(100% - 190upx);
						height: 160upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 36upx;

							.tag {
								display: inline-block;
								padding: 0 6upx;
								height: 30upx;
								background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
								border-radius: 4upx;
								margin-right: 10upx;
								font-size: 22upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FFFFFF;
								line-height: 30upx;
								float: left;
								margin-top: 7upx;
							}
						}

						.spec {
							margin-top: 18upx;
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
						}

						.price-num {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								display: flex;
								align-items: flex-end;

								.unit {
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1.2;
									margin-right: 4upx;
								}

								.num {
									font-size: 32upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1;
								}
							}

							.num {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
							}
						}
					}
				}

				.refund-det-info {
					padding-bottom: 30upx;

					.det-item {
						margin-top: 40upx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.label {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 1;
						}

						.text {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							line-height: 1;
						}
					}
				}
			}
		}

	}

	.btn-box {
		z-index: 999;
		bottom: 0;
		width: 100%;
		position: fixed;
		height: 120upx;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.btn {
			width: 155upx;
			height: 64upx;
			line-height: 64upx;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			border-radius: 32upx;
			margin-left: 15upx;

			&.cancel {
				border: 1px solid #DDDDDD;
				color: #666666;
			}

			&.pay {
				background: #2BC7B9;
				color: #FFFFFF;
			}

				&.contact-btn{
				background: transparent;
				border: 1px solid #DDDDDD;
				color: #666666;
				padding: 0;
				margin: 0 15upx 0 0;
				text-align: center;
				line-height: 64upx;
			}
			&.contact-btn::after{
				display: none;
			}
		}
	}
</style>