shuhi-app/pages/index/express/weight-modify.vue

<template>
    <view class="container">
        <u--form ref="formRef" :model="form" :rules="rules" label-width="165px" label-position="top"
            :labelStyle="{ fontSize: '32rpx' }" errorType="toast">
            
            <!-- 仓库选择 -->
            <u-form-item label="" prop="godownName">
                <view class="input-group">
                    <u-input :customStyle="customStyle" :placeholder-style="placeholderStyle" v-model="selectedWarehouse"
                        placeholder="请选择仓库" readonly border="surround" />
                    <u-button :customStyle="customStyle" type="info" color="#a4adb3" @click="openWarehouseSelector"
                        text="选择" />
                </view>
            </u-form-item>
            
            <!-- 物流单号输入 -->
            <u-form-item label="" prop="packageCode">
                <u-input :placeholderStyle="placeholderStyle" :customStyle="customStyle" v-model="form.packageCode"
                    placeholder="扫描/输入物流单号" border="surround" name="packageCode" />
            </u-form-item>
            
            <!-- 重量输入 -->
            <u-form-item label="重量（kg）" prop="actualWeight">
                <u-input :placeholderStyle="placeholderStyle" :customStyle="customStyle" v-model="form.actualWeight"
                    placeholder="请输入重量" border="surround" name="actualWeight" type="number" />
            </u-form-item>

            <!-- 图片上传 -->
            <u-form-item label="上传图片" prop="imgUrlList">
                <cy-upload v-model:filename="form.imgUrlList" name="imgUrlList" :limit="10" :max-size="1024 * 1024">
                </cy-upload>
            </u-form-item>
        </u--form>

        <!-- 底部按钮 -->
        <view class="fixed-bottom">
            <u-button size="large" type="warning" @click="scanCode" text="扫码" class="scan-button" />
            <u-button size="large" v-permission="'app:express:changeWeight:confirm'" type="success" @click="submitForm"
                text="提交" class="submit-button" />
        </view>

        <WarehouseSelector v-model:show="showSelector" @warehouse-selected="handleWarehouseSelected" />
    </view>
</template>

<script setup>
import {
    ref,
    reactive,
    onUnmounted
} from 'vue';
import {
    onLoad,
    onShow
} from '@dcloudio/uni-app'
import cyUpload from '@/components/cy-upload/index.vue'
import WarehouseSelector from './components/WarehouseSelector.vue';

const placeholderStyle = "font-size:32rpx"
const customStyle = reactive({
    height: '90rpx'
})

const formRef = ref(null);
const selectedWarehouse = ref('');
const showSelector = ref(false);
const form = ref({
    "packageCode": "",
    "batchNum": "",
    "godownId": '',
    "godownName": '',
    "otherInfo": "",
    "actualWeight": '',
    "imgUrlList": []
});

const rules = {
    packageCode: [{
        required: true,
        message: '请输入物流单号',
        trigger: 'blur'
    }],
    actualWeight: [{
        required: true,
        message: '请输入重量',
        trigger: 'blur'
    }],
    godownId: [{
        required: true,
        message: '请选择仓库',
        trigger: 'blur'
    }]
};

function openWarehouseSelector() {
    showSelector.value = true;
}

//选择仓库之后后处理
function handleWarehouseSelected(item) {
    selectedWarehouse.value = item.godownName || ''
    form.value.godownId = item.id || ''
    form.value.godownName = item.godownName || ''
}

//获取用户绑定的仓库
function getUserBindWarehouse() {
    uni.$u.http.get('/app/appUser/getUserBindGodown').then(res => {
        if (res.code == 200) {
            selectedWarehouse.value = res.data?.godownName || ''
            form.value.godownId = res.data?.id || ''
            form.value.godownName = res.data?.godownName || ''
        }
    })
}

function scanCode() {
    uni.scanCode({
        success: (res) => {
            form.value.packageCode = res.result;
        },
        fail: (err) => {
            uni.$u.toast('扫码失败')
        }
    });
}

function submitForm() {
    formRef.value.validate().then((valid) => {
        if (valid) {
            uni.$u.http.post('/app/ordersign/changeWeight', form.value).then(res => {
                if (res.code == 200) {
                    uni.$u.toast('重量修改成功')
                    let text = form.value.packageCode + '已提交审核'
                    uni.$u.ttsModule.speak(text)
                } else {
                    let text = form.value.packageCode + '订单不存在'
                    uni.$u.ttsModule.speak(text)
                }
            })
        }
    });
}

// #ifdef APP-PLUS
const { unregister } = uni.$u.useEventListener((e) => {
    form.value.packageCode = e.barcode
});
// #endif

onLoad(() => {
    getUserBindWarehouse()
})

onUnmounted(() => {
    // #ifdef APP-PLUS
    unregister();
    // #endif
});
</script>

<style>
page {
    background-color: #ffffff;
}
</style>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 30rpx;
}

.input-group :deep(.u-button) {
    width: 160rpx
}

.input-group .u-input {
    background-color: #fff;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 20rpx;
    padding: 20rpx;
    background-color: white;
    border-top: 1px solid #eee;
}

.scan-button {
    flex: 1;
    background-color: #ff9500 !important;
    border-color: #ff9500 !important;
}

.submit-button {
    flex: 1;
    background-color: #52c41a !important;
    border-color: #52c41a !important;
}
</style>