邓平艺
5 years ago
4 changed files with 264 additions and 37 deletions
-
3common/api.js
-
6pages.json
-
222pages/canteen/classification/warehouse.vue
-
70pages/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