压缩图片资源
This commit is contained in:
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<scroll-view scroll-y="true" class="cate-scroll" @scrolltolower="getGoodsSearchFun">
|
||||
<view class="cate-list">
|
||||
<view class="cate-nav bg-white" v-if="navList.length && type == 2 || cate.type == 0">
|
||||
<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
|
||||
<swiper-item v-for="(items, index) in navList" :key="index">
|
||||
<view class="nav-list row wrap">
|
||||
<view v-for="(item, index2) in items" :key="index2" @tap="changeCate(item)"
|
||||
class="nav-item column-center">
|
||||
<view class="icon-wrap" :class="{active: id == item.id}">
|
||||
<u-image width="82rpx" height="82rpx" border-radius="50%" :src="item.image"></u-image>
|
||||
</view>
|
||||
<view style="width: 90%;" class="name xs line1 u-text-center" :class="{primary: id == item.id}">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="dots" v-if="navList.length > 1">
|
||||
<view v-for="(item, index) in navList" :key="index"
|
||||
:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swipers :pid="4" height="267rpx" previous-margin="0" padding="20rpx 20rpx 0" radius="10rpx"></swipers>
|
||||
<view v-if="cate.type !== 0">
|
||||
<view class="row condition bg-white mt20">
|
||||
<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
|
||||
<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">
|
||||
<text :class="priceSort ? 'primary' : ''">价格</text>
|
||||
<view>
|
||||
<trigonometry direction="up" size="small" :color="priceSort == 'desc' ? '#FF5058' : '#333'">
|
||||
</trigonometry>
|
||||
<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">
|
||||
<text :class="saleSort ? 'primary' : ''">销量</text>
|
||||
<view>
|
||||
<trigonometry direction="up" size="small" :color="saleSort == 'desc' ? '#FF5058' : '#333'">
|
||||
</trigonometry>
|
||||
<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag row-center" @tap="changeType">
|
||||
<image class="icon-sm"
|
||||
:src=" goodsType === 'one' ? '/static/images/icon_double.png' : '/static/images/icon_one.png'">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods">
|
||||
<view class="goods-list">
|
||||
<view v-show="goodsType == 'double'" class="double">
|
||||
<goods-list type="double" :list="goodsList"></goods-list>
|
||||
</view>
|
||||
<view v-show="goodsType == 'one'" class="one" style="padding: 0 20rpx">
|
||||
<goods-list :list="goodsList" type="one"></goods-list>
|
||||
</view>
|
||||
</view>
|
||||
<loading-footer :status="status" :slot-empty="true">
|
||||
<view slot="empty" class="column-center" style="padding: 200rpx 0">
|
||||
<image class="img-null" src="/static/images/goods_null.png"></image>
|
||||
<text class="lighter">暂无商品</text>
|
||||
</view>
|
||||
</loading-footer>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import {
|
||||
arraySlice,
|
||||
trottle,
|
||||
loadingFun
|
||||
} from '@/utils/tools'
|
||||
import {
|
||||
getGoodsSearch,
|
||||
} from '@/api/store';
|
||||
import {
|
||||
loadingType
|
||||
} from '@/utils/type';
|
||||
export default {
|
||||
props: {
|
||||
cate: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navSwiperH: 374,
|
||||
navList: [],
|
||||
currentSwiper: 0,
|
||||
status: loadingType.LOADING,
|
||||
page: 1,
|
||||
goodsType: 'double',
|
||||
goodsList: [],
|
||||
priceSort: '',
|
||||
saleSort: '',
|
||||
id: '',
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.onNormal = trottle(this.onNormal, 500, this);
|
||||
this.onPriceSort = trottle(this.onPriceSort, 500, this);
|
||||
this.onSaleSort = trottle(this.onSaleSort, 500, this);
|
||||
this.getGoodsSearchFun()
|
||||
},
|
||||
watch: {
|
||||
cate: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
let navList = []
|
||||
console.log(val)
|
||||
if (val.type === 0) {
|
||||
navList = val.sons[0].sons || []
|
||||
} else {
|
||||
navList = val.sons || []
|
||||
}
|
||||
if (navList.length <= 5) {
|
||||
this.navSwiperH = 200
|
||||
} else {
|
||||
this.navSwiperH = 374
|
||||
}
|
||||
this.id = val.id
|
||||
this.navList = arraySlice(navList)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["appConfig"]),
|
||||
comprehensive() {
|
||||
const {
|
||||
priceSort,
|
||||
saleSort
|
||||
} = this
|
||||
if (priceSort == '' && saleSort == '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeCate(item) {
|
||||
if(this.cate.type === 0) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_search/goods_search?id=${item.id}&name=${item.name}&type=${item.type}`
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if(this.id == item.id) {
|
||||
this.id = this.cate.id
|
||||
this.onRefresh()
|
||||
return
|
||||
}
|
||||
this.id = item.id
|
||||
this.onRefresh()
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.currentSwiper = e.detail.current
|
||||
},
|
||||
changeType() {
|
||||
this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
|
||||
},
|
||||
|
||||
onNormal() {
|
||||
this.priceSort = ''
|
||||
this.saleSort = ''
|
||||
this.onRefresh();
|
||||
},
|
||||
|
||||
onPriceSort() {
|
||||
let {
|
||||
priceSort
|
||||
} = this;
|
||||
this.saleSort = ''
|
||||
this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
|
||||
this.onRefresh();
|
||||
},
|
||||
|
||||
onSaleSort() {
|
||||
let {
|
||||
saleSort
|
||||
} = this;
|
||||
this.priceSort = ''
|
||||
this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
|
||||
this.onRefresh();
|
||||
},
|
||||
|
||||
|
||||
onRefresh() {
|
||||
this.showHistory = false
|
||||
this.page = 1
|
||||
this.goodsList = []
|
||||
this.status = loadingType.LOADING
|
||||
this.$nextTick(() => {
|
||||
this.getGoodsSearchFun();
|
||||
});
|
||||
},
|
||||
|
||||
async getGoodsSearchFun() {
|
||||
let {
|
||||
page,
|
||||
goodsList,
|
||||
priceSort,
|
||||
saleSort,
|
||||
status
|
||||
} = this;
|
||||
if (status == loadingType.FINISHED) return;
|
||||
const params = {
|
||||
category_id: this.id,
|
||||
page_no: page,
|
||||
price: priceSort,
|
||||
sales_sum: saleSort
|
||||
}
|
||||
const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
|
||||
if (!data) return
|
||||
this.page = data.page
|
||||
this.goodsList = data.dataList
|
||||
this.status = data.status
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.cate-scroll {
|
||||
height: calc(100vh - 174rpx - var(--window-bottom));
|
||||
}
|
||||
.cate-list {
|
||||
|
||||
.cate-nav {
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx 20rpx 0;
|
||||
|
||||
.nav-item {
|
||||
width: 20%;
|
||||
margin-top: 30rpx;
|
||||
.icon-wrap {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
&.active {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dots {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 20rpx;
|
||||
display: flex;
|
||||
|
||||
.dot {
|
||||
width: 10rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: rgba(255, 44, 60, 0.4);
|
||||
|
||||
&.active {
|
||||
width: 20rpx;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.condition {
|
||||
height: 80rpx;
|
||||
margin: 20rpx 20rpx 0;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.tag {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user