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