Browse Source

新增商品分类

yh
yanghao 3 years ago
parent
commit
61d1b00c20
  1. 9
      api/store.js
  2. 7
      pages.json
  3. 84
      pages/life/index.vue
  4. 560
      pages/life/index2.vue
  5. 2
      pagesB/pages/shop/GoodsList/index.vue

9
api/store.js

@ -65,6 +65,15 @@ export function getCategory() {
}); });
} }
/*
* 商品分类2
* */
export function getSecondCategory() {
return request.get("/secondCategory", {}, {
login: false
});
}
/* /*
* 商品详情 * 商品详情
* */ * */

7
pages.json

@ -334,13 +334,6 @@
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, },
{
"path": "pages/life/index2",
"style": {
"navigationBarTitleText": "生活",
"enablePullDownRefresh": true
}
},
{ {
"path": "pages/life/temp/index", "path": "pages/life/temp/index",
"style": { "style": {

84
pages/life/index.vue

@ -18,23 +18,16 @@
</view> </view>
</div> </div>
</view> </view>
<!-- <view class="banner-img-box acea-row row-between-wrapper">
<view class="img-box-l">
<image src="https://download.cyjyyjy.com/life1.png" @click="alertMessage('功能开发中...')"></image>
</view>
<view class="img-box-r">
<image src="https://download.cyjyyjy.com/life2.png" @click="alertMessage('功能开发中...')"></image>
<image src="https://download.cyjyyjy.com/life3.png" @click="alertMessage('功能开发中...')"></image>
</view>
</view> -->
<view class="category-tab-box"> <view class="category-tab-box">
<scroll-view class="scroll-view_H" scroll-x="true"> <scroll-view class="scroll-view_H" scroll-x="true">
<view class="category-item category-item-active">全部商品</view> <view
<!-- <view class="category-item">至尊保驾</view> v-for="item in categoryList"
<view class="category-item">优选好房</view> :key="item.id"
<view class="category-item">商城福利</view> @click="tabClick(item)"
<view class="category-item">回头率</view> --> :class="sid == item.id ? 'category-item category-item-active' : 'category-item'"
>
{{item.cateName}}
</view>
</scroll-view> </scroll-view>
</view> </view>
<view class="warter-box"> <view class="warter-box">
@ -98,7 +91,7 @@
</view> </view>
</template> </template>
<script> <script>
import { getCategory, getProducts, getArticle, getActivity } from "@/api/store"; import { getCategory, getProducts, getArticle, getActivity, getSecondCategory } from "@/api/store";
import { trim } from "@/utils"; import { trim } from "@/utils";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import tabbar from "../../tabbarComponent/tabbar"; import tabbar from "../../tabbarComponent/tabbar";
@ -128,6 +121,8 @@ export default {
page: 1, page: 1,
limit: 10, limit: 10,
isLoad: true, // isLoad: true, //
categoryList: [{id: 0, cateName: '全部'}], //
sid: 0, //id
articleList: [], articleList: [],
active: 1, active: 1,
show: false, show: false,
@ -141,12 +136,27 @@ export default {
} }
}, },
}, },
// onShow: function (options) { onShareAppMessage() {
return {
// }, title: '禅易云生态',
path: '/pages/life/index',
success(res) {
uni.showToast({
title: '分享成功',
})
},
fail(res) {
uni.showToast({
title: '分享失败',
icon: 'none',
})
},
}
},
mounted: function () { mounted: function () {
this.getSecondCategory().then(()=>{
this.getProducts(); this.getProducts();
// this.getActivity(); })
}, },
onReachBottom() { onReachBottom() {
if (this.isLoad) { if (this.isLoad) {
@ -158,7 +168,8 @@ export default {
wx.showNavigationBarLoading(); wx.showNavigationBarLoading();
this.isLoad = true; this.isLoad = true;
this.page = 1; this.page = 1;
this.getActivity(); this.sid = this.categoryList[0].id;
// this.getActivity();
this.clear().then(() => { this.clear().then(() => {
this.getProducts(); this.getProducts();
}); });
@ -225,34 +236,47 @@ export default {
url: "/pages/activity/detail/index?id=" + id, url: "/pages/activity/detail/index?id=" + id,
}); });
}, },
tabClick(i) { tabClick(i) {
console.log(i, "aiiii"); this.sid = i.id;
this.active = i; this.page = 1;
this.isLoad = true;
this.flowList = [];
this.$refs.uWaterfall.clear();
this.getProducts();
}, },
getProducts() { async getProducts() {
// console.log(getProducts,'//////getProducts')
this.loadStatus = "loading"; this.loadStatus = "loading";
getProducts({ page: this.page, limit: this.limit }).then((res) => { getProducts(
{
page: this.page,
limit: this.limit ,
sid: this.sid
}
).then((res) => {
// console.log(res) // console.log(res)
if (this.page > 1) { if (this.page > 1) {
this.flowList = this.flowList.concat(res.data); this.flowList = this.flowList.concat(res.data);
} else { } else {
this.flowList = res.data; this.flowList = res.data;
} }
// this.isLoad = this.limit <= res.data.length
if (this.limit <= res.data.length) { if (this.limit <= res.data.length) {
//length //length
this.isLoad = true; this.isLoad = true;
} else { } else {
console.log("没有了");
this.isLoad = false; this.isLoad = false;
this.loadStatus = "nomore"; this.loadStatus = "nomore";
} }
wx.hideNavigationBarLoading(); wx.hideNavigationBarLoading();
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
console.log(this.flowList,'flowList')
}); });
}, },
async getSecondCategory(){
let res = await getSecondCategory();
this.categoryList = [ ...this.categoryList, ...res.data ]
// console.log(this.categoryList,'categoryList')
},
submitForm: function () { submitForm: function () {
var val = trim(this.search); var val = trim(this.search);
if (val) { if (val) {
@ -362,7 +386,7 @@ export default {
position: relative; position: relative;
&::after { &::after {
content: ""; content: "";
width: 70rpx; width: 100%;
height: 8rpx; height: 8rpx;
border-radius: 6rpx; border-radius: 6rpx;
display: block; display: block;

560
pages/life/index2.vue

@ -1,560 +0,0 @@
<template>
<view class="productSort">
<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>
<view class="search-box acea-row row-middle">
<image src="../../static/images/search.png" mode="" class="search-icon"></image>
<input type="text" value="" placeholder="周末去哪儿聚餐" @click="goGoodSearch()"/>
<view class="search">搜一下</view>
</view>
</view>
<!-- <view class="banner-img-box acea-row row-between-wrapper">
<view class="img-box-l">
<image src="https://download.cyjyyjy.com/life1.png" @click="alertMessage('功能开发中...')"></image>
</view>
<view class="img-box-r">
<image src="https://download.cyjyyjy.com/life2.png" @click="alertMessage('功能开发中...')"></image>
<image src="https://download.cyjyyjy.com/life3.png" @click="alertMessage('功能开发中...')"></image>
</view>
</view> -->
<view class="nav-box">
<image src="../../static/images/business-img1.png" mode="" class="nav-img"></image>
<view class="nav-list acea-row row-between">
<view class="modular acea-row row-center">
<image src="../../static/images/life-icon1.png" mode=""></image>
<view>至尊宝座</view>
</view>
<view class="modular acea-row row-center">
<image src="../../static/images/life-icon2.png" mode=""></image>
<view>优选好房</view>
</view>
<view class="modular acea-row row-center">
<image src="../../static/images/life-icon3.png" mode=""></image>
<view>权益福利</view>
</view>
<view class="modular acea-row row-center">
<image src="../../static/images/life-icon4.png" mode=""></image>
<view>商超福利</view>
</view>
</view>
</view>
<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>
<view class="category-item">优选好房</view>
<view class="category-item">商城福利</view>
<view class="category-item">回头率榜单</view>
</scroll-view>
</view>
<view class="warter-box">
<!-- <view class="headline">
<image src="../../static/images/rec-title.png" mode=""></image>
</view> -->
<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>
<!-- <tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar> -->
</view>
</template>
<script>
import { getCategory, getProducts, getArticle, getActivity } from "@/api/store";
import { trim } from "@/utils";
import { mapGetters } from "vuex";
import tabbar from "../../tabbarComponent/tabbar";
import vSwiper from "@/components/vSwiper.vue";
const app = getApp();
export default {
components: {
tabbar,
vSwiper,
},
name: "GoodsClass",
computed: mapGetters(["userInfo"]),
props: {},
data: function () {
return {
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: [],
};
},
watch: {
"$yroute.query.id": function (n) {
if (n) {
this.activeCateId(n);
}
},
},
// onShow: function (options) {
// },
mounted: function () {
this.getProducts();
this.getActivity();
},
onReachBottom() {
if (this.isLoad) {
this.page = this.page + 1;
this.getProducts();
}
},
onPullDownRefresh() {
wx.showNavigationBarLoading();
this.isLoad = true;
this.page = 1;
this.getActivity();
this.clear().then(() => {
this.getProducts();
});
},
methods: {
toAritcleList() {
this.$yrouter.push("/pages/life/articleList/index");
},
async clear() {
this.$refs.uWaterfall.clear();
},
tabBarClick(index) {
this.currentTabIndex = index;
},
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);
}
});
});
},
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 () {
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;
},
alertMessage(msg) {
uni.showToast({
title: msg,
icon: "none",
});
},
},
beforeDestroy: function () {
// document.removeEventListener("scroll", this.onScroll, false);
},
};
</script>
<style lang="scss" scoped>
</style>
<style lang="less" scoped>
.productSort {
// height: 100%;
// padding-bottom: 200rpx;
// background: #eeeeee !important;
position: relative;
}
.page-top-box {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background: #fff;
padding: 0 30rpx 0rpx;
// 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%;
}
}
}
//
.search-box {
width: 670rpx;
height: 68rpx;
border-radius: 8rpx;
margin: 24rpx auto;
background: #EEEEEE;
border-radius: 8rpx;
.search-icon {
width: 35rpx;
height: 35rpx;
margin: 0 29rpx 0 52rpx;
}
.search {
margin-left: auto;
width: 124rpx;
height: 68rpx;
line-height: 65rpx;
text-align: center;
color: #fff;
background: linear-gradient(149deg, #FFA782 0%, #FF6D31 100%);
border-radius: 0rpx 8rpx 8rpx 0rpx;
}
}
}
.nav-box{
width: 100%;
height: auto;
padding: 180rpx 40rpx 0 40rpx;
.nav-img{
width: 100%;
height: 370rpx;
}
.nav-list{
width: 100%;
height: 105rpx;
padding: 0 30rpx;
margin: 24rpx 0 20rpx 0;
.modular{
width: 96rpx;
font-size: 24rpx;
image{
width: 70rpx;
height: 70rpx;
}
}
}
}
.category-tab-box {
width: 100%;
height: 108rpx;
line-height: 108rpx;
padding-left: 30rpx;
.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;
}
}
}
}
}
.warter-box {
width: 100%;
padding: 44rpx 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;
}
}
}
}
}
}
.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;
// align-items: ;
image {
width: 324rpx;
height: 190rpx;
}
}
}
.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;
}
}
}
}
}
</style>

2
pagesB/pages/shop/GoodsList/index.vue

@ -212,8 +212,8 @@ export default {
var that = this var that = this
this.setWhere() this.setWhere()
// if (to.name !== "GoodsList") return; // if (to.name !== "GoodsList") return;
console.log(s,'ss')
const { s = '', id = 0, title = '' } = this.$yroute.query const { s = '', id = 0, title = '' } = this.$yroute.query
console.log(s,'ss')
if (s !== this.where.keyword || id !== this.where.sid) { if (s !== this.where.keyword || id !== this.where.sid) {
this.loadend = false this.loadend = false
this.loading = false this.loading = false

Loading…
Cancel
Save