mall-front-app/pages/order/aftersale/return-delivery.vue

<template>
	<s-layout title="退货物流">
		<view>
			<form @submit="subRefund" report-submit='true'>
				<view class='apply-return'>
					<view class='list borRadius14'>
						<view class='item acea-row row-between-wrapper' style="display: flex;align-items: center;">
							<view>物流公司</view>
							<picker mode='selector' class='num' @change="bindPickerChange" :value="state.expressIndex"
								:range="state.expresses" range-key="name">
								<view class="picker acea-row row-between-wrapper "  style="display: flex;align-items: center;">
									<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
									<!-- TODO 非繁人：这里样式有问题，少了 > 按钮 -->
									<image src="@/static/icon/select-icon.png" class="select-icon" />
								</view>
							</picker>
						</view>
						<view class='item textarea acea-row row-between' style="display: flex;align-items: center;">
							<view>物流单号</view>
							<input placeholder='请填写物流单号' class='num' name="logisticsNo"
								placeholder-class='placeholder' />
						</view>
						<button class='returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn'
							form-type="submit"
							style="background: linear-gradient(90deg,var(--ui-BG-Main),var(--ui-BG-Main-gradient))!important">提交</button>
					</view>
				</view>
			</form>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import AfterSaleApi from '@/sheep/api/trade/afterSale';
	import DeliveryApi from '@/sheep/api/trade/delivery';

	const state = reactive({
		id: 0, // 售后编号
		expressIndex: 0, // 选中的 expresses 下标
		expresses: [], // 可选的快递列表
	})

	function bindPickerChange(e) {
		state.expressIndex = e.detail.value;
	}

	async function subRefund(e) {
		if(!state.expresses[state.expressIndex].id){
			uni.showToast({
				title: '请选择物流公司',
			});
			return false
		}
		if(!e.detail.value.logisticsNo){
			uni.showToast({
				title: '请填写物流单号',
			});
			return false
		}
		let data = {
			id: state.id,
			logisticsId: state.expresses[state.expressIndex].id,
			logisticsNo: e.detail.value.logisticsNo,
		};
		const {
			code
		} = await AfterSaleApi.deliveryAfterSale(data);
		if (code !== 0) {
			return;
		}
		uni.showToast({
			title: '填写退货成功',
		});
		sheep.$router.go('/pages/order/aftersale/detail', {
			id: state.id
		});
	}

	// 获得快递物流列表
	async function getExpressList() {
		const {
			code,
			data
		} = await DeliveryApi.getDeliveryExpressList();
		if (code !== 0) {
			return;
		}
		state.expresses = data;
		state.expresses.unshift({
            "id": 0,
            "name": "请选择"
        },)
	}

	onLoad(options => {
		if (!options.id) {
			sheep.$helper.toast(`缺少订单信息，请检查`);
			return
		}
		state.id = options.id;
		// 获得快递物流列表
		getExpressList();
	})
</script>
<style lang="scss" scoped>
	.apply-return {
		padding: 20rpx 30rpx 70rpx 30rpx;
	}

	.apply-return .list {
		background-color: #fff;
		margin-top: 18rpx;
		padding: 0 24rpx 70rpx 24rpx;
	}

	.apply-return .list .item {
		min-height: 90rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	}

	.apply-return .list .item .num {
		color: #282828;
		margin-left: 27rpx;
		// width: 227rpx;
		// text-align: right;
	}

	.apply-return .list .item .num .picker .reason {
		width: 14rem;
	}

	.apply-return .list .item .num .picker .iconfont {
		color: #666;
		font-size: 30rpx;
		margin-top: 2rpx;
	}
	.select-icon {
		width:30rpx;
		height:30rpx;
	}
	.apply-return .list .item.textarea {
		padding: 24rpx 0;
	}

	.apply-return .list .item textarea {
		height: 100rpx;
		font-size: 30rpx;
	}

	.apply-return .list .item .placeholder {
		color: #bbb;
	}

	.apply-return .list .item .title {
		height: 95rpx;
		width: 100%;
	}

	.apply-return .list .item .title .tip {
		font-size: 30rpx;
		color: #bbb;
	}

	.apply-return .list .item .upload {
		padding-bottom: 36rpx;
	}

	.apply-return .list .item .upload .pictrue {
		border-radius: 14rpx;
		margin: 22rpx 23rpx 0 0;
		width: 156rpx;
		height: 156rpx;
		position: relative;
		font-size: 24rpx;
		color: #bbb;
	}

	.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
		margin-right: 0;
	}

	.apply-return .list .item .upload .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}

	.apply-return .list .item .upload .pictrue .icon-guanbi1 {
		position: absolute;
		font-size: 45rpx;
		top: -10rpx;
		right: -10rpx;
	}

	.apply-return .list .item .upload .pictrue .icon-icon25201 {
		color: #bfbfbf;
		font-size: 50rpx;
	}

	.apply-return .list .item .upload .pictrue:nth-last-child(1) {
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}

	.apply-return .returnBnt {
		font-size: 32rpx;
		color: #fff;
		width: 100%;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 43rpx auto;
	}
</style>