uniapp/pages_promotion/article/record.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
  <view id="record">
    <!--顶部搜索-->
    <van-search shape="round" v-model="search_title" placeholder="请输入文章标题"></van-search>
    <!--文章列表-->
    <view class="article">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="recordList">
        <view class="article-block" v-for="(item,index) in list" :key="index">
          <view class="img" @click="goToDetail(item.article_id)">
            <image class="image" :src="$util.img(item.cover_img)"></image>
          </view>
          <view class="block-content">
            <view class="content-title" @click="goToDetail(item.article_id)">{{ item.article_title }}</view>
            <view class="content-info">
              <view class="content-info-item">{{ item.time }}</view>
              <view class="content-info-item">
                <van-button v-if="record_type === 'browse'" @click="deleteBrowseRecord(item.article_id)" class="danger-btn" type="danger" size="mini" round>
                  删除
                </van-button>
                <van-button v-else-if="record_type === 'fabulous'" @click="deleteBrowseRecord(item.article_id)" class="danger-btn" type="danger" size="mini" round>
                  取消点赞
                </van-button>







              </view>
            </view>
          </view>
        </view>
      </van-list>
    </view>
  </view>
  <!-- 底部tabBar -->
  <view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
</template>

<script>
export default {
	data() {
		return {
      record_type: '',
      record_type_name:{
        'share': '分享',
        'fabulous': '点赞',
        'browse': '浏览',
      },
      // 列表相关
      page: 1,
      search_title: '',
      cate_ids: '',
      list: [],
      loading: false, // 是否处于加载状态，加载过程中不触发load事件
      finished: false, // 是否已加载完成，加载完成后不再触发load事件
    };
	},
	onShow() {},
  onLoad(options) {
    // 参数获取
    let _this = this;
    _this.record_type = options.record_type;

    // 页面标题
    uni.setNavigationBarTitle({
      title: _this.record_type_name[options.record_type] + '记录',
    })
  },
  watch:{
    search_title: {
      handler: function () {
        this.page = 1;
        this.recordList();
      },
      deep: true,
      immediate: false,
    },
  },
  mounted() {
    this.recordList();
  },
  methods: {
    // 获取文章列表
    recordList(){
      let _this = this;
      this.loading = true;
      _this.$api.sendRequest({
        url: '/article/api/index/getRecordList',
        data: {
          page_size: 10,
          page: _this.page,
          search_text: _this.search_title,
          record_type: _this.record_type
        },
        success: res => {
          if(res.code === 0){
            _this.loading = false;
            let data = res.data;

            if(_this.page === 1) _this.list = data.list;
            else _this.list = _this.list.concat(data.list);
            _this.page++;
            // 加载完成  判断是否为最后一页
            if (_this.page > data.page_count) _this.finished = true;
          }else{
            this.$dialog.alert({ message: res.message }).then(res =>{
              _this.$util.redirectTo('/pages_promotion/member/personal_center');
            });
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 点击跳转 —— 文章详情
    goToDetail(id) {
      this.$util.redirectTo('/pages_promotion/article/detail', { article_id: id });
    },
    // 删除浏览记录、取消点赞
    deleteBrowseRecord(article_id){
      let _this = this;
      let tips = '删除';
      if(_this.record_type === 'fabulous') tips = '取消点赞';
      _this.$dialog.confirm({ message: `确认${tips}？${tips}后不可恢复！` }).then(()=>{
        _this.$api.sendRequest({
          url: '/article/api/index/delRecordInfo',
          data: {
            record_type: _this.record_type,
            article_id: article_id
          },
          success: res => {
            this.$dialog.alert({ message: res.message }).then(()=>{
              _this.page = 1;
              _this.recordList();
            });
          },
          fail: res => {
            console.log(res);
          }
        });
      });
    }






  },
	onShareAppMessage(res) {
		var title = '记录';
		var path = '/pages_promotion/article/record.vue';
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss" scoped>
#record{
  background: #ffffff; // ffffff
  padding: 0 10px;

  .article{
    .article-block{
      width: 100%;
      padding: 20rpx 0;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      height: 180rpx;
      position: relative;
      .img{
        width: 260rpx;
        height: 180rpx;
        border-radius: 20rpx;
        overflow: hidden;
        .image{
          width: 100%;
          height: 100%;
        }
      }
      .block-content{
        width: calc(100% - 290rpx);
        height: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .content-title{
          width: 100%;
          font-size: 30rpx;
          font-weight: bold;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .content-info{
          width: 100%;
          display: inline-flex;
          justify-content: space-between;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: flex-end;
          .content-info-item{
            font-size: 26rpx!important;
            color: #999999;

            .danger-btn{
              padding: 0 20rpx;
            }
          }
        }
      }
    }
    .article-block::after{
      content: "";
      position: absolute;
      width: calc(100% - 40rpx);
      height: 1px;
      bottom: 0;
      left: 20rpx;
      background: #f5f5f5;
    }
  }

}
</style>