JDF_ElectronicPublicity_uni/components/pageButton/pageButton.vue

<template>
	<view class="i-z-index3" v-show="isShow">
		<!-- 头部 -->
		<view class="i-pst-f i-l-p11 i-t-p5 i-z-index3 animate__animated"
			:class="pageStatus===1?'animate__fadeInLeft':pageStatus===3?'animate__fadeOutLeft':''">
			<view class=" i-flex i-al-center" @click="gotoLast()">
				<view class="i-radius-p50 i-bd-1 i-flex i-al-center i-jst-center">
					<uni-icons type="back" size="1.6rem" color="#FFF"></uni-icons>
				</view>
				<span class="i-c-fff i-ml-10 i-fs-30">{{nowTitle}}</span>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="i-pst-f i-r-p10 i-b-p15 i-flex i-z-index3">
			<view class=" animate__animated"
				:class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
				<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
					@click="gotoLast()">
					<view class="i-radius-p50 i-bd-3 i-flex i-al-center i-jst-center" tabindex="-1">
						<uni-icons type="back" size="1.7rem" color="#000" tabindex="-1"></uni-icons>
						<!-- <span class="i-fs-20"><</span> -->
					</view>
					<span class="i-c-000 i-ml-10 i-fs-26">返回上一级</span>
				</view>
			</view>
			<view class="i-ml-10 animate__animated"
				:class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
				<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
					@click="gotoBack()">
					<!-- <view class="i-radius-p50 i-bd-3 i-p-2"> -->
					<uni-icons type="home" size="1.9rem" color="#000"></uni-icons>
					<!-- </view> -->
					<span class="i-c-000 i-ml-10 i-fs-26">回到首页</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pageButton",
		data() {
			return {

			};
		},
		props: {
			buttonData: {
				type: Object,
			},
			nowTitle: {
				type: String,
				default: '默认'
			},
			isShow: {
				type: Boolean,
				default: true
			},
			// 页面状态 动画效果
			pageStatus: {
				type: Number,
				default: 1,
			},
		},
		watch: {},
		methods: {
			// 返回上一页
			gotoLast() {
				// 先执行动画再返回
				if (this.buttonData.lastpage[this.buttonData.lastpage.length - 2] == 'default') {
					// this.buttonAnimation()
				}
				this.$emit('tolastEvent')
			},
			// 返回主页
			gotoBack() {
				this.$emit('backEvent')
			}
		}
	}
</script>

<style>
	uni-icons: {
		pointer-events: none;
		outline: none;
	}
</style>