11

node_modules/uview-ui/index.js

@@ -56,6 +56,22 @@ import config from './libs/config/config.js'
 // 各个需要fixed的地方的z-index配置文件
 import zIndex from './libs/config/zIndex.js'
 
+// 添加单位
+import addUnit from './libs/function/addUnit.js'
+// 获取sys()和os()工具方法
+// 获取设备信息，挂载到$u的sys()(system的缩写)属性中，
+// 同时把安卓和ios平台的名称"ios"和"android"挂到$u.os()中，方便取用
+import {
+	sys,
+	os
+} from './libs/function/sys.js'
+
+// 获取整个父组件
+import $parent from './libs/function/$parent.js'
+
+// 获取父组件参数
+import getParent from './libs/function/getParent.js'
+
 const $u = {
 	queryParams: queryParams,
 	route: route,
@@ -81,7 +97,12 @@ const $u = {
 	http,
 	toast,
 	config, // uView配置信息相关，比如版本号
-	zIndex
+	zIndex,
+	addUnit,
+	sys,
+	os,
+	$parent,
+	getParent
 }
 
 const install = Vue => {

pages/kotra/brand/list.vue

@@ -35,14 +35,63 @@
 					</view>
 				</view>
 				<template v-if="TenantId==18">
-					<view style="display: flex; align-items: center">
+					<!-- 	<view style="display: flex; align-items: center">
 						<view style="flex: 1; overflow: hidden">
 							<u-tabs bg-color="#f6f6f6" :is-scroll="true" name="ClassName" :list="typeList"
 								:active-color="mainColor" :current="active" @change="changeHandler" :show-bar="true"
 								:activeFontSize="34" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
 						</view>
+					</view> -->
+					<view>
+						<u-dropdown ref="uDropdown" @open="openBrand" @close="closeBrand" active-color="#000"
+							inactive-color="#444">
+							<u-dropdown-item :title="selectedBrandClass">
+								<view
+									style="display: flex; flex-direction: column; height: 600rpx; background: #fff; border-radius: 16rpx 16rpx 0 0; box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);">
+									<view style="flex: 1; display: flex;">
+										<scroll-view scroll-y
+											style="width: 200rpx; height: 500rpx; background: #f5f5f5; border-right: 1rpx solid #e0e0e0;">
+											<view v-for="item in treeList" :key="item.value"
+												:class="['cat-level1', selectedBrandClass === item.label ? 'active' : '']"
+												@click="changeBrand(item)">
+												{{ item.label }}
+											</view>
+										</scroll-view>
+										<scroll-view scroll-y
+											style="flex: 1; height: 500rpx; padding: 0 24rpx; box-sizing: border-box; background: #f5f5f5;">
+											<view v-if="selectedSubClass && selectedSubClass.length > 0">
+												<view style="display: flex; flex-wrap: wrap;">
+													<view v-for="sub in selectedSubClass" :key="sub.value"
+														class="cat-card"
+														:class="msg.BrandClassId === sub.value ? 'active' : ''"
+														@click="changeBrandSub(sub)">
+														<view
+															style="height: 120rpx; background: #e8e8e8; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #999;">
+														</view>
+														<view
+															style="padding: 12rpx 0; font-size: 24rpx; color: #333; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+															{{ sub.label }}
+														</view>
+													</view>
+												</view>
+											</view>
+										</scroll-view>
 									</view>
-					<view class="brandScreen">
+									<view
+										style="display: flex; padding: 16rpx 24rpx; border-top: 1rpx solid #eee; flex-shrink: 0;">
+										<view
+											style="flex: 1; height: 72rpx; background: #f5f5f5; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; margin-right: 16rpx;"
+											@click="resetBrand">重置</view>
+										<view
+											style="flex: 1; height: 72rpx; background: #ff6600; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #fff;"
+											@click="confirmBrand">确认</view>
+									</view>
+								</view>
+							</u-dropdown-item>
+						</u-dropdown>
+
+
+						<view class=" brandScreen">
 							<view class="statusBox" v-if="msg.IsInChengdu == 0" @click="changeFirstStoreTest(-1)">
 								未在成都落地
 							</view>
@@ -50,6 +99,8 @@
 								未在成都落地
 							</view>
 						</view>
+
+
 						<view class="screenBox" v-if="PrizeList.length > 0">
 							<view v-for="(item, index) in PrizeList" :key="index" class="screenBoxItem"
 								@click="chooseYear(item)">
@@ -61,6 +112,7 @@
 								</view>
 							</view>
 						</view>
+					</view>
 				</template>
 				<view v-else style="display: flex; align-items: center;padding: 28rpx 0;">
 					<view v-if="!FilterCriShow" style="flex: 1; overflow: hidden;padding-left: 32rpx;"
@@ -236,6 +288,10 @@
 				iscpswjselectall: 0,
 				ShopTypeList: [],
 				FilterCriShow: false,
+				treeList: [],
+				selectedBrandClass: "全部",
+				brandDropdownOpen: false,
+				selectedSubClass: null,
 			};
 		},
 		onShareTimeline() {
@@ -316,6 +372,7 @@
 			//     this.showAuth = true;
 			// } else {
 			this.GetBrandClassList();
+			this.getBrandClassTree();
 			this.getPrizeList();
 			// }
 		},
