|
@@ -1,8 +1,378 @@
|
|
|
<template>
|
|
|
+ <view class="deliver-page">
|
|
|
+ <u-navbar height="40px" title="货物出库" bgColor="#0256FF" :titleStyle="{color:'#fff'}" leftIconColor="#fff" autoBack
|
|
|
+ placeholder>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="container_main">
|
|
|
+ <view class="info-box" :class="isUnfold ? '':'min-height'">
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>发出仓库</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value">
|
|
|
+ 我的仓库
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>客户</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value">
|
|
|
+ 快马一店
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>销售出库</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value">
|
|
|
+ 我的仓库
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>出库日期</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value">
|
|
|
+ 2025-04-03
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>配送地址</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value">
|
|
|
+ 长沙市岳麓区
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>上传凭证</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value ss-p-y-24">
|
|
|
+ <upload-image v-model="info.url" width="196rpx" height="196rpx"></upload-image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <view class="info-line-label">
|
|
|
+ <text>备注信息</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line-value">
|
|
|
+ <u-input v-model="info.mark" placeholder="请输入备注信息" border="none"></u-input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="btn-cont" @click="isUnfold = !isUnfold">
|
|
|
+ <text>{{isUnfold ? '收起' : '展开'}}</text>
|
|
|
+ <u-icon :name="isUnfold?'arrow-up':'arrow-down'"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="scan-box">
|
|
|
+ <view class="scan-box-l">
|
|
|
+ <u-image width="120rpx" height="120rpx" src="@/static/image/zidong-saoma-img.png"></u-image>
|
|
|
+ <view class="tips-text">扫描快速识别货物</view>
|
|
|
+ <view class="tips-text2">
|
|
|
+ <view class="radio-box"></view>
|
|
|
+ <text>连续扫描</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="scan-box-r">
|
|
|
+ <u-image width="120rpx" height="120rpx" src="@/static/image/shoudong-saoma-img.png"></u-image>
|
|
|
+ <view class="tips-text">手动选择</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 货物清单 -->
|
|
|
+ <view class="cargo-list">
|
|
|
+ <view class="cargo-list-title">
|
|
|
+ <view>出库货物清单</view>
|
|
|
+ <view class="cargo-list-title-tips">(轻触货物查看详情)</view>
|
|
|
+ </view>
|
|
|
+ <block v-for="(item,i) in goodsList" :key="i">
|
|
|
+ <good-item :item="item">
|
|
|
+ <view class="num-box">
|
|
|
+ <view class="num-box-text">已确认拣货数量</view>
|
|
|
+ <u-number-box v-model="value">
|
|
|
+ <view slot="minus" class="minus">
|
|
|
+ <u-icon name="minus" color="#0256FF" size="12"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text slot="input" class="input">{{value}}</text>
|
|
|
+ <view slot="plus" class="plus">
|
|
|
+ <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-number-box>
|
|
|
+ </view>
|
|
|
+ </good-item>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="footer-box">
|
|
|
+ <view class="footer-box-l">
|
|
|
+ <view>货物种类:5种</view>
|
|
|
+ <view>货物种数:25件</view>
|
|
|
+ </view>
|
|
|
+ <button class="submitBtn" @tap="submitClick">
|
|
|
+ 提交
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import goodItem from '@/components/good-item/good-item.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ goodItem
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value:0,
|
|
|
+ isUnfold: true, //是否展开
|
|
|
+ info: {
|
|
|
+ mark: '',
|
|
|
+ url: ''
|
|
|
+ },
|
|
|
+ goodsList: [{
|
|
|
+ src: '',
|
|
|
+ name: '大童专用氨基酸洗发水',
|
|
|
+ }, {
|
|
|
+ src: '',
|
|
|
+ name: '大童专用氨基酸洗发水',
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ submitClick() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .deliver-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F0F6FB;
|
|
|
+ padding-bottom: 130rpx;
|
|
|
+
|
|
|
+ .container_main {
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .info-box {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+
|
|
|
+ .info-line {
|
|
|
+ border-bottom: 1px solid #F4F4F4;
|
|
|
+ min-height: 92rpx;
|
|
|
+ color: #333;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &-label {
|
|
|
+ width: 162rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .must-box {
|
|
|
+ color: #FF3B1D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .min-height {
|
|
|
+ height: 300rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ height: 112rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 0 16rpx 16rpx;
|
|
|
+
|
|
|
+ .btn-cont {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 154rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 120rpx;
|
|
|
+ border: 1px solid #D9D9D9;
|
|
|
+ color: #666;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-box {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #FFF;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tips-text {
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-text2 {
|
|
|
+ color: #0256FF;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .radio-box {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #D9D9D9;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-box-l {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 1px;
|
|
|
+ height: 138rpx;
|
|
|
+ background-color: #F4F4F4;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 0;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-box-r {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cargo-list {
|
|
|
+ padding: 24rpx 0;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .cargo-list-title {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 50rpx;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 6rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border-radius: 100px;
|
|
|
+ background: #0256FF;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 24rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cargo-list-title-tips {
|
|
|
+ color: #0256FF;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 48rpx 0 26rpx;
|
|
|
+ .num-box-text {
|
|
|
+ color: #666;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 112rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #0256FF;
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
+ .minus {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 1px solid #0256FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .plus {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #0256FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-box {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 126rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 40rpx 0 60rpx;
|
|
|
+ .footer-box-l {
|
|
|
+ color: #666;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .submitBtn {
|
|
|
+ width: 362rpx;
|
|
|
+ height: 76rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #0256FF;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|