完成品牌导览

brand/brand.vue

@@ -10,7 +10,7 @@
 		</u-navbar>
 		<view class="search-wrap">
 			<u-search
-				placeholder="请输入搜索的商品" 
+				placeholder="请搜索" 
 				:clearabled="true"
 				:showAction="false"
 				height="80rpx"
@@ -19,20 +19,35 @@
 				@clear="reloadList"
 				bgColor="#fff"
 				borderColor="#00A447"
-				v-model="params.goodsName">
+				v-model="params.name">
 			</u-search>
 		</view>
 		<view class="out-wrap u-flex u-col-top">
-			<view class="types">
-				<view class="type" 
-				:class="{active:index==typesIndex}" 
-				@click="typesClick(index)" 
-				v-for="(item,index) in goodsTypeTree" :key="item.parentId+index">
-					{{item.name}}
+			<view class="floors">
+				<view class="floor" 
+				:class="{active:index==floorIndex}" 
+				@click.stop="floorClick(index)" 
+				v-for="(item,index) in floorTree" :key="item.parentId">
+					<view class="floorName u-flex u-row-center">
+						{{item.floorName}}
+						<u-icon :name="index==floorIndex?'arrow-down-fill':'play-right-fill'" :customStyle="{'margin-left': '20rpx'}" color="#666" size="10"></u-icon>
+					</view>
+					<view v-if="index==floorIndex" class="children" @click.stop="childrenClick(i)" :class="{active:children.id==childrenId&&!params.name}" v-for="(children,i) in item.children" :key="children.id">
+						{{children.floorName}}
+					</view>
 				</view>
 			</view>
 			<view class="right">
-				<view class="second-types">
+				<view class="tabs-wrap">
+					<u-tabs 
+					:list="tabsList"
+					lineWidth="0"
+					:current="tabsCurrent"
+					:inactiveStyle="{background:'#F5F5F5','border-radius':'11px',padding:'10rpx 22rpx','font-size':'22rpx'}"
+					:activeStyle="{background:'rgba(0,164,71,0.1)',color:'#00A447','border-radius':'11px',padding:'10rpx 22rpx','font-size':'22rpx'}"
+					@click="tabsClick"></u-tabs>
+				</view>
+				<!-- <view class="second-types">
 					<view class="u-flex u-row-between u-col-top  u-border-bottom">
 						<view class="u-flex u-flex-wrap">
 							<view class="type" 
@@ -56,34 +71,16 @@
 							{{item.name}}
 						</view>
 					</view>
-				</view>
+				</view> -->
 				<mescroll-body class="mescroll-body" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
 					<view class="page-wrap" @click="$u.route('/brand/branddetails',{id:item.id})" v-for="item in dataList" :key="item.id">
-						<view class="hot">
-							<view class="product small-product u-flex">
-								<u--image :showLoading="true" :src="item.mainImg" width="160rpx" height="160rpx"></u--image>
+						<view class="brand-list">
+							<view class="brand u-flex">
+								<u--image :showLoading="true" :src="item.logo" width="145rpx" height="145rpx"></u--image>
 								<view class="text">
-									<view class="name ellipsis-2">{{item.goodsName}}</view>
-									<view class="u-flex u-row-between">
-										<view class="left">
-											<view class="up">
-												<view class="u-flex">
-													<text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
-													<!-- <text class="vip-icon">VIP</text> -->
-													<text class="price-type">会员价</text>
-												</view>
-												<!-- <view class="" v-else>
-													<text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
-												</view> -->
-											</view>
-											<view class="down">
-												<!-- <text class="discount">8.8折</text> -->
-												<text class="original-price gray line-through">¥ {{item.salePrice}}</text>
-												<!-- <text class="sales gray">销量 {{item.saleCount}}</text> -->
-											</view>
-										</view>
-										<u--image :showLoading="false" @click.native.stop="addCart(item.id)" :src="staticUrl+'/img/add.png'" width="48rpx" height="48rpx"></u--image>
-									</view>
+									<view class="name u-line-1">{{item.name}}</view>
+									<view class="typeName"> <text class="type">{{item.typeName}}</text> </view>
+									<view class="businessTime">营业时间：{{item.businessTime}}</view>
 								</view>
 							</view>
 						</view>
