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.

493 lines
12 KiB

3 years ago
<template>
<view class="productSort">
3 years ago
<view class="page-top-box" :class="isFixed == true ? 'on' : ''">
<view class="top-box acea-row row-between-wrapper">
<view class="top-box-l acea-row row-middle">
<image src="../../static/images/localtion.png"></image>
<text>武汉</text>
</view>
<view class="cart-btn-box" @click="goShoppingCart()">
<image src="../../static/images/cart.png"></image>
</view>
</view>
<div class="index">
<view class="header acea-row row-center-wrapper">
<view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text>搜索商品
</view>
</view>
</div>
</view>
<!-- <view class="banner-img-box acea-row row-between-wrapper">
3 years ago
<view class="img-box-l">
3 years ago
<image src="https://download.cyjyyjy.com/life1.png" @click="alertMessage('功能开发中...')"></image>
3 years ago
</view>
<view class="img-box-r">
3 years ago
<image src="https://download.cyjyyjy.com/life2.png" @click="alertMessage('功能开发中...')"></image>
<image src="https://download.cyjyyjy.com/life3.png" @click="alertMessage('功能开发中...')"></image>
3 years ago
</view>
</view> -->
3 years ago
3 years ago
<view class="category-tab-box">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="category-item category-item-active">全部商品</view>
<!-- <view class="category-item">至尊保驾</view>
3 years ago
<view class="category-item">优选好房</view>
<view class="category-item">商城福利</view>
<view class="category-item">回头率</view> -->
3 years ago
</scroll-view>
</view>
<view class="warter-box">
<!-- <view class="headline">
3 years ago
<image src="../../static/images/rec-title.png" mode=""></image>
</view> -->
3 years ago
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{ leftList }">
<view
class="warter"
v-for="(item, index) in leftList"
:key="index"
@tap="toGoodsDetail(item.id)"
>
<image
class="warter-img"
:src="item.image"
:index="index"
mode="widthFix"
></image>
<view class="goodsinfo-box">
<view class="title line2"> {{ item.storeName }} </view>
<view class="price-box acea-row row-between-wrapper">
<text class="price">{{ item.price }}</text>
<text class="old-price">{{ item.price }}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{ rightList }">
<view
class="warter"
v-for="(item, index) in rightList"
:key="index"
@tap="toGoodsDetail(item.id)"
>
<image
class="warter-img"
:src="item.image"
:index="index"
mode="widthFix"
></image>
<view class="goodsinfo-box">
<view class="title line2"> {{ item.storeName }} </view>
<view class="price-box acea-row row-between-wrapper">
<text class="price">{{ item.price }}</text>
<text class="old-price">{{ item.otPrice }}</text>
</view>
</view>
</view>
</template>
</u-waterfall>
<u-loadmore
bg-color="rgb(240, 240, 240)"
:status="loadStatus"
@loadmore="addRandomData"
></u-loadmore>
</view>
3 years ago
<!-- <tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar> -->
3 years ago
</view>
</template>
<script>
3 years ago
import { getCategory, getProducts, getArticle, getActivity } from "@/api/store";
3 years ago
import { trim } from "@/utils";
3 years ago
import { mapGetters } from "vuex";
3 years ago
import tabbar from "../../tabbarComponent/tabbar";
3 years ago
import vSwiper from "@/components/vSwiper.vue";
3 years ago
const app = getApp();
3 years ago
export default {
3 years ago
components: {
tabbar,
vSwiper,
},
3 years ago
name: "GoodsClass",
3 years ago
computed: mapGetters(["userInfo"]),
3 years ago
props: {},
3 years ago
data: function () {
3 years ago
return {
3 years ago
category: [],
navActive: 0,
search: "",
lock: false,
menuHeight: app.globalData.menuHeight,
navHeight: app.globalData.navHeight,
menuTop: app.globalData.menuTop,
currentTabIndex: 3,
flowList: [],
isFixed: false,
loadStatus: "loadmore",
page: 1,
limit: 10,
isLoad: true, //是否还有更多
articleList: [],
active: 1,
show: false,
activity: [],
3 years ago
};
},
watch: {
3 years ago
"$yroute.query.id": function (n) {
3 years ago
if (n) {
this.activeCateId(n);
}
3 years ago
},
},
// onShow: function (options) {
// },
mounted: function () {
this.getProducts();
this.getActivity();
},
onReachBottom() {
if (this.isLoad) {
this.page = this.page + 1;
this.getProducts();
3 years ago
}
},
3 years ago
onPullDownRefresh() {
wx.showNavigationBarLoading();
this.isLoad = true;
this.page = 1;
this.getActivity();
this.clear().then(() => {
this.getProducts();
});
3 years ago
},
3 years ago
3 years ago
methods: {
3 years ago
toAritcleList() {
this.$yrouter.push("/pages/life/articleList/index");
},
async clear() {
this.$refs.uWaterfall.clear();
},
tabBarClick(index) {
this.currentTabIndex = index;
},
3 years ago
goShoppingCart() {
3 years ago
this.$yrouter.push("/pages/shop/ShoppingCart/index");
3 years ago
},
3 years ago
goGoodSearch() {
3 years ago
this.$yrouter.push("/pages/shop/GoodSearch/index");
},
goGoodsList(child) {
this.$yrouter.push({
path: "/pages/shop/GoodsList/index",
3 years ago
query: { id: child.id, title: child.cateName },
});
},
toGoodsDetail(id) {
this.$yrouter.push({
path: "/pages/shop/GoodsCon/index",
query: { id: id },
3 years ago
});
},
activeCateId(n) {
let index = 0;
n = parseInt(n);
if (!n) return;
this.category.forEach((cate, i) => {
if (cate.id === n) index = i;
});
if (index !== this.navActive) {
this.asideTap(index);
}
},
loadCategoryData() {
3 years ago
getCategory().then((res) => {
3 years ago
this.category = res.data;
this.$nextTick(() => {
if (this.$yroute.query.id) {
this.activeCateId(this.$yroute.query.id);
}
});
});
},
3 years ago
getActivity() {
getActivity().then((res) => {
this.articleList = res.data.articleList;
this.activity = res.data.activityList;
});
},
toActiveDetail(e) {
let id = e.currentTarget.dataset.id;
uni.navigateTo({
url: "/pages/activity/detail/index?id=" + id,
});
},
tabClick(i) {
console.log(i, "aiiii");
this.active = i;
},
getProducts() {
this.loadStatus = "loading";
getProducts({ page: this.page, limit: this.limit }).then((res) => {
// console.log(res)
if (this.page > 1) {
this.flowList = this.flowList.concat(res.data);
} else {
this.flowList = res.data;
}
// this.isLoad = this.limit <= res.data.length
if (this.limit <= res.data.length) {
//分页数等于返回值的length说明还有
this.isLoad = true;
} else {
console.log("没有了");
this.isLoad = false;
this.loadStatus = "nomore";
}
wx.hideNavigationBarLoading();
uni.stopPullDownRefresh();
});
},
submitForm: function () {
3 years ago
var val = trim(this.search);
if (val) {
this.$yrouter.push({
path: "/pages/shop/GoodsList/index",
3 years ago
query: { s: val },
3 years ago
});
setTimeout(() => (this.search = ""), 500);
}
},
asideTap(index) {
this.navActive = index;
3 years ago
},
3 years ago
alertMessage(msg) {
uni.showToast({
title: msg,
icon: "none",
});
},
3 years ago
},
3 years ago
beforeDestroy: function () {
3 years ago
// document.removeEventListener("scroll", this.onScroll, false);
3 years ago
},
3 years ago
};
</script>
<style lang="scss" scoped>
</style>
<style lang="less" scoped>
.productSort {
3 years ago
// height: 100%;
3 years ago
// padding-bottom: 200rpx;
background: #eeeeee !important;
position: relative;
3 years ago
}
3 years ago
3 years ago
.page-top-box {
3 years ago
width: 100%;
3 years ago
position: fixed;
top: 0;
left: 0;
z-index: 99;
background: #fff;
padding: 0 30rpx 20rpx;
box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11);
.top-box {
.top-box-l {
font-size: 32rpx;
color: #000;
font-weight: 500;
image {
width: 26rpx;
height: 30rpx;
display: block;
margin-right: 10rpx;
}
}
.cart-btn-box {
width: 50rpx;
height: 50rpx;
image {
width: 100%;
height: 100%;
}
}
}
.index {
height: 96rpx;
.header {
height: 68rpx;
position: static;
padding: 0;
margin-top: 34rpx;
.search {
background-color: #eeeeee;
border-radius: 8rpx;
}
}
}
3 years ago
}
3 years ago
.category-tab-box {
width: 100%;
height: 108rpx;
line-height: 108rpx;
padding-left: 30rpx;
// margin-bottom: 30rpx;
padding-top: 190rpx;
.scroll-view_H {
white-space: nowrap;
width: 100%;
.category-item {
display: inline-block;
font-size: 28rpx;
line-height: 40rpx;
color: #999;
margin-right: 40rpx;
&.category-item-active {
color: #ff6d31;
font-size: 32rpx;
font-weight: 500;
position: relative;
&::after {
content: "";
width: 70rpx;
height: 8rpx;
border-radius: 6rpx;
display: block;
position: absolute;
bottom: -24rpx;
left: 0;
background: #ff7942;
}
}
}
}
3 years ago
}
3 years ago
.warter-box {
width: 100%;
padding: 126rpx 24rpx 190rpx 24rpx;
.u-waterfall {
width: 100%;
display: flex;
justify-content: space-between;
.u-column {
.warter {
width: 336rpx !important;
border-radius: 10rpx;
background-color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.06);
margin-bottom: 20rpx;
image {
width: 100%;
display: block;
}
.goodsinfo-box {
width: 100%;
padding: 12rpx 16rpx;
.title {
font-size: 28rpx;
font-weight: 500;
color: #1d1d1d;
width: 100%;
height: 80rpx;
}
.price {
font-size: 28rpx;
font-weight: bold;
line-height: 40rpx;
color: #ff7942;
}
.old-price {
font-size: 20rpx;
line-height: 28rpx;
color: #bfbfbf;
text-decoration: line-through;
}
}
}
}
}
3 years ago
}
3 years ago
.banner-img-box {
width: 100%;
padding: 220rpx 40rpx 32rpx;
.img-box-l {
width: 324rpx;
height: 400rpx;
image {
width: 100%;
height: 100%;
}
}
.img-box-r {
width: 324rpx;
height: 400rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
3 years ago
// align-items: ;
3 years ago
image {
width: 324rpx;
height: 190rpx;
}
}
3 years ago
}
3 years ago
.goods-list-box {
width: 100%;
padding: 0 30rpx;
.goods-list-item {
width: 100%;
.goods-type-box {
image {
width: 94rpx;
height: 94rpx;
}
.t-word {
font-size: 36rpx;
color: #222;
font-weight: 600;
}
}
.goods-list {
width: 100%;
.goods-item {
width: 335rpx;
background: #fff;
margin-right: 10rpx;
margin-bottom: 30rpx;
border-radius: 10rpx;
overflow: hidden;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);
image {
width: 100%;
height: 278rpx;
}
}
.goods-item:nth-child(2n) {
margin-right: 0;
}
.goods-desc-box {
width: 100%;
padding: 16rpx;
font-size: 24rpx;
.goods-name {
line-height: 34rpx;
}
.price {
font-size: 28rpx;
color: #e5270f;
line-height: 40rpx;
margin-bottom: 26rpx;
}
}
}
}
3 years ago
}
</style>