shuangchuangzhou_2022/src/pages/mobilescene/components/content.vue

<template>
  <div class="vcontent" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})`}">
    <div class="vcontentcon">
      <div class="cbody">
        <div class="ctitle">
          <span>留言板</span>
          <span v-if="list.length>0">共{{list.length}}位网友参与留言</span>
          <span v-else>暂无留言</span>
        </div>
        <ul v-infinite-scroll="getcontentList" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
          <li v-for="(item,i) in list" :key="i">
            <img :src="require(`@/assets/images/project/icon/usericon.png`)" alt="">
            <div>
              <div>
                <p>{{item.userName}}</p>
                <p>{{item.createDate}}</p>
              </div>
              <p>{{item.content}}</p>
            </div>
          </li>

          <li class="loading" v-if="busy"><span>加载中...</span></li>
        </ul>

        <div class="vtextarea">
          <input v-model="msg" maxlength="100"  placeholder="请输入留言......" />
          <span class="primary" @click="submit">发 表</span>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getcontentList,postcontent } from "@/config/api";

export default {
  data(){
    return {
      list:[],
      msg:'',
      paging: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1,
      },
      busy:false,
      hadloadAll:false
    }
  },
  mounted(){
    this.getcontentList()
  },
  methods:{
    submit(){
      if (!this.msg.trim()) {
        return this.$showTips({content:'请输入留言内容'})
      }
      else{
        postcontent({content:this.msg},res=>{
          this.$showTips({content:res.msg})
          this.msg = ''
          this.getcontentList()
        })
      }

    },
 
    getcontentList(){
      if (this.hadloadAll) return
      this.busy = true
      getcontentList({
        pageSize:this.paging.pageSize,
        page:this.paging.current
      },res=>{
        this.list = this.list.concat(res.data.comments)
        this.busy = false
        this.paging.total = res.data.totalCount
        this.paging.current++
        if (res.data.comments.length <= 0) {
          this.hadloadAll = true
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@w:100%;
@fixw:8px;
.vcontent{
  width: @w;
  position: relative;
  height: 100%;
  background-size: 100% auto;
  
  .vcontentcon{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 40px 0 0;
    .cbody{
      width: 100%;
      height: 100%;
      margin: 0 auto;
      .ctitle{
        padding: 0 20px;
        text-align: left;
        >span{
          display: block;
          &:first-of-type{
            margin-bottom: 2px;
            font-family: "pangmen";
            font-weight: normal;
            font-size: 24px;
          }
          &:last-of-type{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
      >ul{
        height: calc(100% - 180px);
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 20px auto 30px;
        padding: 0 20px 20px;
        >li{
          display: flex;
          justify-content: space-between;
          border-bottom: 1px dashed #D8D8D8;
          padding: 14px 0;
          width: 100%;
          @wh:46px;
        
          >img{
            border-radius: 6px;
            width: @wh;
            height: @wh;
            flex-shrink: 0;
          }
          >div{
            flex: 10;
            margin-left: 20px;
            >div{
              display: flex;
              align-items: center;
              justify-content: space-between;
              >p{
                &:first-of-type{
                  font-size: 16px;
                }
                &:last-of-type{
                  font-size: 12px;
                  color: rgba(255, 255, 255, 0.7);
                }
              }
            }
            >p{
              color: rgba(255, 255, 255, 0.7);
              font-size: 12px;
              width: 100%;
              margin-top: 10px;
              text-align: left;
            }
          }
        }

        .loading{
          width: 100%;
          >span{
            width: 100%;
          }
        }
      }
      .paging{
        margin-top: 4px;
      }
      .vtextarea{
        width: 100%;
        margin: 0 auto;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 34px;
        padding: 0 20px;
        >input{
          background: none;
          outline:none;
          width: 100%;
          height: 100%;
          border: none;
          padding: 0 20px;
          border-radius: 20px;
          background-color: rgba(255, 255, 255, 0.3);
        }
        >span{
          display: inline-block;
          min-width: 60px;
          flex-shrink: 0;
          border-radius: 2px;
          margin-left: 10px;
          height: 34px;
          line-height: 34px;
        }
      }
    }
  }
}
</style>