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="status-block statusdcl" v-if="item.orderStatus==0">待处理</text>
			  <text class="status-block statusdbc" v-else-if="item.orderStatus==1">待补充</text>
			  <text class="status-block statusyjs" v-else>已结束</text>
		  </view>
		  <view class="bot">
			  <view class="details">
				  <view class="detail-option"><text class="label">工单号码：</text><view class="value">{{item.id}}</view></view>
				  <view class="detail-option"><text class="label">发生日期：</text><view class="value">{{item.eventOccurrenceTime}}</view></view>
				  <view class="detail-option"><text class="label">客户诉求：</text><view class="value">{{item.appeal}}</view></view>
			  </view>
			  <view class="time">{{item.updateTime}}</view>
		  </view>

	   </view>
	   <uni-load-more
			v-if="state.list.length > 0"
			:status="state.status"
			iconType="snow"
			:icon-size="16"
			:content-text="state.contentTxt"
			 />
	   <!-- <view class="no" v-if="state.list.length==0">暂无自助工单</view> -->
	   <no-data-view v-else-if="state.list.length == 0"  text="暂无自助工单"></no-data-view>
   </view>
   <!-- <image class="add" :src="`${$imgUrl}etcadd.png`" mode="" @click="add()"></image> -->
   
   <FixedFooter>
	   <button type="default" class="ui-btn" @click="add">添加</button>
   </FixedFooter>
</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";
	import FixedFooter from '@/components/common/FixedFooter.vue'
	const state = reactive({
		pageNo:1,
		pageSize:10,
		list:[],
		flags: false,
		totalCount: 0,
		status: 'loading',
		contentTxt: {
			contentdown: '~上拉加载更多~',
			contentrefresh: '努力加载中...',
			contentnomore: '-- 没有更多工单了 --'
		}
	})
	onLoad(() => {
		list()
	});
	const list=()=>{
		const options = {
			type: 2,
			data: {
				pageNo:state.pageNo,
				pageSize:state.pageSize
			},
			method: "POST",
			showLoading: true,
		};
		state.status = 'loading'
		requestNew(selfServicePage, options).then((res) => {
			console.log("自助工单列表",res)
			state.totalCount = res.totalCount
			state.list = [...state.list,...res.result]
			if (state.totalCount < state.list.length) {
				state.status = 'more'
			} else {
				state.status = 'noMore'
			}
		});
	}
  const add = () => {
	  navTo(`/subpackage/after-sale/work-order/add-work-order`)
  }
  const details = (orderStatus: string, id: string)=>{
	   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>
	page{
		background-color: #E9EDF0;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding-top: 30rpx;
		box-sizing: border-box;
	}
  .list{
	  background: #FFFFFF;
	  border-radius: 12rpx;
	  margin: 0 35rpx;
	  font-weight: 400;
	  margin-bottom: 30rpx;
	  .title{
		  padding: 0 20rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  height: 96rpx;
		  background-image: var(--bgimg);
		  background-size: 100% 100%;
		  background-repeat: no-repeat;
		  .title_left{
			  display: flex;
			  align-items: center;
			  color: #01243A;
			  font-weight: bold;
		  }
		  image{
			  width: 50rpx;
			  height: 50rpx;
			 
		  }
		  .question{
			  font-size: 30rpx;
			  color: #01243A;
			  margin-left: 10rpx;
		  }
		  .status-block{
				font-size: 24rpx;
				color: #1458E5;
				background: #E3ECFF;
				border-radius: 6rpx;
				border: 1px solid #1458E5;
				padding: 7rpx 13rpx;
		  }
		  // 待处理
		  .statusdcl{
			  
		  }
		  // 待补充
		  .statusdbc{
			 color: #42D175;
			 background: #E6FFEF;
			 border: 1px solid #42D175;
		  }
		  // 已结束
		  .statusyjs{
			 color: #839AB4;
			 background: #DCEFFC;
			 border: 1px solid #839AB4;
		  }
	  }
	  .bot{
		  padding: 0 24rpx;
		  .details{
			  font-size: 26rpx;
			  padding: 12rpx 0 12rpx 0;
			  .detail-option{
				  display: flex;
				  padding: 10rpx 0;
				  color: #002025;
				  .label{
					  width: 140rpx;
					  flex-shrink: 0;
					  flex-grow: 0;
					  color: #999999;
				  }
				  .value{
					  flex: 1;
				  }
			  }
		  }
		  .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>