521 lines
13 KiB
Vue
521 lines
13 KiB
Vue
<template>
|
||
|
||
<view class="">
|
||
<z-nav-bar title="健康超市"></z-nav-bar>
|
||
<!-- 一级分类 -->
|
||
<view class="oneBox">
|
||
<view class="oneLevel">
|
||
<u-tabs
|
||
:scrollable="false"
|
||
:current="current"
|
||
lineWidth="42"
|
||
:inactiveStyle="{ fontSize: '32rpx' }"
|
||
:list="oneLevel"
|
||
@click="getTowLevel"
|
||
lineColor="#54a966"
|
||
:activeStyle="{
|
||
color: '#303133',
|
||
fontWeight: 'bold',
|
||
transform: 'scale(1.01)',
|
||
}"
|
||
></u-tabs>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="search_box" @click="onPageJump('../peanut/searchFor')">
|
||
<text class="icon_search"></text>
|
||
<text class="prompt">搜索...</text>
|
||
</view> -->
|
||
|
||
<!-- 二级分类、商品 -->
|
||
<view class="twoBox" style="">
|
||
<!-- <u-sticky> -->
|
||
<u-tabs
|
||
v-if="utabs"
|
||
:list="towLevel"
|
||
:current="0"
|
||
:inactiveStyle="{ fontSize: '28rpx' }"
|
||
lineWidth="40"
|
||
@click="getCategoryList"
|
||
:activeStyle="{ transform: 'scale(1.01)' }"
|
||
></u-tabs>
|
||
<!-- </u-sticky> -->
|
||
</view>
|
||
<view class="classfyBody">
|
||
<!-- 二级分类、商品 -->
|
||
<view class="towLevel" v-if="towLevel.length > 0">
|
||
<view
|
||
class="towLevelContent"
|
||
v-if="commodityList && commodityList.length > 0"
|
||
>
|
||
<view
|
||
class="commodityItem"
|
||
v-for="(item, index) in commodityList"
|
||
:key="index"
|
||
@click.stop="toDetail(item.productId)"
|
||
>
|
||
<view class="box">
|
||
<image :src="item.productImages" mode=""></image>
|
||
<view class="commodityContent">
|
||
<view class="commodityTitle">
|
||
{{ item.productName }}
|
||
<span
|
||
v-if="item.productStock == 0"
|
||
style="color: #aaa; font-size: 26rpx"
|
||
>（暂无库存）</span
|
||
>
|
||
</view>
|
||
<view class="commodityPrice">
|
||
<text class="price" v-if="item.price"
|
||
>￥
|
||
<b style="font-size: 40rpx">{{ item.price }}</b>
|
||
<span class="priceTag" v-if="item.activityPrice"
|
||
>原价：￥{{ item.activityPrice }}</span
|
||
>
|
||
</text>
|
||
<text class="SoldNumber" v-if="item.sumSales"
|
||
>已售<span>{{ item.sumSales }}</span
|
||
>件</text
|
||
>
|
||
<!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock">
|
||
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
|
||
</text> -->
|
||
<view
|
||
class="publierInfo"
|
||
v-if="item.author && item.publisher"
|
||
>
|
||
<span class="c999 f24">{{ item.author }}著</span
|
||
><span class="c999 f24">/ {{ item.publisher }}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-else
|
||
style="
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #888;
|
||
margin: 20rpx 0 0 0;
|
||
flex: 1;
|
||
"
|
||
>
|
||
暂无商品
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-else
|
||
style="
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #888;
|
||
margin: 50rpx 0 0 0;
|
||
"
|
||
>
|
||
暂无分类
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<u-back-top
|
||
:scroll-top="scrollTop"
|
||
bottom="60"
|
||
:customStyle="bgiStyle"
|
||
:iconStyle="iconStyle"
|
||
></u-back-top>
|
||
</view>
|
||
<music-play :playData="playData"></music-play>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import musicPlay from "@/components/music.vue";
|
||
import $http from "@/config/requestConfig.js";
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
playData: {},
|
||
highlight: "", // 高亮下标
|
||
current: 0,
|
||
twocurrent: 0,
|
||
oneLevel: [],
|
||
towLevel: [],
|
||
commodityList: [], // 商品列表
|
||
utabs: false,
|
||
bgiStyle: {
|
||
background: "#2ab58833",
|
||
},
|
||
iconStyle: {
|
||
fontSize: "40rpx",
|
||
fontWeight: "bold",
|
||
color: "#54a966",
|
||
},
|
||
scrollTop: 0,
|
||
};
|
||
},
|
||
// contentButtonClick(e) {
|
||
// console.log(e)
|
||
// },
|
||
// onLoad(e) {
|
||
// //获取一级分类
|
||
// this.$http
|
||
// .post('book/shopcategory/getOneLevel')
|
||
// .then(res => {
|
||
// this.oneLevel = res.list
|
||
// this.current = e.type
|
||
// this.getTowLevel(this.oneLevel[e.type])
|
||
// })
|
||
// },
|
||
//页面显示
|
||
onShow() {
|
||
this.getOneLevel();
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
// 解决vant-tab组件官方问题：底部条位置错误
|
||
this.utabs = true;
|
||
}, 200);
|
||
},
|
||
components: {
|
||
musicPlay,
|
||
},
|
||
methods: {
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
// 跳转
|
||
onPageJump(url) {
|
||
uni.navigateTo({
|
||
url: url,
|
||
});
|
||
},
|
||
// 获取一级分类
|
||
getOneLevel() {
|
||
this.$http.post("book/shopcategory/getOneLevel").then((res) => {
|
||
//console.log(res,'一级分类')
|
||
this.oneLevel = res.list;
|
||
// this.current = e.type
|
||
this.getTowLevel(this.oneLevel[0]);
|
||
});
|
||
},
|
||
// 点击一级分类
|
||
getTowLevel(e) {
|
||
this.utabs = false;
|
||
// this.twocurrent = 0;
|
||
uni.showLoading();
|
||
this.$http
|
||
.post(`book/shopcategory/getTwoLevel?catId=${e.catId}`)
|
||
.then((res) => {
|
||
//console.log(res,'二级分类')
|
||
this.towLevel = res.list;
|
||
if (this.towLevel == "") {
|
||
this.commodityList = [];
|
||
} else {
|
||
let newo = {
|
||
catId: 0,
|
||
name: "全部",
|
||
parentCid: e.catId,
|
||
};
|
||
this.towLevel.splice(0, 0, newo);
|
||
// this.getCategoryList(res.list[0])
|
||
// console.log(this.towLevel, 'towLevel')
|
||
this.getCategoryList(res.list[0]);
|
||
}
|
||
uni.hideLoading();
|
||
this.utabs = true;
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
},
|
||
|
||
// 点击二级分类
|
||
getCategoryList(e) {
|
||
// console.log(e)
|
||
// return false
|
||
// this.highlight = index
|
||
this.$http
|
||
.post("book/shopproduct/appGetCategoryList", {
|
||
catId: e.catId,
|
||
})
|
||
.then((res) => {
|
||
// console.log(res,'二级分类')
|
||
this.commodityList = res.list;
|
||
});
|
||
},
|
||
// 加入购物车
|
||
addShopCar(e) {
|
||
this.$http
|
||
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
|
||
.then((res) => {
|
||
// 获得用户的购物车列表信息
|
||
this.cartList = res.cartList;
|
||
// 统计商品信息
|
||
let data = {
|
||
userId: this.userInfo.id,
|
||
productId: e.productId,
|
||
productAmount: 1,
|
||
price: e.price,
|
||
};
|
||
// 判断列表是否为空
|
||
if (this.cartList.length > 0) {
|
||
let flag = "";
|
||
let shagnpin = {};
|
||
// 循环购物车列表
|
||
flag = this.cartList.some((item, index) => {
|
||
if (item.productId == data.productId) {
|
||
shagnpin = item;
|
||
shagnpin.productAmount = item.productAmount + 1;
|
||
return true;
|
||
}
|
||
});
|
||
if (flag) {
|
||
// 已在购物车中添加
|
||
$http
|
||
.request({
|
||
url: "book/ordercart/update",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: shagnpin,
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "加入购物车成功",
|
||
duration: 1000,
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
// 加入购物车
|
||
$http
|
||
.request({
|
||
url: "book/ordercart/save",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "加入购物车成功",
|
||
duration: 1000,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
// 购物车列表为空时直接加入购物车
|
||
$http
|
||
.request({
|
||
url: "book/ordercart/save",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "加入购物车成功",
|
||
duration: 1000,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 商品内容跳转
|
||
toDetail(id) {
|
||
uni.navigateTo({
|
||
url: `./commodityDetail?id=${id}`,
|
||
});
|
||
},
|
||
},
|
||
onPullDownRefresh() {
|
||
// console.log('refresh');
|
||
this.commodityList = [];
|
||
this.getOneLevel();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.publierInfo {
|
||
display: inline-block;
|
||
background-color: #f1f1f1;
|
||
flex-direction: row;
|
||
border-radius: 10px;
|
||
vertical-align: middle;
|
||
padding: 0 12rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.c999 {
|
||
color: #999;
|
||
}
|
||
|
||
.f24 {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.search_box {
|
||
width: 90%;
|
||
height: 64upx;
|
||
background-color: #fff;
|
||
border-radius: 32upx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0upx 40upx;
|
||
position: relative;
|
||
margin: 30rpx 0 15rpx -46%;
|
||
left: 50%;
|
||
box-shadow: 0 0px 10px 1px #54a96633;
|
||
|
||
.prompt {
|
||
color: #cccccc;
|
||
}
|
||
|
||
.icon_search {
|
||
background-image: url("@/static/icon/map_ic_search.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
width: 29upx;
|
||
height: 28upx;
|
||
margin-right: 20upx;
|
||
}
|
||
}
|
||
|
||
.oneBox {
|
||
margin: 10rpx auto;
|
||
|
||
.oneLevel {
|
||
}
|
||
}
|
||
|
||
.twoBox {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.classfyBody {
|
||
margin: 5rpx auto;
|
||
// width: 100%;
|
||
height: 100%;
|
||
|
||
.towLevel {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
.towLevelTitle {
|
||
width: 28%;
|
||
height: auto;
|
||
text-align: center;
|
||
|
||
.titleItem {
|
||
font-size: 35rpx;
|
||
padding: 20rpx 10rpx;
|
||
}
|
||
|
||
.active {
|
||
background-color: #fff;
|
||
border-left: solid 10rpx #eba00b;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.towLevelContent {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 10rpx 20rpx;
|
||
width: 100%;
|
||
align-items: stretch;
|
||
// align-content:center;
|
||
align-content: start;
|
||
.commodityItem {
|
||
width: 50%;
|
||
// background-color: #fff;
|
||
padding: 10rpx;
|
||
|
||
.box {
|
||
background-color: #fff;
|
||
padding: 10rpx;
|
||
border-radius: 20rpx !important;
|
||
overflow: hidden;
|
||
box-shadow: 0 0px 10px 1px #54a96633;
|
||
}
|
||
|
||
.commodityTitle {
|
||
font-size: 32rpx;
|
||
margin: 20rpx 0 10rpx 0;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
border-radius: 10rpx;
|
||
height: 300rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.commodityContent {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.commodityPrice {
|
||
width: 100%;
|
||
position: relative;
|
||
margin: 0 0 3rpx 0;
|
||
|
||
.price {
|
||
vertical-align: middle;
|
||
color: #ffa200;
|
||
|
||
.priceTag {
|
||
flex-direction: row;
|
||
color: #999;
|
||
display: inline-block;
|
||
zoom: 0.8;
|
||
margin-left: 6rpx;
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
|
||
.SoldNumber {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
float: right;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.icon {
|
||
background-color: #fbf6ec;
|
||
border-radius: 50rpx;
|
||
padding: 5rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: -20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|