提交
This commit is contained in:
@@ -1,403 +1,414 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="">
|
||||
<view class="shopHeader">
|
||||
<!-- 顶部导航栏 -->
|
||||
<z-nav-bar title="健康超市"></z-nav-bar>
|
||||
<!-- 搜索 -->
|
||||
<!-- <view class="search" @click="goSearch()">
|
||||
<view class="">
|
||||
<view class="shopHeader">
|
||||
<!-- 顶部导航栏 -->
|
||||
<z-nav-bar title="健康超市"></z-nav-bar>
|
||||
<!-- 搜索 -->
|
||||
<!-- <view class="search" @click="goSearch()">
|
||||
<u-search placeholder="请输入需4545要的商品" v-model="keyword" :show-action="false"></u-search>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 主盒子 -->
|
||||
<view class="indexBox">
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper_box">
|
||||
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
||||
<swiper-item v-for="(item,index) in swiperlist" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image :src="item.image" mode="widthFix " class="swiperImg"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 分类 -->
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>商品分类</text>
|
||||
</view>
|
||||
<view class="classfy">
|
||||
<view v-for="(item,index) in gridArr" :key="index" @click='toClassify(item.catId,index)'>
|
||||
<!-- <u-icon v-if="item.icon" :name="item.icon" :size="46"></u-icon> -->
|
||||
<image :src="item.icon"></image>
|
||||
<text class="grid-text">{{item.name}}</text>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
<!-- 商品展示 -->
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>限时秒杀</text>
|
||||
<i @click="onShopMore('Sale')">查看更多 ></i>
|
||||
</view>
|
||||
<!-- 限时秒杀 -->
|
||||
<view class="limited">
|
||||
<view class="limitedSymbol">
|
||||
<image src="../../static/icon/shopping_xsh.png"></image>
|
||||
</view>
|
||||
<view class="limitedScrollBox">
|
||||
<u-scroll-list indicatorActiveColor="#27b386">
|
||||
<view class="limitedItem" v-for="(item,index) in seckillList" :key="index"
|
||||
@click="goDetail(item.prodInfo.productId)">
|
||||
<image :src="item.prodInfo.productImages" mode=""></image>
|
||||
<text class="biaoti">{{item.prodInfo.productName}}</text>
|
||||
<text class="xian">￥{{item.seckillPrice}}</text>
|
||||
<text class="yuan">￥{{item.prodInfo.price}}</text>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品展示 -->
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>精选商品</text>
|
||||
<i @click="onShopMore('Hot')">查看更多 ></i>
|
||||
</view>
|
||||
<view class="goods">
|
||||
<view class="goodsItem" v-for="(item,index) in goodsList" :key="item.productId"
|
||||
@click="goDetail(item.productId)">
|
||||
<image :src="item.productImages" mode="" class="goodsImg"></image>
|
||||
<view class="goodsContent">
|
||||
<view class="goodsName">
|
||||
{{item.productName}}
|
||||
</view>
|
||||
<view class="goodsPrice">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
<view style="height: 30rpx;"></view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 主盒子 -->
|
||||
<view class="indexBox">
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper_box">
|
||||
<swiper
|
||||
:indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
:duration="1000"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in swiperlist" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image
|
||||
:src="item.image"
|
||||
mode="widthFix "
|
||||
class="swiperImg"
|
||||
></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 分类 -->
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>商品分类</text>
|
||||
</view>
|
||||
<view class="classfy">
|
||||
<view
|
||||
v-for="(item, index) in gridArr"
|
||||
:key="index"
|
||||
@click="toClassify(item.catId, index)"
|
||||
>
|
||||
<!-- <u-icon v-if="item.icon" :name="item.icon" :size="46"></u-icon> -->
|
||||
<image :src="item.icon"></image>
|
||||
<text class="grid-text">{{ item.name }}</text>
|
||||
</view>
|
||||
<br clear="both" />
|
||||
</view>
|
||||
<!-- 商品展示 -->
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>限时秒杀</text>
|
||||
<i @click="onShopMore('Sale')">查看更多 ></i>
|
||||
</view>
|
||||
<!-- 限时秒杀 -->
|
||||
<view class="limited">
|
||||
<view class="limitedSymbol">
|
||||
<image src="../../static/icon/shopping_xsh.png"></image>
|
||||
</view>
|
||||
<view class="limitedScrollBox">
|
||||
<u-scroll-list indicatorActiveColor="#27b386">
|
||||
<view
|
||||
class="limitedItem"
|
||||
v-for="(item, index) in seckillList"
|
||||
:key="index"
|
||||
@click="goDetail(item.prodInfo.productId)"
|
||||
>
|
||||
<image :src="item.prodInfo.productImages" mode=""></image>
|
||||
<text class="biaoti">{{ item.prodInfo.productName }}</text>
|
||||
<text class="xian">￥{{ item.seckillPrice }}</text>
|
||||
<text class="yuan">￥{{ item.prodInfo.price }}</text>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品展示 -->
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>精选商品</text>
|
||||
<i @click="onShopMore('Hot')">查看更多 ></i>
|
||||
</view>
|
||||
<view class="goods">
|
||||
<view
|
||||
class="goodsItem"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="item.productId"
|
||||
@click="goDetail(item.productId)"
|
||||
>
|
||||
<image :src="item.productImages" mode="" class="goodsImg"></image>
|
||||
<view class="goodsContent">
|
||||
<view class="goodsName">
|
||||
{{ item.productName }}
|
||||
</view>
|
||||
<view class="goodsPrice"> ￥{{ item.price }} </view>
|
||||
</view>
|
||||
</view>
|
||||
<br clear="both" />
|
||||
</view>
|
||||
<view style="height: 30rpx"></view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
keyword: '', // 搜索索引值
|
||||
// 轮播图数据
|
||||
swiperlist: [{
|
||||
image: '../../static/icon/home_ban_1.jpg',
|
||||
},
|
||||
{
|
||||
image: '../../static/icon//home_ban_2.jpg',
|
||||
},
|
||||
{
|
||||
image: '../../static/icon//home_ban_3.jpg',
|
||||
}
|
||||
],
|
||||
totalCount: 4,
|
||||
pageSize: 1,
|
||||
totalPage: 4,
|
||||
currPage: 1,
|
||||
limit: 4,
|
||||
page: 1,
|
||||
istop: 1, // 是否是精选商品
|
||||
// 秒杀列表
|
||||
seckillList: [],
|
||||
// 商品列表
|
||||
goodsList: [],
|
||||
// 分类数据
|
||||
gridArr: [{
|
||||
icon: "list-dot",
|
||||
name: '更多'
|
||||
}],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
components: {
|
||||
musicPlay
|
||||
},
|
||||
onLoad() {
|
||||
// 获取分类
|
||||
this.$http
|
||||
.post('book/shopcategory/getOneLevel')
|
||||
.then(res => {
|
||||
// 用一个空数组去接分类数据
|
||||
let arr = []
|
||||
if (res.list.length >= 5) {
|
||||
for (let i in res.list) {
|
||||
if (i < 5) {
|
||||
arr.push({
|
||||
icon: "../../static/icon/shop_bar_" + (Number(i) + Number(1)) + ".png",
|
||||
name: res.list[i].name,
|
||||
catId: res.list[i].catId
|
||||
})
|
||||
}
|
||||
}
|
||||
arr.push({
|
||||
icon: "../../static/icon/shop_bar_more.png",
|
||||
name: '更多'
|
||||
})
|
||||
this.gridArr = arr
|
||||
}
|
||||
})
|
||||
import musicPlay from "@/components/music.vue";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData: {},
|
||||
keyword: "", // 搜索索引值
|
||||
// 轮播图数据
|
||||
swiperlist: [
|
||||
{
|
||||
image: "../../static/icon/home_ban_1.jpg",
|
||||
},
|
||||
{
|
||||
image: "../../static/icon//home_ban_2.jpg",
|
||||
},
|
||||
{
|
||||
image: "../../static/icon//home_ban_3.jpg",
|
||||
},
|
||||
],
|
||||
totalCount: 4,
|
||||
pageSize: 1,
|
||||
totalPage: 4,
|
||||
currPage: 1,
|
||||
limit: 4,
|
||||
page: 1,
|
||||
istop: 1, // 是否是精选商品
|
||||
// 秒杀列表
|
||||
seckillList: [],
|
||||
// 商品列表
|
||||
goodsList: [],
|
||||
// 分类数据
|
||||
gridArr: [
|
||||
{
|
||||
icon: "list-dot",
|
||||
name: "更多",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
components: {
|
||||
musicPlay,
|
||||
},
|
||||
onLoad() {
|
||||
// 获取分类
|
||||
this.$http.post("book/shopcategory/getOneLevel").then((res) => {
|
||||
// 用一个空数组去接分类数据
|
||||
let arr = [];
|
||||
if (res.list.length >= 5) {
|
||||
for (let i in res.list) {
|
||||
if (i < 5) {
|
||||
arr.push({
|
||||
icon:
|
||||
"../../static/icon/shop_bar_" +
|
||||
(Number(i) + Number(1)) +
|
||||
".png",
|
||||
name: res.list[i].name,
|
||||
catId: res.list[i].catId,
|
||||
});
|
||||
}
|
||||
}
|
||||
arr.push({
|
||||
icon: "../../static/icon/shop_bar_more.png",
|
||||
name: "更多",
|
||||
});
|
||||
this.gridArr = arr;
|
||||
}
|
||||
});
|
||||
|
||||
// 获取限时秒杀
|
||||
this.$http
|
||||
.get(`book/shopseckill/getSeckillProd`)
|
||||
.then(res => {
|
||||
this.seckillList = res.list
|
||||
console.log(this.seckillList)
|
||||
})
|
||||
// 获取限时秒杀
|
||||
this.$http.get(`book/shopseckill/getSeckillProd`).then((res) => {
|
||||
this.seckillList = res.list;
|
||||
console.log(this.seckillList);
|
||||
});
|
||||
|
||||
// 获取精选商品
|
||||
this.$http
|
||||
.post(`book/shopproduct/appGetList?limit=${this.limit}&page=${this.page}&istop=${this.istop}`)
|
||||
.then(
|
||||
res => {
|
||||
this.goodsList = res.page.list
|
||||
})
|
||||
// 获取精选商品
|
||||
this.$http
|
||||
.post(
|
||||
`book/shopproduct/appGetList?limit=${this.limit}&page=${this.page}&istop=${this.istop}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.goodsList = res.page.list;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 跳转详情页
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: "./commodityDetail?id=" + id,
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 跳转详情页
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: './commodityDetail?id=' + id
|
||||
});
|
||||
},
|
||||
|
||||
// 跳转分类页
|
||||
toClassify(catId, index) {
|
||||
if (catId) {
|
||||
uni.navigateTo({
|
||||
url: `./classify?type=${index}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: './classifyAll'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转搜索页
|
||||
goSearch() {
|
||||
uni.navigateTo({
|
||||
url: './commoditySearch'
|
||||
})
|
||||
},
|
||||
// 跳转分类页
|
||||
toClassify(catId, index) {
|
||||
if (catId) {
|
||||
uni.navigateTo({
|
||||
url: `./classify?type=${index}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "./classifyAll",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 列表跳页
|
||||
onShopMore(e) {
|
||||
uni.navigateTo({
|
||||
url: './bookShopType?type=' + e
|
||||
});
|
||||
},
|
||||
// 跳转搜索页
|
||||
goSearch() {
|
||||
uni.navigateTo({
|
||||
url: "./commoditySearch",
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
// 列表跳页
|
||||
onShopMore(e) {
|
||||
uni.navigateTo({
|
||||
url: "./bookShopType?type=" + e,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shopHeader {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.shopHeader {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 10rpx;
|
||||
background-color: #fff;
|
||||
margin: 10rpx 0;
|
||||
.search {
|
||||
padding: 10rpx;
|
||||
background-color: #fff;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
}
|
||||
.swiper_box {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.swiper_box {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
.swiperImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiperImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.classfy {
|
||||
margin: 0 10rpx;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.classfy {
|
||||
margin: 0 10rpx;
|
||||
border-radius: 30rpx;
|
||||
view {
|
||||
float: left;
|
||||
width: 16.6%;
|
||||
text-align: center;
|
||||
|
||||
view {
|
||||
float: left;
|
||||
width: 16.6%;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.grid-text {
|
||||
font-size: 25rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
font-size: 25rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.head_line {
|
||||
margin: 30rpx 0 30rpx 0;
|
||||
padding: 10rpx;
|
||||
|
||||
}
|
||||
b {
|
||||
display: inline-block;
|
||||
width: 12rpx;
|
||||
height: 40rpx;
|
||||
background-color: #54a966;
|
||||
vertical-align: bottom;
|
||||
margin: 0 20rpx 0 0;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
i {
|
||||
float: right;
|
||||
font-style: normal;
|
||||
color: #8b8a91;
|
||||
font-size: 24rpx;
|
||||
margin: 15rpx 35rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.head_line {
|
||||
margin: 30rpx 0 30rpx 0;
|
||||
padding: 10rpx;
|
||||
.limited {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 20rpx 10rpx 10rpx 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
margin-top: 10rpx;
|
||||
|
||||
b {
|
||||
display: inline-block;
|
||||
width: 12rpx;
|
||||
height: 40rpx;
|
||||
background-color: #54a966;
|
||||
vertical-align: bottom;
|
||||
margin: 0 20rpx 0 0;
|
||||
}
|
||||
.limitedSymbol {
|
||||
width: 22%;
|
||||
height: 300rpx;
|
||||
border-right: 1px solid #eee;
|
||||
vertical-align: middle;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 45px auto 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
float: right;
|
||||
font-style: normal;
|
||||
color: #8b8a91;
|
||||
font-size: 24rpx;
|
||||
margin: 15rpx 35rpx 0 0;
|
||||
}
|
||||
}
|
||||
.limitedScrollBox {
|
||||
width: 76%;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.limited {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 20rpx 10rpx 10rpx 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
margin-top: 10rpx;
|
||||
.limitedItem {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
|
||||
.limitedSymbol {
|
||||
width: 22%;
|
||||
height: 300rpx;
|
||||
border-right: 1px solid #eee;
|
||||
vertical-align: middle;
|
||||
image {
|
||||
width: 150upx;
|
||||
height: 200upx;
|
||||
margin: 15rpx auto 20rpx auto;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 45px auto 0 auto;
|
||||
}
|
||||
}
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.limitedScrollBox {
|
||||
width: 76%;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.biaoti {
|
||||
font-size: 30rpx;
|
||||
margin: 10rpx 0 10rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.limitedItem {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
.xian {
|
||||
font-size: 32rpx;
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 150upx;
|
||||
height: 200upx;
|
||||
margin: 15rpx auto 20rpx auto;
|
||||
}
|
||||
.yuan {
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
.goods {
|
||||
width: 100%;
|
||||
|
||||
.biaoti {
|
||||
font-size: 30rpx;
|
||||
margin: 10rpx 0 10rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goodsItem {
|
||||
display: inline-block;
|
||||
width: 46%;
|
||||
border-radius: 20rpx;
|
||||
padding: 25rpx 25rpx 20rpx 25rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.xian {
|
||||
font-size: 32rpx;
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goodsImg {
|
||||
width: 98%;
|
||||
height: 380rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
.goodsContent {
|
||||
.goodsName {
|
||||
margin-top: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.goodsPrice {
|
||||
font-size: 30rpx;
|
||||
margin: 5rpx 0 0 3rpx;
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
width: 100%;
|
||||
|
||||
|
||||
.goodsItem {
|
||||
display: inline-block;
|
||||
width: 46%;
|
||||
border-radius: 20rpx;
|
||||
padding: 25rpx 25rpx 20rpx 25rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.goodsImg {
|
||||
width: 98%;
|
||||
height: 380rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.goodsContent {
|
||||
|
||||
.goodsName {
|
||||
margin-top: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goodsPrice {
|
||||
font-size: 30rpx;
|
||||
margin: 5rpx 0 0 3rpx;
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goodsItem:nth-child(2n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.goodsItem:nth-child(2n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,333 +1,359 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view>
|
||||
<z-nav-bar :title="title"></z-nav-bar>
|
||||
<view>
|
||||
<z-nav-bar :title="title"></z-nav-bar>
|
||||
|
||||
<view class="shop_list">
|
||||
<view class="sl_tioa" v-for="(item,index) in shopList" @click="onShopJump(item)">
|
||||
<image :src="item.productImages"></image>
|
||||
<view class="sl_cont">
|
||||
<view class="sl_tit">
|
||||
<text class="bok_name">
|
||||
{{item.productName}}
|
||||
<span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
|
||||
</text>
|
||||
</view>
|
||||
<view class="sl_ric">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
<view class="sl_del" v-if="shopScreen.type == 'Sale'">
|
||||
￥{{item.oldprice}}
|
||||
</view>
|
||||
<view class="sl_gou" v-if="item.productStock>0" @click.stop="addShopCar(item)">
|
||||
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
</view>
|
||||
<view class="shop_list">
|
||||
<view
|
||||
class="sl_tioa"
|
||||
v-for="(item, index) in shopList"
|
||||
@click="onShopJump(item)"
|
||||
>
|
||||
<image :src="item.productImages"></image>
|
||||
<view class="sl_cont">
|
||||
<view class="sl_tit">
|
||||
<text class="bok_name">
|
||||
{{ item.productName }}
|
||||
<span
|
||||
v-if="item.productStock == 0"
|
||||
style="color: #aaa; font-size: 26rpx"
|
||||
>（无货）</span
|
||||
>
|
||||
</text>
|
||||
</view>
|
||||
<view class="sl_ric"> ￥{{ item.price }} </view>
|
||||
<view class="sl_del" v-if="shopScreen.type == 'Sale'">
|
||||
￥{{ item.oldprice }}
|
||||
</view>
|
||||
<view
|
||||
class="sl_gou"
|
||||
v-if="item.productStock > 0"
|
||||
@click.stop="addShopCar(item)"
|
||||
>
|
||||
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<br clear="both" />
|
||||
</view>
|
||||
<view style="height: 1px"></view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view v-if="status == 0" style="text-align: center">
|
||||
<u-loading-icon style="display: inline-block"></u-loading-icon>
|
||||
<font
|
||||
style="
|
||||
vertical-align: super;
|
||||
margin-left: 10px;
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
"
|
||||
>努力加载中</font
|
||||
>
|
||||
</view>
|
||||
<view v-if="status == 1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
<view style="padding-bottom: 20rpx">
|
||||
<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:{},
|
||||
scrollTop: 0,
|
||||
status: 3,
|
||||
shopScreen: {
|
||||
type: '',
|
||||
page: 1, //当前页码数
|
||||
limit: 5, //单页数据数量
|
||||
},
|
||||
productInfo: {},
|
||||
totalPage: 0,
|
||||
totalCount: 0,
|
||||
shopList: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
urList: '',
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
import musicPlay from "@/components/music.vue";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData: {},
|
||||
scrollTop: 0,
|
||||
status: 3,
|
||||
shopScreen: {
|
||||
type: "",
|
||||
page: 1, //当前页码数
|
||||
limit: 5, //单页数据数量
|
||||
},
|
||||
productInfo: {},
|
||||
totalPage: 0,
|
||||
totalCount: 0,
|
||||
shopList: [],
|
||||
bgiStyle: {
|
||||
background: "#2ab58833",
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: "40rpx",
|
||||
fontWeight: "bold",
|
||||
color: "#54a966",
|
||||
},
|
||||
urList: "",
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.shopScreen.page < this.totalPage) {
|
||||
this.shopScreen.page = this.shopScreen.page + 1
|
||||
setTimeout(() => {
|
||||
if (this.shopScreen.type == 'Hot') {
|
||||
this.$http
|
||||
.post(this.urList + '?page=' + this.shopScreen.page + '&limit=' + this.shopScreen
|
||||
.limit)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.shopList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
},
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0;
|
||||
if (this.shopScreen.page < this.totalPage) {
|
||||
this.shopScreen.page = this.shopScreen.page + 1;
|
||||
setTimeout(() => {
|
||||
if (this.shopScreen.type == "Hot") {
|
||||
this.$http
|
||||
.post(
|
||||
this.urList +
|
||||
"?page=" +
|
||||
this.shopScreen.page +
|
||||
"&limit=" +
|
||||
this.shopScreen.limit
|
||||
)
|
||||
.then((res) => {
|
||||
this.totalPage = res.page.totalPage;
|
||||
this.totalCount = res.page.totalCount;
|
||||
for (let i in res.page.list) {
|
||||
this.shopList.push(res.page.list[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.status = 1;
|
||||
}
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.shopScreen.type = e.type
|
||||
if (this.shopScreen.type == 'Sale') {
|
||||
this.urList = 'book/shopseckill/getSeckillProd'
|
||||
this.title = '限时秒杀'
|
||||
} else if (this.shopScreen.type == 'Hot') {
|
||||
this.urList = 'book/shopproduct/appGetList'
|
||||
this.title = '精选商品'
|
||||
}
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.shopScreen.type = e.type;
|
||||
if (this.shopScreen.type == "Sale") {
|
||||
this.urList = "book/shopseckill/getSeckillProd";
|
||||
this.title = "限时秒杀";
|
||||
} else if (this.shopScreen.type == "Hot") {
|
||||
this.urList = "book/shopproduct/appGetList";
|
||||
this.title = "精选商品";
|
||||
}
|
||||
|
||||
this.getData();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
components: {
|
||||
musicPlay
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
console.log(this.urList)
|
||||
this.shopList = []
|
||||
if (this.shopScreen.type == 'Hot') {
|
||||
this.$http
|
||||
.post(this.urList + '?page=' + this.shopScreen.page + '&limit=' + this.shopScreen.limit)
|
||||
.then(res => {
|
||||
this.shopList = res.page.list
|
||||
this.totalPage = res.page.totalPage
|
||||
this.status = 3
|
||||
});
|
||||
} else if (this.shopScreen.type == 'Sale') {
|
||||
this.$http
|
||||
.get(this.urList)
|
||||
.then(res => {
|
||||
let arr = []
|
||||
for (let i in res.list) {
|
||||
arr.push({
|
||||
productImages: res.list[i].prodInfo.productImages,
|
||||
productName: res.list[i].prodInfo.productName,
|
||||
price: res.list[i].seckillPrice,
|
||||
oldprice: res.list[i].prodInfo.price,
|
||||
productId: res.list[i].prodInfo.productId,
|
||||
})
|
||||
}
|
||||
this.shopList = arr
|
||||
this.status = 3
|
||||
});
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
components: {
|
||||
musicPlay,
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
console.log(this.urList);
|
||||
this.shopList = [];
|
||||
if (this.shopScreen.type == "Hot") {
|
||||
this.$http
|
||||
.post(
|
||||
this.urList +
|
||||
"?page=" +
|
||||
this.shopScreen.page +
|
||||
"&limit=" +
|
||||
this.shopScreen.limit
|
||||
)
|
||||
.then((res) => {
|
||||
this.shopList = res.page.list;
|
||||
this.totalPage = res.page.totalPage;
|
||||
this.status = 3;
|
||||
});
|
||||
} else if (this.shopScreen.type == "Sale") {
|
||||
this.$http.get(this.urList).then((res) => {
|
||||
let arr = [];
|
||||
for (let i in res.list) {
|
||||
arr.push({
|
||||
productImages: res.list[i].prodInfo.productImages,
|
||||
productName: res.list[i].prodInfo.productName,
|
||||
price: res.list[i].seckillPrice,
|
||||
oldprice: res.list[i].prodInfo.price,
|
||||
productId: res.list[i].prodInfo.productId,
|
||||
});
|
||||
}
|
||||
this.shopList = arr;
|
||||
this.status = 3;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
// 加入购物车
|
||||
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,
|
||||
};
|
||||
console.log(e);
|
||||
// 判断列表是否为空
|
||||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 加入购物车
|
||||
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
|
||||
}
|
||||
console.log(e)
|
||||
// 判断列表是否为空
|
||||
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,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 商品内容跳转
|
||||
onShopJump(e) {
|
||||
uni.navigateTo({
|
||||
url: './commodityDetail?id=' + e.productId
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
// 商品内容跳转
|
||||
onShopJump(e) {
|
||||
uni.navigateTo({
|
||||
url: "./commodityDetail?id=" + e.productId,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
@import "@/style/mixin.scss";
|
||||
|
||||
.shop_list {
|
||||
margin: 30rpx;
|
||||
|
||||
.sl_tioa {
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
padding: 25rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.shop_list {
|
||||
margin: 30rpx;
|
||||
.sl_cont {
|
||||
float: left;
|
||||
|
||||
.sl_tioa {
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
padding: 25rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
.sl_tit {
|
||||
max-width: 420rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.sl_ric {
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.sl_cont {
|
||||
float: left;
|
||||
.sl_del {
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.sl_tit {
|
||||
max-width: 420rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.sl_ric {
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.sl_del {
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.sl_gou {
|
||||
background-color: #fbf6ec;
|
||||
border-radius: 50rpx;
|
||||
padding: 5rpx;
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
bottom: 40rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.sl_gou {
|
||||
background-color: #fbf6ec;
|
||||
border-radius: 50rpx;
|
||||
padding: 5rpx;
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,458 +1,523 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<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')">
|
||||
<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">
|
||||
|
||||
<!-- 二级分类、商品 -->
|
||||
<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>
|
||||
<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();
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
}
|
||||
// 点击二级分类
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.c999 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.f24 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.oneBox {
|
||||
margin: 10rpx auto;
|
||||
.oneLevel {
|
||||
}
|
||||
}
|
||||
|
||||
.oneLevel {}
|
||||
}
|
||||
.twoBox {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.twoBox {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.classfyBody {
|
||||
margin: 5rpx auto;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.towLevel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.active {
|
||||
background-color: #fff;
|
||||
border-left: solid 10rpx #eba00b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.towLevelTitle {
|
||||
width: 28%;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
.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;
|
||||
|
||||
.titleItem {
|
||||
font-size: 35rpx;
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
.box {
|
||||
background-color: #fff;
|
||||
padding: 10rpx;
|
||||
border-radius: 20rpx !important;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0px 10px 1px #54a96633;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #fff;
|
||||
border-left: solid 10rpx #eba00b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.commodityTitle {
|
||||
font-size: 32rpx;
|
||||
margin: 20rpx 0 10rpx 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 10rpx;
|
||||
height: 300rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #fff;
|
||||
padding: 10rpx;
|
||||
border-radius: 20rpx !important;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0px 10px 1px #54a96633;
|
||||
}
|
||||
.commodityContent {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
|
||||
.commodityTitle {
|
||||
font-size: 32rpx;
|
||||
margin: 20rpx 0 10rpx 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 10rpx;
|
||||
height: 300rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.commodityPrice {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0 0 3rpx 0;
|
||||
|
||||
.commodityContent {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
.price {
|
||||
vertical-align: middle;
|
||||
color: #ffa200;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.priceTag {
|
||||
flex-direction: row;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
zoom: 0.8;
|
||||
margin-left: 6rpx;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.commodityPrice {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0 0 3rpx 0;
|
||||
.SoldNumber {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
float: right;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
vertical-align: middle;
|
||||
color: #ffa200;
|
||||
|
||||
.priceTag {
|
||||
flex-direction: row;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
zoom: .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
background-color: #fbf6ec;
|
||||
border-radius: 50rpx;
|
||||
padding: 5rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,80 @@
|
||||
<template><page-meta
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view>
|
||||
<z-nav-bar title="全部分类"></z-nav-bar>
|
||||
<view class="oneLevel">
|
||||
<view class="oneItem" v-for="(item,index) in oneLevel" @click="getTowLevel(index)">
|
||||
<image :src="item.icon"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<z-nav-bar title="全部分类"></z-nav-bar>
|
||||
<view class="oneLevel">
|
||||
<view
|
||||
class="oneItem"
|
||||
v-for="(item, index) in oneLevel"
|
||||
@click="getTowLevel(index)"
|
||||
>
|
||||
<image :src="item.icon"></image>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import musicPlay from '@/components/music.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
oneLevel: [],
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.$http
|
||||
.post('book/shopcategory/getOneLevel')
|
||||
.then(res => {
|
||||
let arr = []
|
||||
for (let i in res.list) {
|
||||
arr.push({
|
||||
icon: "../../static/icon/shop_bar_" + (Number(i) + Number(1)) + ".png",
|
||||
name: res.list[i].name,
|
||||
catId: res.list[i].catId
|
||||
})
|
||||
}
|
||||
this.oneLevel = arr
|
||||
})
|
||||
},
|
||||
components: {
|
||||
musicPlay
|
||||
},
|
||||
methods: {
|
||||
// 点击分类跳转
|
||||
getTowLevel(e) {
|
||||
uni.navigateTo({
|
||||
url: `./classify?type=${e}`
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
import musicPlay from "@/components/music.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData: {},
|
||||
oneLevel: [],
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.$http.post("book/shopcategory/getOneLevel").then((res) => {
|
||||
let arr = [];
|
||||
for (let i in res.list) {
|
||||
arr.push({
|
||||
icon:
|
||||
"../../static/icon/shop_bar_" + (Number(i) + Number(1)) + ".png",
|
||||
name: res.list[i].name,
|
||||
catId: res.list[i].catId,
|
||||
});
|
||||
}
|
||||
this.oneLevel = arr;
|
||||
});
|
||||
},
|
||||
components: {
|
||||
musicPlay,
|
||||
},
|
||||
methods: {
|
||||
// 点击分类跳转
|
||||
getTowLevel(e) {
|
||||
uni.navigateTo({
|
||||
url: `./classify?type=${e}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.oneLevel {
|
||||
.oneLevel {
|
||||
margin: 10rpx 0 0 0;
|
||||
|
||||
margin: 10rpx 0 0 0;
|
||||
.oneItem {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
margin: 30rpx 0 0 0;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.oneItem {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
margin: 30rpx 0 0 0;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,8 @@
|
||||
<template><page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<template>
|
||||
<page-meta
|
||||
:page-font-size="$baseFontSize() + 'px'"
|
||||
:root-font-size="$baseFontSize() + 'px'"
|
||||
></page-meta>
|
||||
<view class="">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
@@ -262,10 +263,15 @@
|
||||
type="success"
|
||||
></u-tag>
|
||||
</view>
|
||||
<view class="orderReal" style=" width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;">
|
||||
<view
|
||||
class="orderReal"
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span style="color: #666; margin-right: 10rpx; float: left"
|
||||
>创建时间 :
|
||||
</span>
|
||||
@@ -1108,7 +1114,8 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/mixin.scss";
|
||||
@import "@/style/common.scss";
|
||||
view,uni-view {
|
||||
view,
|
||||
uni-view {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.expresslist {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user