@@ -109,11 +106,12 @@
 		data() {
 			return {
 				staticUrl:this.$commonConfig.staticUrl,
-				typesIndex:0,
+				floorIndex:0,
 				secondTypesIndex:0,
 				moreSecondTypesIndex:null,
 				moreSecondTypes:false,
 				showMoreSecondTypesIcon:'list',
+				tabsList:[{name:'全部',id:''}],
 				downOption: {},
 				// 上拉加载的配置(可选, 绝大部分情况无需配置)
 				upOption: {
@@ -126,29 +124,28 @@
 					}
 				},
 				//菜单
-				goodsTypeTree:[],
+				floorTree:[],
+				childrenIndex:0,
+				childrenId:undefined,
 				//子菜单
 				subTypeList:[],
 				subTypeListMore:[],
 				// 列表数据
 				dataList: [],
 				params:{
-					typeId:null,
-					goodsName:'',
-					// isExplode:0,//是否爆款 0不是，1是
-				}
+					floorId:'',//楼层id
+					typeName:'',//品牌类型名称
+					name:'',//品牌名称
+				},
+				tabsCurrent:0,
 			}
 		},
 		watch:{
-			typesIndex:{
+			floorIndex:{
 				handler(val){
-					console.log('typesIndex',val);
-					this.params.goodsName = '' ;
-					let data =  uni.$u.deepClone(this.goodsTypeTree[val]);
-					this.subTypeList = data.child.splice(0,3);
-					this.subTypeListMore= data.child;
-					this.secondTypesIndex = 0;
-					this.moreSecondTypesIndex = null;
+					// console.log('floorIndex',val);
+					this.params.name = '' ;
+					this.childrenIndex = 0;
 					this.mescroll.resetUpScroll();
 				},
 				immediate:false
@@ -158,7 +155,8 @@
 			this.getSystemInfo();
 		},
 		onShow() {
-			this.getgoodsTypeTree();
+			this.selectBrandFloorTree();
+			this.brandCategoryType();
 		},
 		methods: {
 			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
@@ -171,26 +169,33 @@
 				// if(page.num == 1){
 				// 	// 请求其他接口...
 				// }
-				if(this.moreSecondTypesIndex||this.moreSecondTypesIndex==0){
-					this.params.typeId = this.subTypeListMore[this.moreSecondTypesIndex]?.id
-				}else{
-					this.params.typeId = this.subTypeList[this.secondTypesIndex]?.id
-				}
+				let childrenArr = this.floorTree[this.floorIndex]?.children||[];
+				this.childrenId = childrenArr[this.childrenIndex]?.id;
+				// console.log('childrenId',this.childrenId);
+				this.params.floorId = this.childrenId;
+				// console.log('floorId',this.params.floorId);
+				
+				this.params.typeName = this.tabsList[this.tabsCurrent].name;
+				if(this.params.typeName=='全部'){this.params.typeName=''}
+				
 				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
-				if(!this.params.typeId){
-					// this.getgoodsTypeTree();
+				if(!this.params.floorId){
+					// this.selectBrandFloorTree();
 					return // 此处return,先获取xx
 				}
-				console.log('this.params.typeId',this.params.typeId);
+				if(this.params.name){
+					this.params.floorId = ''
+				}
+				// console.log('this.params.floorId',this.params.floorId);
 
 				let pageNum = page.num; // 页码, 默认从1开始
 				let pageSize = page.size; // 页长, 默认每页10条
 				this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
-				this.$u.api.memberGoodList(this.params).then(data => {
-					console.log('data',JSON.parse(JSON.stringify(data)));
+				this.$u.api.brandList(this.params).then(data => {
+					// console.log('data',JSON.parse(JSON.stringify(data)));
 					// 接口返回的当前页数据列表 (数组)
 					let curPageData = data.data.rows;
-					console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
+					// console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
 					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
 					let curPageLen = curPageData.length; 
 					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
@@ -219,26 +224,44 @@
 				this.mescroll.resetUpScroll();
 			},
 			search(e){
+				// this.floorIndex = '';
+				this.tabsCurrent = 0;
 				this.reloadList();
 			},
-			getgoodsTypeTree(){
-				this.$u.api.goodsTypeTree().then(res=>{
-					this.goodsTypeTree = res.data.filter(item=> item.child.length>0);
-					console.log('this.goodsTypeTree',this.goodsTypeTree);
-					let data = uni.$u.deepClone(this.goodsTypeTree[this.typesIndex]);
-					// console.log('this.goodsTypeTree',this.goodsTypeTree);
-					// console.log('data',data);
-					this.subTypeList = data.child.splice(0,3);
-					this.subTypeListMore= data.child;
+			selectBrandFloorTree(){
+				this.$u.api.selectBrandFloorTree().then(res=>{
+					this.floorTree = res.data;
 					this.mescroll.resetUpScroll();
 				}).catch(err=>{
 					this.mescroll.endErr()
-					console.log('getgoodsTypeTree',err);
+					console.log('selectBrandFloorTree',err);
 				})				
 			},
-			typesClick(index){
-				this.typesIndex = index;
-				
+			brandCategoryType(){
+				this.$u.api.brandCategoryType().then(res=>{
+					let data = res.data.map(item=>{
+						return {name:item.dictLabel,id:item.dictValue}
+					});
+					this.tabsList = data;
+					this.tabsList.unshift({name:'全部',id:''});
+					this
+				}).catch(err=>{
+					this.mescroll.endErr()
+					console.log('brandCategoryType',err);
+				})				
+			},
+			floorClick(index){
+				let childrenArr = this.floorTree[index]?.children||[];
+				if(childrenArr.length<1){
+					uni.$u.toast('该位置没有可用数据，请选择其他试试')
+					return
+				}
+				this.floorIndex = index;
+			},
+			tabsClick(e){
+				// console.log('tabsClick',e);
+				this.tabsCurrent = e.index;
+				this.reloadList();
 			},
 			secondTypesClick(index){
 				this.secondTypesIndex = index;
@@ -246,29 +269,19 @@
 				this.mescroll.resetUpScroll();
 				
 			},
-			moreSecondTypesClick(index){
-				this.moreSecondTypesIndex = index;
-				this.secondTypesIndex = null;
-				this.mescroll.resetUpScroll();
-			},
-			showMoreSecondTypes(){
-				// this.moreSecondTypes = !this.moreSecondTypes;
-				if(this.showMoreSecondTypesIcon=='list'){
-					this.showMoreSecondTypesIcon = 'close'
-					this.subTypeList = this.subTypeList.concat(this.subTypeListMore)
-				}else{
-					this.showMoreSecondTypesIcon = 'list'
-					this.subTypeList =this.subTypeList.splice(0,3);
+			childrenClick(i){
+				if(!this.floorIndex){
+					this.floorIndex = 0
 				}
-			},
-			addCart(id){
-				// console.log('addCart',id);
-				this.$u.api.addCart({goodsId:id}).then(res=>{
-					this.$refs.cartfixed.getCartList('isAdd');
-					console.log('res',res.data);
-					}).catch(err=>{
-					console.log('addCart',err);
-				})
+				// console.log('children',this.floorTree[this.floorIndex].children[i]);
+				let children = this.floorTree[this.floorIndex].children[i];
+				// console.log('childrenClick',children);
+				// this.floorIndex = children.parentId;
+				// console.log('parentId',children.parentId);
+				this.childrenIndex = i;
+				this.params.name = '' ;
+				this.tabsCurrent = 0;
+				this.reloadList()
 			}
 		}
 	}
@@ -283,67 +296,70 @@ page{
 	background-color: #F5F5F5;
 	.right{
 		background-color: #fff;
-		flex: 1;
+		width: calc( 100vw - 200rpx );
+		// flex: 1;
 	}
 }
-.types{
+.tabs-wrap{
+	/deep/ .u-tabs__wrapper__nav__item{
+		padding: 0 10rpx;
+	}
+}
+.floors{
 	width: 200rpx;
 	font-size: 26rpx;
 	text-align: center;
-	font-weight: 600;
-	.type{
+	.floor{
 		position: relative;
 		padding: 25rpx 0;
 		&.active{
 			background-color: #fff;
-			&:before{
-				content: '';
-				width: 4rpx;
-				height: 1.6em;
-				background-color: #00A447;
-				position: absolute;
-				left: 0;
-				top: 50%;
-				transform: translateY(-0.8em);
+		}
+		.floorName{
+			padding: 27rpx 0;
+			font-weight: 600;
+		}
+		.children{
+			padding: 27rpx 0;
+			&.active{
+				background: rgba(0,164,71,0.1);
+				color: #00A447;
 			}
 		}
 	}
 }
-.second-types{
-	position: relative;
-	font-size: 22rpx;
-	padding: 20rpx 20rpx 0;
-	background-color: #fff;
-	.type{
-		padding: 7rpx 22rpx;
-		background-color: #F5F5F5;
-		border-radius: 22rpx;
-		margin-right: 20rpx;
-		margin-bottom: 20rpx;
-		&.active{
-			background-color: #E5F6EC;
-			color: #00A447;
+.brand-list{
+	.brand{
+		border-bottom: 0.5px solid #eee;
+		padding-bottom: 30rpx;
+		margin-bottom: 30rpx;
+		.text{
+			margin-left: 20rpx;
+			font-size: 22rpx;
+			color: #999999;
+			line-height: 30rpx;
+			.name{
+				font-size: 30rpx;
+				font-weight: 600;
+				color: #333333;
+				line-height: 42rpx;
+				margin-bottom: 20rpx;
+			}
+			.typeName{
+				margin-bottom: 20rpx;
+				.type{
+					background: rgba(0,164,71,0.1);
+					border-radius: 4rpx;
+					font-size: 24rpx;
+					color: #00A447;
+					padding: 8rpx 16rpx;
+					margin-left: 0;
+				}
+			}
 		}
 	}
-	// .type + .type{
-	// 	margin-left: 20rpx;
-	// }
-	.more-second-types{
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: -120rpx;
-		padding: 24px 20rpx;
-		z-index: 99;
-		background-color: #fff;
-		box-shadow:
-		  0px 4.5px 3.6px rgba(0, 0, 0, 0.024),
-		  0px 12.5px 10px rgba(0, 0, 0, 0.035),
-		  0px 30.1px 24.1px rgba(0, 0, 0, 0.046),
-		  0px 100px 80px rgba(0, 0, 0, 0.07)
-		;
-	}
 }
+
 .mescroll-body{
 	background-color: #fff;
 }

brand/branddetails.vue

@@ -9,6 +9,29 @@
 		>
 		</u-navbar>
 		<u-loading-page :loading="loadingPage" bgColor="#f1f1f1"></u-loading-page>
+		<view class="page-wrap">
+			<u--image :showLoading="true" :src="details.faceImg" width="100%" height="480rpx" radius="8rpx" bgColor="#fff"></u--image>
+			<view class="base-info u-flex u-row-between">
+				<view class="left u-flex">
+					<u-avatar :src="details.logo" size="145rpx"></u-avatar>
+					<view class="text">
+						<view class="name u-line-1">{{details.name}}</view>
+						<view class="typeName"> <text class="type">{{details.typeName}}</text> </view>
+						<view class="businessTime">营业时间：{{details.businessTime}}</view>
+					</view>
+				</view>
+				<view class="right u-flex u-row-center" @click="makePhoneCall">
+					<u-icon :customStyle="{'margin-right': '3rpx'}" name="phone" color="#fff" size="34rpx"></u-icon>
+					拨打
+				</view>
+			</view>
+			<view class="remark">
+				<view class="title">品牌简介</view>
+				<view class="content">
+					<u-parse :content="details.brandRemark"></u-parse>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -38,7 +61,7 @@
 				};
 			},
 			getDetails(id){
-				this.$u.api.memberGoodDetails({id:id}).then(res=>{
+				this.$u.api.brandInfo({id:id}).then(res=>{
 					this.loadingPage = false;
 					// console.log('res',res.data);
 					this.details = res.data;
@@ -46,10 +69,94 @@
 					console.log('getDetails',err.data);
 				})
 			},
+			makePhoneCall(){
+				if(!this.details.contactTel){
+					uni.showToast({
+						title:'电话号码为空',
+						icon:"none"
+					})
+					return
+				}
+				uni.makePhoneCall({
+					phoneNumber: this.details.contactTel,
+					success() {
+						console.log('success');
+					},
+					fail() {
+						console.log('fail');
+					}
+				});
+			}
 		}
 	}
 </script>
-
+<style>
+page{
+	background-color: #F5F5F5;
+}
+</style>
 <style lang="scss" scoped>
-
+.base-info{
+	padding: 30rpx;
+	background-color: #fff;
+	margin-bottom: 20rpx;
+	border-radius: 4rpx;
+	.left{
+		flex: 1;
+		.text{
+			margin-left: 20rpx;
+			font-size: 22rpx;
+			color: #999999;
+			line-height: 30rpx;
+			.name{
+				font-size: 30rpx;
+				font-weight: 600;
+				color: #333333;
+				line-height: 42rpx;
+				margin-bottom: 20rpx;
+			}
+			.typeName{
+				margin-bottom: 20rpx;
+				.type{
+					background: rgba(0,164,71,0.1);
+					border-radius: 4rpx;
+					font-size: 24rpx;
+					color: #00A447;
+					padding: 8rpx 16rpx;
+					margin-left: 0;
+				}
+			}
+		}
+	}
+	
+	.right{
+		width: 164rpx;
+		height: 64rpx;
+		background: linear-gradient(180deg, #00DC84 0%, #00A447 100%);
+		border-radius: 32rpx;
+		text-align: center;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+}
+.remark{
+	padding: 20rpx;
+	background-color: #fff;
+	margin-bottom: 20rpx;
+	border-radius: 4rpx;
+	.title{
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #333333;
+		line-height: 50rpx;
+		margin-bottom: 10rpx;
+	}
+	.content{
+		font-size: 30rpx;
+		font-weight: 400;
+		color: #666666;
+		line-height: 44rpx;
+	}
+}
 </style>

common/apiurl.js

@@ -319,6 +319,26 @@ const apiurl = {
 		url: '/memberLevel/pageList',
 		type: 'get'
 	},
+	// 查询楼栋信息树
+	selectBrandFloorTree: {
+		url: '/brandInfo/selectBrandFloorTree',
+		type: 'get'
+	},
+	// 品牌分类
+	brandCategoryType: {
+		url: '/dict/data/type/brand_category_type',
+		type: 'get'
+	},
+	// 查询品牌信息
+	brandList: {
+		url: '/brandInfo/pageList',
+		type: 'get'
+	},
+	// 品牌详情
+	brandInfo: {
+		url: '/brandInfo/selectById',
+		type: 'get'
+	},
 }