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.

322 lines
7.7 KiB

3 years ago
<template>
<view class="productSort">
<view class="cart-btn-box" @click="goShoppingCart()">
<text class="iconfont icon-gouwuche1"></text>
</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 class="banner-box">
<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item">1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">2</view>
</swiper-item>
</swiper>
</view> -->
<view class="userInfo-box acea-row row-between row-middle">
<view class="userInfo-l acea-row row-center-wrapper">
<image :src="userInfo.avatar"></image>
<view class="userInfo">
<view>亲爱的{{getTime()}}</view>
<view class="name line1">{{userInfo.nickname}}</view>
</view>
</view>
<view class="userInfo-r">
<view>
<text>{{userInfo.integral}}</text>积分
</view>
<view class="tips">您还有{{userInfo.integral}}积分未使用</view>
</view>
</view>
<view class="goods-list-box">
<view class="goods-list-item" v-for="item in category" :key="item.id" v-if="item.children[0].products.length>0">
<view class="goods-type-box acea-row row-center row-middle">
<view class="icon-l"><image src="../../../static/titleL-icon.png"></image></view>
<view class="t-word">{{item.children[0].cateName}}</view>
<view class="icon-l"><image src="../../../static/titleR-icon.png"></image></view>
</view>
<view class="goods-list acea-row">
<view class="goods-item" v-for="goods in item.children[0].products" :key="goods.id" @click="toGoodsDetail(goods.id)">
<image :src="goods.image"></image>
<view class="goods-desc-box">
<view class="goods-name line1">{{goods.storeName}}</view>
<view class="price">{{goods.price}}<text v-if="goods.giveIntegral > 0">+{{goods.giveIntegral}}积分</text></view>
<view class="buy-count">已出售{{goods.sales}}{{goods.unitName}}</view>
</view>
</view>
<!-- <view class="goods-item">
<image src="../../../static/img1.png"></image>
<view class="goods-desc-box">
<view class="goods-name">禅易香囊 纯手工制作提神</view>
<view class="price">199+100积分</view>
<view class="buy-count">51人购买</view>
</view>
</view>
<view class="goods-item">
<image src="../../../static/img1.png"></image>
<view class="goods-desc-box">
<view class="goods-name">禅易香囊 纯手工制作提神</view>
<view class="price">199+100积分</view>
<view class="buy-count">51人购买</view>
</view>
</view>
<view class="goods-item">
<image src="../../../static/img1.png"></image>
<view class="goods-desc-box">
<view class="goods-name">禅易香囊 纯手工制作提神</view>
<view class="price">199+100积分</view>
<view class="buy-count">51人购买</view>
</view>
</view> -->
</view>
</view>
</view>
<!-- <view style="height:100rpx;"></view> -->
<tabbar :pagePath="pagePath"></tabbar>
</view>
</template>
<script>
import { getCategory , getProducts } from "@/api/store";
import { trim } from "@/utils";
import { mapGetters } from 'vuex'
import tabbar from "../../../tabbarComponent/tabbar";
export default {
components: {
tabbar
},
name: "GoodsClass",
computed: mapGetters(['userInfo']),
props: {},
data: function() {
return {
category: [],
navActive: 0,
search: "",
lock: false,
pagePath:''
};
},
watch: {
"$yroute.query.id": function(n) {
if (n) {
this.activeCateId(n);
}
}
},
onLoad: function (options) {
let pages = getCurrentPages();
this.pagePath = '/' + pages[pages.length - 1].route;
},
mounted: function() {
// document.addEventListener("scroll", this.onScroll, false);
this.loadCategoryData();
},
methods: {
getTime() {
let hour = new Date().getHours();
if(0<hour&&hour<12) {
return '早上好';
} else if(12<=hour&&hour<13) {
return '中午好';
} else if(13<=hour&&hour<18) {
return '下午好';
} else {
return '晚上好'
}
},
goShoppingCart() {
this.$yrouter.push('/pages/shop/ShoppingCart/index')
},
goGoodSearch() {
this.$yrouter.push("/pages/shop/GoodSearch/index");
},
goGoodsList(child) {
this.$yrouter.push({
path: "/pages/shop/GoodsList/index",
query: { id: child.id, title: child.cateName }
});
},
toGoodsDetail(id){
this.$yrouter.push({
path: "/pages/shop/GoodsCon/index",
query: { id: id }
});
},
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() {
getCategory().then(res => {
this.category = res.data;
this.$nextTick(() => {
if (this.$yroute.query.id) {
this.activeCateId(this.$yroute.query.id);
}
});
});
},
submitForm: function() {
var val = trim(this.search);
if (val) {
this.$yrouter.push({
path: "/pages/shop/GoodsList/index",
query: { s: val }
});
setTimeout(() => (this.search = ""), 500);
}
},
asideTap(index) {
this.navActive = index;
}
},
beforeDestroy: function() {
// document.removeEventListener("scroll", this.onScroll, false);
}
};
</script>
<style lang="less" scoped>
.productSort {
height: 100%;
padding-bottom: 200rpx;
background: #F5F6F7 !important;
position: relative;
.cart-btn-box{
position: fixed;
top: 90%;
right: 16rpx;
width: 60rpx;
height: 60rpx;
background: #fff;
border-radius: 50px;
text-align: center;
line-height: 60rpx;
font-weight: bold;
}
}
.index{
height: 96rpx;
}
.banner-box{
width: 100%;
height: 386rpx;
margin: 20rpx 0;
background: #fff;
.swiper-box{
width: 100%;
height: 100%;
}
}
.header .search{
border: 2rpx solid #EA533E;
background-color: #fff;
}
.userInfo-box{
width: 100%;
padding: 30rpx;
font-size: 28rpx;
color: #222;
background: #fff;
margin: 20rpx 0;
.userInfo-l{
image{
width: 80rpx;
height: 80rpx;
border-radius: 25px;
}
.userInfo{
line-height: 40rpx;
margin-left: 20rpx;
.name{
width: 340rpx;
font-size: 24rpx;
color: #999;
line-height: 34rpx;
}
}
}
.userInfo-r{
font-size: 36rpx;
text{
color: #F99C10;
font-size: 36rpx;
display: inline-block;
margin-right: 12rpx;
}
.tips{
font-size: 24rpx;
color: #999;
line-height: 34rpx;
}
}
}
.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: 18rpx;
margin-bottom: 30rpx;
border-radius: 10rpx;
overflow: hidden;
image{
width: 100%;
height: 336rpx;
}
}
.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;
}
}
}
}
}
</style>