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
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>
|