shenze-sysMan/src/views/fife/modifyLoc.vue

<template>
    <!-- 售后部修改设备位置信息-->
    <div class="fife" style="background-color:#ebedf0">
        <s-header :name="'修改设备发货位置信息'" :noback="false"></s-header>
        <br>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="modName" name="姓名" label="姓名" placeholder="姓名" left-icon="smile-o"
                    :rules="[{ required: true, message: '请填写真实姓名' }]" />
                <van-field v-model="modPhone" name="电话" label="电话" placeholder="手机号码" left-icon="phone-o"
                    :rules="[{ required: true, message: '请填写联系电话' }]" />
                <!-- <van-field v-model="modUsername" name="用户名" label="用户名" placeholder="用户名/登录账号"
                    :rules="[{ required: true, message: '请填写用户名' }]" /> -->
                <van-field v-model="clientId" name="设备唯一码" label="设备唯一码" placeholder="设备唯一码" left-icon="setting-o"
                    :rules="[{ required: true, message: '设备唯一码不能为空' }]" />

                <van-field v-model="country" is-link readonly name="发往国家" label="发往国家" placeholder="发往国家" left-icon="guide-o"
                    :rules="[{ required: true, message: '请填写发往国家' }]" @click="showPicker = true" />
                <van-popup v-model:show="showPicker" round position="bottom">
                    <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>

                <van-field v-model="location" name="地区名称" label="地区名称" placeholder="城市/地区名称" left-icon="location-o"/>
            </van-cell-group>
            <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                <van-button round class="custom-button" type="primary" size="small" native-type="submit" block>
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { updateLocInfo } from "../../service/fife/modifyLoc";
import { ref } from "vue";
import { Toast } from "vant";

export default {
    components: { sHeader },
    setup: function () {

        const modPhone = ref('');
        const modName = ref('');
        // const modUsername = ref('');
        const country = ref('');
        const location = ref('');
        const clientId = ref('');
        const showPicker = ref(false);
        const columns = [
            { text: '英国', value: '英国' },
            { text: '美国', value: '美国' },
            { text: '加拿大', value: '加拿大' },
            { text: '澳大利亚', value: '澳大利亚' },
            { text: '德国', value: '德国' },
            { text: '奥地利', value: '奥地利' },
            { text: '瑞士', value: '瑞士' },
            { text: '俄罗斯', value: '俄罗斯' },
            { text: '白俄罗斯', value: '白俄罗斯' },
            { text: '乌克兰', value: '乌克兰' },
            { text: '日本', value: '日本' },
            { text: '西班牙', value: '西班牙' },
            { text: '墨西哥', value: '墨西哥' },
            { text: '阿根廷', value: '阿根廷' },
            { text: '法国', value: '法国' },
            { text: '比利时', value: '比利时' },
            { text: '保加利亚', value: '保加利亚' },
            { text: '丹麦', value: '丹麦' },
            { text: '芬兰', value: '芬兰' },
            { text: '荷兰', value: '荷兰' },
            { text: '比利时', value: '比利时' },
            { text: '捷克', value: '捷克' },
            { text: '罗马尼亚', value: '罗马尼亚' },
            { text: '挪威', value: '挪威' },
            { text: '葡萄牙', value: '葡萄牙' },
            { text: '巴西', value: '巴西' },
            { text: '瑞典', value: '瑞典' },
            { text: '斯洛伐克', value: '斯洛伐克' },
            { text: '匈牙利', value: '匈牙利' },
            { text: '意大利', value: '意大利' },
            { text: '韩国', value: '韩国' },
            { text: '波兰', value: '波兰' },
            { text: '乌克兰', value: '乌克兰' },
            { text: '亚美尼亚', value: '亚美尼亚' },
            { text: '阿拉伯', value: '阿拉伯' },
            { text: '泰国', value: '泰国' },
            { text: '以色列', value: '以色列' },
            { text: '格鲁吉亚', value: '格鲁吉亚' },
            { text: '土耳其', value: '土耳其' },
            { text: '拉脱维亚', value: '拉脱维亚' },
            { text: '爱沙尼亚', value: '爱沙尼亚' },
            { text: '蒙古国', value: '蒙古国' },
            { text: '伊朗', value: '伊朗' },
        ];

        const onConfirm = ({ selectedOptions }) => {
            if (selectedOptions[0] != null) {
                showPicker.value = false;
                country.value = selectedOptions[0].text;
            }
        }

        // 提交表单
        const locationCheck = {
            modName: modName.value,
            modPhone: modPhone.value,
            // modUsername: modUsername.value,
            clientId: clientId.value,
            country: country.value,
            location: location.value
        }

        const onSubmit = async () => {
            const { data } = await updateLocInfo(locationCheck);

            if (data.code === "00000") {
                // 成功
                // ElMessage.success("保存成功");
                Toast(data.message);
            } else {
                Toast(data.message);
            }
        }

        return {
            onSubmit,
            clientId,
            locationCheck,
            onConfirm,
            columns,
            showPicker,
            country,
            modName,
            // modUsername,
            modPhone,
            location,
        };
    }
}
</script>

<style>
.custom-button {
    width: 120px;
}
</style>