@@ -330,6 +387,37 @@
 			this.contentHeight = this.$utils.calcContentHeight(c) + 40;
 		},
 		methods: {
+			openBrand() {
+				this.brandDropdownOpen = true;
+			},
+			closeBrand() {
+				this.brandDropdownOpen = false;
+			},
+			changeBrand(item) {
+				this.selectedBrandClass = item.label;
+				this.selectedSubClass = item.children && item.children.length > 0 ? item.children : null;
+				if (!this.selectedSubClass) {
+					this.msg.BrandClassId = item.value;
+				}
+			},
+			changeBrandSub(sub) {
+				this.msg.BrandClassId = sub.value;
+			},
+			resetBrand() {
+				this.selectedBrandClass = "全部";
+				this.selectedSubClass = null;
+				this.msg.BrandClassId = 0;
+				this.g = [];
+				this.msg.pageIndex = 1;
+				this.$refs.uDropdown.close();
+				this.init();
+			},
+			confirmBrand() {
+				this.g = [];
+				this.msg.pageIndex = 1;
+				this.$refs.uDropdown.close();
+				this.init();
+			},
 			getMixArea(type) {
 				if (this.msg.MaxAreaRequirement != '') {
 					if (this.msg.MaxAreaRequirement < this.msg.MixAreaRequirement) {
@@ -417,6 +505,28 @@
 				);
 				this.init();
 			},
+			//获取分类树形结构
+			getBrandClassTree() {
+				let BrandCategory = 3
+				this.request2({
+						url: "/api/AppletTrade/GetBrandClassTreeList",
+						data: {
+							BrandCategory
+						},
+					},
+					(res) => {
+						if (res.resultCode == 1) {
+							this.treeList = res.data;
+							if (res.data && res.data.length > 0) {
+								let first = res.data[0];
+								this.selectedBrandClass = first.label;
+								this.selectedSubClass = first.children && first.children.length > 0 ? first.children :
+									null;
+							}
+						}
+					}
+				);
+			},
 			resetQuantity() {
 				this.g = []
 				this.msg.pageIndex = 1
@@ -903,4 +1013,66 @@
 	.custom-tab-list .u-tab-item {
 		line-height: 25px !important;
 	}
+
+	.dropdown-tag.active {
+		background: #e6f4ff;
+		border-color: #017EDF;
+		color: #017EDF;
+	}
+
+	.cat-level1 {
+		padding: 28rpx 20rpx;
+		font-size: 26rpx;
+		color: #333;
+		border-left: 6rpx solid transparent;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.cat-level1.active {
+		background: #fff;
+		color: #ff6600;
+		border-left-color: #ff6600;
+		font-weight: bold;
+	}
+
+	.cat-level2 {
+		padding: 14rpx 24rpx;
+		background: #f0f0f0;
+		border-radius: 8rpx;
+		font-size: 26rpx;
+		color: #333;
+	}
+
+	.cat-level2.active {
+		background: #fff3e0;
+		color: #ff6600;
+		border: 1rpx solid #ff6600;
+	}
+
+	.cat-level2.active {
+		background: #fff3e0;
+		color: #ff6600;
+		border: 1rpx solid #ff6600;
+	}
+
+	.cat-card {
+		width: calc(50% - 8rpx);
+		margin-bottom: 16rpx;
+	}
+
+	.cat-card:nth-child(2n) {
+		margin-right: 0;
+	}
+
+	.cat-card.active view:last-child {
+		color: #ff6600;
+		font-weight: bold;
+	}
+
+	.dropdown-tag,
+	.dropdown-tag.active {
+		display: none;
+	}
 </style>
\ No newline at end of file