371 lines
8.5 KiB
Vue
371 lines
8.5 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 v-for="(item,index) in tips" :key="index" @click="totips(item.document_code)">
|
|
<image :src="item.file_name"></image>
|
|
<text>{{item.document_title}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="fenlei">
|
|
<shopitem v-for="item in goodsClassify" :key="item.gc_id" :info="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="jumpPage({ type: activityInfo.url_type, id: activityInfo.info_id, adv_id: activityInfo.adv_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="region" v-model="chooseArea" @confirm="setArea"></u-picker>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import common from '@/static/js/common.js';
|
|
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: [], // 位置信息
|
|
tips:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getShopTopList();
|
|
this.getLocation(); // 获取定位
|
|
this.getStoreActivity();
|
|
this.gettips()
|
|
// this.area = uni.getStorageSync("address") || "请选择";
|
|
},
|
|
onShow() {
|
|
this.getRecommendedSpike();
|
|
this.getSpikeList();
|
|
this.getPinTuanPush();
|
|
this.getAllLoaction(); // 获取位置
|
|
},
|
|
methods: {
|
|
totips(id){
|
|
this.$u.route({
|
|
type:"to",
|
|
url:"/pageB/tipsinfo/index",
|
|
params:{
|
|
id
|
|
}
|
|
})
|
|
},
|
|
gettips(){
|
|
this.$u.api.tips().then((res)=>{
|
|
console.log(res)
|
|
this.tips = res.data
|
|
})
|
|
},
|
|
sousuo() {
|
|
// console.log(123)
|
|
this.$u.route({
|
|
url: "pageB/search/index",
|
|
params: {
|
|
type: 1,
|
|
}
|
|
})
|
|
},
|
|
// 获取定位
|
|
getLocation() {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
geocode: true,
|
|
success: (res) => {
|
|
console.log(res.address);
|
|
this.area = res.address.district;
|
|
},
|
|
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,
|
|
info_id: item.info_id,
|
|
url_type: item.url_type,
|
|
})
|
|
})
|
|
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.pinTuanPush = {};
|
|
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(this.list[index]);
|
|
let item = this.list[index];
|
|
this.jumpPage({
|
|
type: item.url_type,
|
|
id: item.info_id,
|
|
adv_id: item.adv_id,
|
|
});
|
|
},
|
|
// 下拉加载更多推荐商品
|
|
onreachBottom() {
|
|
this.$refs.recommendGoods.loadMore();
|
|
},
|
|
setArea(e) {
|
|
console.log(e);
|
|
this.area = e.area.label;
|
|
},
|
|
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;
|
|
}
|
|
})
|
|
},
|
|
jumpPage(uri) {
|
|
// console.log(uri);
|
|
this.$u.api.advClick({ adv_id: uri.adv_id });
|
|
common.jumpPage({ type: uri.type, id: uri.id });
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.shop {
|
|
height: calc(100vh - var(--window-top));
|
|
box-sizing: border-box;
|
|
background-color: #F0EDF1;
|
|
overflow-y: scroll;
|
|
.top {
|
|
padding: 0 30rpx;
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.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:20rpx 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 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 10rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.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: 110rpx;
|
|
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>
|