From f18353fcfbe986f0bdf2cd7a798c750f47a3c1c5 Mon Sep 17 00:00:00 2001 From: ld0104 <3037885725@qq.com> Date: Wed, 26 Oct 2022 18:13:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E5=93=81=E7=89=8C=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/store.js | 10 +- pages/shop/brands/brandAll/index.vue | 167 +++++++++++++++++++++++---- 2 files changed, 156 insertions(+), 21 deletions(-) diff --git a/api/store.js b/api/store.js index 48c921d..3945c17 100644 --- a/api/store.js +++ b/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 // /** // * 添加收藏 diff --git a/pages/shop/brands/brandAll/index.vue b/pages/shop/brands/brandAll/index.vue index e3d5ccb..9b63d02 100644 --- a/pages/shop/brands/brandAll/index.vue +++ b/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>