Leadfyy.co
/
uniapp-canteen
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增] 食堂端确认收货页面增加修改供应商

master
邓平艺 5 years ago
parent
41c60de1fb
commit
852bd98974
1 changed files with 163 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 161
      pages/canteen/purchase/receipt.vue

161
pages/canteen/purchase/receipt.vue
View File

@ -1,7 +1,10 @@
<template>
<view class="content">
<view class="card" v-for="(item, index) in list" :key="index">
<view class="lf-row-between">
<view class="lf-color-black lf-font-bold">{{ item.title }}</view>
<view style="color: #11D189;" @click="showEdit">修改</view>
</view>
<view class="lf-row-between lf-m-t-30">
<view>订购数</view>
<view class="lf-color-black">{{ item.orderNum }}</view>
@ -21,8 +24,46 @@
</view>
</view>
</view>
<view style="height: 120rpx;"></view>
<view class="fixed-bottom">
<button class="btn" @click="comfirm">确认收货</button>
</view>
<!-- 弹出层-确认收货修改 TODO每个都应该是动态 -->
<u-popup v-model="is_show_edit" mode="bottom" border-radius="20">
<view class="popup-box">
<view class="popup-content">
<view>
<view class="popup-item" hover-class="lf-opacity" :style="currentObj(1)?'border-bottom:none':''" @click="switchItem(1)">
<text class="lf-font-bold">选择供应商</text>
<u-icon name="arrow-up" color="#777777" v-if="currentObj(1)"></u-icon>
<u-icon name="arrow-down" color="#777777" v-else></u-icon>
</view>
<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(1)?'max-height:360rpx':'max-height:0rpx'">
<view class="lf-row-between scroll-item" v-for="(item, index) in supplier_list" :key="index" @click="checkItem(index, 'supplier_list')">
<view>{{ item.name }}</view>
<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
</view>
</scroll-view>
</view>
<view>
<view class="popup-item" hover-class="lf-opacity" :style="currentObj(2)?'border-bottom:none':''" @click="switchItem(2)">
<text class="lf-font-bold">选择物资</text>
<u-icon name="arrow-up" color="#777777" v-if="currentObj(2)"></u-icon>
<u-icon name="arrow-down" color="#777777" v-else></u-icon>
</view>
<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(2)?'max-height:360rpx':'max-height:0rpx'">
<view class="lf-row-between scroll-item" v-for="(item, index) in material_list" :key="index" @click="checkItem(index, 'material_list')">
<view>{{ item.name }}</view>
<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
</view>
</scroll-view>
</view>
</view>
<u-button class="popup-btn" @click="comfirmEdit">确认修改</u-button>
</view>
</u-popup>
</view>
</template>
<script>
@ -44,9 +85,36 @@
orderNum: '1000吨',
realNum: '',
receiptsNum: ''
}],
is_show_edit: false,
current_show: {
type: 1,
open: false
},
supplier_list: [{
name: '南开大学',
checked: false
},{
name: '华侨大学',
checked: false
}],
material_list: [{
name: '哈哈哈哈',
checked: false
},{
name: '嘿嘿嘿',
checked: false
}]
}
},
computed: {
currentObj(){
let current_show = this.current_show;
return function(num){
return current_show.type == num && current_show.open
}
}
},
onLoad(){
},
@ -61,6 +129,32 @@
console.log("comfirm", this.list);
this.$msg('确认收货成功！');
}, 100);
},
switchItem(current){
let current_show = this.current_show;
if(current_show.type != current){
current_show.open = false;
}
current_show.type = current;
current_show.open = !current_show.open;
this.current_show = current_show;
},
checkItem(index, name){
this[name].forEach(item => item.checked = false);
this[name][index].checked = true;
},
// 确认修改
comfirmEdit(){
this.$msg('修改成功！');
this.is_show_edit = false;
},
// 显示修改弹出层
showEdit(){
this.current_show = {
type: 1,
open: false
};
this.is_show_edit = true;
}
}
}
@ -97,14 +191,75 @@
color: #222222;
}
}
.fixed-bottom{
position: fixed;
bottom: 0rpx;
left: 0rpx;
z-index: 99;
width: 750rpx;
height: 98rpx;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1rpx solid #E5E5E5;
background-color: #FFFFFF;
box-sizing: border-box;
padding: 0 32rpx;
.btn{
width: 686rpx;
width: 212rpx;
background-color: #11D189;
margin-top: 30rpx;
margin-bottom: 30rpx;
font-size: 32rpx;
line-height: 82rpx;
margin: 0;
height: 82rpx;
border-radius: 40rpx;
color: #FFFFFF;
}
}
/deep/.placeholder-class{
color: #777777;
}
// 去掉u-button 外边框线
/deep/.u-hairline-border::after{
border: none;
}
.popup-box{
width: 100%;
min-height: 484rpx;
max-height: 64vh;
padding: 10rpx 32rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.popup-content{
min-height: 332rpx;
// max-height: 54vh;
margin-bottom: 40rpx;
.popup-item{
padding: 30rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid #E5E5E5;
display: flex;
justify-content: space-between;
font-size: 28rpx;
color: #222222;
}
.scroll-box{
transition: all .5s;
.scroll-item{
padding: 30rpx 0;
}
}
}
.popup-btn{
width: 100%;
height: 82rpx;
background: #11D189;
border-radius: 10rpx;
font-size: 32rpx;
color: #FFFFFF;
margin-bottom: 30rpx;
}
}
</style>
Write Preview
Loading…
Cancel
Save