deming/pages/shop/index.vue
2020-08-01 16:36:48 +08:00

348 lines
7.9 KiB
Vue

<template>
<view>
<view class="status_bar"></view>
<scroll-view class="shop" scroll-y @scrolltolower="onreachBottom">
<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>
<view class="swiper-image">
<u-swiper :list="list" mode="dot" @click="clickImage"></u-swiper>
</view>
<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>
<!-- 秒杀 -->
<recommend v-if="JSON.stringify(recommendedSpike) != '{}'" :recommendData="recommendedSpike" type="spike"></recommend>
<!-- 秒杀列表 -->
<seckill v-if="spikeList.length" :list="spikeList" :time="seckillTime"></seckill>
<!-- 拼团推荐 -->
<pintuan v-if="JSON.stringify(pinTuanPush) != '{}'" :recommendData="pinTuanPush"></pintuan>
<!-- 拼团列表 -->
<group></group>
<view class="activity-view">
<image class="lingquan" :src="activityInfo.adv_code" @click="activityLink({ type: activityInfo.url_type, id: activityInfo.info_id })"></image>
</view>
<youhq></youhq>
<list ref="recommendGoods"></list>
<view class="cart" @click="toCartPage">
<image src="/static/image/common/3.png"></image>
</view>
<u-picker mode="selector" :range="areaList" v-model="chooseArea" range-key="area_name" @confirm="setArea"></u-picker>
</scroll-view>
</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,
keyword: "",
list: [],
goodsClassify: [], // 商品分类
// classifyList: [],
recommendedSpike: {}, // 秒杀推荐
spikeList: [], // 全部秒杀列表
seckillTime: {}, // 秒杀时间
// couponGroupList: [], // 优惠券拼团分类
pinTuanPush: {}, // 拼团推荐
activityInfo: {},
areaList: [], // 位置信息
}
},
onLoad() {
this.getShopTopList();
this.getLocation(); // 获取定位
this.getStoreActivity();
// this.area = uni.getStorageSync("address") || "请选择";
},
onShow() {
this.getRecommendedSpike();
this.getSpikeList();
this.getPinTuanPush();
this.getAllLoaction(); // 获取位置
},
methods: {
sousuo() {
// console.log(123)
this.$u.route({
url: "pageB/search/index"
})
},
// 获取定位
getLocation() {
uni.getLocation({
type: 'wgs84',
geocode: true,
success: (res) => {
// console.log(res.address);
this.area = res.address.city;
},
fail: (e) => {
console.log(e);
}
});
},
// 获取位置
getAllLoaction() {
this.$u.api.getAreaList({pid: 0}).then(res => {
// console.log(res);
this.areaList = res.data;
})
},
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;
}
})
},
// 全部秒杀
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,
}
}
})
},
clickImage(index) {
console.log(index);
console.log(this.list[index]);
},
// 下拉加载更多推荐商品
onreachBottom() {
this.$refs.recommendGoods.loadMore();
},
setArea(e) {
console.log(e);
this.area = this.areaList[e[0]].area_name;
},
toCartPage() {
uni.navigateTo({
url: '/pageC/cart/index'
});
},
toClassifyPage() {
uni.navigateTo({
url: '/pageC/classify/index'
});
},
getStoreActivity() {
this.$u.api.getStoreActivity().then(res => {
if(res.errCode == 0) {
this.activityInfo = res.data;
}
})
},
activityLink({ type, id }) {
if(type == 0 || type == 2) return false;
// type 1 商品详情页, 2 店铺详情页
const url = type == 1 ? 'pageB/sdetails/index' : '';
let params = { id: id };
// type: 1 // 商品详情 1普通 2拼团 3秒杀 4优惠券
if(type == 1) Object.assign(params, { type: 1 });
this.$u.route({
url: url,
params: params
})
},
},
}
</script>
<style lang="scss" scoped>
.shop {
height: calc(100vh - var(--window-top));
box-sizing: border-box;
background-color: #F0EDF1;
.top {
padding: 0 30rpx;
background-color: #ffffff;
width: 100%;
height: 88rpx;
display: flex;
align-items: center;
.local {
width: 31rpx;
height: 37rpx;
}
}
.swiper-image {
background-color: #ffffff;
padding: 0 30rpx;
}
.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 {
background-color: #ffffff;
width: 35rpx;
height: 26rpx;
margin-left: 36rpx;
}
.chengnuo {
padding: 30rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
>view {
display: flex;
align-items: center;
>image {
width: 23rpx;
height: 23rpx;
}
>text {
font-size: 22rpx;
color: #999;
margin-left: 8rpx;
}
}
}
.fenlei {
padding: 30rpx;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
margin-bottom: 20rpx;
>view {
margin-bottom: 30rpx;
&:not(:nth-child(5n)) {
margin-right: 70rpx;
}
}
}
.activity-view {
padding: 20rpx 30rpx;
text-align: center;
.lingquan {
background-color: #ececec;
width: 688rpx;
height: 138rpx;
}
}
.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>