ufutx_love_mp/src/components/cu-custom.wpy

<template>
    <view class="~cu-custom" style="height:{{CustomBar}}px;z-index: 1">
        <view  class="~cu-bar ~fixed  {{bgImage!=''?'none-bg text-white bg-img':''}}"
              style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}};{{bgColor}}">
            <view class="~action" bindtap="BackPage" v-if="isBack">
                <text class="~cuIcon-back"></text>
                <slot name="backText"></slot>
            </view>
            <view class="~action ~border-custom" v-if="isCustom"
                  style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)">
                <text class="~cuIcon-back" bindtap="BackPage"></text>
                <text class="~cuIcon-homefill" bindtap="toHome"></text>
            </view>
            <view class="~content" v-if="!tabNewsShow" style="top:{{StatusBar}}px">
                <slot name="content"></slot>
            </view>
            <view class="m_search f-fc" v-if="tabNewsShow"  @tap="goto('/pages/users/friendSearch')">
                <image class="m_search_icon" src="https://images.ufutx.com/202106/19/c607aaf49440b0df3308d6e048fd9ad7.png" mode="aspectFit" lazy-load="false"></image>
                <input disabled v-if="tabInputShow" type="text" placeholder="搜索昵称" confirm-type="search" bindinput="inputTyping" value="{{searchValue}}">
                <input type="text" v-else placeholder="搜索昵称" confirm-type="search" bindinput="inputTyping" value="{{searchValue}}">
                <image v-if="searchValue.length > 0" bindtap="searchEmpty" class="m_search_icon_add" src="https://images.ufutx.com/202106/30/03404c702dc077428d7af781f98e15a3.png" mode="aspectFit" lazy-load="false"></image>
            </view>
            <slot name="right"></slot>
        </view>
    </view>
    <view :class="{'~show':modalName=='Modal'}" class="~cu-modal ">
        <view class="cu-dialog">
            <view class="~cu-bar ~bg-white justify-end">
                <view class="~content">提示</view>
                <view class="action" bindtap="hideModal">
                    <text class="cuIcon-close text-red"></text>
                </view>
            </view>
            <view class="padding-xl">
                <view>暂无上级页面可返回，请点击右边 <text class="cuIcon-homefill" bindtap="toHome"></text> 返回主页</view>
            </view>
        </view>
    </view>
<!--  <loginDialog :loginShow.sync="loginShow"></loginDialog>-->
</template>

<script>
    import wepy from '@wepy/core'
  import https from '../mixins/https'
  import base from '../mixins/base'

 wepy.component({
    mixins: [base, https],
     options: {
         multipleSlots: true // 在组件定义时的选项中启用多slot支持
     },
     externalClasses: ['bgColor'],
    props: {
      bgColor: {
        type: String,
        default: ''
      },
      isCustom: {
        type: [Boolean, String],
        default: false
      },
      isBack: {
        type: [Boolean, String],
        default: false
      },
      tabNewsShow: {
        type: [Boolean, String],
        default: false
      },
      tabInputShow: {
        type: [Boolean, String],
        default: false
      },
      bgImage: {
        type: String,
        default: ''
      },
      handleIndex: {
        type: [Number, String],
        default: ''
      },
      tex: {
        type: [String, Number],
        default: ''
      },
      imgs: {
        type: Array,
        default: ''
      },
      hottopic: {
        type: Array,
        default: []
      }
    },
    data: {
      loginShow: false,
      StatusBar: 0,
      CustomBar: 0,
      Custom: 0,
      modalName: '', // 是否弹框
      prevPage: {},  // 是否有上个页面
      token: '',
      searchValue: ''
    },
     created() {
         this.StatusBar = this.$app.$options.globalData.StatusBar
         this.CustomBar = this.$app.$options.globalData.CustomBar
         this.Custom = this.$app.$options.globalData.Custom
     },
    ready() {
      console.log(this.handleIndex, '---')
      let pages = getCurrentPages()
      this.token = wx.getStorageSync('token')
        console.log(pages[pages.length - 2], '3333')
      let prevListPage = pages[pages.length - 2]  // 上一个页面
        console.log(prevListPage, '44444')
        if (prevListPage) {
            this.prevPage = true
        } else {
            this.prevPage = false
        }
      // this.prevPage = prevListPage
        console.log('55555')
        console.log(this.prevPage, 'prevPage=')
      try {
        var systemInfo = wx.getSystemInfoSync()
        this.computeNavigateBarHeight(systemInfo)
      } catch (e) {
        // 获取系统信息失败
        this.setData({
          windowHeight: 812,
          totalTopHeight: 68,
          statusBarHeight: 20,
          titleBarHeight: 48
        })
      }
    },

    onShow() {
    },

    methods: {
        computeNavigateBarHeight(systemInfo) {
            let menuButtonObject = wx.getMenuButtonBoundingClientRect()
            let totalTopHeight = systemInfo.statusBarHeight + menuButtonObject.height + (menuButtonObject.top - systemInfo.statusBarHeight) * 2 // 导航高度
            let windowHeight = systemInfo.windowHeight,
              statusBarHeight = systemInfo.statusBarHeight
            this.windowHeight = windowHeight
            this.CustomBar = totalTopHeight
            this.StatusBar = statusBarHeight
            this.titleBarHeight = totalTopHeight - statusBarHeight + 4
        },
      hideModal() {
        this.modalName = ''
      },
      BackPage() {
        let page = getCurrentPages()
        let prevPages = page[page.length - 1]
        wx.removeStorageSync('groupMemberRow')
        if (this.handleIndex == 1) {
          if (this.tex != '' || this.imgs != '') {
            prevPages.handle()
          } else {
            wx.setStorageSync('draft', {
              texs: '',
              imags: []
            })
            wx.navigateBack({
              delta: 1
            })
          }
        } else {
          if (this.prevPage) {
            wx.navigateBack({
              delta: 1
            })
          } else {
            wx.reLaunch({
              url: '/pages/tabBar/welcome'
            })
          }
        }
      },
      toHome () {
        wx.removeStorageSync('groupMemberRow')
        wx.reLaunch({
          url: '/pages/tabBar/welcome'
        })
      },
      goto(url, text) {
    if (this.tabNewsShow && this.isBack) return
    if (!this.token) {
      console.log(url)
      this.loginShow = true
      return
    }
    if (url) {
      this.modalName = ''
      wx.navigateTo({
        url: url
      })
}
  },
      inputTyping(e) {
        this.searchValue = e.detail.value
        this.$emit('customInput', e)
      },
      searchEmpty() {
        let e = {
          detail: {
            value: ''
          }
        }
        this.searchValue = ''
        this.$emit('customInput', e)
      }
    }
  })
</script>

<style lang="less" scoped>
.m_search {
  width: 446rpx;
  height: 64rpx;
  background-color: #F8F8F8;
  border-radius: 100rpx;
  padding: 0 22rpx;
  margin-left: 30rpx;
  .m_search_icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 8rpx;
  }
  .m_search_icon_add {
    width: 28rpx;
    height: 28rpx;
    margin-left: 60rpx;
  }
}
</style>