| | |
| | | <text>商城</text> |
| | | <view class="head-search-input"> |
| | | <u-search placeholder="搜索商品" height="30" searchIconColor="#999999" borderColor="#eeeeee" |
| | | bgColor="rgba(255,255,255,0.9)" :showAction="false" v-model="keyword" /> |
| | | bgColor="rgba(255,255,255,0.9)" @custom="search" :showAction="false" v-model="form.goodsName" @search="search" /> |
| | | </view> |
| | | </view> |
| | | <view class="head-tabs"> |
| | | <u-tabs lineColor="#E4001D" :list="list"></u-tabs> |
| | | <u-tabs lineColor="#E4001D" :list="list" @click="clickCate"></u-tabs> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="head-list"> |
| | | <view class="head-list-item" @click="openSearch(1)"> |
| | | <text style="color: #222222; font-weight: 500;">综合排序</text> |
| | | <u-icon name="arrow-down" color="#222222" size="13"></u-icon> |
| | | <text :style="form.sortInfo ? 'color: #222222; font-weight: 500;' : ''">{{form.sortName}}</text> |
| | | <u-icon name="arrow-down" color="#222222" size="13" v-if="form.sortInfo && !show"></u-icon> |
| | | <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.sortInfo && show === 1"></u-icon> |
| | | <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon> |
| | | </view> |
| | | <view class="head-list-item" @click="openSearch(2)"> |
| | | <text>适用品牌</text> |
| | | <u-icon name="arrow-down" color="#777777" size="13"></u-icon> |
| | | <text :style="form.applicableBrandId ? 'color: #222222; font-weight: 500;' : ''">{{form.applicableBrandId ? form.applicableBrandName : '适用品牌'}}</text> |
| | | <u-icon name="arrow-down" color="#222222" size="13" v-if="form.applicableBrandId && !show"></u-icon> |
| | | <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.applicableBrandId && show === 2"></u-icon> |
| | | <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon> |
| | | </view> |
| | | <view class="head-list-item" @click="openSearch(3)"> |
| | | <text>系列</text> |
| | | <u-icon name="arrow-down" color="#777777" size="13"></u-icon> |
| | | <text :style="form.seriesBrandId ? 'color: #222222; font-weight: 500;' : ''">{{form.seriesBrandId ? form.seriesBrandName : '系列'}}</text> |
| | | <u-icon name="arrow-down" color="#222222" size="13" v-if="form.seriesBrandId && !show"></u-icon> |
| | | <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.seriesBrandId && show === 3"></u-icon> |
| | | <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon> |
| | | </view> |
| | | </view> |
| | | <!-- 排序 --> |
| | |
| | | </view> |
| | | <!-- 品牌 --> |
| | | <view class="list" style="padding-top: 30rpx; box-sizing: border-box; justify-content: flex-start;" v-if="show === 2"> |
| | | <view :class="item.active ? 'list-cate active' : 'list-cate'" v-for="(item, index) in pingpai" :key="index" @click="getXiLie(item.id)">{{item.name}}</view> |
| | | <view :class="item.active ? 'list-cate active' : 'list-cate'" v-for="(item, index) in pingpai" :key="index" @click="getXiLie(item.id, index)">{{item.name}}</view> |
| | | </view> |
| | | <!-- 系列 --> |
| | | <view class="list" v-if="show === 3"> |
| | | <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in xilie" :key="index" @click="clickpx(index)"> |
| | | <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in xilie" :key="index" @click="clickxl(index)"> |
| | | <text>{{item.name}}</text> |
| | | <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="commodity"> |
| | | <!-- <view class="commodity-wu"> |
| | | <view class="commodity-wu" v-if="goodsList.length === 0"> |
| | | <image src="/static/images/default_search@2x.png" mode="widthFix"></image> |
| | | </view> --> |
| | | <view class="commodity-item" v-for="(item, i) in 16" :key="i" @click="jump()"> |
| | | </view> |
| | | <view class="commodity-item" v-else v-for="(item, i) in goodsList" :key="i" @click="jumpDetails(item.id)"> |
| | | <view class="commodity-item-image"> |
| | | <image src="/static/logo.png" mode="widthFix"></image> |
| | | <image :src="item.imgurl" mode="widthFix"></image> |
| | | </view> |
| | | <view class="commodity-item-box"> |
| | | <view class="commodity-item-box-title"> |
| | | 曲轴减震器皮带轮A12 |
| | | {{item.name}} |
| | | </view> |
| | | <view class="commodity-item-box-price"> |
| | | <view class="commodity-item-box-price-a"> |
| | | <text>499</text> |
| | | <text>.00</text> |
| | | <text>{{item.minPrice[0]}}</text> |
| | | <text>.{{item.minPrice[1]}}</text> |
| | | </view> |
| | | <view class="commodity-item-box-price-b"> |
| | | ¥699.00 |
| | | ¥{{item.price}} |
| | | </view> |
| | | </view> |
| | | <view class="commodity-item-shou"> |
| | | <text>已售299</text> |
| | | <view class="commodity-item-shou-add">+</view> |
| | | <text>已售{{item.saleNum + item.realSaleNum}}</text> |
| | | <view class="commodity-item-shou-add" @click.stop="addCard(item)">+</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="cart-box"> |
| | | <image src="/static/icon/ic_cart@2x.png" mode="widthFix"></image> |
| | | <text>购物车</text> |
| | | <view class="cart-num">12</view> |
| | | <view class="cart-num">{{cardTotal}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | computed: { |
| | | ...mapState(['navHeight', 'statusbarHeight']) |
| | | }, |
| | | watch: { |
| | | paixu: { |
| | | immediate: true, |
| | | deep: true, |
| | | handler(news, olds) { |
| | | let obj = news.filter(item => item.active) |
| | | this.form.sortInfo = obj[0].id |
| | | this.form.sortName = obj[0].name |
| | | } |
| | | }, |
| | | pingpai: { |
| | | immediate: true, |
| | | deep: true, |
| | | handler(news, olds) { |
| | | if (news.length === 0) return; |
| | | let obj = news.filter(item => item.active) |
| | | this.form.applicableBrandId = obj[0].id |
| | | this.form.applicableBrandName = obj[0].name |
| | | } |
| | | }, |
| | | xilie: { |
| | | immediate: true, |
| | | deep: true, |
| | | handler(news, olds) { |
| | | if (news.length === 0) return; |
| | | let obj = news.filter(item => item.active) |
| | | this.form.seriesBrandId = obj[0].id |
| | | this.form.seriesBrandName = obj[0].name |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | keyword: '', |
| | | show: null, |
| | | list: [], |
| | | paixu: [ |
| | | { name: '默认排序', id: '', active: true }, |
| | | { name: '综合排序', id: 0, active: false }, |
| | | { name: '销量由低到高', id: 1, active: false }, |
| | | { name: '价格由低到高', id: 2, active: false }, |
| | |
| | | { name: '价格由高到低', id: 4, active: false }, |
| | | ], |
| | | pingpai: [], |
| | | xilie: [] |
| | | xilie: [], |
| | | form: { |
| | | sortInfo: '', |
| | | sortName: '', |
| | | categoryId: '', |
| | | type: 1, |
| | | goodsName: '', |
| | | seriesBrandId: '', |
| | | seriesBrandName: '', |
| | | applicableBrandId: '', |
| | | applicableBrandName: '' |
| | | }, |
| | | next: true, |
| | | page: 1, |
| | | goodsList: [], |
| | | cardTotal: 0 |
| | | }; |
| | | }, |
| | | onLoad() { |
| | | this.getCartNum() |
| | | this.getLabels() |
| | | this.getGoodsList() |
| | | }, |
| | | onReachBottom() { |
| | | this.getGoodsList() |
| | | }, |
| | | methods: { |
| | | getCartNum() { |
| | | this.$u.api.cartGoodsTypeNum() |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.cardTotal = res.data |
| | | } |
| | | }) |
| | | }, |
| | | search() { |
| | | this.page = 1 |
| | | this.goodsList = [] |
| | | this.next = true |
| | | this.getGoodsList() |
| | | }, |
| | | addCard(e) { |
| | | this.$u.api.addCart({ |
| | | goodsId: e.id, |
| | | goodsSkuId: e.skuResponsesList[0].id, |
| | | num: 1 |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | uni.showToast({ title: '添加成功', icon: 'success' }) |
| | | this.getCartNum() |
| | | } |
| | | }) |
| | | }, |
| | | jumpDetails(id) { |
| | | uni.navigateTo({ |
| | | url: '/pages/details/details?id=' + id |
| | | }) |
| | | }, |
| | | // 商品 |
| | | getGoodsList() { |
| | | if (!this.next) return; |
| | | this.$u.api.goodsPage({ |
| | | capacity: 10, |
| | | page: this.page, |
| | | model: this.form |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | res.data.records.forEach(item => { |
| | | item.minPrice = item.minPrice.toFixed(2).split('.') |
| | | }) |
| | | this.goodsList.push(...res.data.records) |
| | | this.page++ |
| | | if (this.goodsList.length === res.data.total) { |
| | | this.next = false |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | // 获取分类 |
| | | getLabels() { |
| | | this.$u.api.getGoodsLabelsByType({ type: 0 }) |
| | |
| | | this.list = res.data |
| | | } |
| | | }) |
| | | this.$u.api.getGoodsLabelsByType({ type: 1 }) |
| | | this.$u.api.getGoodsLabelsByType({ type: 14 }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | res.data.forEach(item => { |
| | | item.active = false |
| | | }) |
| | | res.data.unshift({ name: '自营品牌', id: '', active: true }) |
| | | res.data.unshift({ name: '全部', id: '', active: true }) |
| | | this.pingpai = res.data |
| | | } |
| | | }) |
| | | }, |
| | | // 系列 |
| | | getXiLie(parentId) { |
| | | getXiLie(parentId, i) { |
| | | this.xilie = [] |
| | | this.pingpai.forEach((item, index) => { |
| | | item.active = index === i |
| | | }) |
| | | if (!parentId) { |
| | | this.show = null |
| | | this.form.seriesBrandId = '' |
| | | this.form.seriesBrandName = '' |
| | | this.search() |
| | | return; |
| | | } |
| | | this.$u.api.getGoodsLabelsByType({ type: 15, parentId }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | console.log(res) |
| | | this.show = null |
| | | this.search() |
| | | if (res.data.length === 0) return uni.showToast({ |
| | | title: '当前品牌下暂无系列', |
| | | icon: 'none' |
| | | }) |
| | | res.data.forEach(item => { |
| | | item.active = false |
| | | }) |
| | | res.data.unshift({ name: '系列', id: '', active: true }) |
| | | res.data.unshift({ name: '全部', id: '', active: true }) |
| | | this.xilie = res.data |
| | | } |
| | | }) |
| | | }, |
| | | // 打开搜索 |
| | | openSearch(type) { |
| | | if (type === 3 && this.xilie.length === 0) return uni.showToast({ |
| | | title: '当前暂无系列数据', |
| | | icon: 'none' |
| | | }) |
| | | if (type === this.show) { |
| | | this.show = null |
| | | } else { |
| | | this.show = type |
| | | } |
| | | }, |
| | | jump() { |
| | | uni.navigateTo({ |
| | | url: '/pages/details/details' |
| | | }) |
| | | }, |
| | | // 选择排序 |
| | | clickpx(i) { |
| | | this.paixu.forEach((item, index) => { |
| | | item.active = index === i |
| | | }) |
| | | this.show = null |
| | | this.search() |
| | | }, |
| | | // 选择系列 |
| | | clickxl(i) { |
| | | this.xilie.forEach((item, index) => { |
| | | item.active = index === i |
| | | }) |
| | | this.show = null |
| | | this.search() |
| | | }, |
| | | // 切换分类 |
| | | clickCate(e) { |
| | | this.form.categoryId = e.id |
| | | this.search() |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | .red { |
| | | color: #E4001D !important; |
| | | text { |
| | | color: #E4001D !important; |
| | | } |
| | | } |
| | | .list-item { |
| | | width: 100%; |