itsm-wx-handle/pages/repository/repository.vue

<template>
  <view class="categoryOne">
    <view class="body" v-if="dataInfo.list.length">
      <view class="body_item ellipsis" v-for="data in dataInfo.list" :key="data.id">
				<view @click="toCategoryTwo(data)">
					<view class="title">{{data.title}}</view>
					<view class="content">
						<view v-html="data.content"></view>
					</view>
					<view class="sign">
						<view>引入次数：{{data.introduceCount}}</view>
						<view>{{data.createtime}}</view>
					</view>
				</view>
				<view class="btn-style">
					<button @click="importData(data)" @touchmove.stop.prevent type="default" class="primaryButton btn">引入</button>
				</view>
      </view>
    </view>
    <view class="zanwu" v-else>
      <text class="newicon newicon-zanwu"></text>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive} from 'vue'
  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
  import { api_getSolution } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useGoBack } from '@/share/useGoBack.js'
  
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const { goBack }  = useGoBack();
  
	// 操作类型
	const operateType = ref(null)
	
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  // 数据
  const dataInfo = reactive({
    list: [],//工单列表
    idx: 0,//页码
    hasMore: true,//是否有更多数据
    incidentId: undefined,//事件ID
  })
  
  // 跳转知识库详情
  function toCategoryTwo(data){
    uni.navigateTo({
      url: `/pages/repositoryDetails/repositoryDetails?incidentId=${dataInfo.incidentId}
			&solutionnumber=${data.solutionnumber}&operateType=${operateType.value}`
    })
  }
	
  // 引入
	function importData(data){
		let url = null
		if(operateType.value=='malfunction'){ //故障处理
			url = '/pages/handler/handler'
		}else if(operateType.value=='reissue'){ //补单
			url = '/pages/handler/handler'
		}
		uni.navigateTo({
		  url: `${url}?incidentId=${encodeURIComponent(JSON.stringify(dataInfo.incidentId))}
			&handleDescription=${encodeURIComponent(data.content)}&solutionId=${encodeURIComponent(JSON.stringify(data.id))}&isSummaryNext=1&type=${encodeURIComponent('rep')}
			&introduceCount=${encodeURIComponent(data.introduceCount)}`
		})
	}
	
  // 获取列表信息
  function getList(idx){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    
    dataInfo.idx = idx === undefined ? dataInfo.idx : idx;
    if(dataInfo.idx === 0){
      dataInfo.list = [];
    }

    let postData = {
      idx: dataInfo.idx,
      sum: 20,
      solution: {
        selectType:"",
				keySearch:"",
				keywords:"",
				solutionType:{id:""},
				status:{id:72},
				createUser:{name:""},
				dutyId:1,
				tabType:"publish"
      }
    }
    
    api_getSolution(postData).then(res => {
      uni.hideLoading();
      uni.stopPullDownRefresh();
      if(res.status == 200){
        let list = res.list || [];
        if(list.length){
          dataInfo.hasMore = true;
          dataInfo.list = dataInfo.idx === 0 ? list : dataInfo.list.concat(list);
        }else{
          dataInfo.hasMore = false;
        }
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
  onLoad((option) => {
    dataInfo.incidentId = option.incidentId;
		operateType.value = option.operateType;
    getList(0);
  })
  
  onPullDownRefresh(() => {
    getList(0)
  })
  
  onReachBottom(() => {
    dataInfo.idx += 1;
    if (dataInfo.hasMore) {
      getList(); // 当触底时加载更多数据
    }
  })
</script>

<style lang="scss" scoped>
.categoryOne{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .head{
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-size: 26rpx;
    color: $uni-primary;
  }
  .body{
    font-size: 30rpx;
    .body_item{
      border-bottom: 8rpx solid #DEDEDE;
			.title{
				font-weight: 600;
				padding: 24rpx;
				border-bottom: 1rpx solid #DEDEDE;
			}
			.content{
				color: #6A6A6A;
				font-size: 24rpx;
				padding: 24rpx;
				border-bottom: 1rpx solid #DEDEDE;
				view{
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					white-space: initial;
				}
			}
			.sign{
				display: flex;
				justify-content: space-between;
				padding: 24rpx 24rpx 0 24rpx;
				font-size: 26rpx;
			}
			.btn-style{
				padding: 24rpx;
			}
    }
  }
  .zanwu{
    margin-bottom: 140rpx;
    margin-top: 88rpx;
    display: flex;
    justify-content: center;
    .newicon-zanwu{
      font-size: 256rpx;
      color: #D6D6D6;
      margin-top: 140rpx;
    }
  }
  .foot_common_btns{
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
}
</style>