|
|
<!-- 首页 -->
|
|
|
<template>
|
|
|
<view class="home-wrap u-m-b-20">
|
|
|
<!-- 空白页 -->
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
|
<u-no-network @retry="init"></u-no-network>
|
|
|
<!-- #endif -->
|
|
|
<shopro-empty
|
|
|
v-if="!hasTemplate"
|
|
|
:image="$IMG_URL + '/imgs/empty/template_empty.png'"
|
|
|
tipText="暂未找到模板，请前往装修~"
|
|
|
></shopro-empty>
|
|
|
|
|
|
<view v-else-if="isConnected && isRefresh" class="content-box">
|
|
|
<!-- 导航栏 -->
|
|
|
<home-head
|
|
|
v-if="headSwiperList && headSwiperList.length"
|
|
|
:scrollTop="scrollTop"
|
|
|
borderRadius="0"
|
|
|
@setLocation="getLocation"
|
|
|
:storeInfo ='storeInfo'
|
|
|
:locationInfo="locationInfo"
|
|
|
:navTitle="storeInfo.name"
|
|
|
:distance="storeInfo.distance_text"
|
|
|
:list="headSwiperList"
|
|
|
></home-head>
|
|
|
<!-- <view style="padding:30rpx 24rpx 20rpx 24rpx;background: #fff;" class="notice">
|
|
|
<u-notice-bar :volume-icon="true" mode="vertical" :more-icon="true" :list="list"></u-notice-bar>
|
|
|
</view> -->
|
|
|
<view style="height:20upx;width:100%;background:#fff"></view>
|
|
|
<!-- 自定义模块 -->
|
|
|
<view class="template-box">
|
|
|
<block v-for="(item, index) in homeTemplate" :key="item.id">
|
|
|
<!-- 轮播 -->
|
|
|
<sh-banner
|
|
|
v-if="item.type === 'banner' && index !== 0"
|
|
|
:Px="item.content.x"
|
|
|
:Py="item.content.y"
|
|
|
:borderRadius="item.content.radius"
|
|
|
:height="item.content.height"
|
|
|
:list="item.content.list"
|
|
|
></sh-banner>
|
|
|
|
|
|
<!-- 搜索 -->
|
|
|
<sh-search v-if="item.type === 'search'"></sh-search>
|
|
|
|
|
|
<!-- 滑动宫格 -->
|
|
|
<sh-grid-swiper
|
|
|
v-if="item.type === 'menu'"
|
|
|
:list="item.content.list"
|
|
|
:oneRowNum="item.content.style"
|
|
|
></sh-grid-swiper>
|
|
|
|
|
|
<!-- 推荐商品 -->
|
|
|
<sh-hot-goods
|
|
|
:per_page="100"
|
|
|
v-if="item.type === 'goods-list' || item.type === 'goods-group'"
|
|
|
:detail="item.content"
|
|
|
></sh-hot-goods>
|
|
|
<!-- 广告魔方 -->
|
|
|
<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
|
|
|
<!-- 优惠券 -->
|
|
|
<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
|
|
|
<!-- 秒杀-->
|
|
|
<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
|
|
|
<!-- 拼团 -->
|
|
|
<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
|
|
|
<!-- 富文本 -->
|
|
|
<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
|
|
|
<!-- 功能标题 -->
|
|
|
<sh-title-card
|
|
|
v-if="item.type === 'title-block'"
|
|
|
:title="item.content.name"
|
|
|
:bgImage="item.content.image"
|
|
|
:titleColor="item.content.color"
|
|
|
></sh-title-card>
|
|
|
<!-- 直播 -->
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
|
|
|
<!-- #endif -->
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
<!-- 分类选项卡 -->
|
|
|
<sh-category-tabs
|
|
|
v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
|
|
|
:enable="enable"
|
|
|
:styleType="categoryTabsData.style"
|
|
|
:tabsList="categoryTabsData.category_arr"
|
|
|
></sh-category-tabs>
|
|
|
<!-- 登录提示 -->
|
|
|
<shopro-auth-modal></shopro-auth-modal>
|
|
|
<!-- 悬浮按钮 -->
|
|
|
<!-- <shopro-float-btn></shopro-float-btn> -->
|
|
|
<!-- 连续弹窗提醒 -->
|
|
|
<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
|
|
|
<!-- 隐私协议 -->
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
|
<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef H5 -->
|
|
|
<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
<!-- <shopro-tabbar></shopro-tabbar> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import shBanner from './components/sh-banner.vue';
|
|
|
import shGridSwiper from './components/sh-grid-swiper.vue';
|
|
|
import shHotGoods from './components/sh-hot-goods.vue';
|
|
|
import shAdv from './components/sh-adv.vue';
|
|
|
import shCoupon from './components/sh-coupon.vue';
|
|
|
import shSeckill from './components/sh-seckill.vue';
|
|
|
import shGroupon from './components/sh-groupon.vue';
|
|
|
import shRichtext from './components/sh-richtext.vue';
|
|
|
import shTitleCard from './components/sh-title-card.vue';
|
|
|
import shSearch from './components/sh-search.vue';
|
|
|
import shCategoryTabs from './components/sh-category-tabs.vue';
|
|
|
|
|
|
import privacyModal from './index/privacy-modal.vue';
|
|
|
import homeHead from './index/home-head.vue';
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
import { HAS_LIVE } from '@/env';
|
|
|
import shLive from './components/sh-live.vue';
|
|
|
// #endif
|
|
|
|
|
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
|
|
import Auth from "@/shopro/permission/index.js";
|
|
|
export default {
|
|
|
components: {
|
|
|
shBanner,
|
|
|
shGridSwiper,
|
|
|
shGroupon,
|
|
|
shHotGoods,
|
|
|
shAdv,
|
|
|
shCoupon,
|
|
|
shSeckill,
|
|
|
shRichtext,
|
|
|
shTitleCard,
|
|
|
shSearch,
|
|
|
shCategoryTabs,
|
|
|
|
|
|
privacyModal,
|
|
|
homeHead,
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
shLive
|
|
|
// #endif
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
HAS_LIVE: HAS_LIVE,
|
|
|
// #endif
|
|
|
isRefresh: true,
|
|
|
locationInfo: {},
|
|
|
storeInfo: {},
|
|
|
enable: false, //是否开启吸顶。
|
|
|
isConnected: true, //是否有网
|
|
|
showPrivacy: false, //协议
|
|
|
scrollTop: 0,
|
|
|
spm: "",
|
|
|
list:['快来领新人福利啦~']
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
|
|
|
// 头部模块数据
|
|
|
headSwiperList() {
|
|
|
if (this.homeTemplate?.length) {
|
|
|
return this.homeTemplate[0]?.content?.list;
|
|
|
}
|
|
|
},
|
|
|
// 分类选项卡数据
|
|
|
categoryTabsData() {
|
|
|
if (this.homeTemplate?.length) {
|
|
|
return this.homeTemplate[this.homeTemplate.length - 1]?.content;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
this.init();
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
this.scrollTop = e.scrollTop;
|
|
|
},
|
|
|
onShow() {
|
|
|
// 监听选择自提点
|
|
|
uni.$once("SELECT_STORE1", (res) => {
|
|
|
console.log(res,"ooooo")
|
|
|
this.storeInfo = JSON.parse(res.storeInfo);
|
|
|
uni.setStorageSync('storeId',JSON.parse(res.storeInfo).id)
|
|
|
uni.setStorageSync("locationStoreInfo",JSON.parse(res.storeInfo))
|
|
|
});
|
|
|
let that = this;
|
|
|
this.enable = true;
|
|
|
this.isLogin && this.getCartList();
|
|
|
// 网络变化检测
|
|
|
uni.onNetworkStatusChange(res => {
|
|
|
this.isConnected = res.isConnected;
|
|
|
res.isConnected && this.init();
|
|
|
});
|
|
|
},
|
|
|
onHide() {
|
|
|
this.enable = false;
|
|
|
},
|
|
|
onLoad(o) {
|
|
|
// #ifdef APP-VUE
|
|
|
// plus.runtime.disagreePrivacy();
|
|
|
console.log(plus.runtime.isAgreePrivacy(), 1111111111);
|
|
|
// app隐私协议弹窗
|
|
|
if (!plus.runtime.isAgreePrivacy()) {
|
|
|
this.showPrivacy = true;
|
|
|
this.showNoticeModal = false;
|
|
|
}
|
|
|
// #endif
|
|
|
// #ifdef MP-WEIXIN
|
|
|
this.getLocation();
|
|
|
// #endif
|
|
|
if(o && o.spm) {
|
|
|
this.spm = o.spm
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//获取门店
|
|
|
async getNearbyStore() {
|
|
|
let that = this;
|
|
|
let { code, data } = await that.$http('common.getNearbyStore', {
|
|
|
latitude: that.locationInfo.latitude,
|
|
|
longitude: that.locationInfo.longitude,
|
|
|
spm: that.spm
|
|
|
}, '')
|
|
|
if (code === 1) {
|
|
|
if(data && data.length > 0){
|
|
|
data.sort((a,b)=>{
|
|
|
return a.distance - b.distance
|
|
|
})
|
|
|
that.storeInfo = data[0]
|
|
|
uni.setStorageSync('storeId',data[0].id)
|
|
|
uni.setStorageSync("locationStoreInfo",data[0])
|
|
|
}else{
|
|
|
that.storeInfo = {}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
...mapActions(['appInit', 'getTemplate', 'getCartList']),
|
|
|
// 获取位置
|
|
|
async getLocation() {
|
|
|
const that = this;
|
|
|
let authState = await new Auth("userLocation").check();
|
|
|
// #ifdef MP || APP-VUE
|
|
|
authState &&
|
|
|
uni.getLocation({
|
|
|
type: "gcj02",
|
|
|
success: (res) => {
|
|
|
console.log("res", res);
|
|
|
that.locationInfo = res
|
|
|
that.getNearbyStore();
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.log("err:", err);
|
|
|
},
|
|
|
});
|
|
|
// #endif
|
|
|
// #ifdef H5
|
|
|
uni.getLocation({
|
|
|
type: "gcj02",
|
|
|
success: (res) => {
|
|
|
console.log("res", res);
|
|
|
that.locationInfo = res;
|
|
|
that.getNearbyStore();
|
|
|
},
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
// 初始化
|
|
|
init() {
|
|
|
this.isRefresh = false;
|
|
|
return Promise.all([this.getTemplate()]).then(() => {
|
|
|
uni.stopPullDownRefresh();
|
|
|
this.isRefresh = true;
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.notice{
|
|
|
/deep/.u-notice-bar{
|
|
|
border-radius:10rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
