邓平艺
5 years ago
26 changed files with 1263 additions and 329 deletions
-
2App.vue
-
14common/api.js
-
2common/http.interceptor.js
-
10common/http.js
-
4common/mixin.js
-
6common/styles/common.css
-
71common/uploadFile.js
-
129components/lf-stepbar/lf-stepbar.vue
-
3main.js
-
8pages.json
-
119pages/canteen/classification/index.vue
-
327pages/canteen/classification/material.vue
-
239pages/canteen/classification/supplier.vue
-
3pages/canteen/delivery/apply.vue
-
1pages/canteen/index/index.vue
-
2pages/canteen/login/index.vue
-
79pages/canteen/purchase/detail.vue
-
35pages/canteen/purchase/launch.vue
-
2pages/canteen/purchase/order.vue
-
179pages/supply/gonghuo/detail.vue
-
67pages/supply/gonghuo/order.vue
-
4pages/supply/index/index.vue
-
2pages/supply/login/index.vue
-
85pages/supply/offer/index.vue
-
90pages/supply/order/detail.vue
-
91pages/supply/order/index.vue
@ -0,0 +1,71 @@ |
|||||
|
/* |
||||
|
*上传文件 |
||||
|
*@param - filePath :图片的本地资源路径 |
||||
|
*@param - dir:表示要传到哪个目录下 |
||||
|
*@param - successc:成功回调 |
||||
|
*@param - failc:失败回调 |
||||
|
*/ |
||||
|
const uploadFile = (filePath, successc, failc, that) => { |
||||
|
if (!filePath || filePath.length < 9) { |
||||
|
uni.showModal({ |
||||
|
title: '图片错误', |
||||
|
content: '请重试', |
||||
|
showCancel: false, |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
// 上传的服务器地址
|
||||
|
let url = that.API.DEVURL; |
||||
|
if (that.API.DEV == 'prod') { |
||||
|
url = that.API.PRODURL; |
||||
|
} |
||||
|
const url_a = that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER; |
||||
|
|
||||
|
// 上传图片的目录
|
||||
|
var nowTime = formatTime(new Date()); |
||||
|
// const dir = 'wxmini/images/' + nowTime + '/';
|
||||
|
const dir = 'h5/images/' + nowTime + '/'; |
||||
|
// 获取上传的文件类型 fileType
|
||||
|
let fileTypeIndex = filePath.lastIndexOf('.'); |
||||
|
let fileType = filePath.substring(fileTypeIndex); |
||||
|
uni.uploadFile({ |
||||
|
url: url + url_a,//开发者服务器 url
|
||||
|
filePath: filePath,//要上传文件资源的路径
|
||||
|
name: 'image', |
||||
|
header: { |
||||
|
token: uni.getStorageSync('supply_token') // 目前写死供应端
|
||||
|
}, |
||||
|
success: function (res) { |
||||
|
console.log('上传文件...', res) |
||||
|
if (res.statusCode != 200 || !res.data) { |
||||
|
failc(new Error('上传错误:' + JSON.stringify(res))) |
||||
|
return; |
||||
|
} |
||||
|
let res_data = JSON.parse(res.data); |
||||
|
successc && successc(res_data.data); |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
failc(err); |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取当前日期(年-月-日)，并不足十位补零
|
||||
|
function formatTime(date) { |
||||
|
const year = date.getFullYear() |
||||
|
const month = date.getMonth() + 1 |
||||
|
const day = date.getDate() |
||||
|
const hour = date.getHours() |
||||
|
const minute = date.getMinutes() |
||||
|
const second = date.getSeconds() |
||||
|
return [year, month, day].map(formatNumber).join('-') |
||||
|
// + ' ' + [hour, minute, second].map(formatNumber).join(':')
|
||||
|
} |
||||
|
const formatNumber = n => { |
||||
|
n = n.toString() |
||||
|
return n[1] ? n : '0' + n |
||||
|
} |
||||
|
|
||||
|
module.exports = { |
||||
|
uploadFile |
||||
|
}; |
||||
@ -0,0 +1,129 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view v-for="(item, index) in list" :key="index" |
||||
|
class="list" |
||||
|
:style="index == list.length - 1 ? 'padding-bottom: 60rpx' : ''"> |
||||
|
<view class="left"> |
||||
|
<view class="up-line" :class="{'remove-line': index == 0}" |
||||
|
:style="{'border-color': themeColor, 'background-color': themeColor}"></view> |
||||
|
<view class="icon" :style="{ |
||||
|
'background-color': index == list.length - 1 && !item.isFinished ? themeColor : '#fff', |
||||
|
'border-color': themeColor, |
||||
|
'color': themeColor}"> |
||||
|
<u-icon name="arrow-down" color="#fff" v-if="index == list.length - 1 && !item.isFinished"></u-icon> |
||||
|
<u-icon name="checkmark" v-else></u-icon> |
||||
|
</view> |
||||
|
<view class="down-line" :class="{ |
||||
|
'dotted-line': index == list.length - 1 && !item.isFinished, |
||||
|
'remove-line': index == list.length - 1 && item.isFinished |
||||
|
}" :style="{'border-color': themeColor, 'background-color': themeColor}"> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="desc"> |
||||
|
<text class="lf-line-2">{{ item.action }}</text> |
||||
|
<text class="date">{{ item.created_at }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'lf-step-bar', |
||||
|
props: { |
||||
|
themeColor: { |
||||
|
type: String, |
||||
|
default: '#1833F2' |
||||
|
}, |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default(){ |
||||
|
return [{ |
||||
|
desc: '订单创建', |
||||
|
date: '2021-07-23 13:23:52', |
||||
|
isFinished: false |
||||
|
},{ |
||||
|
desc: '订单发货', |
||||
|
date: '2021-07-23 13:23:52', |
||||
|
isFinished: false |
||||
|
},{ |
||||
|
desc: '订单发货', |
||||
|
date: '2021-07-23 13:23:52', |
||||
|
isFinished: false |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
width: 100%; |
||||
|
height: max-content; |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
.list{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
min-height: 110rpx; |
||||
|
.left{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-content: center; |
||||
|
align-items: center; |
||||
|
margin-right: 15rpx; |
||||
|
.up-line,.down-line{ |
||||
|
height: 40rpx; |
||||
|
width: 2rpx; |
||||
|
border: 1rpx solid #1833F2; |
||||
|
background-color: #1833F2; |
||||
|
position: relative; |
||||
|
} |
||||
|
.remove-line{ |
||||
|
border: none !important; |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
.dotted-line::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: -1rpx; |
||||
|
bottom: -40rpx; |
||||
|
height: 40rpx; |
||||
|
width: 0rpx; |
||||
|
border: 1rpx dashed #999999; |
||||
|
} |
||||
|
.icon{ |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
box-sizing: border-box; |
||||
|
border: 2rpx solid #1833F2; |
||||
|
color: #1833F2; |
||||
|
border-radius: 50%; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-content: center; |
||||
|
} |
||||
|
} |
||||
|
.right{ |
||||
|
flex: auto; |
||||
|
.desc{ |
||||
|
position: relative; |
||||
|
font-size: 28rpx; |
||||
|
color: #222222; |
||||
|
.date{ |
||||
|
position: absolute; |
||||
|
bottom: -36rpx; |
||||
|
left: 0; |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,119 +0,0 @@ |
|||||
<template> |
|
||||
<view> |
|
||||
<view class="head"> |
|
||||
<uni-search-bar @confirm="search" placeholder="搜索供应商" radius="90" bgColor="#f6f6f6" ></uni-search-bar> |
|
||||
</view> |
|
||||
<view class="lf-flex content"> |
|
||||
<scroll-view :scroll-y="true" class="scroll-left" |
|
||||
:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}"> |
|
||||
<view class="tab-item" :class="{'activa': index == 0}" v-for="(item, index) in 3" :key="index">{{ '分类'+ (item + 1) }}</view> |
|
||||
</scroll-view> |
|
||||
<scroll-view :scroll-y="true" class="scroll-right" |
|
||||
:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}"> |
|
||||
<view class="supplier-item" v-for="(item, index) in 20" :key="index"> |
|
||||
<label class="lf-row-between"> |
|
||||
<view>供应商</view> |
|
||||
<u-icon name="checkmark-circle-fill" size="40" color="#11D189"></u-icon> |
|
||||
</label> |
|
||||
</view> |
|
||||
<view class="loading-more"> |
|
||||
<text class="loading-more-text">正在加载中...</text> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
<!-- 操作按钮 --> |
|
||||
<view class="fixed-bottom"> |
|
||||
<button class="btn btn1">取消</button> |
|
||||
<button class="btn btn2">确定</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data(){ |
|
||||
return { |
|
||||
windowHeight: 0 |
|
||||
} |
|
||||
}, |
|
||||
onLoad(){ |
|
||||
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
|
||||
}, |
|
||||
methods: { |
|
||||
search(event){ |
|
||||
console.log("search.event", event); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</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> |
|
||||
@ -0,0 +1,327 @@ |
|||||
|
<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="prev">上一步</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(){ |
||||
|
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
||||
|
|
||||
|
let pages = getCurrentPages(); |
||||
|
let prevPage = pages[pages.length - 3]; // 上上一页 |
||||
|
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.material_list; |
||||
|
|
||||
|
/* |
||||
|
this.checked_list = { |
||||
|
"1": { |
||||
|
address: "广西南宁市青秀区青秀万达店", |
||||
|
admin_uid: 1, |
||||
|
area_id: 2165, |
||||
|
checked: true, |
||||
|
city_id: 2163, |
||||
|
corporate_account: "6214456799861234", |
||||
|
corporate_account_name: "刘淑怡粮油店", |
||||
|
corporate_bank: "招商银行", |
||||
|
corporate_bank_sub: "青秀区支行", |
||||
|
corporate_name: "法人", |
||||
|
corporate_phone: "15699896658", |
||||
|
created_at: "2021-07-17 11:34:50", |
||||
|
created_uid: 1, |
||||
|
ctl_man: "刘淑怡", |
||||
|
ctl_phone: "13397706896", |
||||
|
deleted_at: null, |
||||
|
deleted_uid: 0, |
||||
|
id: 1, |
||||
|
license_number: "11559896646", |
||||
|
license_pic: "admin_images/5bbbc1e4f96bc5566c43bb006d36cc37.jpg", |
||||
|
logo: "admin_images/83e16f0d0c9dd01f1bfd62ddf150607e.jpeg", |
||||
|
material_list: {}, |
||||
|
private_account: "", |
||||
|
private_account_name: "", |
||||
|
private_bank: "", |
||||
|
private_bank_sub: "", |
||||
|
province_id: 2162, |
||||
|
qualification_pic: "", |
||||
|
remark: "测试备注，我只改个备注", |
||||
|
s_cate_id: 1, |
||||
|
state: "启用", |
||||
|
subject_name: "主体名称", |
||||
|
subject_type: "公司", |
||||
|
supplier_name: "供应商001", |
||||
|
updated_at: "2021-07-17 16:25:58", |
||||
|
updated_uid: 1 |
||||
|
}, |
||||
|
"2": { |
||||
|
address: "F座6楼", |
||||
|
admin_uid: 3, |
||||
|
area_id: 2165, |
||||
|
checked: true, |
||||
|
city_id: 2163, |
||||
|
corporate_account: "", |
||||
|
corporate_account_name: "", |
||||
|
corporate_bank: "", |
||||
|
corporate_bank_sub: "", |
||||
|
corporate_name: "", |
||||
|
corporate_phone: "", |
||||
|
created_at: "2021-07-17 20:28:17", |
||||
|
created_uid: 1, |
||||
|
ctl_man: "芳芳", |
||||
|
ctl_phone: "13397706896", |
||||
|
deleted_at: null, |
||||
|
deleted_uid: 0, |
||||
|
id: 2, |
||||
|
license_number: "", |
||||
|
license_pic: "", |
||||
|
logo: "admin_images/skyshareimg.jpeg", |
||||
|
material_list: {}, |
||||
|
private_account: "", |
||||
|
private_account_name: "", |
||||
|
private_bank: "", |
||||
|
private_bank_sub: "", |
||||
|
province_id: 2162, |
||||
|
qualification_pic: "", |
||||
|
remark: "", |
||||
|
s_cate_id: 2, |
||||
|
state: "启用", |
||||
|
subject_name: "", |
||||
|
subject_type: "公司", |
||||
|
supplier_name: "供应商002", |
||||
|
updated_at: "2021-07-27 12:00:01", |
||||
|
updated_uid: 1 |
||||
|
} |
||||
|
}; |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
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){ |
||||
|
let supplier_ids = Object.keys(this.checked_list); |
||||
|
this.request_count++; |
||||
|
this.$http(this.API.API_CANTEEN_MATERIALLIST, { |
||||
|
supplier_ids: supplier_ids, // 供应商id |
||||
|
...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.supplier_id]){ |
||||
|
item.checked = false; |
||||
|
if(this.checked_list[item.supplier_id].material_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.supplier_id]){ |
||||
|
item.checked = false; |
||||
|
if(this.checked_list[item.supplier_id].material_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方案 |
||||
|
// let tabItem = this.tab_list[this.current]; |
||||
|
// let item = tabItem.list[index]; |
||||
|
// item.checked = !item.checked; |
||||
|
// this.tab_list[this.current] = tabItem; |
||||
|
// 新方案 |
||||
|
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.supplier_id].material_list[item.material_id] = item; |
||||
|
}else{ |
||||
|
delete this.checked_list[item.supplier_id].material_list[item.material_id]; |
||||
|
} |
||||
|
uni.$emit('addMaterialList', this.checked_list); |
||||
|
console.log("checked_list", this.checked_list) |
||||
|
}, |
||||
|
// 全部选择完毕 |
||||
|
submit(){ |
||||
|
console.log("sssss",this.tab_list); |
||||
|
console.log("kkkk", this.checked_list); |
||||
|
|
||||
|
// todo关闭所有页面跳转 |
||||
|
// this.$url('/pages/canteen/purchase/launch', {type: 'launch'}) |
||||
|
// this.$toBack(2); // 跳回前两个页面 |
||||
|
}, |
||||
|
// 上一步 |
||||
|
prev(){ |
||||
|
let pages = getCurrentPages(); |
||||
|
let prevPage = pages[pages.length - 2]; // 上一页 |
||||
|
this.checked_list = prevPage.$data.checked_list; |
||||
|
uni.$emit('addMaterialList', 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> |
||||
@ -0,0 +1,239 @@ |
|||||
|
<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.c_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.supplier_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="next">下一步</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
let app = getApp(); |
||||
|
|
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
windowHeight: 0, |
||||
|
tab_list: [], |
||||
|
checked_list: {}, |
||||
|
current: 0, // tab下标 |
||||
|
supplier_name: '', // 当前搜索值，搜索的是供应商 |
||||
|
is_search_ing: false, // 是否处于搜索中 |
||||
|
request_count: 0, // 请求次数 |
||||
|
show_count: 0, // 页面显示次数 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
||||
|
}, |
||||
|
onShow(){ |
||||
|
this.show_count++; |
||||
|
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.material_list; |
||||
|
|
||||
|
if(this.show_count <= 1){ |
||||
|
this.getData(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 搜索 |
||||
|
search(event){ |
||||
|
this.is_search_ing = true; |
||||
|
this.supplier_name = event.value; |
||||
|
this.current = this.tab_list.length; // 搜索的数据放到最后一项 |
||||
|
this.tab_list.push({c_cate_name: '搜索', list: []}); |
||||
|
this.getData({supplier_name: event.value}); |
||||
|
}, |
||||
|
// 取消搜索 |
||||
|
cancelSearch(){ |
||||
|
this.is_search_ing = false; |
||||
|
this.supplier_name = ''; |
||||
|
this.current = 0; |
||||
|
this.tab_list.pop(); |
||||
|
}, |
||||
|
// 获取数据 |
||||
|
getData(options){ |
||||
|
// let requestData = { |
||||
|
// canteen_id: 6, // todo，准备改成不需要传，应该在登录接口时一并返回，要不然其他页面获取不到 |
||||
|
// ...options |
||||
|
// } |
||||
|
this.request_count++; |
||||
|
|
||||
|
this.$http(this.API.API_CANTEEN_SUPPLIERLIST, { |
||||
|
...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.list.map(item => { |
||||
|
if(this.checked_list[item.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.list.map(item => { |
||||
|
if(this.checked_list[item.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({s_cate_id: item.id}); |
||||
|
} |
||||
|
}, |
||||
|
// 切换每个供应商的多选状态 |
||||
|
switchChecked(item){ |
||||
|
item.checked = !item.checked; |
||||
|
// 当前是否存于搜搜中，如果是，需要做额外的处理[tab中的list也要对应的移除] |
||||
|
if(this.is_search_ing){ |
||||
|
this.tab_list.forEach(t_item => { |
||||
|
t_item.list.forEach(l_item => { |
||||
|
if(l_item.id == item.id){ |
||||
|
l_item.checked = item.checked; |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
if(item.checked){ |
||||
|
item.material_list = {}; // 物资列表 |
||||
|
this.checked_list[item.id] = item; |
||||
|
}else{ |
||||
|
delete this.checked_list[item.id]; |
||||
|
} |
||||
|
uni.$emit('addMaterialList', this.checked_list); |
||||
|
console.log("checked_list", this.checked_list) |
||||
|
}, |
||||
|
// 取消 |
||||
|
cancel(){ |
||||
|
this.checked_list = {}; |
||||
|
uni.$emit('addMaterialList', this.checked_list); |
||||
|
this.$toBack(); |
||||
|
}, |
||||
|
// 下一步 |
||||
|
next(){ |
||||
|
this.$url('/pages/canteen/classification/material'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</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