156 lines
3.2 KiB
Vue
156 lines
3.2 KiB
Vue
<template>
|
|
<view class="title">
|
|
<view class="title-title" :style="{
|
|
'color' : props.color,
|
|
'padding-top' : top+'rpx',
|
|
'background-color' : props.bgc,
|
|
'height' : tops+'rpx',
|
|
'line-height' : tops+'rpx'
|
|
}">
|
|
<view v-if="props.isReturn===0" class="title-return" @click="returns()">
|
|
<image src="@/static/report/back_icon.png" mode=""></image>
|
|
</view>
|
|
<view v-else-if="props.isReturn===1" class="title-return title-icon" @click="returns()">
|
|
<image :src="props.returnIcon" mode=""></image>
|
|
</view>
|
|
<view v-else-if="props.isReturn===4" class="title-return" @click="goHome()">
|
|
<image src="@/static/report/back_icon.png" mode=""></image>
|
|
</view>
|
|
<view v-else class="title-return"></view>
|
|
<view class="title-name"
|
|
:style="{'text-align':props.isCenter?'center;':'left;',marginLeft:props.isReturn===2?'-130rpx':''}">
|
|
{{props.title_name}}</view>
|
|
</view>
|
|
<view :style="{height: top+tops+'rpx'}"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
defineProps,
|
|
ref
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onShow
|
|
} from "@dcloudio/uni-app";
|
|
const props = defineProps({
|
|
title_name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isReturn: { // 0返回 1自定义图标 2空图标文字居左 3空图标文字居中
|
|
type: Number,
|
|
required: true
|
|
},
|
|
returnIcon: {
|
|
type: String,
|
|
// required: true
|
|
},
|
|
color: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
bgc: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isCenter: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const isLast = ref(false)
|
|
const top = ref(0)
|
|
const tops = ref(100)
|
|
const emit = defineEmits(['iconClick'])
|
|
|
|
onShow(() => {
|
|
getLast()
|
|
getTopWeiXin()
|
|
})
|
|
|
|
const goHome = () => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index' //返回首页
|
|
})
|
|
}
|
|
// 返回的箭头
|
|
const returns = () => {
|
|
if (props.isReturn === 0) {
|
|
if (isLast.value) {
|
|
uni.switchTab({
|
|
url: '/pages/index/index' //返回首页
|
|
})
|
|
} else {
|
|
uni.navigateBack({
|
|
delta: 1 //返回上一页
|
|
});
|
|
}
|
|
} else if (props.isReturn === 1) {
|
|
// 自定义图标操作
|
|
emit('iconClick')
|
|
}
|
|
}
|
|
// 获取小程序安全区域的高度
|
|
const getTopWeiXin = () => {
|
|
top.value = parseInt(uni.getSystemInfoSync().statusBarHeight * 750 / uni.getSystemInfoSync().screenWidth)
|
|
uni.setStorageSync('top', top.value);
|
|
}
|
|
// 获取有无上一页
|
|
const getLast = () => {
|
|
let pages = getCurrentPages(); //当前页
|
|
if (pages.length == 1) {
|
|
isLast.value = true
|
|
} else {
|
|
isLast.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
.title-title {
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 750rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
|
|
.title-return {
|
|
width: 60rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 999;
|
|
margin-left: 20rpx;
|
|
margin-top: 8rpx;
|
|
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
.title-icon {
|
|
margin-top: 20rpx;
|
|
|
|
image {
|
|
width: 46rpx !important;
|
|
height: 46rpx !important;
|
|
}
|
|
}
|
|
|
|
.title-name {
|
|
width: 560rpx;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
</style> |