我的车辆页面修改

pages/myCars/myCars.scss

@@ -1,171 +1,132 @@
-.header{
-	height: 296rpx;
-	overflow: hidden;
-	background: url(../../static/img/myCars-header-bg.png) no-repeat;
-	background-size: contain;
-	color: $my-main-color;
-	
-}
-.header .header-title{
-	margin-top: 80rpx;
-	color: #fff;
-	font-size: 50rpx;
-	text-align: center;
+.header {
+  height: 296rpx;
+  overflow: hidden;
+  background: url(../../static/img/myCars-header-bg.png) no-repeat;
+  background-size: contain;
+  color: $my-main-color;
+}
+.header .header-title {
+  margin-top: 80rpx;
+  color: #fff;
+  font-size: 50rpx;
+  text-align: center;
+}
+
+.statistics {
+  margin: -78rpx 0 59rpx;
+  background-color: #fff;
+  box-shadow: 0px 6rpx 10px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 15rpx;
+  height: 182rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #323232;
+}
+.statistics-title {
+  font-size: 60rpx;
+  letter-spacing: 2rpx;
+}
+.statistics-center {
+  width: 4rpx;
+  height: 106rpx;
+  margin: 0 103rpx;
+  box-shadow: 0px 6rpx 10rpx 0rx rgba(0, 0, 0, 0.06);
+  opacity: 0.5;
+  border: 1px solid #979797;
+}
+.statistics-number-wrap {
+  font-size: 28rpx;
+}
+.statistics-number-wrap .number {
+  margin-right: 4rpx;
+  font-size: 72rpx;
+}
+.add-car-btn {
+  height: 100rpx;
+  line-height: 100rpx;
+  background: #008cff;
+  color: #fff;
+  font-size: 28rpx;
+  text-align: center;
+  box-shadow: 0px 7rpx 13rpx 0px rgba(16, 153, 250, 0.31);
+  border-radius: 10rpx;
+  margin-bottom: 50rpx;
+}
+.new-plate-number {
+  margin-bottom: 70rpx;
+}
+.message-input-wrap {
+  margin: 0 -40rpx;
+}
+.message-input-wrap /deep/ .u-input ~ uni-view:last-of-type .u-char-item {
+  background-color: #e8ffe8;
+}
+.mycars {
+  padding-bottom: 30rpx;
+}
+.mycars-item {
+  display: flex;
+  align-items: center;
+  height: 111rpx;
+  border-bottom: 1px solid #eaeaea;
+}
+.mycars-item:nth-last-child(2) {
+  margin-bottom: 30rpx;
+}
+.mycars-item-name {
+  // margin-right: 43rpx;
+  width: 258rpx;
+  font-size: 36rpx;
+  color: #4b4b4b;
+}
+.mycars-item-type {
+  font-size: 26rpx;
+  color: #959595;
+}
+.mycars-item-sign {
+  line-height: 40rpx;
+  text-align: center;
+  border-radius: 5rpx;
+  color: #fff;
+  font-size: 22rpx;
+  padding: 0 15rpx;
+  border: solid 1px #ff6d6d;
+  background-color: #ff6d6d;
+  margin-left: 40rpx;
+}
+.mycars-item-sign1 {
+  line-height: 40rpx;
+  text-align: center;
+  border-radius: 5rpx;
+  color: #fff;
+  font-size: 22rpx;
+  padding: 0 15rpx;
+  border: solid 1px #d8d8d8;
+  background-color: #d8d8d8;
+  margin-left: 40rpx;
+}
+.mycars-item-tool {
+  flex: 1;
+  font-size: 22rpx;
+  color: #c9c9c9;
+  text-align: right;
+}
+.mycars-item-tool .default {
+  display: inline-block;
+  box-sizing: border-box;
+  // width: 75rpx;
+  height: 38rpx;
+  line-height: 34rpx;
+  border-radius: 5rpx;
+  border: 1px solid #e3e3e3;
+  text-align: center;
+  margin-right: 17rpx;
+  font-size: 18rpx;
+  color: #cdcdcd;
+}
+.mycars-item-tool .default.isDefault {
+  background-color: #ffeee3;
+  border-color: #ffeee3;
+  color: #fa6400;
 }
-
-.statistics{
-	margin: -78rpx 0 59rpx;
-	background-color: #fff;
-	box-shadow: 0px 6rpx 10px 0px rgba(0, 0, 0, 0.06);
-	border-radius: 15rpx;
-	height: 182rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: #323232;
-	
-}
-.statistics-title{
-		font-size: 60rpx;
-		letter-spacing: 2rpx;
-	}
-.statistics-center{
-	width: 4rpx;
-	height: 106rpx;
-	margin: 0 103rpx;
-	box-shadow: 0px 6rpx 10rpx 0rx rgba(0, 0, 0, 0.06);
-	opacity: 0.5;
-	border: 1px solid #979797;
-}
-.statistics-number-wrap{
-	font-size: 28rpx;
-}
-.statistics-number-wrap .number{
-	margin-right: 4rpx;
-	font-size: 72rpx;
-}
-.add-car-btn{
-	height: 100rpx;
-	line-height: 100rpx;
-	background: #008CFF;
-	color: #fff;;
-	font-size: 28rpx;
-	text-align: center;
-	box-shadow: 0px 7rpx 13rpx 0px rgba(16, 153, 250, 0.31);
-	border-radius: 10rpx;
-	margin-bottom: 50rpx;
-}
-.new-plate-number{	
-	margin-bottom: 70rpx;
-}
-.message-input-wrap{
-	margin: 0 -40rpx;
-}
-.message-input-wrap /deep/ .u-input ~ uni-view:last-of-type .u-char-item{
-	background-color: #E8FFE8;
-}
-
-.mycars-item{
-	display: flex;
-	align-items: center;
-	height: 111rpx;
-	border-bottom: 1px solid #EAEAEA;
-}
-.mycars-item-name{
-	// margin-right: 43rpx;
-	width: 258rpx;
-	font-size: 36rpx;
-	color: #4B4B4B;
-}
-.mycars-item-type{
-	font-size: 26rpx;
-	color: #959595;	
-}
-.mycars-item-sign{
-	line-height: 40rpx;
-	text-align: center;
-	border-radius: 5rpx;
-	color: #fff;
-	font-size: 22rpx;
-	padding: 0 15rpx;
-	border: solid 1px #FF6D6D;
-	background-color: #FF6D6D;
-	margin-left: 40rpx;
-}
-.mycars-item-sign1{
-	line-height: 40rpx;
-	text-align: center;
-	border-radius: 5rpx;
-	color: #fff;
-	font-size: 22rpx;
-	padding: 0 15rpx;
-	border: solid 1px #D8D8D8;
-	background-color: #D8D8D8;
-	margin-left: 40rpx;
-}
-.mycars-item-tool{
-	flex: 1;
-	font-size: 22rpx;
-	color: #C9C9C9;
-	text-align: right;
-}
-.mycars-item-tool .default{
-	display: inline-block;
-	box-sizing: border-box;
-	// width: 75rpx;
-	height:38rpx;
-	line-height: 34rpx;
-	border-radius: 5rpx;
-	border: 1px solid #E3E3E3;
-	text-align: center;
-	margin-right: 17rpx;
-	font-size: 18rpx;
-	color: #CDCDCD;
-}
-.mycars-item-tool .default.isDefault{
-	background-color: #FFEEE3;
-	border-color: #FFEEE3;
-	color: #FA6400;
-	
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

pages/myCars/myCars.vue

@@ -35,19 +35,25 @@
       </view>
       <view class="add-car-btn" @click="handleAddCar">添加车辆</view>
       <view class="mycars">
-        <view class="mycars-item" v-for="(item, index) in mycars" :key="index">
-          <view class="mycars-item-name">{{ item.vehicleNo }}</view>
-          <view class="mycars-item-type">{{ item.energyTpye | energyTpye }}</view>
-          <view class="mycars-item-sign" v-if="item.contractStatus == 1">已签约</view>
-          <view class="mycars-item-sign1" v-if="item.contractStatus == 0">未签约</view>
-          <view class="mycars-item-tool">
-            <span class="default" v-if="item.isDefault == 1" :class="{ isDefault: item.isDefault == 1 }" @click="handlesetDefault(item.id)"
-              >默认</span
-            >
-            <span class="default" v-else @click="handlesetDefault(item.id)">设为默认</span>
-            <span @click="handleDelCar(item.id, item.vehicleNo)">删除</span>
+        <template v-if="mycars.length">
+          <view class="mycars-item" v-for="(item, index) in mycars" :key="index">
+            <view class="mycars-item-name">{{ item.vehicleNo }}</view>
+            <view class="mycars-item-type">{{ item.energyTpye | energyTpye }}</view>
+            <view class="mycars-item-sign" v-if="item.contractStatus == 1">已签约</view>
+            <view class="mycars-item-sign1" v-if="item.contractStatus == 0">未签约</view>
+            <view class="mycars-item-tool">
+              <span class="default" v-if="item.isDefault == 1" :class="{ isDefault: item.isDefault == 1 }" @click="handlesetDefault(item.id)"
+                >默认</span
+              >
+              <span class="default" v-else @click="handlesetDefault(item.id)">设为默认</span>
+              <span @click="handleDelCar(item.id, item.vehicleNo)">删除</span>
+            </view>
           </view>
-        </view>
+          <u-loadmore :status="status" />
+        </template>
+        <template v-else>
+          <u-empty text="无车辆数据" mode="list"></u-empty>
+        </template>
       </view>
     </view>
 
@@ -68,6 +74,12 @@ export default {
       newPlateNumber: '',
       vehicleColor: 0,
       mycars: [],
+      status: 'loadmore',
+      page: {
+        num: 1,
+        size: 10,
+        total: 0
+      },
       mycarsTotal: 0,
       colorShow: false,
       colorList: [
@@ -83,6 +95,14 @@ export default {
   onLoad() {
     this.handlegetMycars();
   },
+  onReachBottom() {
+    if (this.page.num >= this.page.total) return;
+    this.status = 'loading';
+    this.page.num = ++this.page.num;
+    setTimeout(() => {
+      this.handlegetMycars();
+    }, 1500);
+  },
   methods: {
     customBack() {
       uni.getStorage({
@@ -103,25 +123,15 @@ export default {
     },
     // 获取车辆列表
     handlegetMycars() {
-      this.$u.api
-        .getMycars()
-        .then((res) => {
-          if (res.code === 200) {
-            this.mycars = res.data.rows;
-            this.mycarsTotal = res.data.total;
-          } else {
-            this.$refs.uToast.show({
-              title: res.msg,
-              type: 'error'
-            });
-          }
-        })
-        .catch((err) => {
-          this.$refs.uToast.show({
-            title: '操作失败!',
-            type: 'error'
-          });
-        });
+      const { num, size } = this.page;
+      this.$u.api.getMycars({ pageNum: num, pageSize: size }).then((res) => {
+        if (res.code === 200) {
+          this.mycars = this.mycars.concat(res?.data?.rows ?? []);
+          this.page.total = Number(res?.data?.pages ?? 0);
+          if (this.page.num >= this.page.total) this.status = 'nomore';
+          else this.status = 'loading';
+        }
+      });
     },
     // 添加车辆
     handleAddCar() {