liutong
/
H5_QiCaiYao
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
H5端齐采药项目,uniapp框架
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.
40 Commits
1 Branch
0 Tags
28 MiB
 
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
H5_QiCaiYao/page_salesman_index/index/purchase_note/increase_detail.vue

633 lines
15 KiB
Raw Permalink Blame History

<template>
<page-meta :page-style="themeColor"></page-meta>
<div class="view">
<div class="card top">
<div class="row">
<div class="left">采购单号</div>
<div class="right">
<div class="label">{{item.status}}</div>
{{item.id}}
</div>
</div>
<u-line margin="24rpx 0"></u-line>
<div class="row">
<div class="left">采购订单日期</div>
<div class="right">{{item.time}}</div>
</div>
<u-line margin="24rpx 0"></u-line>
<div class="row">
<div class="left">入库仓库</div>
<div class="right">{{item.warehouse}}</div>
</div>
<u-line margin="24rpx 0"></u-line>
<div class="row">
<div class="left">供应商</div>
<div class="right">{{item.supplier}}</div>
</div>
<u-line margin="24rpx 0"></u-line>
<div class="row">
<div class="left">付款金额</div>
<div class="right">￥{{item.price}}</div>
</div>
</div>
<div style="margin-bottom: 32rpx;">
<u-tabs :list="tabs" :scrollable="false" lineColor="var(--base-color)" activeStyle="color:var(--base-color);font-weight:bold;" @change="tabChange"></u-tabs>
</div>
<div v-if="currentTab==0">
<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">
<u-textarea v-model="textarea" height="150rpx" placeholder="请输入"></u-textarea>
</div>
</div>
<div v-if="currentTab==1">
<div class="sub_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">
<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">
<u-textarea v-model="textarea" height="150rpx" placeholder="请输入"></u-textarea>
</div>
</div>
<u-overlay :show="modalShow">
<div class="modal">
<div class="title">提示</div>
<div class="content">
确定要取消该订单吗？
</div>
<div class="modal_btn">
<div class="cancel" @click="modalShow=false">取消</div>
<div class="confirm">确定</div>
</div>
</div>
</u-overlay>
<!-- 确定入库 -->
<u-overlay :show="warehouseShow">
<div class="modal">
<div class="title">提示</div>
<div class="content">
确定将商品入库吗？
</div>
<div class="modal_btn">
<div class="cancel" @click="warehouseShow=false">取消</div>
<div class="confirm">确定</div>
</div>
</div>
</u-overlay>
<paymentRecord ref="paymentRecord" v-if="currentTab==2"></paymentRecord>
<addPaymentRecord ref="addPaymentRecord"></addPaymentRecord>
<operationRecord ref="operationRecord" v-if="currentTab==3"></operationRecord>
<div class="btnBox" v-if="currentTab!=3">
<div class="detail" v-if="currentTab==0">
<div class="print_cancel" @click="print">打印订单</div>
<div class="print_cancel" @click="openModal('cancel')">取消订单</div>
<div class="edit">编辑订单</div>
</div>
<div class="warehouse" v-if="currentTab==1" @click="warehouseShow=true">
确认入库
</div>
<div class="warehouse" v-if="currentTab==2" @click="$refs.addPaymentRecord.start()">
新增付款
</div>
</div>
</div>
</template>
<script>
import paymentRecord from "./components/paymentRecord.vue" //付款记录
import addPaymentRecord from "./components/addPaymentRecord.vue" //新增付款记录
import operationRecord from "./components/operationRecord.vue" //操作记录
export default {
components:{paymentRecord,addPaymentRecord,operationRecord},
data () {
return {
warehouseShow:false,
modalShow:false,
modalType: '',
textarea: '',
input:'',
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: '付款记录'
},{
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++;
},
}
}
</script>
<style lang="scss" scoped>
.view {
padding-bottom: 134rpx;
.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: #999999;
line-height: 40rpx;
}
.right {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
image {
margin-left: 8rpx;
width: 28rpx;
height: 28rpx;
position: relative;
top: 5rpx;
}
.label {
height: 36rpx;
background: rgba(33,187,243,0.08);
border-radius: 8rpx;
display: inline;
padding: 0 8rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #21BBF3;
line-height: 36rpx;
text-align: center;
margin-right: 10rpx;
}
}
}
}
.sub_label {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
margin: 16rpx 32rpx;
}
.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>