javashop/webroot/addon/shop/admin/views/delivery/search.vue

<template>
	<div class="main-container">
		<el-card class="card !border-none mb-[15px]" shadow="never">
            <el-page-header :content="pageName" :icon="ArrowLeft" @back="router.push({ path: '/shop/order/delivery' })" />
        </el-card>
		<el-form :model="formData" label-width="150px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading">
			<el-card class="box-card !border-none" shadow="never">
				<el-form-item :label="t('interfaceType')" prop="interface_type">
					<div>
						<el-radio-group v-model="formData.interface_type">
							<el-radio :label="1" size="large">{{ t('kdn') }}</el-radio>
<!--							<el-radio :label="2" size="large">{{ t('kd100') }}</el-radio>-->
						</el-radio-group>
						<p class="text-[12px] text-[#b2b2b2]" v-if="formData.interface_type == 1">
							{{ t('promptTips1-1') }}<el-button class="button-size" type="primary" link @click="openEvent('https://www.kdniao.com/reg?from=niucloud')">https://www.kdniao.com</el-button>
						</p>
						<p class="text-[12px] text-[#b2b2b2]" v-if="formData.interface_type == 1">
							{{ t('promptTips1-2') }}
						</p>
<!--						<p class="text-[12px] text-[#b2b2b2]" v-if="formData.interface_type == 2">-->
<!--							{{ t('promptTips2') }}<el-button class="button-size" type="primary" link @click="openEvent('https://www.kuaidi100.com')">https://www.kuaidi100.com</el-button>-->
<!--						</p>-->
					</div>
				</el-form-item>
				<div v-if="formData.interface_type == 1">
					<el-form-item :label="t('isPayEdition')" prop="kdn_is_pay" class="items-center">
						<el-radio-group v-model="formData.kdniao_is_pay">
<!--							<el-radio :label="1" size="large">{{ t('free') }}</el-radio>-->
<!--							<el-radio :label="2" size="large">{{ t('pay') }}</el-radio>-->
              <el-radio :label="1" size="large">{{ t('PayPerOrder') }}</el-radio>
              <el-radio :label="2" size="large">{{ t('PayPerUse') }}</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="EBusinessID" class="input-item">
						<div>
							<el-input v-model.trim="formData.kdniao_id" :placeholder="t('kdnEBusinessIDPlaceholder')" class="input-width" clearable />
							<p class="text-[12px] text-[#b2b2b2]">{{ t('kdnEBusinessIDTips') }}</p>
						</div>
					</el-form-item>

					<el-form-item label="APPKEY" class="input-item">
						<div>
							<el-input v-model.trim="formData.kdniao_app_key" clearable :placeholder="t('kdnAppKeyPlaceholder')" class="input-width" />
							<p class="text-[12px] text-[#b2b2b2]">{{ t('kdnAppKeyTips') }}</p>
						</div>
					</el-form-item>

				</div>

<!--				<div v-if="formData.interface_type == 2">-->
<!--					<el-form-item label="APPKEY" class="input-item">-->
<!--						<div>-->
<!--							<el-input v-model.trim="formData.kd100_app_key" clearable :placeholder="t('kd100AppKeyPlaceholder')" class="input-width" />-->
<!--							<p class="text-[12px] text-[#b2b2b2]">{{ t('kd100AppKeyTips') }}</p>-->
<!--						</div>-->
<!--					</el-form-item>-->

<!--					<el-form-item label="CUSTOMER" class="input-item">-->
<!--						<div>-->
<!--							<el-input v-model.trim="formData.kd100_customer" :placeholder="t('kd100CustomerPlaceholder')" class="input-width" clearable />-->
<!--							<p class="text-[12px] text-[#b2b2b2]">{{ t('kd100CustomerTips') }}</p>-->
<!--						</div>-->
<!--					</el-form-item>-->
<!--				</div>-->

			</el-card>
		</el-form>

		<div class="fixed-footer-wrap">
			<div class="fixed-footer">
				<el-button type="primary" :loading="loading" @click="save(formRef)">{{ t('save') }}</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { t } from '@/lang'
import { ArrowLeft } from '@element-plus/icons-vue'
import { FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { setDeliverySearch, getDeliverySearch } from '@/addon/shop/api/delivery'

const route = useRoute()
const router = useRouter()
const pageName = route.meta.title
const loading = ref(true)

interface formDataType {
    interface_type: number
    kdniao_id: string
    kdniao_app_key: string
    kdniao_is_pay: number
    kd100_app_key: string
    kd100_customer: string
}
const formData = reactive<formDataType|any>({
    interface_type: 1,
    kdniao_id: '',
    kdniao_app_key: '',
    kdniao_is_pay: 1,
    kd100_app_key: '',
    kd100_customer: ''
})

const setFormData = async () => {
    const data = await (await getDeliverySearch()).data
    Object.keys(formData).forEach((key: string) => {
        if (data[key] != undefined) formData[key] = data[key]
    })

    loading.value = false
}
setFormData()

const openEvent = (url:any) => {
    window.open(url, '_blank')
}

const formRef = ref<FormInstance>()

// 表单验证规则
const formRules = reactive<FormRules>({
})

/**
 * 保存
 */
const save = async (formEl: FormInstance | undefined) => {
    if (loading.value || !formEl) return

    await formEl.validate(async (valid) => {
        if (valid) {
            loading.value = true
            setDeliverySearch(formData).then(() => {
                loading.value = false
            }).catch(() => {
                loading.value = false
            })
        }
    })
}

</script>

<style lang="scss" scoped>
.input-item {
	margin-bottom: 10px !important
}

.button-size {
	font-size: 12px !important;
}

.el-radio.el-radio--large {
	height: auto !important
}
</style>