Skip to content

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

chore(ui): 更新基础库

parent 5a4906d0
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 96 deletions
app/web/component/layout/activity/index.ts
View file @ 46f90b3a
......@@ -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 @ 46f90b3a
<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 @ 46f90b3a
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 } 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);
......@@ -35,10 +35,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];
......@@ -78,7 +74,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;
......@@ -110,6 +105,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);
}
});
}
......@@ -118,10 +116,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 @ 46f90b3a
......@@ -39,7 +39,7 @@
<page-bottom-tip />
</grid-item>
</grid-layout>
<cr-back-top :show-back-top="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 @ 46f90b3a
......@@ -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 @ 46f90b3a
......@@ -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/sa.service.ts
View file @ 46f90b3a
......@@ -21,7 +21,7 @@ export function initSa(router) {
use_app_track: true,
show_log: config.test,
app_js_bridge: true,
batch_send:true,
batch_send: true,
});
// 添加公共属性
sa.registerPage({
......
app/web/service/utils.service.ts
View file @ 46f90b3a
......@@ -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 @ 46f90b3a
{"apiHost":"https://quantum-blocks-test1.liangkebang.net","h5Host":"https://quantum-h5-test1.liangkebang.net","opapiHost":"https://opapi-test1.liangkebang.net","passportHost":"https://passportapi-test1.liangkebang.net","kdspHost":"https://talos-test1.liangkebang.net","loginUrl":"","h5ShopHost":"https://tenet-test1.liangkebang.net/#","qiniuUpHost":"https://up-z0.qiniup.com","qiniuHost":"https://appsync.lkbang.net"}
\ No newline at end of file
{"apiHost":"https://quantum-blocks-vcc2.liangkebang.net","h5Host":"https://quantum-h5-vcc2.liangkebang.net","opapiHost":"https://opapi-vcc2.liangkebang.net","passportHost":"https://passportapi-vcc2.liangkebang.net","kdspHost":"https://talos-vcc2.liangkebang.net","loginUrl":"","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 @ 46f90b3a
......@@ -1648,9 +1648,9 @@
"integrity": "sha512-uOCUKu5mvX3PWee+7ZFXQSNIR1V5SN2JVE2yANmW9/wQOgpEct291gXGok8VMw0009HlTWB4JATURPwyOP2DFg=="
},
"@qg/cherry-ui": {
"version": "2.22.0",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.22.0.tgz",
"integrity": "sha512-v4hCYTiW/gPPaqvQ3JFSpgaS/BBOR/LQewLyAGv424UmiFi55Jc/W52rEgQdycVjEOdlVpRJnrWCSYcsEX1Ogw==",
"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",
......@@ -1658,9 +1658,9 @@
}
},
"@qg/citrus-ui": {
"version": "0.2.18",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.2.18.tgz",
"integrity": "sha512-GMcMbG8SBR6ZFOOeP7Zp9nPbs4j2cN1YrtZgE/yFxeoaCVKA4Sm+llRRVD3ZpYp5J4nmMztOvHlu+upy24yF4A==",
"version": "0.2.20",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.2.20.tgz",
"integrity": "sha512-eKyAqqsUgk34ztLfnL7XyCbariEtkVv30FltCfxm/zx9QhqzFLmB54VR6/F3lOeGQveQcT/NE9hXHsC9K+QjaQ==",
"requires": {
"@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.21.1",
......@@ -20956,9 +20956,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",
......
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