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

114 lines
2.2 KiB
Vue

<script setup>
//
import {
ref,
reactive,
getCurrentInstance,
defineExpose,
onMounted
} from 'vue'
// 工具库
import util from '@/common/js/util';
// api
import api from '@/api/index.js';
const {
proxy
} = getCurrentInstance()
// 表单
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) {
console.log('ev', ev)
const index = ev.detail.value
if(expressIndex.value === index) return
expressIndex.index = index
form.expressName = expressList[index].dictLabel
}
// 开启弹窗
function open() {
proxy.$refs.express.open()
}
// 关闭弹窗
function close() {
proxy.$refs.express.close()
//
setTimeout(() => {
form.expressName = ''
form.trackingNumber = ''
})
}
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>
<input type="text" placeholder="输入快递公司" />
</view>
</picker>
</view>
<view class="line df aic">
<view class="mr20">快递单号</view>
<input type="text" placeholder="输入快递公司" />
</view>
</view>
<view class="btn warm mtb30 mlr30">保存</view>
</view>
</uni-popup>
</template>
<style>
</style>