八 order/applyRefund.vue

<template>
	<view class="container">
	    <!-- 布局用盒子，无额外样式效果 -->
	    <view style="width: 100%;">
	        <view class="background-block">
	            <view class="title">退/换货类型</view>
	            <view 
					class="refund-brief"
					:class="type == 1 ? 'active':''"
					@click="salesType(1)" 
				>
	                <view>退货</view>
	                <view>我要退货</view>
	            </view>
	            <view 
					class="refund-brief"
					:class="type == 2 ? 'active':''"
					@click="salesType(2)" 
				>
	                <view>换货</view>
	                <view>我要换货</view>
	            </view>
	        </view>
	        <view class="background-block">
	            <view class="title">是否收到商品</view>
	            <view 
					class="refund-brief"
					:class="receipt == 1 ? 'active':''"
					@click="isReceipt(1)" 
				>
	                <view>已收到货</view>
	                <view>需要先将收到的商品寄回平台提供的地址</view>
	            </view>
	            <view 
					class="refund-brief"
					:class="receipt == 2 ? 'active':''"
					@click="isReceipt(2)" 
				>
	                <view>未收到货</view>
	                <view>如未收到商品，则需要在快递员通知商品寄到时拒收</view>
	            </view>
	        </view>
	    </view>
	    <!-- 底部按钮区域 -->
	    <view class="bottom">
	        <view class="submit-order" @click="nextStep">下一步</view>
	    </view>
	</view>
</template>

<script>
export default{
	data () {
		return {
			type: 0,              // 退换货类型 (1：退货，2：换货)
			receipt: 0,           // 是否收到商品 (1：已收到，2：未收到)
			orderNumber: '',      // 订单号  
		}
	},
	onLoad(options) {
		this.orderNumber = options.id;
	},
	methods:{
		/**
		 * 退/换货类型
		 */
		salesType(event) {
			this.type = event;
		},
		/**
		 * 是否收到商品
		 */
		isReceipt(event) {
			this.receipt = event;
		},
		/**
		 * 下一步
		 */
		nextStep() {
			const type = this.type;
			const receipt = this.receipt;
			const orderNumber = this.orderNumber;

			if(type === 0){
				uni.showToast({
				  title: '请选择退换货类型！',
				  icon: 'none'
				})
			}else if(receipt === 0){
				uni.showToast({
					title: '请选择是否已收到商品！',
					icon: 'none'
				})
			}else{
				uni.navigateTo({
					url: '/order/refund?type=' + type + '&receipt=' + receipt + '&orderNumber=' + orderNumber,
				})
			}
		}
	}
}
</script>


<style>

.container {
    justify-content: space-between;
    padding: 20rpx;
    background-color: #F6F7F9;
}

.background-block {
    width: 100%;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    background-color: #ffffff;
}

.background-block .title {
    font-weight: bold;
}

.refund-brief {
    margin-top: 20rpx;
    padding: 40rpx 20rpx;
    background-color: #F6F7F9;
    border-radius: 20rpx;
}

.refund-brief view+view {
    color: #969799;
    font-size: 24rpx;
    margin-top: 10rpx;
}

.active {
    background: rgba(8,41,255,0.05);
    border: 2rpx solid #0829FF !important;
}

/* 底部按钮区域 */
.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
}

.bottom .submit-order {
    width: 600rpx;
    line-height: 70rpx;
    text-align: center;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 40rpx;
    background: linear-gradient(128deg, #FC9238 0%, #FF1010 100%);
}
</style>