zhywpt-sp/subpackage/after-sale/work-order/add-work-list.vue

<template>
   <view class="content">
	   <view class="list" v-for="(item,index) in state.list" @click="details(item.orderStatus,item.id)">
	   	  <view class="title" :style="{'--bgimg':`url(${$imgUrl}etcbg.png)`}">
			  <view class="title_left">
				  <image :src="`${$imgUrl}etc.png`" mode=""></image>
				  <text class="question">ETC使用问题</text>
			  </view>
			  <text class="statusdcl" v-if="item.orderStatus==0">待处理</text>
			  <text class="statusdbc" v-else-if="item.orderStatus==1">待补充</text>
			  <text class="statusyjs" v-else>已结束</text>
		  </view>
		  <view class="bot">
			  <view class="details">
				  <view><text>工单号码：</text><view>{{item.id}}</view></view>
				  <view><text>发生日期：</text><view>{{item.eventOccurrenceDate}}</view></view>
				  <view><text>客户诉求：</text><view>{{item.appeal}}</view></view>
			  </view>
			  <view class="time">{{item.updateTime}}</view>
		  </view>

	   </view>
	   <view style="text-align: center;margin: 20rpx;font-size: 30rpx;" v-if="state.flags">我是有底线的~</view>
	   <view class="no" v-if="state.list.length==0">暂无自助工单</view>
   </view>
   <image class="add" :src="`${$imgUrl}etcadd.png`" mode="" @click="add()"></image>
</template>

<script setup lang="ts">
	import {navTo} from "@/utils/utils";
	import { onLoad,onReachBottom } from "@dcloudio/uni-app";
	import {requestNew} from "@/utils/network/request.js";
	import {selfServicePage} from "@/utils/network/api.js";
	import { reactive,ref } from "vue";
	const state = reactive({
		pageNo:1,
		pageSize:10,
		list:[],
		flags: false,
		totalCount:"",
	})
	onLoad(() => {
		list()
	});
	const list=()=>{
		const options = {
			type: 2,
			data: {
				pageNo:state.pageNo,
				pageSize:state.pageSize
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(selfServicePage, options).then((res) => {
			console.log("自助工单列表",res)
			state.totalCount = res.totalCount
			state.list=[...state.list,...res.result]
		});
	}
  const add=()=>{
	  navTo(`/subpackage/after-sale/work-order/add-work-order`)
  }
  const details=(orderStatus,id)=>{
	   navTo(`/subpackage/after-sale/work-order/add-work-supplement?id=${id}&orderStatus=${orderStatus}`)
  }
  onReachBottom(() => {
  	console.log("触底了",  state.pageNo * 10)
  	if (Number(state.totalCount) == state.list.length) return state.flags = true
  	if (state.list.length < state.pageNo * 10) return state.flags = true
  	console.log("触底了")
  	state.pageNo++
  	list()
  })
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 30rpx;
		box-sizing: border-box;
	}
  .list{
	  background: #FFFFFF;
	  border-radius: 12rpx;
	  border: 1px solid #FFFFFF;
	  width: 90%;
	  margin: 0 auto;
	  font-weight: 400;
	  margin-bottom: 30rpx;
	  .title{
		  padding: 0 20rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  height: 80rpx;
		  background-image: var(--bgimg);
		  background-size: 100% 100%;
		  background-repeat: no-repeat;
		  .title_left{
			  display: flex;
			  align-items: center;
		  }
		  image{
			  width: 50rpx;
			  height: 50rpx;
			 
		  }
		  .question{
			  font-size: 30rpx;
			  color: #01243A;
			  margin-left: 10rpx;
		  }
		  // 待处理
		  .statusdcl{
			 font-size: 24rpx;
			 color: #1458E5;
			 background: #E3ECFF;
			 border-radius: 6rpx;
			 border: 1px solid #1458E5;
			 padding: 4rpx 6rpx;
		  }
		  // 待补充
		  .statusdbc{
			 font-size: 24rpx;
			 color: #42D175;
			 background:#E6FFEF;
			 border-radius: 6rpx;
			 border: 1px solid #42D175;
			 padding: 4rpx 6rpx;
		  }
		  // 已结束
		  .statusyjs{
			 font-size: 24rpx;
			 color: #839AB4;
			 background: #DCEFFC;
			 border-radius: 6rpx;
			 border: 1px solid #839AB4;
			 padding: 4rpx 6rpx;
		  }
	  }
	  .bot{
		  padding: 0 20rpx;
		  .details{
			  font-size: 26rpx;
			  padding: 10rpx 0 5rpx 0;
			  view{
				  display: flex;
				  margin-bottom: 5rpx;
				  text{
					  color: #999999;
					  width: 21%;
				  }
				  view{
					  color: #002025;
					  width: 79%;
				  }
			  }
		  }
		  .time{
		  		  font-size: 24rpx;
		  		  color: #999999;
		  		  padding:20rpx 0;
		  		  border-top: 1rpx solid #DCDCDC;
		  }
	  }
	 
  }
  .add{
	  position: fixed;
	  z-index: 999;
	  bottom: 20rpx;
	  right: 0rpx;
	  width: 174rpx;
	  height: 174rpx;
  }
  .no {
  	text-align: center;
  	padding-top: 100rpx;
  }
</style>