diancan_uni/components/header/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <van-icon name="arrow-left" color="#333333" size="26" class="huitui" v-if="showBack" :style="'top:' + customCenter + 'px'" @tap.native="goback" />
        <view class="header_wrap" :style="'height:' + setBgHeight + 'px;background:' + bgColor" v-if="showHeader">
            <view class="bg">
                <view class="bg_xinxi" :style="'top:' + customCenter + 'px'">
                    <!-- <van-icon name="arrow-left" color="#333333" size="26" class="huitui" wx:if="{{ showBack }}" bind:tap="goback"/> -->
                    <text class="sub_title">{{ pageTitle }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // 这里是一些组件内部数据
            customCenter: app.globalData.customCenter,
            setBgHeight: app.globalData.setBgHeight
        };
    },
    props: {
        showBack: {
            type: Boolean,
            default: false // 此小程序,多用非自定义的(为了个别页面方便用一下)
        },
        showHeader: {
            type: Boolean,
            default: true
        },
        pageTitle: {
            type: String,
            default: ''
        },
        bgColor: {
            type: String,
            default: '#ffffff'
        }
    },
    methods: {
        // 这里是一些自定义方法
        // 回到首页
        gohome() {
            uni.reLaunch({
                url: '/pages/index/index'
            });
        },

        // 返回上一页
        goback() {
            // 页面栈
            // 获取当前页面是否为支付成功页
            // let pages = getCurrentPages();
            // let currentPage = pages[pages.length -1];
            // let url = currentPage.route;
            // console.log('当前地址',url);
            uni.navigateBack({
                delta: 1,
                // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
                success: function (res) {
                    // console.log('返回成功====',res)
                },
                fail: function (res) {
                    // 页面栈无页面,跳到首页
                    if (res.errMsg == 'navigateBack:fail cannot navigate back at first page.') {
                        uni.switchTab({
                            url: '/pages/index/index'
                        });
                    }
                }
            }); // 支付页回退到商品页
            // if(url == 'pages/pay-success/index'){
            // 	wx.reLaunch({
            // 		url: '/pages/goods/index'
            // 	});
            // }else{
            // 	wx.navigateBack({
            // 		delta:1,    // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
            // 		success: function(res){
            // 			// console.log('返回成功====',res)
            // 		},
            // 		fail: function(res){
            // 			// 页面栈无页面,跳到首页
            // 			if(res.errMsg == 'navigateBack:fail cannot navigate back at first page.'){
            // 				wx.switchTab({
            // 					url: '/pages/index/index'
            // 				})
            // 			}
            // 		}
            // 	});
            // }
        }
    }
};
</script>
<style>
.header_wrap {
    background: #fff;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    z-index: 100;
}
.huitui {
    position: fixed;
    left: 30rpx;
    transform: translateY(-50%);
    z-index: 101;
}
.bg .tu {
    position: absolute;
    top: 0rpx;
    left: 0rpx;
}
.bg_xinxi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    padding-left: 30rpx;
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    position: relative;
}

.logo_tu {
    width: 216rpx;
    height: 56rpx;
    position: absolute;
    left: 30rpx;
}
.sub_title {
    font-size: 30rpx;
    color: #333;
}
/* 背景上的圆 */
.square_1 {
    width: 150rpx;
    height: 150rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    position: absolute;
    top: -30rpx;
    left: -20rpx;
}
.square_2 {
    width: 100rpx;
    height: 100rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    position: absolute;
    top: 40rpx;
    right: -30rpx;
}
</style>