feat(页面组件): 新增图片组件和页面顶部导航组件
- 新增 images.vue 图片组件，支持图片展示、链接跳转和二维码长按识别 - 新增 pageTopbar.vue 页面顶部导航组件，支持自定义标题、返回按钮和样式配置 - 在首页和专题页中注册并使用新增组件 - 优化 homeComb.vue 组件，添加选项卡轮播显示控制逻辑 - 添加 DIY 组件调试日志功能，便于开发调试 - 修复缓存读取空值时的默认值处理
This commit is contained in:
216
pages/index/components/pageTopbar.vue
Normal file
216
pages/index/components/pageTopbar.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view v-show="!isHidden" class="page-title-wrap" :style="wrapStyleStr">
|
||||
<view class="page-title-box px-20" :style="pageTitleBoxStyleStr">
|
||||
<view class="nav-inner" :style="navInnerStyleStr">
|
||||
<view class="side" :style="leftSideStyleStr" @tap="onBack">
|
||||
<text class="iconfont icon-ic_leftarrow" :style="iconStyleStr"></text>
|
||||
</view>
|
||||
<view class="title" :style="titleStyleStr">{{ titleText }}</view>
|
||||
<view class="side" :style="rightSideStyleStr"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'pageTopbar',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
__statusBarRpx: 0,
|
||||
__statusBarPx: 0,
|
||||
__rpx2px: 0.5,
|
||||
__navHeightPx: 44
|
||||
}
|
||||
},
|
||||
created() {
|
||||
try {
|
||||
const info = uni.getWindowInfo ? uni.getWindowInfo() : uni.getSystemInfoSync()
|
||||
const statusBarPx = Number(info?.statusBarHeight || 0)
|
||||
const windowWidthPx = Number(info?.windowWidth || 375)
|
||||
this.__statusBarPx = statusBarPx
|
||||
this.__rpx2px = windowWidthPx ? windowWidthPx / 750 : 0.5
|
||||
this.__navHeightPx = 80 * this.__rpx2px
|
||||
this.__statusBarRpx = windowWidthPx ? (statusBarPx * 750) / windowWidthPx : 0
|
||||
} catch (e) {
|
||||
this.__statusBarPx = 0
|
||||
this.__rpx2px = 0.5
|
||||
this.__navHeightPx = 44
|
||||
this.__statusBarRpx = 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const debug = uni.getStorageSync('DEBUG_DIY_RENDER') === true
|
||||
if (!debug) return
|
||||
console.log('[DIY][component]', 'pageTopbar', 'mounted', {
|
||||
id: this.dataConfig?.id,
|
||||
timestamp: this.dataConfig?.timestamp,
|
||||
title: this.dataConfig?.titleConfig?.value,
|
||||
statusBarRpx: this.__statusBarRpx,
|
||||
statusBarPx: this.__statusBarPx,
|
||||
rpx2px: this.__rpx2px,
|
||||
navHeightPx: this.__navHeightPx,
|
||||
sideWidthPx: this.sideWidthPx
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('.page-title-wrap')
|
||||
.boundingClientRect(rect => {
|
||||
console.log('[DIY][component]', 'pageTopbar', 'rect', rect)
|
||||
})
|
||||
.select('.page-title-box')
|
||||
.boundingClientRect(rect => {
|
||||
console.log('[DIY][component]', 'pageTopbar', 'rect_box', rect)
|
||||
})
|
||||
.select('.nav-inner')
|
||||
.boundingClientRect(rect => {
|
||||
console.log('[DIY][component]', 'pageTopbar', 'rect_inner', rect)
|
||||
})
|
||||
.exec()
|
||||
} catch (e) {}
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
isHidden() {
|
||||
return this.dataConfig?.isHide === true || this.dataConfig?.isHide === '1'
|
||||
},
|
||||
titleText() {
|
||||
return this.dataConfig?.titleConfig?.value || ''
|
||||
},
|
||||
linkValue() {
|
||||
return this.dataConfig?.linkConfig?.value || ''
|
||||
},
|
||||
themeColorValue() {
|
||||
return this.dataConfig?.themeColor?.color?.[0]?.item || '#282828'
|
||||
},
|
||||
titleColorValue() {
|
||||
return this.dataConfig?.titleColor?.color?.[0]?.item || '#282828'
|
||||
},
|
||||
bgColorValue() {
|
||||
return this.dataConfig?.bgColor?.color?.[0]?.item || '#ffffff'
|
||||
},
|
||||
fontSizeVal() {
|
||||
return Number(this.dataConfig?.fontSize?.val ?? 16)
|
||||
},
|
||||
iconSizeVal() {
|
||||
return Number(this.dataConfig?.iconSize?.val ?? 18)
|
||||
},
|
||||
navHeightRpx() {
|
||||
return 80
|
||||
},
|
||||
topVal() {
|
||||
return Number(this.dataConfig?.topConfig?.val ?? 0)
|
||||
},
|
||||
bottomVal() {
|
||||
return Number(this.dataConfig?.bottomConfig?.val ?? 0)
|
||||
},
|
||||
prVal() {
|
||||
return Number(this.dataConfig?.prConfig?.val ?? 0)
|
||||
},
|
||||
mbVal() {
|
||||
return Number(this.dataConfig?.mbConfig?.val ?? 0)
|
||||
},
|
||||
fillet() {
|
||||
return this.dataConfig?.fillet || {}
|
||||
},
|
||||
wrapStyleStr() {
|
||||
const top = this.topVal * 2
|
||||
const padTop = Math.max(0, Number(top))
|
||||
return `background:#f5f5f5;margin-top:${this.mbVal * 2}rpx;padding-top:${padTop}rpx;padding-bottom:${this.bottomVal * 2}rpx;padding-left:${this.prVal * 2}rpx;padding-right:${this.prVal * 2}rpx;`
|
||||
},
|
||||
pageTitleBoxStyleStr() {
|
||||
const base = `width:100%;display:flex;align-items:center;padding-top:${this.__statusBarPx}px;box-sizing:border-box;`
|
||||
const bg = `background:${this.bgColorValue};`
|
||||
let radius = ''
|
||||
if (this.fillet.type === 0 && this.fillet.val !== undefined) {
|
||||
radius = `border-radius:${Number(this.fillet.val) * 2}rpx;`
|
||||
}
|
||||
if (this.fillet.type === 1 && Array.isArray(this.fillet.valList)) {
|
||||
const [tl, tr, br, bl] = this.fillet.valList
|
||||
radius = `border-radius:${Number(tl?.val || 0) * 2}rpx ${Number(tr?.val || 0) * 2}rpx ${Number(br?.val || 0) * 2}rpx ${Number(bl?.val || 0) * 2}rpx;`
|
||||
}
|
||||
return base + bg + radius
|
||||
},
|
||||
navInnerStyleStr() {
|
||||
return `width:100%;display:flex;align-items:center;height:${this.__navHeightPx}px;box-sizing:border-box;`
|
||||
},
|
||||
leftSideStyleStr() {
|
||||
return `width:${this.sideWidthPx}px;height:100%;display:flex;align-items:center;justify-content:flex-start;`
|
||||
},
|
||||
rightSideStyleStr() {
|
||||
return `width:${this.sideWidthPx}px;height:100%;display:flex;align-items:center;justify-content:flex-end;`
|
||||
},
|
||||
iconStyleStr() {
|
||||
return `font-size:${this.iconSizeVal * 2}rpx;color:${this.themeColorValue};font-weight:bold;`
|
||||
},
|
||||
titleStyleStr() {
|
||||
return `font-size:${this.fontSizeVal * 2}rpx;color:${this.titleColorValue};flex:1;font-weight:bold;text-align:center;line-height:${this.__navHeightPx}px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`
|
||||
},
|
||||
sideWidthRpx() {
|
||||
return Math.max(80, this.iconSizeVal * 2 + 28)
|
||||
},
|
||||
sideWidth() {
|
||||
return `${this.sideWidthRpx}rpx`
|
||||
},
|
||||
sideWidthPx() {
|
||||
return this.sideWidthRpx * (this.__rpx2px || 0.5)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onBack() {
|
||||
const url = this.linkValue
|
||||
if (!url) return
|
||||
const pure = url.split('?')[0]
|
||||
const tabPages = [
|
||||
'/pages/index/index',
|
||||
'/pages/goods_cate/goods_cate',
|
||||
'/pages/discoverIndex/index',
|
||||
'/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
]
|
||||
if (tabPages.includes(pure)) {
|
||||
uni.switchTab({ url })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-title-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
.page-title-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.title {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user