uni-app 20收藏列表开发

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="我的收藏" showBack :showRight="false"></free-nav-bar>
    <view class="pt-3 px-3">
      <view class="bg-white rounded p-3">
        <text>聊天记录</text>
      </view>
    </view>
    <view class="pt-3 px-3">
      <view class="bg-white rounded p-3">
        <free-image src="/static/images/demo/demo6.jpg"></free-image>
      </view>
    </view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeImage from '@/components/free-ui/free-image.vue';
  export default {
    components:{
      freeNavBar,
      freeImage
    },
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>
<style>
</style>

// free-nav-bar.vue
<template>
  <view>
    <view :class="getClass">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px;'"></view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 左边 -->
        <view class="flex align-center">
          <!-- 返回按钮 -->
          <free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button>
          <!-- 标题 -->
          <text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
        </view>
        <!-- 右边 -->
        <view class="flex align-center" v-if="showRight">
          <slot name="right">
            <free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
            <free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
          </slot>
        </view>
        <!--\ue6e3 \ue682 -->
      </view>
    </view>
    <!-- 站位 -->
    <view v-if="fixed" :style="fixedStyle"></view>
    
    <!-- 扩展菜单  -->
    <free-popup v-if="showRight" ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top">
      <view class="flex flex-column" style="width:320rpx;height: 525rpx;">
          <view v-for="(item,index) in menus" :key="index" class="flex-1 flex align-center" hover-class="bg-hover-dark" @click="clickEvent(item.event)">
            <text class="pl-3 pr-2 iconfont font-md text-white">{{item.icon}}</text>
            <text class="font-md text-white">{{item.name}}</text>
          </view>
      </view>
    </free-popup>
  </view>
</template>
<script>
  import freeIconButton from './free-icon-button.vue';
  import freePopup from './free-popup.vue';
  export default {
    components: {
      freeIconButton,
      freePopup
    },
    props: {
      showBack:{
        type:Boolean,
        default:false
      },
      title: {
        type: String,
        default: ''
      },
      fixed:{
        type:Boolean,
        default:false
      },
      noreadnum:{
        type:Number,
        default:0
      },
      bgColor:{
        type:String,
        default:"bg-light"
      },
      showRight:{
        type:Boolean,
        default:true
      }
    },
    data() {
      return {
        statusBarHeight: 0,
        navBarHeight: 0,
        menus:[
          {
            name:'发起群聊',
            event:"",
            icon:"\ue633"
          },
          {
            name:'添加好友',
            event:"",
            icon:"\ue65d"
          },
          {
            name:'扫一扫',
            event:"",
            icon:"\ue614"
          },
          {
            name:'收付款',
            event:"",
            icon:"\ue66c"
          },
          {
            name:'帮助与反馈',
            event:"",
            icon:"\ue61c"
          }
        ],
      }
    },
    mounted() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      fixedStyle() {
        return `height:${this.navBarHeight}px`;
      },
      getTitle(){
        let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';
        return this.title + noreadnum;
      },
      getClass(){
        let fixed = this.fixed?"fixed-top":"";
        return `${fixed} ${this.bgColor}`;
      }
    },
    methods:{
      openExtend(){
        this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150));
      },
      // 返回
      back(){
        uni.navigateBack({
          delta:1
        })
      }
    }
  }
</script>
<style>
</style>
// free-image.vue
<template>
  <!-- <image @click="preview(item.data)" v-if="item.type==='emoticon' || item.type==='image'"
    :src="item.data" lazy-load :style="'width:'+w+'rpx;height:'+h+'rpx;'" @load="loadImage"></image> -->
  <image @click="$emit('click')" 
    :src="src" class="bg-hover-light" lazy-load :style="imageStyle" @load="loadImage" :class="imageClass" :mode='mode'></image>
</template>
<script>
  export default {
    props: {
      src: {
        type: String,
        default: ""
      },
      imageClass:{
        type: String,
        default: ""
      },
      mode:{
        type:String,
        default:''
      },
      maxWidth:{ 
        type: Number,
        default: 500 // rpx
      },
      maxHeight:{
        type: Number,
        default: 350 // rpx
      }
    },
    data() {
      return {
        h: 100,
        w: 100
      }
    },
    computed: {
      imageStyle() {
        return `width:${this.w}px;height:${this.h}px;`
      }
    },
    methods: {
      // 加载图片
      loadImage(e){
        let w = e.detail.width
        let h = e.detail.height
        // // 最大宽度 px
        let maxW = uni.upx2px(this.maxWidth)
        // 最大高度
        let maxH = uni.upx2px(this.maxHeight)
        if (h <= maxH) {
          // 用原来的宽高
          this.w = w <= maxW ? w : maxW
          this.h = h
          this.$emit('load',{
            w:this.w,
            h:this.h
          })
          return;
        }
        this.h = maxH
        let w2 = maxH * (w / h)
        this.w = w2 <= maxW ? w2 : maxW
        this.$emit('load',{
          w:this.w,
          h:this.h
        })
      },
    },
  }
</script>
<style>
</style>