crmeb-mp/pages/index/components/pageTopbar.vue

<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/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>