You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
13 KiB
582 lines
13 KiB
<template>
|
|
<view class="goods">
|
|
<u-navbar>
|
|
<view class="slot-wrap">
|
|
<u-search @click="openPage()" placeholder="iPhone 15" disabled :show-action="false" v-model="keyword">
|
|
</u-search>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="goods-hd">
|
|
<u-swiper :list="swiperList" mode="none" height="400"></u-swiper>
|
|
</view>
|
|
<scroll-view scroll-x class="goods-menu">
|
|
<view class="item" @click="tabItem1(item,index)" v-for="(item,index) in categoryList" :key="index"
|
|
:class="tabIndex1==index?'item-on':''">
|
|
<image :src="item.image?item.image.external_url:''"></image>
|
|
<view class="p">{{item.name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="goods-bd">
|
|
<scroll-view scroll-y class="a">
|
|
<view class="item" @click="tabItem(-1)" :class="tabIndex==-1?'item-on':''">全部</view>
|
|
<view class="item" v-for="(item,index) in categoryChildren" :key="index" @click="tabItem(index,item)"
|
|
:class="tabIndex==index?'item-on':''">{{item.name}}</view>
|
|
</scroll-view>
|
|
<view class="b">
|
|
<view class="t">
|
|
<view class="item" @click="tabFilter(0,1)" :class="filterIndex==0?'item-on':''">价格</view>
|
|
<view class="item" @click="tabFilter(1,3)" :class="filterIndex==1?'item-on':''">折扣</view>
|
|
<view class="item" @click="tabFilter(2,5)" :class="filterIndex==2?'item-on':''">销量</view>
|
|
<view class="item" @click="tabFilter(3,7)" :class="filterIndex==3?'item-on':''">综合</view>
|
|
</view>
|
|
<scroll-view scroll-y class="l" @scrolltolower="lowerthreshold">
|
|
<!-- <u-waterfall v-model="list" ref="uWaterfall1"> -->
|
|
<!-- <template v-slot:left="{leftList}"> -->
|
|
<view class="item" v-for="(item,index) in list" :key="index"
|
|
@click="goodsDetail(item.goods_id)" :isLoading="isLoading">
|
|
<image :src="item.goods_image"></image>
|
|
<view class="title">
|
|
<text>自营</text>{{item.goods_name}}
|
|
</view>
|
|
<view class="price">
|
|
<view class="n">
|
|
￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>到手价
|
|
</view>
|
|
<view class="o">￥{{item.line_price_min?Number(item.line_price_min):''}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- </template> -->
|
|
<!-- <template v-slot:right="{rightList}">
|
|
<view class="item" v-for="(item,index) in rightList" :key="index"
|
|
@click="goodsDetail(item.goods_id)" :isLoading="isLoading">
|
|
<image :src="item.goods_image"></image>
|
|
<view class="title">
|
|
<text>自营</text>{{item.goods_name}}
|
|
</view>
|
|
<view class="price">
|
|
<view class="n">
|
|
￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>到手价
|
|
</view>
|
|
<view class="o">￥{{item.line_price_min?Number(item.line_price_min):''}}</view>
|
|
</view>
|
|
</view>
|
|
</template> -->
|
|
<!-- </u-waterfall> -->
|
|
<u-empty text="暂无数据显示哦～" v-if="list.length==0" mode="list"></u-empty>
|
|
<u-divider v-if="list.length == total && total>=1">没有更多了</u-divider>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/user/vip'
|
|
export default {
|
|
data() {
|
|
return {
|
|
backgroundBg: {
|
|
"background": "transparent",
|
|
"overflow": "auto"
|
|
},
|
|
page: 1,
|
|
total: 0,
|
|
// 正在加载
|
|
isLoading: true,
|
|
tabIndex1: 0,
|
|
tabIndex: -1,
|
|
filterIndex: 0,
|
|
keyword: "",
|
|
categoryList: [],
|
|
category_id: 10001,
|
|
categoryChildren: [],
|
|
list: [],
|
|
swiperList: [],
|
|
orderSort: 1,
|
|
type: 0
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
this.type = op.type
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow(options) {
|
|
this.getCarouselList()
|
|
this.getCategoryList()
|
|
},
|
|
methods: {
|
|
lowerthreshold() {
|
|
if (this.list.length <= this.total) {
|
|
this.page++
|
|
console.log("g")
|
|
this.getBrandList(this.category_id)
|
|
}
|
|
},
|
|
// 获取背景图
|
|
getCarouselList() {
|
|
const app = this;
|
|
Api.getImage({
|
|
type: 4
|
|
})
|
|
.then(result => {
|
|
app.swiperList = result.data.imgurl;
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
// 获取分类
|
|
getCategoryList() {
|
|
const app = this;
|
|
Api.category({
|
|
is_in_store: this.type == 1 ? 1 : ''
|
|
})
|
|
.then(result => {
|
|
app.categoryList = result.data.list;
|
|
if (result.data.list && result.data.list.length > 0) {
|
|
app.categoryChildren = result.data.list[0].children;
|
|
app.category_id = result.data.list[0].category_id
|
|
app.getBrandList(result.data.list[0].category_id)
|
|
}
|
|
|
|
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
// 获取大牌商品
|
|
getBrandList(categoryId) {
|
|
const app = this;
|
|
let pamars = {
|
|
// store_id: 10001,
|
|
page: this.page,
|
|
is_brand: this.type == 1 ? '' : 1,
|
|
is_new: '',
|
|
categoryId: categoryId,
|
|
order: app.orderSort,
|
|
is_in_store: this.type == 1 ? 1 : 0
|
|
}
|
|
Api.brandList(pamars)
|
|
.then(result => {
|
|
let arr = result.data.data ||[];
|
|
app.list = app.arrayUnique([...app.list, ...arr], 'goods_id')
|
|
app.total = result.data.total
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
//数组对象去重
|
|
arrayUnique(arr, name) {
|
|
var hash = {};
|
|
return arr.reduce(function(item, next) {
|
|
hash[next[name]] ?
|
|
"" :
|
|
(hash[next[name]] = true && item.push(next));
|
|
return item;
|
|
}, []);
|
|
},
|
|
tabItem(index, item) {
|
|
console.log(index)
|
|
this.tabIndex = index;
|
|
this.page = 1;
|
|
this.list = [];
|
|
// this.$refs.uWaterfall1.clear();
|
|
this.category_id = (index==-1? this.categoryList[this.tabIndex1].category_id:item.category_id)
|
|
this.getBrandList(this.category_id)
|
|
},
|
|
tabItem1(item, index) {
|
|
this.tabIndex1 = index;
|
|
let app = this;
|
|
this.tabIndex = -1;
|
|
this.page = 1;
|
|
app.categoryChildren = [];
|
|
app.categoryChildren = item.children;
|
|
app.list = [];
|
|
// this.$refs.uWaterfall1.clear();
|
|
app.category_id = item.category_id
|
|
this.getBrandList(item.category_id)
|
|
},
|
|
tabFilter(index, stuts) {
|
|
this.filterIndex = index;
|
|
if (index == 0) {
|
|
this.orderSort = stuts == 1 ? 2 : 1
|
|
}
|
|
if (index == 1) {
|
|
this.orderSort = stuts == 3 ? 4 : 3
|
|
}
|
|
if (index == 2) {
|
|
this.orderSort = stuts == 5 ? 6 : 5
|
|
}
|
|
if (index == 3) {
|
|
this.orderSort = stuts == 7 ? 8 : 7
|
|
}
|
|
console.log(this.orderSort)
|
|
this.page = 1
|
|
this.list = [];
|
|
this.category_id = this.categoryChildren[0].category_id
|
|
this.getBrandList(this.categoryChildren[0].category_id)
|
|
},
|
|
goodsDetail(orderId) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/detail?goodsId=' + orderId
|
|
})
|
|
},
|
|
openPage() {
|
|
uni.navigateTo({
|
|
url: "/pages/search/index"
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .u-empty {
|
|
padding: 100rpx 0;
|
|
}
|
|
|
|
.goods {
|
|
.slot-wrap {
|
|
width: 400rpx;
|
|
margin-left: 60rpx;
|
|
}
|
|
|
|
&-hd {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
height: 180rpx;
|
|
white-space: nowrap;
|
|
margin-top: 30rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.item {
|
|
width: 150rpx;
|
|
height: 180rpx;
|
|
background: #FFFFFF;
|
|
display: inline-block;
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #FFFFFF;
|
|
text-align: center;
|
|
margin-left: 12rpx;
|
|
border-radius: 8rpx;
|
|
|
|
image {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
|
|
.p {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
}
|
|
|
|
&-on {
|
|
border: 1px solid #F21A1C;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
padding: 30rpx 0 0;
|
|
display: flex;
|
|
height: calc(100vh - 750rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.a {
|
|
width: 150rpx;
|
|
height: 100%;
|
|
|
|
.item {
|
|
padding: 20rpx 35rpx;
|
|
border-left: 3px solid #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
box-sizing: border-box;
|
|
|
|
&-on {
|
|
background-color: #FFFFFF;
|
|
border-left-color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.b {
|
|
width: 600rpx;
|
|
height: 100%;
|
|
background-color: #FFFFFF;
|
|
|
|
.t {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
line-height: 100rpx;
|
|
|
|
.item-on {
|
|
color: #F21A1C;
|
|
}
|
|
|
|
.item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
&-on {
|
|
color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.l {
|
|
height: calc(100% - 120rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 270rpx;
|
|
// height: 389rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 15rpx;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
image {
|
|
width: 230rpx;
|
|
height: 230rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
padding: 10rpx 0;
|
|
font-size: 20rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
height: 90rpx;
|
|
line-height: 45rpx;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
|
|
text {
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
.n {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
|
|
text {
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
|
|
.o {
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-share {
|
|
width: 548rpx;
|
|
height: 810rpx;
|
|
overflow: hidden;
|
|
|
|
.l {
|
|
width: 548rpx;
|
|
background: #FFFFFF;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.a {
|
|
width: 490rpx;
|
|
height: 243rpx;
|
|
margin: 0 auto;
|
|
padding-top: 24rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.b {
|
|
padding: 20rpx 20rpx;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 220rpx;
|
|
height: 369rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 0;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
text {
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 0 5rpx;
|
|
|
|
.n {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
|
|
text {
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
|
|
.o {
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
padding: 0 5rpx;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.c {
|
|
background-color: #F1F1F1;
|
|
height: 150rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 140rpx;
|
|
height: 122rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 640rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #F34A40;
|
|
position: fixed;
|
|
left: 50%;
|
|
margin-left: -320rpx;
|
|
top: 50%;
|
|
z-index: 2;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-top: 450rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.goods .uni-scroll-view .uni-scroll-view {
|
|
overflow: auto !important;
|
|
}
|
|
</style>
|
|
|