全部品牌页面修改

api/store.js

@@ -211,13 +211,21 @@ export function getEvaluationDetail(id) {
 }
 
 /**
- * 品牌列表
+ * 品牌列表/brandByName
  */
 export function getBrands() {
 	return request.get("/brand", {}, {
 		login: false
 	});
 }
+/**
+ * 商品品牌列表
+ */
+export function getBrandByName() {
+	return request.get("/brandByName", {}, {
+		login: false
+	});
+}
 // <<<<<<< HEAD
 // /**
 //  * 添加收藏

pages/shop/brands/brandAll/index.vue

@@ -12,41 +12,87 @@
 				</block>
 			</cu-custom>
 		</view>
-		<view class="concent-box acea-row row-between">
-			<view class="brand-item" v-for="(item,index) in brandList" :key="index" @click="goDetail(item)">
-				<image class="brand-img" :src="item.pic" mode="aspectFill"></image>
+		<!-- 搜索 -->
+		<view class="search acea-row row-middle" @click="goGoodSearch" :style="[{top:CustomBar + 'px'}]">
+			<image class="search-img" src="@/static/images/search.png" mode=""></image>
+			<text>搜索</text>
+		</view>
+		<view class="concent-box acea-row">
+			<view class="scoll-left">
+				<scroll-view class="scroll-box" scroll-y="true" :scroll-into-view="scollId" scroll-with-animation="true"
+					show-scrollbar="false">
+					<view :id="'item-'+key" class="navLeftName" v-for="(val,key) in brandList" :key="val">
+						<view class="moulding-box acea-row row-middle row-between">
+							<view class="moulding-left"></view>
+							<view class="nav-title">{{key}}</view>
+							<view class="moulding-right"></view>
+						</view>
+						<view class="acea-row row-between">
+							<view class="brand-item acea-row row-middle row-center-column row-center"
+								v-for="(item,index) in val" :key="index" @click="goDetail(item)">
+								<image class="brand-img" :src="item.pic" mode="aspectFill"></image>
+								<view class="brand-text">{{item.brandName}}</view>
+							</view>
+						</view>
+
+					</view>
+				</scroll-view>
 			</view>
+			<view class="scoll-right">
+				<view scroll-y="true" class="acea-row row-center-column">
+					<view class="navRightName" :class="{'active':isLight==i}" v-for="(b,i) in navRight"
+						@click="brandListId(b,i)" :key="i">{{b}}</view>
+				</view>
+			</view>
+
 		</view>
 	</view>
 </template>
 
 <script>
-	import { getBrands} from '@/api/store';
+	import {
+		getBrandByName
+	} from '@/api/store';
 	export default {
 		data() {
 			return {
-				brandList:[]
+				CustomBar: this.CustomBar,
+				brandList: {},
+				navRight: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#',
+				scollId: '',
+				isLight: -1
 			}
 		},
 		onLoad() {
 			this.getBrandList();
 		},
 		methods: {
+			goGoodSearch() {
+				this.$yrouter.push({
+					path: '/pages/shop/GoodSearch/index',
+				})
+			},
+			brandListId(b, i) {
+				if (this.isLight === i) return
+				this.scollId = 'item-' + b
+				this.isLight = i
+			},
+
 			getBrandList() {
 				uni.showLoading({
 					title: '加载中...'
 				})
-				getBrands().then(res => {
+				getBrandByName().then(res => {
 					this.brandList = res.data;
 					uni.hideLoading();
 				})
 			},
 			goDetail(item) {
 				this.$yrouter.push({
-				  path: '/pages/shop/brands/brandDetail/index',
-				  query: {
-				    id: item.id,
-				  },
+					path: '/pages/shop/brands/brandDetail/index',
+					query: {
+						id: item.id,
+					},
 				})
 			},
 		}
@@ -58,7 +104,7 @@
 		.tab-title {
 			font-size: 32rpx;
 			font-family: PingFang SC;
-			font-weight: 600;
+			font-weight: 500;
 			color: #2DB5AE;
 			line-height: 42rpx;
 		}
@@ -74,17 +120,98 @@
 			}
 		}
 	}
-	.concent-box{
+
+	.search {
+		position: fixed;
+		z-index: 20;
+		height: 62rpx;
+		width: 690rpx;
+		margin: 0 0 0 30rpx;
+		border: 1rpx solid #999;
+		border-radius: 16rpx;
+		background-color: #E3E3E3;
+		color: #999;
+
+		.search-img {
+			width: 40rpx;
+			height: 40rpx;
+			vertical-align: middle;
+			margin: 0 20rpx;
+		}
+
+		text {
+			font-size: 28rpx;
+		}
+	}
+
+	.concent-box {
+		margin-top: 62rpx;
 		padding: 30rpx;
-		.brand-item{
-			margin-bottom: 30rpx;
-			.brand-img {
-				width: 330rpx;
-				height: 330rpx;
-				background: #F5F6F8;
-				box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
-				border-radius: 16rpx;
+		.scoll-left {
+			width: 100%;
+			.scroll-box {
+				height: 1180rpx;
+			}
+			.brand-item {
+				font-family: PingFang SC;
+				width: 210rpx;
+				.brand-img {
+					width: 180rpx;
+					height: 180rpx;
+					background: #F5F6F8;
+					box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
+					border-radius: 16rpx;
+				}
+				.brand-text {
+					margin: 10rpx 0 20rpx 0;
+				}
+			}
+			.moulding-box {
+				width: 100%;
+				margin-bottom: 40rpx;
+
+				.moulding-left {
+					margin-left: 15rpx;
+					width: 180rpx;
+					border-bottom: 4rpx solid #999;
+				}
+
+				.moulding-right {
+					margin-right: 15rpx;
+					width: 180rpx;
+					border-bottom: 4rpx solid #999;
+				}
+
+				.nav-title {
+					font-weight: 800;
+					font-size: 34rpx;
+					font-family: PingFang SC;
+				}
+			}
+
+		}
+
+		.scoll-right {
+			width: 30rpx;
+			position: fixed;
+			top: 250rpx;
+			right: 5rpx;
+
+			.scroll-box {
+				height: 800rpx;
+			}
+
+			.navRightName {
+				color: #afaeb3;
+				font-size: 24rpx;
+				margin-bottom: 5rpx;
+				font-family: PingFang SC;
+			}
+
+			.active {
+				color: #2DB5AE;
 			}
 		}
+
 	}
 </style>