邓平艺
5 years ago
4 changed files with 264 additions and 37 deletions
-
1common/api.js
-
6pages.json
-
222pages/canteen/classification/warehouse.vue
-
66pages/canteen/delivery/apply.vue
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<view> |
|||
<view class="head" v-if="tab_list.length"> |
|||
<uni-search-bar @confirm="search" @cancel="cancelSearch" placeholder="搜索物资" radius="90" bgColor="#f6f6f6" ></uni-search-bar> |
|||
</view> |
|||
<view class="lf-flex content" v-if="tab_list.length"> |
|||
<scroll-view :scroll-y="true" class="scroll-left" |
|||
v-if="!is_search_ing" |
|||
:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}"> |
|||
<view class="tab-item" :class="{'activa': index == current}" v-for="(item, index) in tab_list" :key="index" @click="switchTab(index)">{{ item.m_cate_name }}</view> |
|||
</scroll-view> |
|||
<scroll-view :scroll-y="true" class="scroll-right" |
|||
:style="{height: 'calc('+ windowHeight +'px - 222rpx)', width:is_search_ing?'100%':'550rpx'}"> |
|||
<view class="supplier-item" v-for="(item, index) in tab_list[current].list" :key="index"> |
|||
<label class="lf-row-between" @click="switchChecked(item)"> |
|||
<view style="height: 40rpx;">{{ item.material_name }}</view> |
|||
<u-icon name="checkmark-circle-fill" size="40" color="#11D189" v-if="item.checked"></u-icon> |
|||
</label> |
|||
</view> |
|||
<view class="loading-more"> |
|||
<lf-nocontent v-if="!tab_list[current].list.length"></lf-nocontent> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<!-- 操作按钮 --> |
|||
<view class="fixed-bottom"> |
|||
<button class="btn btn1" @click="cancel">取消</button> |
|||
<button class="btn btn2" @click="submit">确定</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
windowHeight: 0, |
|||
tab_list: [], |
|||
current: 0, // tab下标 |
|||
material_name: '', // 当前搜索值，搜索的是物资 |
|||
checked_list: {}, |
|||
is_search_ing: false, // 是否处于搜索中 |
|||
request_count: 0, // 请求次数 |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
|||
let pages = getCurrentPages(); |
|||
let prevPage = pages[pages.length - 2]; |
|||
if(!prevPage){ |
|||
let path_url = '/pages/canteen/index/index'; |
|||
this.$msg('页面异常, 即将跳转').then(result => { |
|||
this.$url(path_url, {type: 'launch'}); |
|||
}) |
|||
return; |
|||
} |
|||
this.checked_list = prevPage.$data.warehouse_list; |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
// 搜索 |
|||
search(event){ |
|||
this.is_search_ing = true; |
|||
this.material_name = event.value; |
|||
this.current = this.tab_list.length; // 搜索的数据放到最后一项 |
|||
this.tab_list.push({m_cate_name: '搜索', list: []}); |
|||
this.getData({keyword: event.value}); |
|||
}, |
|||
// 取消搜索 |
|||
cancelSearch(){ |
|||
this.is_search_ing = false; |
|||
this.material_name = ''; |
|||
this.current = 0; |
|||
this.tab_list.pop(); |
|||
}, |
|||
// 获取数据 |
|||
getData(options){ |
|||
this.request_count++; |
|||
this.$http(this.API.API_CANTEEN_MATERIALLISTBYWAREHOUSE, { |
|||
...options |
|||
}).then(res => { |
|||
if(this.request_count <= 1){ |
|||
let category = res.data.category || []; |
|||
let tab_list = category.map(item => { |
|||
item.list = []; |
|||
return item; |
|||
}) |
|||
let list = res.data.material.map(item => { |
|||
if(this.checked_list[item.material_id]){ |
|||
item.checked = true; |
|||
}else{ |
|||
item.checked = false; |
|||
} |
|||
return item; |
|||
}) |
|||
tab_list[this.current].list = list; |
|||
this.tab_list = tab_list; |
|||
}else{ |
|||
let list = res.data.material.map(item => { |
|||
if(this.checked_list[item.material_id]){ |
|||
item.checked = true; |
|||
}else{ |
|||
item.checked = false; |
|||
} |
|||
return item; |
|||
}) |
|||
this.tab_list[this.current].list = list; |
|||
} |
|||
}) |
|||
}, |
|||
// 切换tab |
|||
switchTab(current){ |
|||
this.current = current; |
|||
let item = this.tab_list[this.current]; |
|||
if(item && item.list.length <= 0){ // 已经有数据了，就不在请求了 |
|||
this.getData({cate_id: item.id}); |
|||
} |
|||
}, |
|||
// 切换每个供应商的多选状态 |
|||
switchChecked(item){ |
|||
item.checked = !item.checked; |
|||
if(this.is_search_ing){ |
|||
this.tab_list.forEach(t_item => { |
|||
t_item.list.forEach(l_item => { |
|||
if(l_item.material_id == item.material_id){ |
|||
l_item.checked = item.checked; |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
if(item.checked){ |
|||
this.checked_list[item.material_id] = item; |
|||
}else{ |
|||
delete this.checked_list[item.material_id]; |
|||
} |
|||
uni.$emit('addWarehouseList', this.checked_list); |
|||
console.log("checked_list", this.checked_list) |
|||
}, |
|||
// 全部选择完毕 |
|||
submit(){ |
|||
this.$toBack(); |
|||
}, |
|||
// 取消 |
|||
cancel(){ |
|||
this.checked_list = {}; |
|||
uni.$emit('addWarehouseList', this.checked_list); |
|||
this.$toBack(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
/deep/.uni-searchbar__box{ |
|||
border: none; |
|||
} |
|||
.head{ |
|||
padding: 14rpx 16rpx; |
|||
} |
|||
.scroll-left{ |
|||
width: 200rpx; |
|||
background-color: #F6F6F6; |
|||
.tab-item{ |
|||
height: 90rpx; |
|||
width: 100%; |
|||
text-align: center; |
|||
line-height: 90rpx; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
} |
|||
.activa{ |
|||
color: #11D189; |
|||
} |
|||
} |
|||
.scroll-right{ |
|||
width: 550rpx; |
|||
background-color: #FFFFFF; |
|||
.supplier-item{ |
|||
padding: 30rpx 32rpx 30rpx 30rpx; |
|||
width: 100%; |
|||
height: max-content; |
|||
box-sizing: border-box; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
font-size: 28rpx; |
|||
color: #222222; |
|||
} |
|||
} |
|||
.fixed-bottom{ |
|||
position: fixed; |
|||
bottom: 0rpx; |
|||
left: 0rpx; |
|||
z-index: 99; |
|||
width: 750rpx; |
|||
height: 98rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-top: 1rpx solid #E5E5E5; |
|||
background-color: #FFFFFF; |
|||
box-sizing: border-box; |
|||
padding: 0 32rpx; |
|||
.btn{ |
|||
width: 320rpx; |
|||
height: 82rpx; |
|||
border-radius: 41rpx; |
|||
margin: 0; |
|||
padding: 0; |
|||
font-size: 32rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.btn1{ |
|||
border: 2rpx solid #555555; |
|||
opacity: .5; |
|||
} |
|||
.btn2{ |
|||
background: #11D189; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue