jsm-mall-h5-front/src/packageWorkorder/pages/create/classify.vue

<template>
  <!-- #ifdef H5 -->
	<zj-page-layout>
	  <template slot="header">
	    <view class="search-container">
	      <u-search
	        shape="round"
	        :showAction="false"
	        placeholder="输入分类名称进行搜索"
	        v-model="keyword"
	        @search="searchData"
	        @clear="searchData">
	      </u-search>
	    </view>
      <view class="brand-container">
        <u-tabs
        	:list="brandList"
        	@change="chooseBrand"
          :current="curTab"
          keyName="brandName"
        	lineWidth="0"
        	lineHeight="0"
        	activeStyle="padding: 0 24rpx; border-radius: 24rpx; background: #E7EFFF; color: #3D8FFD;"
          inactiveStyle="padding: 0 24rpx; border-radius: 24rpx;"
        	itemStyle="height: 72rpx; line-height: 72rpx; padding: 0; border-radius: 24rpx; color: #7A8BA7; margin-right: 16rpx; font-size: 28rpx; background: #f5f5f5;">
        </u-tabs>
      </view>
	  </template>

		<view class="main-container">
			<view class="left">
				<block v-for="(item, index) in leftList" :key='index'>
					<view class="item ellipsis" :class="leftCurrent == item.categoryId ? 'current':''" @tap="changeLeft(item.categoryId)">{{item.name}}</view>
				</block>
			</view>
			<view class="right">
				<block v-for="(item, index) in rightList" :key='index'>
					<view class="item" @tap="submitChoess(item)">
						<image :src="item.imgUrl" mode="aspectFill"></image>
						<text class="name ellipsis">{{item.name}}</text>
					</view>
				</block>
				<Loading :type="2" :loadStatus="loadStatus" :dataList="rightList" />
			</view>
		</view>

	</zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageWorkorder/pages/create/classify`, pam,crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				keyword: '',
        brandList: [],
        brand: null,
				leftList: [],
				leftCurrent: 0,
				rightList: [],
        loadStatus: 0,
			}
		},

    computed:{
    	curTab() {
    		return this.brandList.map(item => item.id).indexOf(this.brand && this.brand.id) || 0;
    	}
    },

		onLoad() {
			this.geBrandList();
			this.getLeftList();
		},

		methods: {
      // 获取品牌
      geBrandList() {
      	this.$api.get('/charging/brand/list')
        .then(res => {
      		this.brandList = res.data;
          if(res.data && res.data.length > 0) {
            this.brand = res.data[0];
          }
      	})
      },

			// 获取一级菜单
			getLeftList() {
				this.$api.get('/goods/category/list', {
					type: 2
				}).then(res => {
					this.leftList = res.data;
					this.leftCurrent = res.data.length > 0 ? res.data[0].categoryId : 0;
					this.getRightList();
				})
			},

			// 获取二级菜单
			getRightList() {
				this.loadStatus = 1;
				this.$api.get('/goods/category/list', {
          parentId: this.leftCurrent,
          name: this.keyword,
          type: 2
				}).then(res => {
					this.loadStatus = 0;
					let list = res.data;
					if(list.length < 1){
						this.loadStatus = 2;
					}
					this.rightList = list;
				}).catch(() => {
					this.loadStatus = 2;
				})
			},

			// 切换一级菜单
			changeLeft(pid) {
				this.leftCurrent = pid;
				this.getRightList();
			},

			// 搜索
			searchSubmit() {
				this.getRightList();
			},

      // 选择品牌
      chooseBrand(item) {
      	this.brand = item;
      },

			submitChoess(item) {
        if(!this.brand) return this.$toast('请先选择品牌');

				this.crossPage.$emit('chooseClassify', {
          brandId: this.brand.id,
          brandName: this.brand.brandName,
          imgUrl: item.imgUrl,
          mainId: item.parentId,
          smallId: item.categoryId,
          smallName: item.name,
          num: 1,
        });
				this.$navToPage({
					delta: 1
				}, 'navigateBack')
			}
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss" scoped>
	.search-container {
		background: #ffffff;
	  padding: 0 20rpx 20rpx;
		::v-deep .u-search {
			height: 60rpx;
	    input {
	      background: #F7F8FF !important;
	    }
			.u-search__content {
	      background: #F7F8FF !important;
				height: 60rpx;
			}
		}
	}
  .brand-container {
    background: #ffffff;
    padding: 0 20rpx 20rpx;
  }
	.main-container {
		display: flex;
		height: 100%;
    padding-top: 20rpx;
    box-sizing: border-box;
		.left {
			width: 200rpx;
			height: 100%;
			overflow-y: scroll;
			box-sizing: border-box;
			flex-shrink: 0;
			.item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;
				font-size: 28rpx;
				color: $sec-font;
				border-radius: 12rpx;
        padding: 0 20rpx;
				&.current {
					color: $main-font;
					background: #ffffff;
          font-weight: 500;
          &::after {
            content: '';
            background: $theme-color;
            border-radius: 0 8rpx 8rpx 0;
            width: 8rpx;
            height: 40rpx;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -20rpx;
          }
				}
			}
		}
		.right {
      flex: 1;
			margin: 0 20rpx auto 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx 20rpx 20rpx;
			max-height: calc(100% - 20rpx);
			overflow-y: scroll;
			box-sizing: border-box;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				margin-top: 20rpx;
				width: 140rpx;
				font-size: 24rpx;
				image {
					width: 140rpx;
					height: 140rpx;
					margin-bottom: 5rpx;
				}
				.name {
					width: 150rpx;
					text-align: center;
				}
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>