koyo_crm/RuoYi-Mobile-master/pages/work/pageHead.vue

<template>
  <view>
    <view class="top-view">
      <u-grid>
        <u-grid-item>
          <u-icon v-if="showBack" name="arrow-left" size="40rpx" @click="goBack()"
                  style="align-self: flex-start;margin-left: 15rpx;"></u-icon>
        </u-grid-item>
        <u-grid-item custom-style="opacity:1">
          <text class="btn-text">{{ pageTitle }}</text>
        </u-grid-item>
        <u-grid-item v-if="showLogout" custom-style="opacity:1">
          <image  class="logout-icon" style=" width:34rpx;height:34rpx;" src="~@/static/img/logout.png" @click="showLogoutDialog()">
          </image>
        </u-grid-item>
		<u-grid-item v-if="showHistory" custom-style="opacity:1">
		  <image  class="logout-icon" style=" width:34rpx;height:34rpx;" src="~@/static/img/doct.png" @click="jumpPage()">
		  </image>
		</u-grid-item>
		<u-grid-item v-if="!showHistory&&!showLogout" custom-style="opacity:1">
		
		</u-grid-item>
      </u-grid>
    </view>
    <view>
     <!-- <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog type="info" cancelText="返回" confirmText="确认" title="提示" content="是否确认退出？"
                          @confirm="logout()"></uni-popup-dialog>
      </uni-popup> -->
	  
	  
	  <!-- 确认弹窗 -->
	  <uni-popup ref="alertDialog" background-color="#fff" borderRadius="10px 10px 10px 10px" style="width: 90%;">
	  	<view class="popup-content" style="padding: 20rpx 40rpx" >
	  		<view style="text-align: center;margin: 50rpx 0 50rpx">
	  			<img class="button-icon" src="@/static/img/approve/warning.png" alt="" />
	  			<text style="color: rgba(0, 0, 0, 0.85);font-size: 18px;font-weight: 600">是否确认退出?</text>
	  		</view>	  		
	  		<view class="flex-center mt32" style="margin-bottom: 30rpx;">
	  			<view class="button-left-one flex-center-middle" @click="$refs.alertDialog.close()">
	  				<img class="button-icon" src="@/static/img/approve/reject.png" alt="" />
	  				<view class="reject-text">取消</view>
	  			</view>
	  			<view style="width: 50rpx;"></view>
	  			<view class="button-right-one flex-center-middle" @click="logout()">
	  				<img class="button-icon" src="@/static/img/approve/pass.png" alt="" />
	  				<view class="pass-text">确定</view>
	  			</view>
	  		</view>
	  	</view>
	  </uni-popup>
	  
    </view>
  </view>
</template>

<script>
export default {
  name: "pageHead",
  props: {
    showBack: false,
    showLogout: false,
    pageTitle: null,
	showHistory:false,

  },
  data() {
    return {}
  },
  methods: {
	jumpPage(){
		this.$emit("jumpHistory")
	},
    logout() {
      const app = this
      app.$store.dispatch('Logout').then(res => {
        uni.reLaunch({
          url: '/pages/login/index'
        })
      })
    },
    showLogoutDialog() {
      this.$refs.alertDialog.open()
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
  }
}
</script>

<style lang="scss" scoped>
	.top-view {
	  font-size: 30 rpx;
	  font-weight: 700;
	  line-height: 45px;
	  background-color: white;
	  height: 45px;
	}

	.logout-icon {
	  align-self: flex-end;
	  margin-right: 20px;
	}
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-center-middle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-content {
			padding: 20rpx 20rpx;
			
			.return_content{
				width: 92%;
				padding: 20rpx 28rpx;
				background: #EFF2F6;
				border-radius: 4px;
			}
			.return_title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 16px;
				color: rgba(0,0,0,0.85);
				margin-bottom: 10rpx;
			}
			.button-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
			
			.button-left {
				width: 350rpx;
				height: 84rpx;
				background: #FFF8F8;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
				.reject-text {
					font-size: 32rpx;
					color: #E60114;
					line-height: 44rpx;
				}
			}
			
			.button-right {
				width: 350rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
			
				.pass-text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
			.button-left-one {
				width: 220rpx;
				height: 84rpx;
				background: #FFF8F8;
				border-radius: 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
				.reject-text {
					font-size: 32rpx;
					color: #E60114;
					line-height: 44rpx;
				}
			}
			
			.button-right-one {
				width: 220rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
				border-radius: 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
			
				.pass-text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}
</style>