deming/pages/shop/index.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 5" class="item"></shopitem>
        </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 class="hr" style="margin-top:40rpx"></view>
        <seckill v-if="spikeList.length"></seckill>
        <view v-if="spikeList.length" class="hr" style="margin-top:40rpx"></view>
        <!-- <recommend></recommend> -->
        <!-- <view class="hr" style="margin-top:40rpx"></view> -->
        <group></group>
        <image class="lingquan"></image>
        <youhq></youhq>
        <view class="hr" style="margin-top:40rpx"></view>
        <list :classifyList="classifyList" :goodsList="goodsList"></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 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
    },
    data(){
        return {
			area: "请选择",
			chooseArea: false,
			areaParams: {
				province: true,
				city: true,
				area: false
			},
            keyword:"",
			list:[],
			goodsClassify: [], // 商品分类
			classifyList: [],
			goodsList: [],
			recommendedSpike: {}, // 秒杀推荐
			spikeList: [], // 全部秒杀列表
        }
	},
	onLoad() {
		this.getShopTopList();
		this.getGoodsRecommend();
	},
	onShow() {
		// console.log(this.$store.shop.state.count);
		this.getRecommendedSpike();
		this.getSpikeList();
	},
	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);
			})
		},
		// 全部秒杀
		getSpikeList() {
			this.$u.api.getSpikeList({ page: 0 }).then(res => {
				if(res.errCode == 0) this.spikeList = res.data;
			})
		},
		getGoodsRecommend() {
			this.$u.api.getGoodsRecommend({
				page: 1,
			}).then((res)=>{
				if (res.errCode == 0) {
					this.classifyList = res.data.classifyList;
					this.goodsList = res.data.goodsList;
					// console.log(this.classifyList);
					
				}
			})
		},
		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 {
		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>