|
|
|
|
|
<template>
|
|
|
|
|
|
<ifrm>
|
|
|
|
|
|
<uni-forms ref="wrForm" class="formBox" label-position="top">
|
|
|
|
|
|
<uni-forms-item label="站点码：" label-width="100px">
|
|
|
|
|
|
<view class="bottom-input-row">
|
|
|
|
|
|
<view class="weight-input-wrapper">
|
|
|
|
|
|
<view class="input-box">
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
v-model="stationCode"
|
|
|
|
|
|
@confirm="handleStationConfirm"
|
|
|
|
|
|
placeholder="站点码"
|
|
|
|
|
|
class="uni-input-border"
|
|
|
|
|
|
confirm-type="done"
|
|
|
|
|
|
:focus="stationInputFocus"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<button
|
|
|
|
|
|
@tab="handlePickup"
|
|
|
|
|
|
class="submit-btn"
|
|
|
|
|
|
:disabled="(stationCode != ''&¤tBox!=null) ? false : true"
|
|
|
|
|
|
>
|
|
|
|
|
|
取货
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-if="activeStation" class="station-info">
|
|
|
|
|
|
<view class="station-left">
|
|
|
|
|
|
<text class="station-check">✓</text>
|
|
|
|
|
|
<view class="station-details">
|
|
|
|
|
|
<text class="station-name">{{ activeStation.stationName }}</text>
|
|
|
|
|
|
<text class="station-code">{{ activeStation.stationCode }}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="station-right">
|
|
|
|
|
|
<text class="station-label">站点状态</text>
|
|
|
|
|
|
<text
|
|
|
|
|
|
class="station-status"
|
|
|
|
|
|
:class="currentBox ? 'status-busy' : 'status-idle'"
|
|
|
|
|
|
>
|
|
|
|
|
|
{{ activeStation.statusDesc}}
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
|
</uni-forms>
|
|
|
|
|
|
|
|
|
|
|
|
<scroll-view class="details-scroll" scroll-y>
|
|
|
|
|
|
<view v-if="!activeStation" class="empty-state">
|
|
|
|
|
|
<text>请扫描站点码查询待取货物料</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-else-if="!currentBox" class="no-box-state">
|
|
|
|
|
|
<text>该站点当前无物料箱</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view v-else class="box-container">
|
|
|
|
|
|
<view class="box-card">
|
|
|
|
|
|
<view class="box-header">
|
|
|
|
|
|
<view class="box-title-section">
|
|
|
|
|
|
<text class="box-icon">📦</text>
|
|
|
|
|
|
<view class="box-title-info">
|
|
|
|
|
|
<text class="box-label">当前物料箱</text>
|
|
|
|
|
|
<text class="box-code">{{ currentBox.boxCode }}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="box-summary">
|
|
|
|
|
|
<text class="box-summary-label">合计</text>
|
|
|
|
|
|
<text class="box-summary-value">
|
|
|
|
|
|
{{ currentBox.orders.length }}单 | {{ totalWeight }}g
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="box-orders">
|
|
|
|
|
|
<view class="orders-header">
|
|
|
|
|
|
<text class="orders-icon">📋</text>
|
|
|
|
|
|
<text class="orders-title">箱内明细</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="orders-list">
|
|
|
|
|
|
<view
|
|
|
|
|
|
v-for="(order, idx) in currentBox.orders"
|
|
|
|
|
|
:key="idx"
|
|
|
|
|
|
class="order-item"
|
|
|
|
|
|
>
|
|
|
|
|
|
<view class="order-info">
|
|
|
|
|
|
<text class="order-no">{{ order.orderNo }}</text>
|
|
|
|
|
|
<text class="order-part">零件号: {{ order.partNo }}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<text class="order-weight">{{ order.weight }} g</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="action-section">
|
|
|
|
|
|
<button @click="handlePickup" class="pickup-btn">
|
|
|
|
|
|
<text class="pickup-icon">📦</text>
|
|
|
|
|
|
<text class="pickup-text">确认取货 (解绑)</text>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</view> -->
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <view v-if="!activeStation" class="help-tip">
|
|
|
|
|
|
<view class="tip-content">
|
|
|
|
|
|
<text class="tip-icon">ℹ️</text>
|
|
|
|
|
|
<text class="tip-text">测: ST001 (有货), ST002 (无货)</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view> -->
|
|
|
|
|
|
</ifrm>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import ifrm from "@/pages/index/ifrm";
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
ifrm,
|
|
|
|
|
|
},
|
|
|
|
|
|
onNavigationBarButtonTap(btn) {
|
|
|
|
|
|
this.$refs.ifrm.topMenuClick(btn);
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
stationCode: "",
|
|
|
|
|
|
activeStation: null,
|
|
|
|
|
|
boxData:null,
|
|
|
|
|
|
currentBox: null,
|
|
|
|
|
|
stationInputFocus: true,
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
totalWeight() {
|
|
|
|
|
|
if (!this.currentBox || !this.currentBox.orders) return 0;
|
|
|
|
|
|
return this.currentBox.orders.reduce((sum, o) => sum + o.weight, 0);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 站点查询数据
|
|
|
|
|
|
handleStationConfirm() {
|
|
|
|
|
|
const code = this.stationCode.trim();
|
|
|
|
|
|
if (!code) return;
|
|
|
|
|
|
|
|
|
|
|
|
this.$u.api
|
|
|
|
|
|
.getStationNameBoxbarcode({ stationCode: this.stationCode })
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
this.activeStation = res.data.station;
|
|
|
|
|
|
this.boxData = res.data.boxbarcodeDetailsVO;
|
|
|
|
|
|
this.stationCode = "";
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
// 取货
|
|
|
|
|
|
handlePickup() {
|
|
|
|
|
|
if (!this.currentBox) return;
|
|
|
|
|
|
const pickedBoxCode = this.currentBox.boxCode;
|
|
|
|
|
|
this.$u.api
|
|
|
|
|
|
.receiveOrder({ stationCode: this.stationCode })
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
console.log("物料解绑", res.data);
|
|
|
|
|
|
this.currentBox = null;
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: `物料箱 ${pickedBoxCode} 取货(解绑)成功!`,
|
|
|
|
|
|
icon: "success",
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.stationCode = "";
|
|
|
|
|
|
this.activeStation = null;
|
|
|
|
|
|
this.stationInputFocus = true;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
handleReset() {
|
|
|
|
|
|
this.activeStation = null;
|
|
|
|
|
|
this.currentBox = null;
|
|
|
|
|
|
this.stationCode = "";
|
|
|
|
|
|
this.stationInputFocus = true;
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.page-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
user-select: none;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 6rpx 16rpx;
|
|
|
|
|
|
background-color: #1d4ed8;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
z-index: 20;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header-title {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
letter-spacing: 1rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header-btn {
|
|
|
|
|
|
background-color: #1e40af;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
padding: 4rpx 16rpx;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
border: 2rpx solid #2563eb;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header-btn:active {
|
|
|
|
|
|
background-color: #1e3a8a;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content-container {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
background-color: #f8fafc;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.scan-section {
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border-bottom: 4rpx solid #cbd5e1;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
padding: 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.module-header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
color: #1e293b;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.module-icon {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.module-title {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.scan-input {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 16rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border: 4rpx solid #94a3b8;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #0f172a;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.scan-input::placeholder {
|
|
|
|
|
|
color: #94a3b8;
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-info {
|
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
background-color: #d1fae5;
|
|
|
|
|
|
border: 2rpx solid #6ee7b7;
|
|
|
|
|
|
padding: 16rpx;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-left {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-check {
|
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
color: #059669;
|
|
|
|
|
|
margin-right: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-details {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-name {
|
|
|
|
|
|
color: #065f46;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-code {
|
|
|
|
|
|
color: #059669;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-right {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-label {
|
|
|
|
|
|
color: #475569;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.station-status {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.status-busy {
|
|
|
|
|
|
color: #1d4ed8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.status-idle {
|
|
|
|
|
|
color: #64748b;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.details-scroll {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.empty-state {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 64rpx 0;
|
|
|
|
|
|
color: #94a3b8;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.no-box-state {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 64rpx 0;
|
|
|
|
|
|
color: #64748b;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
background-color: #f1f5f9;
|
|
|
|
|
|
border: 2rpx solid #e2e8f0;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-card {
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border: 4rpx solid #cbd5e1;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-header {
|
|
|
|
|
|
padding: 16rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
background-color: #eff6ff;
|
|
|
|
|
|
border-bottom: 4rpx solid #e2e8f0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-title-section {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-icon {
|
|
|
|
|
|
font-size: 48rpx;
|
|
|
|
|
|
margin-right: 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-title-info {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-label {
|
|
|
|
|
|
color: #64748b;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-code {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #0f172a;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-summary {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-summary-label {
|
|
|
|
|
|
color: #64748b;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-summary-value {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #059669;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box-orders {
|
|
|
|
|
|
padding: 16rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.orders-header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
color: #334155;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
padding: 0 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.orders-icon {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.orders-title {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.orders-list {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
gap: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.order-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 16rpx;
|
|
|
|
|
|
background-color: #f8fafc;
|
|
|
|
|
|
border: 2rpx solid #e2e8f0;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.order-info {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.order-no {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #0f172a;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.order-part {
|
|
|
|
|
|
color: #475569;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
margin-top: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.order-weight {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #059669;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.action-section {
|
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
|
padding-top: 16rpx;
|
|
|
|
|
|
padding-bottom: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pickup-btn {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 24rpx;
|
|
|
|
|
|
background-color: #1d4ed8;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
border: 4rpx solid #1e3a8a;
|
|
|
|
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pickup-btn:active {
|
|
|
|
|
|
background-color: #1e40af;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pickup-icon {
|
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
margin-right: 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pickup-text {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.help-tip {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 35%;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tip-content {
|
|
|
|
|
|
background-color: #1e293b;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
padding: 8rpx 16rpx;
|
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tip-icon {
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tip-text {
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bottom-input-row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 10px;
|
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.weight-input-wrapper {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.submit-btn {
|
|
|
|
|
|
width: 88px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
background-color: #155dfc;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
|
|
|
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.submit-btn.disabled {
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
