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">
									<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
                  <!-- TODO 芋艿：这里样式有问题，少了 > 按钮 -->
									<text class='iconfont icon-jiantou' />
								</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) {
    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;
	}

	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: 385rpx;
	}

	.apply-return .list .item .num .picker .iconfont {
		color: #666;
		font-size: 30rpx;
		margin-top: 2rpx;
	}

	.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>