wx-qhb/pageD/afterSalesDetail/afterSalesDetail.vue

<template>
	<view class="page">
		<view class="top">
			<view class="top-title">
				请处理退款申请
			</view>
			<view class="top-detail">
				如果您同意，请点击“同意退款”
			</view>
		</view>

		<!-- 地址信息 -->
		<view class="address">
			<view class="name-phone">
				<view style="margin-right:20rpx;font-size: 32rpx;">陈曦</view>
				<text class="phone">17800000000</text>
			</view>
			<view class="address-detail">
				江苏省淮安市清江浦区北京南路99号（青浦大桥南侧200
				米）淮安恒大名都3号楼一单元1602
			</view>
		</view>

		<CommodityDetail />
		<ApplicationInformation />
		<RefusePopup :show="show" @close="close"  />
		<AgreePopup :agreeShow="agreeShow" @close="close"  />
		
		<view class="footer">
			<button class="btn-1" @click="refuseApplication">拒绝申请</button><button @click="agreeShow = true" class="btn-2">同意退款</button>
		</view>
	</view>
</template>

<script>
	import CommodityDetail from './component/commodityDetail.vue';
	import ApplicationInformation from './component/applicationInformation.vue';
	import RefusePopup from './component/refusePopup.vue';
	import AgreePopup from './component/agreePopup.vue';
	export default {
		components: {
			CommodityDetail,
			ApplicationInformation,
			RefusePopup,
			AgreePopup
		},
		data() {
			return {
				show:false,
				agreeShow:false
			};
		},
		methods:{
			refuseApplication(){
				this.show = true
			},
			close(value){
				console.log(value)
				this.show = false
				this.agreeShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 24rpx;
		position: relative;

		.top {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 28rpx 20rpx;

			.top-title {
				font-size: 36rpx;
				color: #333;
				font-weight: 600;
			}

			.top-detail {
				font-size: 26rpx;
				color: #A3A3A3;
				margin-top: 10rpx;
			}
		}

		.address {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 34rpx 24rpx 28rpx;
			margin-top: 24rpx;

			.name-phone {
				display: flex;
				align-items: center;
				align-items: flex-end;

				.phone {
					font-size: 26rpx;
					color: #666;
				}
			}

			.address-detail {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #444;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			height: 146rpx;
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 20rpx 0 0;

			.btn-1 {
				height: 76rpx;
				padding: 0;
				margin: 0;
				font-size: 28rpx;
				color: #f83224;
				min-width: 188rpx;
				background-color: #fff;
				border-radius: 38rpx;
				border: 2rpx solid #f83224;
				margin-right: 20rpx;
			}

			.btn-2 {
				height: 76rpx;
				padding: 0;
				margin: 0;
				font-size: 28rpx;
				color: #fff;
				min-width: 188rpx;
				background-color: #f83224;
				border-radius: 38rpx;
				margin-right: 20rpx;
			}
		}

	}
</style>