You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
395 lines
8.8 KiB
395 lines
8.8 KiB
<template>
|
|
<div class="view">
|
|
<div class="top card">
|
|
<div class="row">
|
|
<div class="left">
|
|
入库仓库<span class="star">*</span>
|
|
</div>
|
|
<div class="right" @click="openPick('warehouse')">
|
|
北京一号库
|
|
<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
|
|
</div>
|
|
</div>
|
|
<u-line style="margin: 24rpx 0;"></u-line>
|
|
|
|
<div class="row">
|
|
<div class="left">
|
|
入库类型<span class="star">*</span>
|
|
</div>
|
|
<div class="right" @click="openPick('supplier')">
|
|
采购入库
|
|
<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
|
|
</div>
|
|
</div>
|
|
<u-line style="margin: 24rpx 0;"></u-line>
|
|
|
|
<div class="row">
|
|
<div class="left">
|
|
入库时间<span class="star">*</span>
|
|
</div>
|
|
<div class="right" @click="openPick('time')">
|
|
2022-12-29 10:00:00
|
|
<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="label">商品清单</div>
|
|
<div class="input">
|
|
<u-input v-model="input" placeholder="请输入商品名称/编号/条形码">
|
|
<div class="prefix" slot="prefix">
|
|
<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
|
|
</div>
|
|
</u-input>
|
|
</div>
|
|
|
|
<div class="card content" v-for="(item,index) in data" :key="index" >
|
|
<div class="title">{{item.title}}</div>
|
|
<u-line ></u-line>
|
|
<div class="row">
|
|
<div class="left">
|
|
<span>商品编号：{{item.id}}</span>
|
|
<span class="unit">规格：{{item.unit}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="left">采购数量：</div>
|
|
<div class="right">
|
|
<image @click.stop="countMinus(index)" :src="$util.img(`/upload/weapp/pageSalesman/minus.png`)" style="margin-right: 10rpx;" mode=""></image>
|
|
<div class="count">{{item.count}}</div>
|
|
<image @click.stop="countPlus(index)" :src="$util.img(`/upload/weapp/pageSalesman/add.png`)" style="margin-left: 10rpx;" mode=""></image>
|
|
</div>
|
|
</div>
|
|
|
|
<u-line margin="24rpx 0"></u-line>
|
|
<div class="row">
|
|
<div class="left">
|
|
备注：
|
|
<span v-if="item.remark" style="color:#222222">{{item.remark}}</span>
|
|
<image v-else :src="$util.img('/upload/weapp/user/edit.png')" mode=""></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="total card">
|
|
<div class="left">合计：
|
|
<span class="value">3种</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="label">
|
|
订单备注
|
|
</div>
|
|
|
|
<div class="card textarea">
|
|
<u-textarea v-model="textarea" height="150rpx" placeholder="请输入"></u-textarea>
|
|
</div>
|
|
|
|
|
|
<div class="btnBox">
|
|
<div class="btn">完成</div>
|
|
</div>
|
|
|
|
<u-picker :show="showPick" :columns="pickData" @cancel="showPick=false" confirmColor="#222222"></u-picker>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
showPick:false,
|
|
textarea: '',
|
|
input:'',
|
|
pickFlag: '',
|
|
supplierPickData: [['河北供应商','天津供应商','北京供应商','河南供应商','湖南供应商']],
|
|
warehosePickData:[['河北一号库','天津一号库','北京一号库','河南一号库','湖南一号库']],
|
|
timePickData:[
|
|
['2020年','2021年','2023年','2024年','2025年','2026年','2027年','2028年'],
|
|
['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],
|
|
['01日','02日','03日','04日','05日','06日','07日','08日','09日','10日','11日','12日']
|
|
],
|
|
data:[{
|
|
title: '蜜款冬花 选0.5kg/袋（优）',
|
|
id:'A0001',
|
|
unit: '0.5kg/袋',
|
|
price: '35.00',
|
|
quantity: 1,
|
|
remark: '少买一点',
|
|
number: 68.88,
|
|
count: 1
|
|
},{
|
|
title: '蜜款冬花 选0.5kg/袋（优）',
|
|
id:'A0001',
|
|
unit: '0.5kg/袋',
|
|
price: '35.00',
|
|
quantity: 1,
|
|
number: 68.88,
|
|
count: 1
|
|
},{
|
|
title: '蜜款冬花 选0.5kg/袋（优）',
|
|
id:'A0001',
|
|
unit: '0.5kg/袋',
|
|
price: '35.00',
|
|
quantity: 1,
|
|
number: 68.88,
|
|
count: 1
|
|
},{
|
|
title: '蜜款冬花 选0.5kg/袋（优）',
|
|
id:'A0001',
|
|
unit: '0.5kg/袋',
|
|
price: '35.00',
|
|
quantity: 1,
|
|
remark: '少买一点',
|
|
number: 68.88,
|
|
count: 1
|
|
}],
|
|
|
|
}
|
|
},
|
|
computed:{
|
|
pickData() {
|
|
if(this.pickFlag=='supplier') return this.supplierPickData
|
|
else if(this.pickFlag=='warehouse') return this.warehosePickData
|
|
else if(this.pickFlag=='time') return this.timePickData
|
|
}
|
|
},
|
|
methods:{
|
|
countMinus(index) {
|
|
if(this.data[index].count<=1) return
|
|
this.data[index].count--;
|
|
},
|
|
countPlus(index) {
|
|
this.data[index].count++;
|
|
},
|
|
openPick(type) {
|
|
this.showPick = true
|
|
this.pickFlag = type
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.view {
|
|
padding-bottom: 132rpx;
|
|
.card {
|
|
margin: 32rpx;
|
|
padding: 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
}
|
|
.top {
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
.star {
|
|
margin-left: 8rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F33B50;
|
|
}
|
|
}
|
|
.right {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
image {
|
|
margin-left: 8rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
position: relative;
|
|
top: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.label {
|
|
margin: 32rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
}
|
|
.input {
|
|
padding: 0 32rpx;
|
|
.prefix {
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
position: relative;
|
|
top: 6rpx;
|
|
}
|
|
}
|
|
::v-deep {
|
|
.u-input {
|
|
background-color: #fff;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.row {
|
|
margin-top: 24rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 34rpx;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left {
|
|
image {
|
|
position: relative;
|
|
top: 2rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
.right {
|
|
.rmb {
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #F33B50;
|
|
}
|
|
.number {
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #F33B50;
|
|
}
|
|
image {
|
|
position: relative;
|
|
top: 5rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
.count {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
width: 78rpx;
|
|
height: 40rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 8rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #BFBFBF;
|
|
line-height: 40rpx;
|
|
.value {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
.right {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #BFBFBF;
|
|
line-height: 40rpx;
|
|
.rmb {
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #F33B50;
|
|
line-height: 40rpx;
|
|
}
|
|
.value {
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #F33B50;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.textarea {
|
|
::v-deep {
|
|
.u-textarea {
|
|
background: #F7F7F7;
|
|
border-radius: 16rpx;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnBox{
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 0 32rpx 50rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #F7F7F7;
|
|
.btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
::v-deep {
|
|
.u-popup__content {
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
}
|
|
.u-picker{
|
|
padding-top: 24rpx !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|