customerapp-H5/pages/return/returnDetail.vue

<template>
	<view>
		<view class="topt flexC" :class="item.apply_status == 5 ? 'toptbanner_success' : 'toptbanner_audit'">
			<image :src="item.apply_status == 5 ? topImg[1] : topImg[0]" class="topt_img"></image>
			<view class="topt_text flexM">
				<text>{{ item.apply_status == 5 ? '退货成功' : '退货审核中...' }}</text>
				<text>{{ item.apply_status == 5 ? '' : '正在审核请耐心等待' }}</text>
			</view>
		</view>
		<view class="box">
			<view class="box_yingtui flexB">
				<text>应退金额</text>
				<view class="right">
					<text>￥</text>
					<text>{{ item.return_price }}</text>
				</view>
				
			</view>
			<view class="box_title">
				退货商品
			</view>
			<view class="boxList">
				<view>
					<view v-for="(v, ind) in item.applydetail" :key="ind" class="flexV" style="padding-top: 24rpx">
						<image :src="v.goods_img" mode="" class="boxList_goodImage"></image>
						<view>
							<view class="goodName">大卫博士健康内裤（{{ v.good_name + v.good_size }}）</view>
							<view class="goodNumD flexB">
								<view class="goodNumD_left">{{ `${v.total + (v.unit ? v.unit : '条' )}` }}</view>
								<view class="goodNumD_right">
									<text>￥{{ v.return_price }}</text>
								</view>
							</view>
						</view>
					</view>
				<!-- 	<view class="boxList_style flexB">
						<text>女款</text>
						<text>M</text>
						<text>X1</text>
						<text>￥179</text>
					</view>
					<view class="boxList_style flexB">
						<text>女款</text>
						<text>M</text>
						<text>X1</text>
						<text>￥179</text>
					</view> -->
				</view>
				<view class="boxList_bottom">
					<view class="bottom1">
						共
						<text v-show="item.count">{{ item.count }}套</text>
						<text v-show="item.total">{{ item.total }}条</text>
						，
					</view>
					<text class="bottom2">合计；</text>
					<text class="bottom3">￥</text>
					<text class="bottom4">{{ item.return_price }}</text>
				</view>
			</view>
		</view>
		<view class="detail">
