319 lines
9.8 KiB
Vue
319 lines
9.8 KiB
Vue
<template>
|
||
<view id="home" :data-theme="theme" :style="[pageStyle]">
|
||
<tui-skeleton v-if="showSkeleton"></tui-skeleton>
|
||
<!-- 有网内容 -->
|
||
<view class="page-index tui-skeleton page_count" :class="{'bgf':navIndex >0}"
|
||
:style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
|
||
<diy-page ref="diyComponentRef" :merId="merId" :merMemberInfo="merMemberInfo" @updateMemberInfo="updateMemberInfo"
|
||
:isScrolled="isScrolled" :componentData="componentData" v-if="componentData && componentData.value"></diy-page>
|
||
<!-- 底部导航距离，做兼容处理的-->
|
||
<view class="footerBottom"></view>
|
||
</view>
|
||
<coupon-and-classify v-if="tabActive >0 && merId" :tabActive="tabActive" :merId="merId"></coupon-and-classify>
|
||
|
||
<page-footer :merId="merId" v-if="merId" fromTo="merHome"></page-footer>
|
||
<!-- <view class="footer">-->
|
||
<!-- <view v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === index }" class="item"-->
|
||
<!-- @click="handleChangetab(index)">-->
|
||
<!-- <view :class="['iconfont', item.icon]"></view>-->
|
||
<!-- <view>{{ item.name }}</view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="item" @click="handleCustomer">-->
|
||
<!-- <view class="iconfont icon-ic_customerservice"></view>-->
|
||
<!-- <view>联系客服</view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="item" @click="handleMembership">-->
|
||
<!-- <view class="iconfont icon-ic_customerservice"></view>-->
|
||
<!-- <view>加入会员</view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="item" @click="handleShoppingCredit">-->
|
||
<!-- <view class="iconfont icon-ic_customerservice"></view>-->
|
||
<!-- <view>购物金</view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="item" @click="handleRules">-->
|
||
<!-- <view class="iconfont icon-ic_customerservice"></view>-->
|
||
<!-- <view>会员规则</view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import {
|
||
chatConfig
|
||
} from '@/utils/consumerType.js'
|
||
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
|
||
import couponAndClassify from '../components/couponAndClassify/index.vue';
|
||
import {
|
||
getMerIndexInfoApi,
|
||
} from '@/api/merchant.js';
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
import {
|
||
silenceBindingSpread,
|
||
} from '@/utils/index.js';
|
||
import {getMerDiyInfoApi} from "../../../api/merchant";
|
||
import diyPage from "@/subPackage/pages/diyPage/index.vue";
|
||
import {memberUserInfoApi} from "../../member/memberApi";
|
||
import pageFooter from "../../../components/pageFooter";
|
||
const arrTemp = ["beforePay", "afterPay", "createBargain", "pink"];
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||
let app = getApp();
|
||
export default {
|
||
computed: mapGetters(['isLogin', 'uid', 'globalData', 'bottomNavigationIsCustom']),
|
||
components: {
|
||
pageFooter,
|
||
tuiSkeleton,
|
||
diyPage,
|
||
couponAndClassify
|
||
},
|
||
data() {
|
||
return {
|
||
merMemberInfo: {}, //会员信息
|
||
componentData: {},
|
||
isScrolled: false, //是否开始滚动
|
||
showSkeleton: true, //骨架屏显示隐藏
|
||
isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
|
||
statusBarHeight: statusBarHeight,
|
||
navIndex: 0, //判断首页显示内容，1显示分类页和商品，0首页
|
||
site_name: '', //首页title
|
||
configApi: {}, //分享类容配置
|
||
theme: app.globalData.theme,
|
||
// #ifdef APP-PLUS || MP
|
||
isFixed: true,
|
||
// #endif
|
||
// #ifdef H5
|
||
isFixed: false,
|
||
// #endif
|
||
domOffsetTop: 50,
|
||
diyId: 0, //DIYID
|
||
bgPic: '', //背景图片
|
||
bgTabVal: '', //背景图片样式
|
||
pageStyle: {},
|
||
|
||
merchantInfo: {},
|
||
merId: 0,
|
||
// 底部菜单
|
||
tabs: [{
|
||
icon: 'icon-ic_mall',
|
||
name: '首页',
|
||
},
|
||
{
|
||
icon: 'icon-a-ic_Picturearrangement',
|
||
name: '分类'
|
||
},
|
||
{
|
||
icon: 'icon-ic_coupon',
|
||
name: '领券'
|
||
}
|
||
],
|
||
tabActive: 0, // 底部切换
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 仅仅小程序扫码进入获取商品id，商品类型
|
||
if (options.scene) {
|
||
let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
|
||
this.diyId = value.id ? value.id : 0;
|
||
this.merId = value.merId ? value.merId : 0;
|
||
if (value.sd) this.$store.commit('Change_Spread', value.sd);
|
||
}else{
|
||
this.merId = options.merId ? parseInt(options.merId) : 0;
|
||
this.diyId = options.id ? parseInt(options.id) : 0;
|
||
if (options.sd) this.$store.commit('Change_Spread', options.sd); //分享id
|
||
}
|
||
this.getMerIndexInfo()
|
||
this.diyData();
|
||
},
|
||
// #ifdef MP
|
||
/**
|
||
* 用户点击右上角分享到朋友圈
|
||
*/
|
||
onShareTimeline() {
|
||
return {
|
||
title: this.merchantInfo.name,
|
||
imageUrl: this.merchantInfo.avatar,
|
||
query: `merId=${this.merId}&sd=${this.uid}`
|
||
};
|
||
},
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.merchantInfo.name,
|
||
imageUrl: this.merchantInfo.avatar,
|
||
path: `/pages/merchant/home/index?merId=${this.merId}&sd=${this.uid}`
|
||
};
|
||
},
|
||
// #endif
|
||
// 滚动监听
|
||
onPageScroll(e) {
|
||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||
uni.$emit('scroll');
|
||
if (e.scrollTop > this.domOffsetTop) {
|
||
this.isScrolled = true;
|
||
}
|
||
if (e.scrollTop < this.domOffsetTop) {
|
||
this.$nextTick(() => {
|
||
this.isScrolled = false;
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
// 加入会员后的调用
|
||
updateMemberInfo(){
|
||
this.getMemberInfo()
|
||
},
|
||
//店铺会员信息
|
||
getMemberInfo(){
|
||
this.$store.dispatch("getMerMemberInfo", this.merId).then(data => {
|
||
this.merMemberInfo = data
|
||
});
|
||
},
|
||
//购物金
|
||
handleShoppingCredit(){
|
||
this.$util.navigateTo(`/pages/member/recharge_amount/index?merId=${this.merId}`)
|
||
},
|
||
// 会员规则
|
||
handleRules(){
|
||
this.$util.navigateTo(`/pages/member/membership_rules/index?merId=${this.merId}`)
|
||
},
|
||
handleMembership(){
|
||
this.$refs.membershipRef.open()
|
||
},
|
||
/**
|
||
* 获取DIY
|
||
* @param {number} id
|
||
* @param {boolean} type 区分是否是微页面
|
||
*/
|
||
diyData() {
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
getMerDiyInfoApi(this.merId, this.diyId).then(res => {
|
||
uni.setNavigationBarTitle({
|
||
title: res.data.title
|
||
});
|
||
let data = res.data;
|
||
this.componentData = data
|
||
this.reloadData();
|
||
that.styleConfig = that.$util.objToArr(res.data.value);
|
||
that.pageStyle = {
|
||
'background-color': data.isBgColor === 1 ? res.data.colorPicker : '',
|
||
'background-image': data.isBgPic === 1 ? `url(${res.data.bgPic})` : '',
|
||
'background-repeat': res.data.bgTabVal === 1 ? 'repeat-y' : 'no-repeat',
|
||
'background-size': res.data.bgTabVal === 2 ? 'cover' : 'contain'
|
||
};
|
||
uni.hideLoading();
|
||
setTimeout(() => {
|
||
that.isNodes++;
|
||
}, 100);
|
||
}).catch(err => {
|
||
return that.$util.Tips({
|
||
title: err
|
||
});
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
//客服跳转
|
||
handleCustomer: function() {
|
||
chatConfig(this.merchantInfo);
|
||
},
|
||
//商户信息
|
||
getMerIndexInfo() {
|
||
let that = this;
|
||
getMerIndexInfoApi(this.merId).then(res => {
|
||
this.merchantInfo = res.data
|
||
uni.setNavigationBarTitle({
|
||
title: res.data.name
|
||
})
|
||
this.$store.commit('MERCHANTJINFO', res.data);
|
||
this.skeletonShow = false;
|
||
}).catch(err => {
|
||
that.loading = false;
|
||
that.loadTitle = '加载更多';
|
||
this.skeletonShow = false;
|
||
});
|
||
},
|
||
//底部切换
|
||
handleChangetab(param) {
|
||
this.tabActive = param;
|
||
},
|
||
//清除骨架屏
|
||
reloadData() {
|
||
this.showSkeleton = false;
|
||
},
|
||
// 关闭优惠券弹窗
|
||
closeCouponPop() {
|
||
this.$refs.couponRef.close();
|
||
},
|
||
},
|
||
onShow() {
|
||
if(this.merId && this.isLogin)this.getMemberInfo()
|
||
//分销绑定
|
||
silenceBindingSpread(this.isLogin, this.globalData.spread);
|
||
},
|
||
mounted() {
|
||
},
|
||
onReachBottom() {
|
||
// this.$refs.recommendIndex.get_host_product();
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
/* #ifdef H5 */
|
||
//background-color: #fff;
|
||
/* #endif */
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
display: flex;
|
||
width: 100%;
|
||
padding-top: 12rpx;
|
||
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
|
||
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
|
||
background-color: #FFFFFF;
|
||
opacity: 0.96;
|
||
|
||
.item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #282828;
|
||
|
||
.iconfont {
|
||
font-size: 43rpx !important;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
@include main_color(theme);
|
||
}
|
||
}
|
||
</style> |