Skip to content

Q
quantum-blocks-h5
Commit 8957ac22 authored by shida.liu's avatar shida.liu
Browse files
Options

feat: 鸿蒙购物车跳h5,分享暂时隐藏;

parent 5d41b663
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 164 deletions
app/web/page/activity/component/BackTop/index.vue
View file @ 8957ac22
<template>
<div>
<cr-back-top :show-back-top="showTop" :list="backTopList" @click="handleBackTopClick" ref="crBackTop" @touchend.native="disTouch" :distance="100" />
<cr-popover
class="wxmp-tip"
:value="showMpTip"
placement="bottom-end"
>
<cr-back-top
:show-back-top="showTop"
:list="backTopList"
@click="handleBackTopClick"
ref="crBackTop"
@touchend.native="disTouch"
:distance="100"
/>
<cr-popover class="wxmp-tip" :value="showMpTip" placement="bottom-end">
<div class="wxmp-tip__content" ref="content">
点击“<cr-icon type="weapp-nav" />”分享当前页面
</div>
<template #reference>提示</template>
</cr-popover>
<div v-if="showShareOverlay" class="share-overlay" @click.self="onShareOverlayClick" />
<div
v-if="showShareOverlay"
class="share-overlay"
@click.self="onShareOverlayClick"
/>
</div>
</template>
<script>
import Bridge from '@qg/js-bridge';
import { mapGetters } from 'vuex';
import { isApp, isWxMp, debounce, isWechat, isH5Normal, isDef, isHarmonyOS } from '@/service/utils.service';
import { registeredEvents } from '@/service/sa.service';
import api from '@/api/editor.api';
import cfg from '@/config/index';
import localStorage from '@/service/localStorage.service';
import DisableTouchMixin from '../../../mixins/disableTouch.mixin';
import { navToDlApp, getParameterByName } from '@qg/citrus-ui/src/helper/service/utils';
import { EventBus } from '@qg/citrus-ui/src/helper/service/eventBus';
import Bridge from "@qg/js-bridge";
import { mapGetters } from "vuex";
import {
isApp,
isWxMp,
debounce,
isWechat,
isH5Normal,
isDef,
isHarmonyOS,
} from "@/service/utils.service";
import { registeredEvents } from "@/service/sa.service";
import api from "@/api/editor.api";
import cfg from "@/config/index";
import localStorage from "@/service/localStorage.service";
import DisableTouchMixin from "../../../mixins/disableTouch.mixin";
import {
navToDlApp,
getParameterByName,
} from "@qg/citrus-ui/src/helper/service/utils";
import { EventBus } from "@qg/citrus-ui/src/helper/service/eventBus";
const WEAPP_PATH = 'pages/webview/webview';
const APP_PATH = 'xyqb://openHttp';
const WEAPP_PATH = "pages/webview/webview";
const APP_PATH = "xyqb://openHttp";
export default {
name: 'BackTop',
name: "BackTop",
mixins: [DisableTouchMixin],
props: {
showBackTop: Boolean
showBackTop: Boolean,
},
data() {
return {
......@@ -45,40 +62,52 @@ export default {
cartIndex: null,
cartCount: 0,
getCartCountDebounce: debounce(this.getCartCount, 2000),
mpSchema: '',
link: '',
mpSchema: "",
link: "",
shareInfo: {},
showShareOverlay: ((isWechat && !isWxMp) || isH5Normal) && !(localStorage.get('vccChannel') || (localStorage.get('tenantId') && getParameterByName('fromHost', window.location.href))),
isWechat
showShareOverlay:
((isWechat && !isWxMp) || isH5Normal) &&
!(
localStorage.get("vccChannel") ||
(localStorage.get("tenantId") &&
getParameterByName("fromHost", window.location.href))
),
isWechat,
};
},
computed: {
...mapGetters(['pageData', 'pageInfo']),
...mapGetters(["pageData", "pageInfo"]),
wxAppId() {
return cfg.appIdMap[this.pageInfo.tenantId] || '';
return cfg.appIdMap[this.pageInfo.tenantId] || "";
},
backTopList() {
const btAttachVal = this.pageData.props?.btAttachVal || [];
if (isDef(this.cartIndex) && this.cartIndex !== -1 && btAttachVal.length) {
if (
isDef(this.cartIndex) &&
this.cartIndex !== -1 &&
btAttachVal.length
) {
btAttachVal[this.cartIndex].info = this.cartCount;
}
if (isApp) {
if (isHarmonyOS) {
return btAttachVal.map(item => {
if (item.persets === '购物车') {
const appChannel = localStorage.get('appChannel') || '';
const token = localStorage.get('vccToken') || '';
const tenantId = localStorage.get('tenantId') || '';
item.url = `${cfg.h5MallHost}/shopCart?vccToken=${token}&tenantId=${tenantId}&appChannel=${appChannel}`;
}
return item;
});
return btAttachVal
.map((item) => {
if (item.name === "购物车") {
const appChannel = localStorage.get("appChannel") || "";
const token = localStorage.get("vccToken") || "";
const tenantId = localStorage.get("tenantId") || "";
item.url = `${cfg.h5MallHost}/shopCart?vccToken=${token}&tenantId=${tenantId}&appChannel=${appChannel}`;
}
return item;
})
.filter((item) => item.persets !== "分享");
}
return btAttachVal;
} else if (isWxMp) {
return btAttachVal.filter(item => item.persets!== '购物车');
return btAttachVal.filter((item) => item.persets !== "购物车");
}
return []
return [];
// if (this.pageData.props && this.pageData.props.btAttachVal) {
// const { btAttachVal, showShare } = this.pageData.props;
// const btAttachValDeep = JSON.parse(JSON.stringify(btAttachVal));
......@@ -88,24 +117,30 @@ export default {
// return [];
},
showTop() {
return this.showBackTop && this.pageData.props && this.pageData.props.showBackTop;
return (
this.showBackTop &&
this.pageData.props &&
this.pageData.props.showBackTop
);
},
appSchema() {
return `${APP_PATH}?jumpUrl=${this.link}`;
},
shareOpenMethod() {
return this.pageInfo.page.props.shareOpenMethod;
}
},
},
watch: {
backTopList: {
immediate: true,
handler(val) {
this.cartIndex = (val || []).findIndex(item => item.persets === '购物车');
this.cartIndex = (val || []).findIndex(
(item) => item.persets === "购物车"
);
this.getCartCountDebounce();
}
}
},
},
},
created() {
if (!EASY_ENV_IS_NODE) {
......@@ -115,7 +150,7 @@ export default {
}
},
mounted() {
EventBus.$on("PAGE_VISIBILITY_STATE", state => {
EventBus.$on("PAGE_VISIBILITY_STATE", (state) => {
if (!state) {
this.getCartCountDebounce();
}
......@@ -127,44 +162,52 @@ export default {
if (isH5Normal && EASY_ENV_IS_BROWSER && this.wxAppId) {
try {
console.log(this.pageInfo.tenantId);
console.log('-----444444---------');
const [schema] = await api.getMpSchema({
miniUrl: WEAPP_PATH,
params: `url=${encodeURIComponent(JSON.stringify(this.link))}`
}, this.wxAppId, this.pageInfo.tenantId);
console.log("-----444444---------");
const [schema] = await api.getMpSchema(
{
miniUrl: WEAPP_PATH,
params: `url=${encodeURIComponent(JSON.stringify(this.link))}`,
},
this.wxAppId,
this.pageInfo.tenantId
);
this.mpSchema = schema;
} catch (error) {
}
} catch (error) {}
}
},
onShareOverlayClick() {
if(this.pageInfo.diversion){
if (this.pageInfo.diversion) {
window.location.href = this.pageInfo.diversion;
return;
}
if (isH5Normal) {
const fromHost = getParameterByName('fromHost', window.location.href);
const fromHost = getParameterByName("fromHost", window.location.href);
const loginUrl = `${fromHost}/login?redirectUrl=${window.location.href}`;
window.location.href = fromHost ? loginUrl : this.shareOpenMethod === 1 ? this.mpSchema : this.appSchema;
window.location.href = fromHost
? loginUrl
: this.shareOpenMethod === 1
? this.mpSchema
: this.appSchema;
setTimeout(() => {
this.shareOpenMethod === 2 && navToDlApp();
}, 2000);
} else if (isWechat && !isWxMp) {
const { shareOpenMethod, link: url } = this;
const jumpUrl = shareOpenMethod === 1 ? WEAPP_PATH : APP_PATH;
window.location.href = `${cfg.mallHost}/common/launch?jumpUrl=${jumpUrl}&terminal=${shareOpenMethod || 2}&extraInfo=${encodeURIComponent(JSON.stringify({ url }))}`;
window.location.href = `${
cfg.mallHost
}/common/launch?jumpUrl=${jumpUrl}&terminal=${shareOpenMethod ||
2}&extraInfo=${encodeURIComponent(JSON.stringify({ url }))}`;
}
},
handleBackTopClick(e = {}) {
// ! 此处以1.3为准，但需要对齐分享功能
registeredEvents('PD_WUXIEC_H5ActivityPageSuspendedBtnClick', {
registeredEvents("PD_WUXIEC_H5ActivityPageSuspendedBtnClick", {
activity_id: this.pageInfo.uuid,
jump_link: e.url,
window_name: e.name,
});
if (e && e.persets === '分享') {
if (e && e.persets === "分享") {
if (this.tipTimer) {
clearTimeout(this.tipTimer);
}
......@@ -175,33 +218,42 @@ export default {
},
initShareInfo() {
if (EASY_ENV_IS_NODE) return;
let shareCoverImage = '';
let shareCoverImage = "";
try {
shareCoverImage = this.pageInfo.page.props.shareCoverImage;
} catch (e) {
console.log(e);
}
const { coverImage, pageName, pageDescribe } = this.pageInfo;
let link = `${window.location.origin}${window.location.pathname}?vccToken={token}&tenantId=${localStorage.get('tenantId') || ''}&appChannel={appChannel}`;
if (this.getUrlParamsVal('navId') !== false && this.getUrlParamsVal('index') !== false) {
let link = `${window.location.origin}${
window.location.pathname
}?vccToken={token}&tenantId=${localStorage.get("tenantId") ||
""}&appChannel={appChannel}`;
if (
this.getUrlParamsVal("navId") !== false &&
this.getUrlParamsVal("index") !== false
) {
// 向分享URL中填充导航ID与位置索引
link += `&navId=${this.getUrlParamsVal("navId")}&index=${this.getUrlParamsVal('index')}`
link += `&navId=${this.getUrlParamsVal(
"navId"
)}&index=${this.getUrlParamsVal("index")}`;
}
this.link = link;
const defaultTitle = +localStorage.get('tenantId') === 560761 ? '羊小咩' : '活动页';
const defaultTitle =
+localStorage.get("tenantId") === 560761 ? "羊小咩" : "活动页";
let shareUrl = shareCoverImage || coverImage;
shareUrl += isApp ? '?imageMogr2/thumbnail/120x120' : ''
shareUrl += isApp ? "?imageMogr2/thumbnail/120x120" : "";
this.shareInfo = {
event: "showShareView",
data: {
platform: ["weChat", "timeLine"],
platform: ["weChat", "timeLine"],
shareDic: {
title: pageName || defaultTitle,
desc: pageDescribe || '美好生活更从容',
desc: pageDescribe || "美好生活更从容",
link,
imgUrl: shareUrl
}
}
imgUrl: shareUrl,
},
},
};
if (isWxMp) {
this.postMpShareInfo();
......@@ -220,7 +272,7 @@ export default {
},
postMpShareInfo() {
if (EASY_ENV_IS_NODE || !this.wxAppId) return;
const wx = require('weixin-js-sdk');
const wx = require("weixin-js-sdk");
const { shareInfo } = this;
wx.miniProgram.postMessage({ data: shareInfo });
},
......@@ -231,7 +283,7 @@ export default {
}, 10000);
},
async getCartCount() {
if (localStorage.get('vccToken') && isDef(this.cartIndex) && isApp) {
if (localStorage.get("vccToken") && isDef(this.cartIndex) && isApp) {
const [res, err] = await api.getShopCartCount();
this.cartCount = err ? 0 : res.count || 0;
this.$nextTick(() => {
......@@ -241,18 +293,18 @@ export default {
},
getUrlParamsVal(name) {
let query = window.location.search.substring(1);
let vars = query.split('&');
let vars = query.split("&");
for (let i = 0; i < vars.length; i++) {
let pair = vars[i].split("=");
if (pair[0] == name) return pair[1];
if (pair[0] == name) return pair[1];
}
return false;
}
},
},
}
};
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@deep: ~">>>";
.cr-back-top {
z-index: 103;
......
app/web/page/activity/view/activity/index.vue
View file @ 8957ac22
<template>
<div class="pageContent">
<div class="activity" :class="{hasBottomNav: navigatorConfig}" :style="transformStyle(pageData.commonStyle)">
<div
class="activity"
:class="{ hasBottomNav: navigatorConfig }"
:style="transformStyle(pageData.commonStyle)"
>
<template v-if="!noPageData && tenantIdCorrect">
<div class="layout">
<template v-for="(item, index) in pageData.elements">
<div :style="transformStyle(item.commonStyle, item.point, item.name)"
:key="fixGridKey(item)"
:id="`item_${item.id}`"
@click="dot(item.title)"
@touchend="disTouch"
<div
:style="transformStyle(item.commonStyle, item.point, item.name)"
:key="fixGridKey(item)"
:id="`item_${item.id}`"
@click="dot(item.title)"
@touchend="disTouch"
>
<component :data-index="index" :id="item.id" :containerIndex="index" :component-data="item" :childItem="item" :is="item.name" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
</div>
<component
:data-index="index"
:id="item.id"
:containerIndex="index"
:component-data="item"
:childItem="item"
:is="item.name"
:sa-info="getSaInfo(item)"
v-bind="item.props"
></component>
</div>
</template>
<div
v-if="pageData.props.showPageBottomTip"
:id="bottomInfo.i + pageData.elements.length"
......@@ -22,109 +36,128 @@
<page-bottom-tip />
</div>
</div>
<back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
<invalid-notice v-model="pageInvalid" @toOtherActivity="toOtherActivity"/>
<back-top
v-if="showBackTop"
:show-back-top="showBackTop"
ref="backTop"
/>
<invalid-notice
v-model="pageInvalid"
@toOtherActivity="toOtherActivity"
/>
<coupon-modal :modal-data="couponModalData" v-model="showCouponModal" />
</template>
<empty-state v-else />
</div>
<!-- 底部导航 -->
<div v-if="navigatorConfig" class="bottomNav" :style="computedNavContainerStyle(navigatorConfig)">
<div
v-if="navigatorConfig"
class="bottomNav"
:style="computedNavContainerStyle(navigatorConfig)"
>
<div
class="navItem"
:class="{pic: item.type == 2, current: +navIndex === index}"
:class="{ pic: item.type == 2, current: +navIndex === index }"
v-for="(item, index) in navigatorConfig.navigatorData"
:key="index"
@click.stop="handleNavUrl(item, +navIndex === index)"
>
<img class="icon" :src="+navIndex === index ? item.selectIcon : item.icon" alt="">
<span v-if="item.type == 1 && item.name" class="text" :style="computedNavTextStyle(item, +navIndex === index)">{{item.name}}</span>
<img
class="icon"
:src="+navIndex === index ? item.selectIcon : item.icon"
alt=""
/>
<span
v-if="item.type == 1 && item.name"
class="text"
:style="computedNavTextStyle(item, +navIndex === index)"
>{{ item.name }}</span
>
</div>
</div>
</div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
@deep: ~'>>>';
.pageContent{
@deep: ~">>>";
.pageContent {
width: 100%;
height: 100%;
position: relative;
.bottomNav {
box-sizing: content-box;
width: 100%;
height: 100%;
position: relative;
.bottomNav{
box-sizing: content-box;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 899;
padding-top: 0;
padding-left: 4px;
padding-right: 4px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
position: fixed;
bottom: 0;
left: 0;
z-index: 899;
padding-top: 0;
padding-left: 4px;
padding-right: 4px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: space-around;
.navItem {
width: 62px;
height: 55px;
display: flex;
justify-content: space-around;
.navItem{
width: 62px;
height: 55px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
&.pic{
.icon{
max-width: 40px;
max-height: 40px;
}
}
.icon{
max-width: 35px;
max-height: 35px;
}
.text{
margin-top: 3px;
text-align: center;
font-size: 10px;
justify-content: center;
flex-direction: column;
align-items: center;
&.pic {
.icon {
max-width: 40px;
max-height: 40px;
}
}
.icon {
max-width: 35px;
max-height: 35px;
}
.text {
margin-top: 3px;
text-align: center;
font-size: 10px;
}
}
}
.activity {
width: 100%;
min-height: 100%;
background-color: rgb(244, 244, 244);
&.hasBottomNav{
padding-bottom: calc(constant(safe-area-inset-bottom) + 55px);
padding-bottom: calc(env(safe-area-inset-bottom) + 55px);
}
// box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
// overflow-x: hidden;
// overflow-y: scroll;
/deep/ .vue-grid-layout {
padding-bottom: 40px;
box-sizing: content-box;
// transform: translateY(-10px);
transition-property: none;
}
.activity {
width: 100%;
min-height: 100%;
background-color: rgb(244, 244, 244);
&.hasBottomNav {
padding-bottom: calc(constant(safe-area-inset-bottom) + 55px);
padding-bottom: calc(env(safe-area-inset-bottom) + 55px);
}
// box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
// overflow-x: hidden;
// overflow-y: scroll;
/deep/ .vue-grid-layout {
padding-bottom: 40px;
box-sizing: content-box;
// transform: translateY(-10px);
transition-property: none;
.vue-grid-item {
transition-property: none;
display: flex;
justify-content: center;
align-items: center;
.vue-grid-item {
transition-property: none;
display: flex;
justify-content: center;
align-items: center;
/* 不可设置溢出隐藏，tabs导航会出问题 */
overflow: hidden;
/* 不可设置溢出隐藏，tabs导航会出问题 */
overflow: hidden;
& > *:first-child {
height: 100%;
}
& > *:first-child {
height: 100%;
}
}
}
}
.del_transform {
overflow: visible !important;
transform: none !important;
}
.del_transform {
overflow: visible !important;
transform: none !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment