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>
            <u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999"></u-search>
            <image src="/static/image/shop/3.png" class="mnue"></image>
        </view>
        <u-swiper :list="list"></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 5" class="item"></shopitem>
        </view>
        <view class="hr" style="margin-top:80rpx"></view>
        <recommend></recommend>
        <view class="hr" style="margin-top:40rpx"></view>
        <seckill></seckill>
        <view 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:[{
					image: '/static/uView/swiper/swiper1.jpg',
					title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
				},
				{
					image: '/static/uView/swiper/swiper2.jpg',
					title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
				},
				{
					image: '/static/uView/swiper/swiper3.jpg',
					title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
				}
			],
			classifyList: [],
			goodsList: []
        }
	},
	onLoad() {
		// this.getShopTopList();
		this.getGoodsRecommend();
	},
	methods: {
		// getShopTopList() {
		// 	this.$u.api.getShopTopList().then((res)=>{
		// 		if (res.errCode == 0) {
		// 		}
		// 	})
		// },
		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);
					
				}
			})
		},
		setArea(e) {
			// console.log(e);
			this.area = e.city.label;
		},
		toCartPage() {
			uni.navigateTo({
				url: '/pageC/cart/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;
    }
    .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>