jyy-smart-canteen-h5/pages/mine/me/carteenCard.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="list-page"> 
<!-- 	<view style="width: 94%;margin: 10px auto;height: 40px;display: flex;align-items: center;">
		<view style="display: flex;align-items: center;">
			<view class="unread-dot"></view>
			<view style="margin-left: 5px;color: #FF0000;" v-if="messageNumber>0">{{messageNumber}}</view>
		</view>
		<view style="margin-left: 10px;font-size: 30rpx;font-weight: bold;">
			通知列表
		</view>
	</view> -->

    <!-- 列表 --> 
	<scroll-view style="width: 100%;height: 90vh;" @scrolltolower="onScrollTolower" scroll-y="true">
      <view class="card-item" v-for="(item, index) in cardList" :key="index">
		<view class="card-header"> 
			<view class="card-header-text">卡{{index+1}}</view>
			<view class="card-header-btn" @click="lossCard(item)" v-if="item.cardStatus==1">挂失</view>
			<view class="card-header-btn" @click="cancelLossCard(item)" v-if="item.cardStatus==4">解挂</view>
		</view>
		<view class="card-content">
			<view class="card-content-item">
				<view>卡状态</view>
				<view v-if="item.cardStatus==1">正常</view>
				<view v-if="item.cardStatus==4">已挂失</view>
				<view v-if="item.cardStatus==5">已发卡</view>
				<view v-if="item.cardStatus==6">已退卡</view>
				<view v-if="item.cardStatus==7">已过期</view>
			</view>
			<view class="card-content-item">
				<view>卡物理号</view>
				<view>{{item.serialNum}}</view>
			</view>
			<!-- <view class="card-content-item">
				<view>卡面号</view>
				<view>{{item.cardFaceNum}}</view>
			</view>
			<view class="card-content-item">
				<view>卡有效期</view>
				<view>{{item.validityDate}}</view>
			</view> -->
		<!-- 	<view class="card-content-item">
				<view>备注</view>
				<view>{{item.remark}}</view>
			</view> -->
		 <!-- <view class="title-box">
			  <view class="time">{{ item.informStatime }}</view>
		  </view>
		  <view class="desc">{{ item.informContent }}</view> -->
		</view> 
		
      </view>
    </scroll-view>
  </view>
</template>

<script> 
import { getCardListApi,lossCardApi,cancelLossCardApi } from '@/api/mine/index'

export default {
	name: 'index', 
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,  
			pageNum: 1,
			pageSize: 10,
			total: 0,
			cardList: [],  
		}
	},
	onLoad(){ 
		this.getCardList()
	},
	methods: {
		// 翻页
		onScrollTolower(){
			console.log(this.cardList.length)
			// if(this.total>this.cardList.length){
			// 	this.pageNum++
			// 	this.getCardList()
			// }
		},
		//通知消息数量
		async getCardList() {
			let param = {
				// "current": this.pageNum,
				// "size": this.pageSize,
				"userId": uni.getStorageSync('userId'),
			}
			const res = await getCardListApi(param) 
			this.cardList = res.rows
		},
		//挂失按钮
		async lossCard(item) {
			let param = {
				"accountId": item.accountId,
				"serialNum": item.serialNum,
			}
			console.log(item)
			const res = await lossCardApi(param)
			console.log(res)
			if(res.code==200){
				uni.showToast({
					title: "操作成功",
					icon: 'none'
				});
				this.getCardList()
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		},
		//解挂按钮
		async cancelLossCard(item) {
			let param = {
				"accountId": item.accountId,
				"serialNum": item.serialNum,
			}
			console.log(item)
			const res = await cancelLossCardApi(param)
			if(res.code==200){
				uni.showToast({
					title: "操作成功",
					icon: 'none'
				});
				this.getCardList()
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
			console.log(res)
		},
		
	}
}
</script>

<style scoped lang="scss">
  page {
    background: #f5f5f5;
  }
  .list-page {
    min-height: 94vh;
    background-color: #f5f5f5; 
    padding: 12px;
  } 

  .card-item {
	width: 98%;
	background-color: #ffffff; 
    margin: 10px auto;
    border-radius: 8px;
  }
  .card-header{
	  width: 100%;
	  border-bottom: 1px solid #ccc;
	  height: 50px;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
  }
  .card-header-text{
	  margin-left: 20px;font-size: 30rpx;font-weight: bold;
  }
  .card-header-btn{
	  width: 80rpx;
	  height: 40rpx;
	  border-radius: 10rpx;
	  color: #FFF;
	  font-size: 22rpx;
	  background: #ff9e2e;
	  text-align: center;
	  line-height: 40rpx;
	  margin-right: 10px;
  }
  .card-content {
	  width: 92%;
	  margin: 10px auto;
	  height: auto; 
	  padding-bottom: 10px;
  }
  .card-content-item{
	  width: 100%;
	  height: 30rpx; 
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 10px;
  }

  .upgrade {
    background-color: #2ed573;
  }

  .warning {
    background-color: #ff7f50;
  }

  .read {
    background-color: #b5bec9;
  }

	
	.title-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	
	}

  .desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
	height: 32px;
	overflow: hidden; /* 隐藏溢出的文本 */
	text-overflow: ellipsis; /* 显示省略号 */
  }

  .right-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 4px;
  }

  .unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff0000;
  }
</style>