yanghao
/
yunshengtai-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增商品分类

yh
yanghao 3 years ago
parent
0f7e82f7c8
commit
61d1b00c20
5 changed files with 65 additions and 599 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

7
pages.json
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save