294 lines
7.7 KiB
Vue
294 lines
7.7 KiB
Vue
<template>
|
|
<view class="shop">
|
|
<view class="top">
|
|
<image src="/static/image/shop/1.png" class="local"></image>
|
|
<view class="add" @click="chooseArea=true">
|
|
<text class="u-line-1">{{ area }}</text>
|
|
<image src="/static/image/shop/2.png"></image>
|
|
</view>
|
|
<view @click="sousuo">
|
|
<u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999" :disabled="true"></u-search>
|
|
</view>
|
|
<image src="/static/image/shop/3.png" class="mnue" @click="toClassifyPage"></image>
|
|
</view>
|
|
<u-swiper :list="list" mode="dot" @click="clickImage"></u-swiper>
|
|
<view class="chengnuo">
|
|
<view>
|
|
<image src="/static/image/shop/4.png"></image>
|
|
<text>免费洗衣</text>
|
|
</view>
|
|
<view>
|
|
<image src="/static/image/shop/5.png"></image>
|
|
<text>全国包邮</text>
|
|
</view>
|
|
<view>
|
|
<image src="/static/image/shop/6.png"></image>
|
|
<text>延误必赔</text>
|
|
</view>
|
|
<view>
|
|
<image src="/static/image/shop/7.png"></image>
|
|
<text>上门取件</text>
|
|
</view>
|
|
</view>
|
|
<view class="fenlei">
|
|
<shopitem v-for="item in goodsClassify" :key="item.gc_id" :info="item" class="item"></shopitem>
|
|
</view>
|
|
<view class="hr" style="margin-top:80rpx"></view>
|
|
<!-- 秒杀 -->
|
|
<recommend v-if="JSON.stringify(recommendedSpike) != '{}'" :recommendData="recommendedSpike" type="spike"></recommend>
|
|
<view v-if="JSON.stringify(recommendedSpike) != '{}'" class="hr" style="margin-top:40rpx"></view>
|
|
<seckill v-if="spikeList.length" :list="spikeList" :time="seckillTime"></seckill>
|
|
<view v-if="spikeList.length" class="hr" style="margin-top:40rpx"></view>
|
|
<!-- 拼团 -->
|
|
<pintuan v-if="JSON.stringify(pinTuanPush) != '{}'" :recommendData="pinTuanPush"></pintuan>
|
|
<view class="hr" style="margin-top:40rpx" v-if="JSON.stringify(pinTuanPush) != '{}'"></view>
|
|
<group :groupList="pinTuanList" :classifyList="couponGroupList"></group>
|
|
<image class="lingquan"></image>
|
|
<youhq></youhq>
|
|
<view class="hr" style="margin-top:40rpx"></view>
|
|
<list v-if="couponGroupList.length" :classifyList="couponGroupList"></list>
|
|
<view class="cart" @click="toCartPage">
|
|
<image src="/static/image/common/3.png"></image>
|
|
</view>
|
|
<u-picker mode="region" :params="areaParams" v-model="chooseArea" @confirm="setArea"></u-picker>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import shopitem from "@/components/shop/shop-item/index"
|
|
import recommend from "@/components/shop/recommend/index"
|
|
import pintuan from "@/components/shop/recommend/pintuan"
|
|
import seckill from "@/components/shop/seckill/index"
|
|
import group from "@/components/shop/group/index"
|
|
import youhq from "@/components/shop/youhq/index"
|
|
import list from "../../components/shop/list/index"
|
|
|
|
export default {
|
|
name:"shop",
|
|
components:{
|
|
shopitem,
|
|
recommend,
|
|
seckill,
|
|
group,
|
|
youhq,
|
|
list,
|
|
pintuan
|
|
},
|
|
data(){
|
|
return {
|
|
area: "请选择",
|
|
chooseArea: false,
|
|
areaParams: {
|
|
province: true,
|
|
city: true,
|
|
area: false
|
|
},
|
|
keyword:"",
|
|
list:[],
|
|
goodsClassify: [], // 商品分类
|
|
classifyList: [],
|
|
recommendedSpike: {}, // 秒杀推荐
|
|
spikeList: [], // 全部秒杀列表
|
|
seckillTime: {}, // 秒杀时间
|
|
couponGroupList: [], // 优惠券拼团分类
|
|
pinTuanList: [], // 拼团商品
|
|
pinTuanPush: {}, // 拼团推荐
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getShopTopList();
|
|
},
|
|
onShow() {
|
|
this.getRecommendedSpike();
|
|
this.getSpikeList();
|
|
this.getGoodsClass();
|
|
this.getPinTuanPush();
|
|
},
|
|
methods: {
|
|
sousuo(){
|
|
// console.log(123)
|
|
this.$u.route({
|
|
url:"pageB/search/index"
|
|
})
|
|
},
|
|
getShopTopList() {
|
|
this.$u.api.getShopTopList().then((res)=>{
|
|
if (res.errCode == 0) {
|
|
let temp = [];
|
|
res.data.banner.forEach(item => {
|
|
temp.push({
|
|
image: item.adv_code,
|
|
adv_link: item.adv_link,
|
|
adv_id: item.adv_id,
|
|
})
|
|
})
|
|
this.list = temp;
|
|
this.goodsClassify = res.data.goodsclass;
|
|
}
|
|
})
|
|
},
|
|
getRecommendedSpike() {
|
|
this.$u.api.recommendedSpike().then(res => {
|
|
if(res.errCode == 0) this.recommendedSpike = res.data;
|
|
// console.log(this.recommendedSpike);
|
|
})
|
|
},
|
|
// 拼团推荐
|
|
getPinTuanPush() {
|
|
this.$u.api.getPinTuanPush().then(res => {
|
|
if(res.errCode == 0) {
|
|
this.pinTuanPush = res.data;
|
|
}
|
|
})
|
|
},
|
|
// 获取优惠券拼团分类
|
|
getGoodsClass() {
|
|
this.$u.api.getGoodsClass().then(res => {
|
|
if(res.errCode == 0) {
|
|
this.couponGroupList = res.data;
|
|
this.getPinTuanList(this.couponGroupList[0].gc_id);
|
|
}
|
|
})
|
|
},
|
|
// 全部秒杀
|
|
getSpikeList() {
|
|
this.$u.api.getSpikeList({ page: 0 }).then(res => {
|
|
if(res.errCode == 0) {
|
|
this.spikeList = res.data.list;
|
|
this.seckillTime = {
|
|
bigHour: res.data.bigHour,
|
|
littleHour: res.data.littleHour,
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 拼团列表
|
|
getPinTuanList(id) {
|
|
this.$u.api.getPinTuanList({
|
|
page: 0,
|
|
gc_id: id,
|
|
}).then(res => {
|
|
this.pinTuanList = res.data;
|
|
})
|
|
},
|
|
clickImage(index) {
|
|
console.log(index);
|
|
console.log(this.list[index]);
|
|
|
|
},
|
|
setArea(e) {
|
|
// console.log(e);
|
|
this.area = e.city.label;
|
|
},
|
|
toCartPage() {
|
|
uni.navigateTo({
|
|
url: '/pageC/cart/index'
|
|
});
|
|
},
|
|
toClassifyPage() {
|
|
uni.navigateTo({
|
|
url: '/pageC/classify/index'
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.shop{
|
|
padding: 0 33rpx;
|
|
.top{
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.local{
|
|
width: 31rpx;
|
|
height: 37rpx;
|
|
}
|
|
}
|
|
.add{
|
|
width: 115rpx;
|
|
height: 25rpx;
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-left: 14rpx;
|
|
margin-right: 37rpx;
|
|
> text {
|
|
width: 80rpx;
|
|
}
|
|
>image{
|
|
width: 24rpx;
|
|
height: 15rpx;
|
|
}
|
|
}
|
|
.mnue{
|
|
width: 35rpx;
|
|
height: 26rpx;
|
|
margin-left: 36rpx;
|
|
}
|
|
.chengnuo{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 24rpx;
|
|
>view{
|
|
display: flex;
|
|
align-items: center;
|
|
>image{
|
|
width: 23rpx;
|
|
height: 23rpx;
|
|
}
|
|
>text{
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
.fenlei{
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
flex-wrap: wrap;
|
|
> view {
|
|
margin-bottom: 30rpx;
|
|
&:not(:nth-child(5n)) {
|
|
margin-right: 70rpx;
|
|
}
|
|
}
|
|
}
|
|
.hr{
|
|
width: 750rpx;
|
|
margin-left: -33rpx;
|
|
height: 20rpx;
|
|
background-color: #ececec;
|
|
}
|
|
.lingquan{
|
|
width: 750rpx;
|
|
height: 177rpx;
|
|
margin-left: -33rpx;
|
|
margin-top: 29rpx;
|
|
background-color: #ececec;
|
|
}
|
|
.cart {
|
|
z-index: 9;
|
|
position: fixed;
|
|
right: 30rpx;
|
|
bottom: 300rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: rgba(253, 211, 96, 1);
|
|
box-shadow: 0rpx 10rpx 6rpx 0rpx rgba(253,211,96,0.34);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> image {
|
|
width: 56rpx;
|
|
height: 54rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |