shop-app/pages/order/saleAfter/saleAfterSelect.vue

<!--
 * @Author: ch
 * @Date: 2022-04-14 16:50:37
 * @LastEditors: ch
 * @LastEditTime: 2022-04-29 23:06:49
 * @Description: file content
-->
<template>
	<view>
		<UiWhiteBox>
			<UiGoodsInfo class="goods-info" :data="orderInfo.orderProduct"></UiGoodsInfo>
		</UiWhiteBox>
		<UiWhiteBox>
			<view class="title">选择售后类型</view>
			<view class="item item__first" @click="select(1)">
				<view>申请退款</view>
				<text>没有收到货，或已协商同意不退货只退款</text>
			</view>
			<view class="item" @click="select(2,2)">
				<view>申请退货退款</view>
				<text>已收到货，需要退还收到的货物</text>
			</view>
		</UiWhiteBox>
	</view>
</template>
<script>
import UiGoodsInfo from '../../../components/UiGoodsInfo.vue'
import UiWhiteBox from '../../../components/UiWhiteBox.vue'
import {ApiGetOrderProductDetail} from '@/common/api/order';
export default {
	components: { UiWhiteBox, UiGoodsInfo },
	data(){
		return {
			orderInfo : {}
		}
	},
	mounted(){
		this.getOrderProductInfo()
	},
	methods : {
		async getOrderProductInfo(){
			const {error, result} = await ApiGetOrderProductDetail({
				orderProductId : this.$Route.query.id
			});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.orderInfo = result;
		},
		select(type,status){
			const {orderProductId,realAmount} = this.orderInfo.orderProduct;
			this.$Router.push({
				path:'/saleAfterApply',
				query:{
					status,
					type,
					id: orderProductId,
					amount : realAmount,
					}
				});
		}
	}
}
</script>
<style lang="scss">
page {
	background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.title{
	height: 98rpx;
	line-height: 98rpx;
	border-bottom: 2rpx solid $color-grey2;
	padding: 0 30rpx;
	color: $color-grey5;
}
.item{
	padding: 40rpx 0;
	margin: 0 40rpx;
	&__first{
		border-bottom: 2rpx solid $color-grey2;
	}
	view{
		font-weight: bold;
		margin-bottom:20rpx;
	}
	text{
		color: $color-grey4;
		font-size: $font-size-sm;
	}
}
.goods-info{
	border: 0;
}
</style>