429 lines
12 KiB
Vue
429 lines
12 KiB
Vue
<template>
|
||
<view :style="themeColor">
|
||
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }"
|
||
class="page-img">
|
||
<view class="site-info-box"
|
||
v-if="$util.isWeiXin() && followOfficialAccount && followOfficialAccount.isShow && wechatQrcode">
|
||
<view class="site-info">
|
||
<view class="img-box" v-if="siteInfo.logo_square">
|
||
<image :src="$util.img(siteInfo.logo_square)" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="info-box" :style="{ color: '#ffffff' }">
|
||
<text class="font-size-base">{{ siteInfo.site_name }}</text>
|
||
<text>{{ followOfficialAccount.welcomeMsg }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="dite-button" @click="officialAccountsOpen">{{ isEnEnv ? 'Follow Official Account' : '关注公众号'
|
||
}}</view>
|
||
</view>
|
||
|
||
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl"
|
||
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
|
||
<template v-slot:components>
|
||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||
:haveTopCategory="true" :followOfficialAccount="followOfficialAccount" />
|
||
</template>
|
||
<template v-slot:default>
|
||
<ns-copyright v-show="isShowCopyRight" />
|
||
</template>
|
||
</diy-index-page>
|
||
|
||
<view v-else class="bg-index"
|
||
:style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
|
||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||
:followOfficialAccount="followOfficialAccount" />
|
||
<ns-copyright v-show="isShowCopyRight" />
|
||
</view>
|
||
|
||
<template v-if="adv.advshow != -1">
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
|
||
<view class="small-bot">
|
||
<swiper autoplay="true" :circular="true" indicator-active-color="#fff"
|
||
indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" interval="3000">
|
||
<swiper-item v-for="(item, index) in adv.list" :key="index">
|
||
<image class="slide-image" @click="$util.diyRedirectTo(item.link)" height="100%"
|
||
:src="$util.img(item.imageUrl)" width="100%"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view bindtap="adverclose" class="small-bot-close" @click="closePopupWindow">
|
||
<i class="iconfont icon-round-close" style="color:#fff"></i>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 底部tabBar -->
|
||
<view class="page-bottom" v-if="openBottomNav">
|
||
<diy-bottom-nav @callback="callback" :name="name" />
|
||
</view>
|
||
|
||
<!-- 关注公众号弹窗 -->
|
||
<view @touchmove.prevent class="official-accounts-inner" v-if="wechatQrcode">
|
||
<uni-popup ref="officialAccountsPopup" type="center">
|
||
<view class="official-accounts-wrap">
|
||
<image class="content" :src="$util.img(wechatQrcode)" mode="aspectFit"></image>
|
||
<text class="desc">关注了解更多</text>
|
||
<text class="close iconfont icon-round-close" @click="officialAccountsClose"></text>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<!-- 收藏 -->
|
||
<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
|
||
<view v-if="showTip" class="collectPopupWindow"
|
||
:style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
|
||
<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit" />
|
||
<text @click="closeCollectPopupWindow">我知道了</text>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 选择门店弹出框 -->
|
||
<view @touchmove.prevent.stop class="choose-store">
|
||
<uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store">
|
||
<view class="choose-store-popup">
|
||
<view class="head-wrap" @click="closeChooseStorePopup">请确认门店</view>
|
||
<view class="position-wrap">
|
||
<text class="iconfont icon-dizhi"></text>
|
||
<text class="address">{{ currentPosition }}</text>
|
||
<view class="reposition" @click="reposition"
|
||
v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
|
||
<text class="iconfont icon-dingwei"></text>
|
||
<text>重新定位</text>
|
||
</view>
|
||
</view>
|
||
<view class="store-wrap" v-if="nearestStore">
|
||
<text class="tag">当前门店</text>
|
||
<view class="store-name">{{ nearestStore.store_name }}</view>
|
||
<view class="address">{{ nearestStore.show_address }}</view>
|
||
<view class="distance" v-if="nearestStore.distance">
|
||
<text class="iconfont icon-dizhi"></text>
|
||
<text>{{ nearestStore.distance > 1 ? nearestStore.distance + 'km' :
|
||
nearestStore.distance *
|
||
1000 +
|
||
'm' }}</text>
|
||
</view>
|
||
</view>
|
||
<button type="primary" @click="enterStore">确认进入</button>
|
||
<view class="other-store" @click="chooseOtherStore"
|
||
v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
|
||
<text>选择其他门店</text>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<hover-nav :need="true"></hover-nav>
|
||
|
||
<!-- 隐私协议弹窗 UI (新增) -->
|
||
<view v-if="showPrivacyModal" class="privacy-modal-mask" @touchmove.prevent>
|
||
<view class="privacy-modal-container">
|
||
<view class="modal-header">用户隐私保护提示</view>
|
||
<view class="modal-body">
|
||
<text>感谢您使用本应用，在使用前您应当阅读并同意</text>
|
||
<text class="link" @click="viewPrivacy('privacy')">《隐私条款》</text>
|
||
<text class="link" @click="viewPrivacy('agreement')">《用户服务协议》</text>
|
||
<text>，当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用相关功能。</text>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<view class="btn btn-disagree" @click="handleDisagree">不同意</view>
|
||
<view class="btn btn-agree" @click="handleAgree">同意并继续</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 隐私协议组件 (原有) -->
|
||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||
<ns-login ref="login"></ns-login>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import diyJs from '@/common/js/diy.js';
|
||
import scroll from '@/common/js/scroll-view.js';
|
||
import indexJs from './public/js/index.js';
|
||
|
||
export default {
|
||
mixins: [diyJs, scroll, indexJs],
|
||
data() {
|
||
return {
|
||
minScrollTop: 100,
|
||
wechatQrcode: '',
|
||
diyRoute: '/pages/index/index',
|
||
showPrivacyModal: false // 新增：控制隐私弹窗显示
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
// #ifdef H5
|
||
if (option.module && option.module == 'locationPicker') {
|
||
option.name = '';
|
||
}
|
||
// #endif
|
||
this.name = option.name || 'DIY_VIEW_INDEX';
|
||
},
|
||
onShow() {
|
||
this.getFollowQrcode();
|
||
// 页面显示时检查隐私设置
|
||
this.checkPrivacySetting();
|
||
},
|
||
mounted() {
|
||
this.unsubscribe = this.$eventBus?.onMany([
|
||
'rubik-cube-tap',
|
||
'picture-tap',
|
||
'text-tap',
|
||
'goods-list-tap',
|
||
'presale-tap',
|
||
'notes-tap',
|
||
'merch-list-tap',
|
||
'map-tap',
|
||
'img-ads-tap',
|
||
'many-goods-list-tap',
|
||
'search-tap',
|
||
], this._handleDiyGroupInteractionEvent);
|
||
},
|
||
beforeDestroy() {
|
||
if (this.unsubscribe) this.unsubscribe();
|
||
},
|
||
methods: {
|
||
// 检查隐私弹窗逻辑
|
||
checkPrivacySetting() {
|
||
// 模拟检查本地存储，看用户是否已经同意过
|
||
// 实际项目中请替换为你真实的存储逻辑
|
||
const hasAgreed = uni.getStorageSync('HAS_AGREED_PRIVACY');
|
||
if (!hasAgreed) {
|
||
// 延迟显示，防止遮挡页面渲染
|
||
setTimeout(() => {
|
||
this.showPrivacyModal = true;
|
||
}, 500);
|
||
}
|
||
},
|
||
|
||
// 用户点击同意
|
||
handleAgree() {
|
||
// 保存同意状态
|
||
uni.setStorageSync('HAS_AGREED_PRIVACY', true);
|
||
this.showPrivacyModal = false;
|
||
},
|
||
|
||
// 用户点击不同意
|
||
handleDisagree() {
|
||
// 微信小程序环境下，不同意通常退出小程序
|
||
// #ifdef MP-WEIXIN
|
||
uni.exitMiniProgram();
|
||
// #endif
|
||
// H5 或 App 下可以提示或直接不显示内容
|
||
// #ifndef MP-WEIXIN
|
||
uni.showToast({
|
||
title: '您已拒绝协议，无法使用',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
// 这里可以选择关闭页面或保持弹窗
|
||
// this.showPrivacyModal = false;
|
||
// #endif
|
||
},
|
||
|
||
// 查看具体条款（可选功能）
|
||
viewPrivacy(type) {
|
||
// 这里可以跳转到具体的条款页面，或者使用你现有的 privacy-popup 组件
|
||
// 假设你有现成的组件逻辑：
|
||
if (this.$refs.privacyPopup) {
|
||
// 假设 privacy-popup 组件有一个 show 方法
|
||
// this.$refs.privacyPopup.show(type);
|
||
}
|
||
uni.showToast({
|
||
title: '请在此处实现查看条款逻辑',
|
||
icon: 'none'
|
||
});
|
||
},
|
||
|
||
getFollowQrcode() {
|
||
if (!this.$util.isWeiXin()) return;
|
||
this.$api.sendRequest({
|
||
url: '/wechat/api/wechat/followqrcode',
|
||
success: res => {
|
||
if (res.code >= 0 && res.data) {
|
||
this.wechatQrcode = res.data.qrcode;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
officialAccountsOpen() {
|
||
this.$refs.officialAccountsPopup.open();
|
||
},
|
||
officialAccountsClose() {
|
||
this.$refs.officialAccountsPopup.close();
|
||
},
|
||
_handleDiyGroupInteractionEvent(payload) {
|
||
// #ifdef H5
|
||
return true;
|
||
// #endif
|
||
if (this.storeToken) {
|
||
return true;
|
||
}
|
||
this.$refs.login?.open();
|
||
return false;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/common/css/diy.scss';
|
||
@import './public/css/index.scss';
|
||
|
||
.small-bot {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 122;
|
||
}
|
||
|
||
.small-bot swiper {
|
||
width: 560rpx;
|
||
height: 784rpx;
|
||
margin: 120rpx auto 0;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.small-bot swiper .slide-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.small-bot-close {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
font-size: 64rpx;
|
||
color: #fff;
|
||
margin: 30rpx auto 0;
|
||
}
|
||
|
||
.small-bot-close i {
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
/* 新增：隐私弹窗样式 */
|
||
.privacy-modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.6); // 半透明背景
|
||
z-index: 9999; // 确保层级最高
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.privacy-modal-container {
|
||
width: 80%;
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 40rpx 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-header {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.modal-body {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
text-align: left;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.link {
|
||
color: #007aff; // 蓝色链接
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
margin: 0 15rpx;
|
||
}
|
||
|
||
.btn-disagree {
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
.btn-agree {
|
||
background-color: #07c160; // 微信绿
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.swiper ::v-deep .uni-swiper-dots-horizontal {
|
||
left: 40%;
|
||
bottom: 40px
|
||
}
|
||
|
||
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||
background: none !important;
|
||
}
|
||
|
||
.choose-store>>>.goodslist-uni-popup-box {
|
||
width: 80%;
|
||
}
|
||
|
||
::v-deep .diy-index-page .uni-popup .uni-popup__wrapper-box {
|
||
border-radius: 0;
|
||
}
|
||
|
||
::v-deep .placeholder {
|
||
height: 0;
|
||
}
|
||
|
||
::v-deep ::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
background-color: transparent;
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||
max-height: unset !important;
|
||
}
|
||
|
||
::v-deep .mescroll-totop {
|
||
/* #ifdef H5 */
|
||
right: 28rpx !important;
|
||
bottom: 200rpx !important;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
right: 27rpx !important;
|
||
bottom: 180rpx !important;
|
||
/* #endif */
|
||
}
|
||
</style> |