311 lines
6.9 KiB
Vue
311 lines
6.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="nav-bar">
|
|
<uni-icons style="margin-left: 3%;" @click="clickLeft" type="left" size="30"></uni-icons>
|
|
<h4 style="font-weight: normal;">领料申请</h4>
|
|
<uni-badge style="margin-right: 3%;" size="small" :text="badgeNum" absolute="leftTop">
|
|
<uni-icons @click="clickOrderCart" type="cart" size="30"></uni-icons>
|
|
</uni-badge>
|
|
</view>
|
|
<view class="search-bar">
|
|
<uni-easyinput suffixIcon="search" v-model="searchVal" placeholder="请输入商品名称" @iconClick="searchClick"></uni-easyinput>
|
|
</view>
|
|
<view class="switch-bar">
|
|
<view
|
|
:class="[{ active: switchStatus == 0 }]"
|
|
@click="switchUpper(1, 0, 0)"
|
|
>
|
|
全部
|
|
</view>
|
|
<view
|
|
:class="[{ active: switchStatus == 1 }]"
|
|
@click="switchUpper(1, 0, 1)"
|
|
>
|
|
施工机具类
|
|
</view>
|
|
<view
|
|
:class="[{ active: switchStatus == 2 }]"
|
|
@click="switchUpper(1, 0, 2)"
|
|
>
|
|
安全工器具类
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="sliders"
|
|
v-show="subList.length != 0"
|
|
>
|
|
<view
|
|
v-for="(item, index) in subList"
|
|
:key="index"
|
|
:class="[{ active: lowerStatus == item.id }]"
|
|
@click="switchLower(item.id, item.level)"
|
|
>
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
<view class="items">
|
|
<view
|
|
class="single-item"
|
|
v-for="(item, index) in itemList"
|
|
:key="index"
|
|
@click="jumpDeviceDetail(item.typeId, item.typeName)"
|
|
>
|
|
<view class="img">
|
|
<image :src="
|
|
item.photoUrl == null || item.photoUrl == ''
|
|
?
|
|
photoUrl + item.childPhoto
|
|
:
|
|
photoUrl + item.photoUrl
|
|
"
|
|
mode=""></image>
|
|
</view>
|
|
<view class="name">
|
|
{{ item.typeName }}
|
|
</view>
|
|
<!-- <view class="price">
|
|
<span style="font-weight: bold; color: #F29907;">￥</span>{{ item.leasePrice }}
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchVal: '',
|
|
switchStatus: 0,
|
|
lowerStatus: 0,
|
|
subList: [],
|
|
itemList: [],
|
|
badgeNum: '',
|
|
photoUrl: ''
|
|
}
|
|
},
|
|
methods: {
|
|
searchClick () {
|
|
console.log(this.searchVal, this.switchStatus, this.lowerStatus);
|
|
this.showDeviceDetail(2, this.lowerStatus, this.switchStatus, this.searchVal)
|
|
},
|
|
clickLeft () {
|
|
uni.navigateBack()
|
|
},
|
|
clickOrderCart () {
|
|
uni.navigateTo({
|
|
url: '/pages/orderCart/orderCart'
|
|
})
|
|
},
|
|
switchUpper (level, parentId, type) {
|
|
this.switchStatus = type
|
|
this.selectType(level, parentId, type)
|
|
},
|
|
switchLower (id, level) {
|
|
this.lowerStatus = id
|
|
console.log(level, id, this.switchStatus);
|
|
this.showDeviceDetail(level, id, this.switchStatus, '')
|
|
},
|
|
|
|
jumpDeviceDetail (id, name) {
|
|
uni.navigateTo({
|
|
url: `/pages/deviceDetail/deviceDetail?id=${id}&name=${name}`
|
|
})
|
|
},
|
|
selectType (level, parentId, type) {
|
|
let that = this
|
|
that.subList = []
|
|
that.$api.fetchMaterial.fetchMaterialList({
|
|
level, parentId, type
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.data.code == 200) {
|
|
for (let i = 0; i < res.data.data.length; i++) {
|
|
switch (type) {
|
|
case 0:
|
|
for (let k = 0; k < res.data.data[i].children.length; k++) {
|
|
that.subList.push(res.data.data[i].children[k])
|
|
}
|
|
break;
|
|
case 1:
|
|
if (res.data.data[i].id == '116' || res.data.data[i].id == '567') {
|
|
for (let k = 0; k < res.data.data[i].children.length; k++) {
|
|
that.subList.push(res.data.data[i].children[k])
|
|
}
|
|
}
|
|
break;
|
|
case 2:
|
|
if (res.data.data[i].id != '116' && res.data.data[i].id != '567') {
|
|
for (let k = 0; k < res.data.data[i].children.length; k++) {
|
|
that.subList.push(res.data.data[i].children[k])
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
console.log(that.subList);
|
|
console.log(that.subList[0].level, that.subList[0].parentId);
|
|
that.lowerStatus = that.subList[0].id
|
|
that.showDeviceDetail(that.subList[0].level, that.subList[0].id, that.switchStatus)
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
showDeviceDetail (level, parentId, type, keyword) {
|
|
let that = this
|
|
that.itemList = []
|
|
that.$api.fetchMaterial.fetchMaterialList({
|
|
level,
|
|
parentId,
|
|
type,
|
|
keyword
|
|
}).then(res => {
|
|
if (res.data.code == 200) {
|
|
console.log(res);
|
|
that.itemList = res.data.data
|
|
console.log(that.itemList);
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
that.photoUrl = that.$api.url
|
|
/* if (uni.getStorageSync('goodList').length == 0 || !uni.getStorageSync('goodList')) {
|
|
uni.setStorageSync('goodList', [])
|
|
}
|
|
console.log(uni.getStorageSync('goodList')); */
|
|
|
|
this.selectType(1, 0, 0)
|
|
that.switchStatus = 0
|
|
that.lowerStatus = 0
|
|
// 初始化查询全部商品
|
|
that.itemList = []
|
|
// 获取购物车商品数量红点
|
|
that.$api.fetchMaterial.getCartDetail().then(res => {
|
|
console.log(res);
|
|
if (res.data.code == 200) {
|
|
that.badgeNum = res.data.data.length
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav-bar{
|
|
width: 100%;
|
|
height: 5vh;
|
|
padding-top: var(--status-bar-height);
|
|
background-color: #f8f8f8;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.search-bar{
|
|
width: 95%;
|
|
margin: 30rpx auto;
|
|
}
|
|
.switch-bar{
|
|
width: 90%;
|
|
margin: 30rpx auto;
|
|
display: flex;
|
|
font-size: 14px;
|
|
view{
|
|
margin-right: 30rpx;
|
|
}
|
|
.active{
|
|
border-bottom: 2px solid #339FF9;
|
|
color: #339FF9;
|
|
}
|
|
}
|
|
.sliders{
|
|
width: 95%;
|
|
margin: 30rpx auto;
|
|
display: -webkit-box;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
view{
|
|
box-sizing: border-box;
|
|
padding: 8rpx 20rpx;
|
|
display: inline-block;
|
|
}
|
|
.active{
|
|
color: #339FF9;
|
|
}
|
|
}
|
|
.items{
|
|
width: 95%;
|
|
margin: 30rpx auto;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
border-radius: 15rpx;
|
|
background-color: #FDF9F9;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
.single-item{
|
|
width: 48%;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
margin-bottom: 15rpx;
|
|
.img{
|
|
width: 100%;
|
|
height: 15vh;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.name{
|
|
width: 95%;
|
|
margin: 10rpx auto;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.price{
|
|
width: 100%;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.popup{
|
|
width: 80vw;
|
|
height: 50vh;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
.pop-top{
|
|
width: 100%;
|
|
height: 5vh;
|
|
background-color: #F5F5F5;
|
|
box-sizing: border-box;
|
|
padding: 0 25rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.select-area{
|
|
width: 85%;
|
|
margin: 40rpx auto;
|
|
.submit-btn{
|
|
background-color: #409EFF;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|