<!-- 			<view class="detail_item flexB">
				<text class="text1">
					订单编号：<text>DD446123456515454464</text>
				</text>
				<text class="copy">
					复制
				</text>
			</view> -->
			<view class="detail_item flexB">
				<text class="text1">
					退货单号：<text>{{ item.apply_number }}</text>
				</text>
				<text class="copy" @click="copy(item.apply_number)">
					复制
				</text>
			</view>
			<view class="detail_item">
				<text class="text1">
					退货状态：
				</text>
				<text class="text2">
					{{ item.apply_status == 5 ? '退货成功' : '退货审核中' }}
				</text>
			</view>
			<view class="detail_item">
				<text class="text1">
					申请时间：
				</text>
				<text>
					{{ newDate(item.created_at) }}
				</text>
			</view>
			<!-- <view class="detail_item">
				<text class="text1">
					退货原因：
				</text>
				<text class="text2">
					不愿意穿了
				</text>
			</view>
			<view class="detail_item" style="display: flex;">
				<view class="text1" style="width: 162rpx;">
					补充说明：
				</view>
				<view class="remark">
					<text>店长态度恶劣，想退货不想买他东西。</text>
					<image src="../../static/CustomerReturnPay/wall-min.png"></image>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				topImg: [
					require('../../static/return/audit1.png'),
					require('../../static/return/succe1.png'),
					// require('../../static/return/error1.png')
				],
				tid: 0
			}
		},
		onLoad(opt) {
			this.item = JSON.parse(decodeURIComponent(opt.item))
		},
		methods: {
			newDate(time) {
			    var date = new Date(time)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    var h = date.getHours()
			    h = h < 10 ? '0' + h : h
			    var minute = date.getMinutes()
			    minute = minute < 10 ? '0' + minute : minute
			    var s = date.getSeconds()
			    s = s < 10 ? '0' + s : s
			    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
			},
			/*复制单号*/
			copy(order_num) {
				try {
					uni.setClipboardData({
						data: order_num,
						success: () => {
							uni.showToast({
								title: '复制成功'
							})
						}
					})
				} catch (e) {
					uni.showModal({
						content: '您的手机暂不支持复制',
						showCancel: false
					})
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.toptbanner_audit {
		background: linear-gradient(270deg, #FCBC05 0%, #FFA600 100%);
	}
	.toptbanner_success {
		background: linear-gradient(270deg, #85CE52 35%, #5FBC23 100%);
	}
	.toptbanner_error {
		background: linear-gradient(270deg, #FE4815 35%, #F30000 100%);
	}
	.topt {
		padding: 32rpx 0 92rpx 0;
		&_img {
			width: 150rpx;
			height: 114rpx;
			margin-right: 22rpx;
		}
		&_text {
			text:nth-child(1) {
				font-size: 38rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			text:nth-child(2) {
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 6rpx
			}
		}
	}
	.box {
		margin-top: -48rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 24rpx;
		&_yingtui {
			padding-bottom: 30rpx;
			margin-bottom: 24rpx;
			border-bottom: 2rpx dashed #EEEEEE;
			text {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.right {
				text:nth-child(1) {
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
					font-weight: 400;
					color: #FB231F;
				}
				text:nth-child(2) {
					font-size: 44rpx;
					font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
					font-weight: 500;
					color: #FB231F;
				}
			}
		}
		&_title {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.boxList {
			.number {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				border-bottom: 2rpx solid #E9E9E9;
				padding-bottom: 24rpx;
			}
			.goodName {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.goodNumD {
				margin-top: 24rpx;
				width: 482rpx;
				// &_left {
				// 	text:nth-child(2) {
				// 		font-size: 28rpx;
				// 		font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
				// 		font-weight: 400;
				// 		color: #FB231F;
				// 	}
				// 	text:nth-child(3) {
				// 		font-size: 44rpx;
				// 		font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
				// 		font-weight: 500;
				// 		color: #FB231F;
				// 	}
				// 	text:nth-child(5) {
				// 		text-decoration: line-through;
				// 	}
				// 	text:nth-child(4), text:nth-child(5), text:nth-child(6) {
				// 		font-size: 28rpx;
				// 		font-family: PingFang SC-Regular, PingFang SC;
				// 		font-weight: 400;
				// 		color: #AAAAAA;
				// 	}
				// }
				// &_right {
				// 	font-size: 32rpx;
				// 	font-family: PingFang SC-Bold, PingFang SC;
				// 	font-weight: bold;
				// 	color: #333333;
				// }
				&_left {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding: 4rpx 12rpx;
					background: #F5F5F5;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				&_right {
					// text:nth-child(1) {
					// 	font-size: 28rpx;
					// 	font-family: PingFang SC-Regular, PingFang SC;
					// 	font-weight: 400;
					// 	color: #999999;
					// 	margin-right: 48rpx;
					// }
					text {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}
			}
			&_goodImage {
				width: 200rpx;
				height: 160rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 20rpx;
			}
			&_style {
				padding: 14rpx 24rpx;
				background: #F9F9FB;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-top: 24rpx;
			}
			&_bottom {
				text-align: end;
				margin-top: 42rpx;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #E9E9E9;
				text {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
				}
				.bottom1 {
					color: #999999;
				}
				.bottom2 {
					color: #333333;
				}
				.bottom3 {
					color: #FB231F;
					font-weight: 400 !important;
				}
				.bottom4 {
					font-size: 44rpx !important;
					font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC !important;
					color: #FB231F !important;
				}
			}
		}
	}
	.detail {
		padding: 0 24rpx 24rpx 24rpx;
		view, text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			color: #333333;
		}
		.remark {
			width: 544rpx;
			text {
				display: inline-block;
			}
			image {
				width: 150rpx;
				height: 212rpx;
				margin: 24rpx 24rpx 0 0;
			}
		}
		&_item {
			margin-bottom: 24rpx;
			.text1 {
				font-weight: bold;
				text {
					font-weight: 400;
				}
			}
			.text2 {
				color: #FB231F;
			}
			.copy {
				padding: 0 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FB231F;
				background: #FFF4F3;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}
</style>