401 lines
7.6 KiB
Vue
401 lines
7.6 KiB
Vue
<template>
|
|
<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>
|
|
</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
|
|
}
|
|
})
|
|
|
|
// 获取限时秒杀
|
|
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
|
|
})
|
|
|
|
},
|
|
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'
|
|
})
|
|
},
|
|
|
|
// 列表跳页
|
|
onShopMore(e) {
|
|
uni.navigateTo({
|
|
url: './bookShopType?type=' + e
|
|
});
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shopHeader {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.search {
|
|
padding: 10rpx;
|
|
background-color: #fff;
|
|
margin: 10rpx 0;
|
|
|
|
}
|
|
|
|
.swiper_box {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
|
|
.swiperImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.classfy {
|
|
margin: 0 10rpx;
|
|
border-radius: 30rpx;
|
|
|
|
view {
|
|
float: left;
|
|
width: 16.6%;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.limited {
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 20rpx 10rpx 10rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
margin-top: 10rpx;
|
|
|
|
.limitedSymbol {
|
|
width: 22%;
|
|
height: 300rpx;
|
|
border-right: 1px solid #eee;
|
|
vertical-align: middle;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin: 45px auto 0 auto;
|
|
}
|
|
}
|
|
|
|
.limitedScrollBox {
|
|
width: 76%;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.limitedItem {
|
|
width: 200rpx;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 150upx;
|
|
height: 200upx;
|
|
margin: 15rpx auto 20rpx auto;
|
|
}
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.biaoti {
|
|
font-size: 30rpx;
|
|
margin: 10rpx 0 10rpx 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.xian {
|
|
font-size: 32rpx;
|
|
color: #bf0c0c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.yuan {
|
|
text-decoration: line-through;
|
|
color: #c1c1c1;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|