xiamen-sb-uniapp/pages/search/spare-search.vue

<template>
    <view class="u-wrap">
        <view class="fixed-box">
            <!-- 搜索 -->
            <view class="d-flex a-center mt-3 search ">
                <view class="pl-3 flex1">
                    <u-input v-model="keyword" placeholder="名称/规格/原厂编号" :clearable="false" />
                </view>
                <view @click="search" class="main-linear d-flex a-center text-color-white f-size-26 j-center search-txt">
                    搜索</view>
            </view>
            <!-- 筛选 -->
            <view class="d-flex j-end a-center flex1 my3 screen-box">
                <view class="ml-3  line1" style="" @click="handleScreen">
                    <text style="color: #535B67;">类型筛选</text>
                    <image src="/static/images/select.png" class="ml-1 w20"></image>
                </view>
            </view>
        </view>

        <view class="page-view">
            <view class="class-item">
                <view class="item-container">
                    <!-- 列表 -->
                    <view @click="handleBack(item)" class="d-flex list-box border-radius-3 p3 mb-2" v-for="item in listData" :key="item.id">
                        <view class="left d-flex j-center a-center mr-2">
                            <image :src="item.image" class="bg-color-light img"></image>
                        </view>
                        <view class="right d-flex f-column">
                            <view class="f-size-30 f-weight-6 one-ellipsis">{{ item.spareName }}</view>
                            <view class="f-size-22 text-color-9 my2 one-ellipsis">
                                {{ item.no }} / {{ item.ggxh }} / {{ item.num }}
                            </view>
                            <view class="f-size-20 ">
                                <text class="main-color-text mr-1 list-box-item">{{ selectTypeName }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 弹出层 -->
        <u-popup v-model="show" mode="right" width="600rpx" safe-area-inset-bottom>
            <view class="mx2 py3 popup" style="padding-bottom: 120rpx;">
                <view class="wrap">
                    <view class="f-size-30 f-weight-6 py3">一级类别</view>
                    <view class="d-flex f-wrap  a-center box">
                        <block v-for="item in parentTypeList" :key="item.id">
                            <view class="col3">
                                <view
                                    class="d-flex j-center a-center border-radius-1 mb-2 py1 item f-size-22"
                                    @click="handleSelect(item)"
                                    :class="active == item.id?&quot;item_s&quot;:&quot;&quot;">{{ item.name }}
                                </view>
                            </view>
                        </block>
                    </view>
                </view>

                <view class="wrap">
                    <view class="f-size-30 f-weight-6 py3">二级类别</view>
                    <view class="d-flex f-wrap  a-center box">
                        <block v-for="item in middleTypeList" :key="item.id">
                            <view class="col3">
                                <view
                                    class="d-flex j-center a-center border-radius-1 mb-2 py1 item f-size-22"
                                    @click="handleSelectTwo(item)"
                                    :class="activeTwo == item.id?&quot;item_s&quot;:&quot;&quot;">
                                    {{ item.name }}</view>
                            </view>
                        </block>
                    </view>
                </view>
                <view class="wrap">
                    <view v-if="childTypeList.length > 0" class="f-size-30 f-weight-6 py3">三级类别</view>
                    <view class="d-flex f-wrap  a-center box">
                        <block v-for="item in childTypeList" :key="item.id">
                            <view class="col3">
                                <view
                                    class="d-flex j-center a-center border-radius-1 mb-2 py1 item f-size-22"
                                    @click="handleSelectThree(item)"
                                    :class="activeThree == item.id?&quot;item_s&quot;:&quot;&quot;">
                                    {{ item.name }}</view>
                            </view>
                        </block>
                    </view>
                </view>
                <!-- 按钮 -->
                <view class="d-flex j-around a-center p-fixed left0 right0 bottom0 bg-color-white py2 button-box">
                    <view @click="resetSelect()" class="main-color-text d-flex a-center j-center f-size-30" style="">重置</view>
                    <view @click="search()"class="main-linear text-color-white d-flex a-center j-center f-size-30">确认</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            selectTypeName: '',
            listData: [],
            status: 'loadmore',
            page: 1,
            active: 0,
            activeTwo: 0,
            activeThree: 0,
            limit: 20,
            parentTypeId: '',
            middleTypeId: '',
            childTypeId: '',
            parentTypeName: '',
            middleTypeName: '',
            childTypeName: '',
            typeId: '',
            spare_default: '/static/images/spare_default.png',
            parentTypeList: [],
            middleTypeList: [],
            childTypeList: [],
            storeId: null,
            spareId: null,
            spareName: null,
            formName: null,
            price: 0,
            num: 0,
            loadMore: true,
            show: false
        }
    },
    onLoad(option) {
        this.storeId = JSON.parse(decodeURIComponent(option.storeId))
        this.formName = JSON.parse(decodeURIComponent(option.formName))
        if (this.parentTypeList.length == 0) {
            this.$Http.querySpareType({
                filter: 1
            }).then(res => {
                this.parentTypeList = res.data
                this.parentTypeId = this.parentTypeList[0].id
                this.selectTypeName = this.parentTypeList[0].name
                this.initData()
            })
        }
    },
    onPullDownRefresh() {
        // 请求结束取消刷新
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.loadMore) {
            this.page++;
            this.initData();
        }
    },
    methods: {
        /* handleSelect(item) {
				item.selected = !item.selected
			}, */
        handleScreen() {
            this.show = true
        },
        initData() {
            const that = this
            that.status = 'loading'
            this.$Http
                .getSpareStorePage({
                    pageNum: that.page,
                    pageSize: that.limit,
                    num: that.num,
                    storeId: that.storeId,
                    parentTypeId: that.parentTypeId,
                    middleTypeId: that.middleTypeId,
                    childTypeId: that.childTypeId,
                    keyword: that.keyword
                })
                .then((res) => {
                    const data = res.data.rows;
                    if (data && data.length > 0 && data.length < that.limit) {
                        that.status = 'nomore';
                        that.loadMore = false;
                    } else if (data.length == that.limit) {
                        that.status = 'loadmore';
                    } else {
                        that.status = 'nomore';
                    }
                    that.listData = data;
                    that.listData.forEach(item => {
                        item.image = (item.image == null ? that.spare_default : item.image)
                    })
                })
        },
        handleSelect(item) {
            this.active = item.id
            this.parentTypeId = item.id
            this.parentTypeName = item.name
            this.selectTypeName = this.parentTypeName
            this.$Http.querySpareType({
                filter: 2,
                parentId: item.id,
                dataScope: {
                    sortBy: 'desc',
                    sortName: 'name'
                }
            }).then(res => {
                this.middleTypeList = res.data
                this.middleTypeId = null
                this.activeTwo = 0
                this.childTypeList = []
            })
        },
        handleSelectTwo(item) {
            this.activeTwo = item.id
            this.middleTypeId = item.id
            this.middleTypeName = item.name
            this.selectTypeName = this.middleTypeName
            this.$Http.querySpareType({
                filter: 2,
                parentId: item.id,
                dataScope: {
                    sortBy: 'desc',
                    sortName: 'name'
                }
            }).then(res => {
                this.childTypeList = res.data
            })
        },
        handleSelectThree(item) {
            this.activeThree = item.id
            this.childTypeId = item.id
            this.childTypeName = item.name
            this.selectTypeName = this.childTypeName
        },
        search() {
            this.page = 1;
            this.show = false
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        resetSelect() {
            this.parentTypeId = ''
            this.middleTypeId = ''
            this.childTypeId = ''
            this.parentTypeName = ''
            this.middleTypeName = ''
            this.childTypeName = ''
            this.active = 0
            this.activeTwo = 0
            this.activeThree = 0
        },
        handleBack(item) {
            const that = this;
            uni.showModal({
                title: '提示',
                content: '确认选择？',
                success: function (res) {
                    if (res.confirm) {
                        that.spareId = item.spareId
                        that.price = item.price
                        that.spareName = item.spareName + '--' + item.ggxh + '--' + item.num
                        const pages = getCurrentPages();
                        const prevPage = pages[pages.length - 2];
                        console.log('prevPage: ' + prevPage)
                        prevPage.backSpareId = that.spareId
                        prevPage.backSpareName = that.spareName
                        prevPage.backFormName = that.formName
                        prevPage.backPrice = that.price
                        uni.navigateBack(1)
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
	.fixed-box {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 0 16px;
		z-index: 1000;
	}

	.u-wrap {
		.list-box {
			box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, .2);
			width: 100%;

			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			&-item {
				padding: 2rpx 15rpx;
				border-radius: 10rpx;
				background-color: #FFEAE5;
				color: #FA5445;
			}
		}

		.search {
			border-radius: 50rpx;
			height: 70rpx;
			width: 100%;
			border: 1px solid #0082ff;

			&-txt {
				height: 70rpx;
				border-radius: 50rpx;
				width: 120rpx;
			}
		}

		.screen-box {
			.line1 {
				background-color: #F2F3F4;
				padding: 3rpx 20rpx;
				border-radius: 10rpx;
			}

			.w20 {
				width: 20rpx;
				height: 16rpx;
			}
		}
	}

	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		margin-top: 90px;
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}

	.main-linear {
		background-color: #0082ff;
	}

	.popup {
		.button-box {
			view {
				width: 230rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}

			view.main-color-text {
				border: 1px solid #0082ff;
				color: #0082ff;
			}
		}

		.box {
			.item {
				width: 90%;
				background-color: #f2f3f4;
				color: #0f1021;
				height: 70rpx;
			}

			.item_s {
				width: 90%;
				background-color: #0082ff;
				color: #FFFFFF;
				height: 70rpx;
			}
		}
	}
</style>