|
@@ -0,0 +1,413 @@
|
|
|
+<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 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" @click="manualClick">
|
|
|
+ <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" @toDetail="toDetail">
|
|
|
+ <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>
|
|
|
+ <error-pop v-model="errorShow" @close="errorShow = false" @confirm="confirm" :content="popText.errorText"></error-pop>
|
|
|
+ <success-pop v-model="successShow" @close="successShow = false" @backClick="backClick" :content="popText.success"></success-pop>
|
|
|
+ <!-- 扫码之后弹窗 -->
|
|
|
+ <scaned-pop v-model="scanedShow" @close="scanedShow = false" @confirm="scanConfirm"></scaned-pop>
|
|
|
+
|
|
|
+ <goods-pop v-model="goodsShow" @close="goodsShow = false" type="caigou"></goods-pop>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import goodItem from '@/components/good-item/good-item.vue'
|
|
|
+ import errorPop from '@/components/error-pop/error-pop.vue'
|
|
|
+ import successPop from '@/components/success-pop/success-pop.vue'
|
|
|
+ import scanedPop from '@/components/scaned-pop/scaned-pop.vue'
|
|
|
+ import goodsPop from '@/components/goods-pop/goods-pop.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ goodItem,
|
|
|
+ errorPop,
|
|
|
+ successPop,
|
|
|
+ scanedPop,
|
|
|
+ goodsPop
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ popText:{
|
|
|
+ errorText:'实际入库数量与应入库数量有差异,是否确认提交?',
|
|
|
+ successText:'入库成功!'
|
|
|
+ },
|
|
|
+ goodsShow:false,
|
|
|
+ scanedShow:false,
|
|
|
+ errorShow:false,
|
|
|
+ successShow:false,
|
|
|
+ value:0,
|
|
|
+ isUnfold: true, //是否展开
|
|
|
+ info: {
|
|
|
+ mark: '',
|
|
|
+ url: ''
|
|
|
+ },
|
|
|
+ goodsList: [
|
|
|
+ {
|
|
|
+ src: '',
|
|
|
+ name: '大童专用氨基酸洗发水',
|
|
|
+ }, {
|
|
|
+ src: '',
|
|
|
+ name: '大童专用氨基酸洗发水',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ submitClick() {
|
|
|
+
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ console.log('确定')
|
|
|
+ this.errorShow = false
|
|
|
+ },
|
|
|
+ backClick() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 扫码确认
|
|
|
+ scanConfirm() {
|
|
|
+
|
|
|
+ },
|
|
|
+ manualClick() {
|
|
|
+ this.goodsShow = true
|
|
|
+ },
|
|
|
+ toDetail() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/goods/detail'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<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>
|