jiuyiUniapp/jiuyi2/components/shop/order/express.vue

<script setup>
	// 
	import {
		ref,
		reactive,
		getCurrentInstance,
		defineExpose,
		defineEmits,
		onMounted
	} from 'vue'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js';
	const {
		proxy
	} = getCurrentInstance()
	// 
	const emit = defineEmits(['confirm'])
	// 表单
	const form = reactive({
		// 物流公司名称
		expressName: '',
		// 运单号
		trackingNumber: '',
	})
	// 物流公司列表
	const expressList = reactive([])
	// 物流公司列表
	const expressIndex = ref('')

	onMounted(() => {
		// 获取物流公司列表
		getExpressList()
	})

	// 获取物流公司列表
	function getExpressList() {
		api.getDict({
			path: ['express_company'],
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(expressList, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 选择物流公司
	 * @param {Object} ev
	 */
	function handleExpressIndex(ev) {
		const index = ev.detail.value
		if (expressIndex.value === index) return
		expressIndex.value = index
		form.expressName = expressList[index].dictLabel
	}

	// 开启弹窗
	function open() {
		proxy.$refs.express.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.express.close()

		// 
		setTimeout(() => {
			expressIndex.value = ''
			form.expressName = ''
			form.trackingNumber = ''
		}, 500)
	}

	// 保存
	function handleSubmit() {
		let data = {
			...form
		}
		if (!data.expressName) {
			util.alert('请选择快递公司')
			return
		}
		if (!data.trackingNumber) {
			util.alert('请输入快递单号')
			return
		}
		emit('confirm', data)
		close()
	}

	defineExpose({
		open,
		close
	})
</script>

<template>
	<uni-popup ref="express" type="center">
		<view class="expressAlt popMid bfff">
			<view class="header rows ptb20 plr20">
				<view>填写快递单号</view>
				<uni-icons type="closeempty" @click="close" />
			</view>

			<view class="form ooh mtb30 plr30 c333 f30">
				<view class="line mtb30">
					<picker :range="expressList" range-key="dictLabel" @change="handleExpressIndex">
						<view class="rows">
							<view class="mr20">快递公司</view>
							<view class="f1">
								<text  v-if="form.expressName">{{form.expressName}}</text>
								<text class="placeholderStyle" v-else>请选择</text>
							</view>
							<!-- <input type="text" placeholder="输入快递公司" /> -->
						</view>
					</picker>
				</view>

				<view class="line df aic">
					<view class="mr20">快递单号</view>
					<input type="text" v-model="form.trackingNumber" placeholder="输入快递公司"
						placeholder-class="placeholderStyle" />
				</view>
			</view>

			<view class="btn warm mtb30 mlr30" @click="handleSubmit">保存</view>
		</view>
	</uni-popup>
</template>

<style>
</style>