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.
658 lines
12 KiB
658 lines
12 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<div class="view">
|
|
|
|
<div class="card">
|
|
<div class="top">
|
|
<div class="t_left">
|
|
出库单号：CD.123213221312
|
|
</div>
|
|
<div class="t_right" :style="{color: '#21BBF3'}">
|
|
销售出库
|
|
</div>
|
|
</div>
|
|
<u-line></u-line>
|
|
|
|
<div class="row">
|
|
<span class="info">出库时间</span>
|
|
<span class="value">20220901-0001</span>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<span class="info">出库仓库</span>
|
|
<span class="value">北京一号库</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<div class="sub_label">商品清单</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">
|
|
<span>退货价：￥{{item.price}}</span>
|
|
</div>
|
|
<div class="right">
|
|
<span>金额：</span>
|
|
<span class="rmb">￥</span>
|
|
<span class="number">{{item.number}}</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 class="right">
|
|
合计金额：
|
|
<span class="rmb">￥</span>
|
|
<span class="value">68.88</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sub_label">
|
|
出库备注
|
|
</div>
|
|
|
|
<div class="card textarea">
|
|
梵蒂冈地方地方
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub_label">
|
|
地址
|
|
<div class="express">配送方式：快递</div>
|
|
</div>
|
|
<div class="address">
|
|
<div class="row">
|
|
<div class="left">
|
|
姓名
|
|
</div>
|
|
<div class="right">
|
|
阿斯顿
|
|
</div>
|
|
</div>
|
|
<u-line style="margin: 24rpx 0;"></u-line>
|
|
|
|
<div class="row">
|
|
<div class="left">
|
|
手机号
|
|
</div>
|
|
<div class="right">
|
|
1333333333
|
|
</div>
|
|
</div>
|
|
<u-line style="margin: 24rpx 0;"></u-line>
|
|
|
|
<div class="row">
|
|
<div class="left">
|
|
详细地址
|
|
</div>
|
|
<div class="right">
|
|
详细地址
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btnBox">
|
|
<div class="warehouse" @click="print">
|
|
打印出库单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
data: [{
|
|
id: 'CD.123213221312',
|
|
status: '采购出库',
|
|
time: '20220901-0001',
|
|
entrepot: '仓库1',
|
|
supplier: '北京供应商',
|
|
price: '5000',
|
|
color: '#21BBF3'
|
|
},
|
|
{
|
|
id: 'CD.123213221312',
|
|
status: '其他出库',
|
|
time: '20220901-0001',
|
|
entrepot: '仓库1',
|
|
supplier: '北京供应商',
|
|
price: '5000',
|
|
color: '#999999'
|
|
}
|
|
],
|
|
modalType: '',
|
|
|
|
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
|
|
}],
|
|
currentTab: '',
|
|
tabs: [{
|
|
name: '订单详情'
|
|
}, {
|
|
name: '退款记录'
|
|
}, {
|
|
name: '操作记录'
|
|
}],
|
|
item: {
|
|
id: 'CG.1233231123312',
|
|
time: '2022-12-29 10:00:00',
|
|
warehouse: '北京一号库',
|
|
supplier: '北京供应商',
|
|
price: 5000,
|
|
status: '待退款'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
print(){
|
|
uni.navigateTo({
|
|
url:'/page_salesman_index/print/print'
|
|
})
|
|
},
|
|
tabChange({
|
|
index
|
|
}) {
|
|
this.currentTab = index
|
|
},
|
|
openModal(type) {
|
|
this.modalShow = true
|
|
},
|
|
countMinus(index) {
|
|
if (this.data[index].count <= 1) return
|
|
this.data[index].count--;
|
|
},
|
|
countPlus(index) {
|
|
this.data[index].count++;
|
|
},
|
|
//关联单子
|
|
relation(type) {
|
|
if (type == 'purchase') {
|
|
uni.navigateTo({
|
|
url: '/page_salesman_index/purchase_return/relation_purchase'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/page_salesman_index/purchase_return/relation_warehousing'
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.view {
|
|
padding-bottom: 134rpx;
|
|
|
|
.address {
|
|
|
|
|
|
margin: 32rpx;
|
|
padding:1rpx 32rpx 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
margin: 32rpx;
|
|
padding: 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.top {
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.t_left {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
}
|
|
|
|
.t_right {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #F08433;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
margin-top: 24rpx;
|
|
|
|
.info {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.value {
|
|
margin-left: 24rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
}
|
|
}
|
|
|
|
.sub_label {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
line-height: 44rpx;
|
|
margin: 16rpx 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.express {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input {
|
|
padding: 0 32rpx;
|
|
|
|
.prefix {
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
position: relative;
|
|
top: 6rpx;
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.u-input {
|
|
background-color: #fff;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 14rpx 32rpx 50rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
|
|
.detail {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
.print_cancel {
|
|
width: 192rpx;
|
|
height: 72rpx;
|
|
border-radius: 40rpx;
|
|
border: 2rpx solid #E8E8E8;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.edit {
|
|
width: 192rpx;
|
|
height: 72rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.warehouse {
|
|
|
|
height: 80rpx;
|
|
background: $base-color;
|
|
border-radius: 50rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
height: 300rpx;
|
|
width: 540rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 30rpx;
|
|
text-align: center;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
}
|
|
|
|
.modal_btn {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
padding-bottom: 32rpx;
|
|
margin-top: 56rpx;
|
|
|
|
.cancel {
|
|
width: 206rpx;
|
|
height: 72rpx;
|
|
border-radius: 40rpx;
|
|
border: 2rpx solid #E8E8E8;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm {
|
|
width: 206rpx;
|
|
height: 72rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|