ledehui-c/src/packages/order/deliver-goods.vue

<template>
	<view class="container">
		<Navbar title="我的订单" background-color="#fff" color="#333"></Navbar>
		<view class="content">
			<view class="row" @click="selectNameModal">
				<view class="label">物流公司</view>
				<view class="right">
					{{name || '请选择'}}
					<IconText size="12" :code="`\ue764`" color="#999"></IconText>
				</view>
			</view>
			<view class="row">
				<view class="label">物流单号</view>
				<view class="right">
					<input type="text" placeholder="请填写物流单号" v-model="code">
				</view>
			</view>
			<view class="bottom-btn">
				<view class="solid-btn" @click="handleConfirm">提交</view>
			</view>
		</view>
		<uni-popup ref="namePop" :safe-area="false">
			<view class="reason-popup-box">
				<view class="title">选择物流公司</view>
				<view class="reason-list">
					<view class="item" v-for="item in list" :key="item" @click="nameActive = item">
						{{item}}
						<IconText :code="`\ue73f`" class="icon" size="15"
							:color="nameActive === item ? '#BF2071' : '#DEDEDE'"></IconText>
					</view>
				</view>
				<view class="solid-btn" @click="handleSelectName">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Vue,
	} from 'vue-property-decorator';
	@Component({
		filters: {
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			},
		}
	})
	export default class DeliverGoods extends Vue {
		list: any = [];
		nameActive: any = '';
		name: any = '';
		code: any = '';

		onShow() {
			this.getCompanyList();
		}

		getCompanyList() {
			this.$http
				.get({
					url: this.$api.getCompanyList,
					data: {}
				})
				.then((res: any) => {
					this.list = res.list;
					uni.hideLoading();
				}, (err: any) => {
					uni.hideLoading();
					console.log(err);
				});
		}

		selectNameModal() {
			this.nameActive = this.name;
			(this.$refs.namePop as any).open('bottom');
		}

		handleSelectName() {
			this.name = this.nameActive;
			(this.$refs.namePop as any).close();
		}
		handleConfirm() {
			this.$http
				.put({
					url: this.$api.setCompanyInfo,
					data: {
						id: +this.$Route.query.id,
						goodsReturnCompany: this.name,
						goodsReturnCode: this.code
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					this.$Router.back(1);
				}, (err: any) => {
					uni.hideLoading();
					console.log(err);
				});
		}
	}
</script>

<style lang="scss" scoped>
	.row {
		height: vw(50);
		margin-bottom: vw(10);
		background: #fff;
		@include flex-x();
		@include word-vw(14, #333);
		padding: 0 vw(15);
		.label{
			white-space: nowrap;
		}

		.right {
			@include word-vw(14, #999);
			text-align: right;
		}
	}

	.reason-popup-box {
		background: #FAFAFA;
		@include flex-y();
		border-top-left-radius: vw(34);
		border-top-right-radius: vw(34);

		.title {
			width: 100%;
			height: vw(60);
			@include word-vw(18, #000);
			font-weight: bold;
			@include flex-x(center);
		}

		.reason-list {
			width: vw(355);
			@include flex-y();
			border-radius: vw(10);
			overflow: hidden;
			height: 50vh;
			overflow-y: auto;

			.item {
				width: 100%;
				height: vw(60);
				background: #fff;
				@include flex-x();
				padding: 0 vw(16);
				box-sizing: border-box;
				@include word-vw(14, #333);
				margin-top: vw(1);
				flex-shrink: 0;
			}
		}

		.solid-btn {
			background: $bk-color;
			@include solid-btn(345, 48, #333);
			border-radius: vw(24);
			@include word-vw(14, #fff);
			margin: vw(24) 0;
		}
	}

	.bottom-btn {
		height: vw(60);
		width: 100%;
		background: #fff;
		@include flex-x(center);
		position: fixed;
		bottom: 0;
		left: 0;

		.solid-btn {
			background: $bk-color;
			@include solid-btn(345, 48, #333);
			border-radius: vw(24);
			@include word-vw(14, #fff);
		}
	}
</style>