Skip to content

Q
quantum-blocks-h5
Commit 4eb0d886 authored by 郭志伟's avatar 郭志伟
Browse files
Options

Merge branch 'feat/share' into 'feat/v1.3' 

Feat/share

See merge request !35
parents ef5ada75 5efa4679
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 100 deletions
app/web/component/layout/activity/index.ts
View file @ 4eb0d886
......@@ -31,7 +31,7 @@ if (EASY_ENV_IS_BROWSER) {
const fromHost = getParameterByName('fromHost', window.location.href);
if (isSafari.test(navigator.userAgent) && fromHost?.indexOf('xc.bmall') === -1 && fromHost?.indexOf('tob') === -1) {
window.onpageshow = function(e) {
if (e.persisted || (window.performance && window.performance.navigation.type == 2)) {
if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
window.location.reload();
}
};
......
app/web/page/activity/component/BackTop/index.vue 0 → 100644
View file @ 4eb0d886
<template>
<div>
<cr-back-top :show-back-top="showBackTop && pageData.props.showBackTop" :list="backTopList" @click="handleBackTopClick" />
<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>
</template>
<script>
import Bridge from '@qg/js-bridge';
import { mapGetters } from 'vuex';
import { isApp, isWxMp } from '@/service/utils.service';
export default {
name: 'BackTop',
props: {
showBackTop: Boolean
},
computed: {
...mapGetters(['pageData']),
...mapGetters(['pageInfo']),
backTopList() {
const btAttachVal = this.pageData && this.pageData.props.btAttachVal ? this.pageData.props.btAttachVal : [];
return isApp ? btAttachVal : isWxMp ? btAttachVal.filter(item => item.persets !== '购物车') : [];
}
},
data() {
return {
showMpTip: false,
tipTimer: null,
jsBridge: null,
wx: null
};
},
created() {
if (!EASY_ENV_IS_NODE) {
this.jsBridge = new Bridge();
this.wx = require('weixin-js-sdk');
}
},
methods: {
handleBackTopClick(e) {
if (e && e.persets === '分享') {
if (this.tipTimer) {
clearTimeout(this.tipTimer);
}
this.tipTimer = setTimeout(() => {
this.share();
}, 600);
}
},
share() {
if (EASY_ENV_IS_NODE) return;
const { coverImage, pageName, pageDescribe } = this.pageInfo;
const data = {
event: "showShareView",
data: {
platform: ["weChat", "timeLine", "QQ", "QQZone", "CopyLink"], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
shareDic: {
title: pageName || '羊小咩',
desc: pageDescribe || '羊小咩',
link: window.location.origin + window.location.pathname, // 页面地址
imgUrl: coverImage // 图片地址
}
}
};
if (isApp) {
this.appShare(data);
} else if (isWxMp) {
this.mpShare(data);
}
},
appShare(data) {
this.jsBridge.showShareView(data);
},
mpShare(data) {
this.wx.miniProgram.postMessage(data);
this.showMpTip = true;
setTimeout(() => {
this.showMpTip = false;
}, 10000);
},
},
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.wxmp-tip {
position: fixed !important;
top: -32px;
right: 10%;
z-index: 99;
@{deep} .cr-popover {
background-color: #fff;
color: #333;
box-shadow: 0 2px 12px 0 rgba(100, 101, 102, 28%);
&__reference {
font-size: 0;
}
&__angle::before {
border-color: transparent transparent rgb(255 255 255);
}
}
&__content {
width: 160px;
.cr-icon--weapp-nav {
vertical-align: sub;
margin: 0 5px;
}
}
}
</style>
\ No newline at end of file
app/web/page/activity/view/activity/index.ts
View file @ 4eb0d886
import { Vue, Component, Watch, Provide, Mixins } from 'vue-property-decorator';
import { Getter, State, Mutation } from 'vuex-class';
import FreedomContainer from '../../component/FreedomContainer/index.vue';
import BackTop from '../../component/BackTop/index.vue';
import PageBottomTip from '../../component/PageBottomTip/index.vue';
import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
import GridItem from '../../component/VueGridLayout/GridItem.vue';
......@@ -8,7 +9,7 @@ import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
import SaMixin from '@/page/mixins/sa.mixin';
import { getStyle, debounce, isApp, isWxMp } from '@/service/utils.service';
import { setAppTitleColor } from '@/service/color.service';
@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop }, name: 'Activity'})
export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
@Getter('pageData') pageData;
@State(state => state.activity.pageInfo.pageName) pageName;
......@@ -26,7 +27,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
};
isLayoutComReady = false;
showBackTop = false;
targetEle: HTMLElement | null = null;
loading: boolean = true;
modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
......@@ -38,10 +38,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
return this.pageData && this.pageData.elements.map(v => v.point) || [];
}
get backTopList() {
return isApp && this.pageData && this.pageData.props.btAttachVal ? this.pageData.props.btAttachVal : [];
}
@Watch('pageData', { deep: true })
onPageDataChange(val) {
const lastGridItem = val.elements[val.elements.length - 1];
......@@ -81,7 +77,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
mounted() {
this.targetEle = document.querySelector('body');
this.showBackTop = true;
isApp && setAppTitleColor(this.pageData.props.titleBgColor);
}
fetchApi(options) {
const { store, route } = options;
......@@ -113,6 +108,9 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
console.log('loadingEle', loadingEle);
if (!loadingEle) { return; }
loadingEle.style.display = 'none';
if (isApp) {
setAppTitleColor(this.pageData.props.titleBgColor);
}
});
}
......@@ -121,10 +119,11 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
// 高度更新时重新计算导航组件样式
this.modfiTabsStyleDebounce();
}
// overlay遮罩显示时隐藏悬浮窗
hideBottomBtns(state) {
this.showBackTop = state;
}
// 计算商品导航组件位置
modfiTabsStyle() {
const tabsEle = document.querySelector('.tabs');
// console.log('tabsEle', tabsEle);
......
app/web/page/activity/view/activity/index.vue
View file @ 4eb0d886
......@@ -39,7 +39,7 @@
<page-bottom-tip />
</grid-item>
</grid-layout>
<cr-back-top v-if="showBackTop && pageData.props.showBackTop" :list="backTopList" />
<back-top :show-back-top="showBackTop" />
</div>
</template>
<script lang="ts" src="./index.ts"></script>
......
app/web/service/color.service.ts
View file @ 4eb0d886
......@@ -87,12 +87,24 @@ export function setAppTitleColor(bgcolor = "#fff") {
const colors = isGradient
? [bgcolor[0].substr(1), bgcolor[1].substr(1)]
: [bgcolor.substr(1), bgcolor.substr(1)];
jsBridge.run({
event: "resetNavigationBarColor",
data: {
isDarkContent,
colors
changeColor();
function changeColor() {
if (!jsBridge) return;
try {
const jbInstance = jsBridge.run({
event: "resetNavigationBarColor",
data: {
isDarkContent,
colors
}
});
if (!jbInstance) {
changeColor();
} else {
jsBridge = null;
}
} catch (error) {
jsBridge = null;
}
});
jsBridge = null;
}
}
app/web/service/qg.service.ts
View file @ 4eb0d886
......@@ -42,6 +42,8 @@ import citrusUi from '@qg/citrus-ui';
import Loading from '@qg/cherry-ui/src/loading';
import Text from '@qg/cherry-ui/src/text';
import Tag from '@qg/cherry-ui/src/tag';
import Popover from '@qg/cherry-ui/src/popover';
import Icon from '@qg/cherry-ui/src/icon';
Vue.use(Button);
Vue.use(Image);
......@@ -71,6 +73,8 @@ Vue.use(Tabs);
Vue.use(BackTop);
Vue.use(Text);
Vue.use(Tag);
Vue.use(Popover);
Vue.use(Icon);
Vue.use(citrusUi);
......
app/web/service/utils.service.ts
View file @ 4eb0d886
......@@ -161,70 +161,4 @@ export const throttle = (event, time) => {
}, time);
}
}
}
// RGB转HEX
export function rgbToHex(r, g, b) {
const hex = ((r << 16) | (g << 8) | b).toString(16);
return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
}
// HEX转RGB
export function hexToRgb(hex) {
var rgb = [];
for (let i = 1; i < 7; i += 2) {
rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
}
return rgb;
}
// 计算RGB渐变色色值
export function gradient(startColor, endColor, step) {
// 将 hex 转换为rgb
let sColor = hexToRgb(startColor);
let eColor = hexToRgb(endColor);
// 计算R\G\B每一步的差值
let rStep = (eColor[0] - sColor[0]) / step;
let gStep = (eColor[1] - sColor[1]) / step;
let bStep = (eColor[2] - sColor[2]) / step;
let gradientColorArr = [];
for (let i = 0; i < step; i++) {
// 计算每一步的hex值
gradientColorArr.push(
rgbToHex(
parseInt(rStep * i + sColor[0]),
parseInt(gStep * i + sColor[1]),
parseInt(bStep * i + sColor[2])
)
);
}
return gradientColorArr;
}
export function colorToRgb(color) {
// 16进制颜色值的正则
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
color = color.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) {
let colorNew = "#";
for (let i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值，转为RGB
let colorChange = [];
for (let i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
}
return "RGB(" + colorChange.join(",") + ")";
} else {
return color;
}
}
// RGB TO RGBA
export function rgbToRgba(rgb, opacity) {
return rgb.replace(")", `, ${opacity})`);
}
\ No newline at end of file
config/apollo.ssr.json
View file @ 4eb0d886
......@@ -8,4 +8,4 @@
"h5ShopHost": "https://tenet-vcc2.liangkebang.net/#",
"qiniuUpHost": "https://up-z0.qiniup.com",
"qiniuHost": "https://appsync.lkbang.net"
}
\ No newline at end of file
}
package-lock.json
View file @ 4eb0d886
......@@ -32360,9 +32360,9 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
},
"@popperjs/core": {
"version": "2.9.2",
"resolved": "http://npmprivate.quantgroups.com/@popperjs%2fcore/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
"version": "2.9.3",
"resolved": "http://npmprivate.quantgroups.com/@popperjs%2fcore/-/core-2.9.3.tgz",
"integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ=="
},
"@qg/apollo-nodejs": {
"version": "2.1.2",
......@@ -32370,9 +32370,9 @@
"integrity": "sha512-uOCUKu5mvX3PWee+7ZFXQSNIR1V5SN2JVE2yANmW9/wQOgpEct291gXGok8VMw0009HlTWB4JATURPwyOP2DFg=="
},
"@qg/cherry-ui": {
"version": "2.21.1",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1.tgz",
"integrity": "sha512-OQ9njfH6cs6FaNqPb7W+hEe/yftpdLXyjGXo2g4IwY7o/9Z5EH6Bn6B5X6dFGOka7LSyXyWRSfZzX0upIIpDFw==",
"version": "2.22.3",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.22.3.tgz",
"integrity": "sha512-8BIV5E1oc3Rr/ofvuCK7qNqcg340CKmI6n5GU0hKtPsxmly7pNcQWsu6k0AHI/cpPHdPkvEbtjpLVWGac+zBWg==",
"requires": {
"@popperjs/core": "^2.5.4",
"vue-lazyload": "^1.3.3",
......@@ -49552,9 +49552,9 @@
}
},
"parse-headers": {
"version": "2.0.3",
"resolved": "http://npmprivate.quantgroups.com/parse-headers/-/parse-headers-2.0.3.tgz",
"integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
"version": "2.0.4",
"resolved": "http://npmprivate.quantgroups.com/parse-headers/-/parse-headers-2.0.4.tgz",
"integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
},
"parse-json": {
"version": "4.0.0",
......@@ -51684,9 +51684,9 @@
}
},
"sa-sdk-javascript": {
"version": "1.18.12",
"resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.18.12.tgz",
"integrity": "sha512-D4ov1/fwhYKdUoG2bvX1gjSgMY2/5oIyGH3g1dH8pTLfJB1L3dHXXTSz18u1mJ1TfbGIcgCtgVCH3kd8B7FF2Q=="
"version": "1.18.13",
"resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.18.13.tgz",
"integrity": "sha512-nS8OlmEnXeX/fAnjBrxjJTS6Dp3F2DfGm/XP+xpvcBXQ+GDXWL3saSCT66pRhhE2SSCZ+6WCDDLh03fMK7+PXg=="
},
"safe-buffer": {
"version": "5.2.1",
......@@ -54194,9 +54194,9 @@
}
},
"url-toolkit": {
"version": "2.2.2",
"resolved": "http://npmprivate.quantgroups.com/url-toolkit/-/url-toolkit-2.2.2.tgz",
"integrity": "sha512-l25w6Sy+Iy3/IbogunxhWwljPaDnqpiKvrQRoLBm6DfISco7NyRIS7Zf6+Oxhy1T8kHxWdwLND7ZZba6NjXMug=="
"version": "2.2.3",
"resolved": "http://npmprivate.quantgroups.com/url-toolkit/-/url-toolkit-2.2.3.tgz",
"integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ=="
},
"urllib": {
"version": "2.37.1",
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