<template>
	<view v-if="showMoneyList">
		<view class="moneyList" v-if="List.length > 0">
			<view class="moneyItem" v-for="(item,index) in List" :key="index">
				<view class="moneyInfo">
					<view class="moneyName">
						<text>{{item.name}}</text>{{item.Createtime}}
					</view>
					<view class="moneyPhone">
						{{item.mobile}}
					</view>
				</view>
				<view class="moneyNum">
					<view class="moneyTop">
						￥{{item.money}}
					</view>
					<view class="moneyBottom" v-if="item.content != null && item.content != ''" @click="openMsgDetail(index)">
						查看留言
						<image src="../../static/image/right2.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="listEmpImg" v-if="List.length == 0">
			<image class="listEmpImg" src="../../static/image/Group-189@2x.png" mode=""></image>
		</view>
		<view class="msgDetail" v-if="showMsgDetail">
			<view class="msgWrap">
				<view class="msgTitle">
					他的留言
				</view>
				<view class="msgContent">
					{{content}}
				</view>
				<view class="msgBtn" @click="closeMsgDetail">
					关闭
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				content:'',
				showMsgDetail:false,
				showMoneyList:false,
				//总记录数
				Count:0,
				param:{
					type:1,
					pages:1,
					rows:10
				},
				List:[]
			}
		},
		onShow() {
			this.List = []
			this.getData()
		},
		onReachBottom(){
			if(this.List.length >= this.Count){
				uni.showToast({
					title:'无更多数据',
					icon:'none'
				})
				return ;
			}else{
				this.param.pages++
				this.getData()
			}
		},
		methods:{
			getData(){
				this.$request('/api/Index/UserPriceList',this.param).then((res)=>{
					this.Count = res.data.Count
					this.List = this.List.concat(res.data.List)
					this.showMoneyList = true
				})
			},
			closeMsgDetail(){
				this.showMsgDetail = false
			},
			openMsgDetail(index){
				this.content = this.List[index].content
				this.showMsgDetail = true
			}
		}
	}
</script>

<style>
	.moneyList{padding: 0 32rpx;}
	.moneyItem{padding: 24rpx 0 28rpx;display: flex;justify-content: space-between;align-items: center;border-bottom: 1rpx solid #EBEDF0;}
	.moneyInfo .moneyName{
		color: #b2b2b4;
		font-size: 24rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.moneyName text{color: #323233;font-weight: 600;font-size: 32rpx;padding-right: 20rpx;}
	.moneyInfo .moneyPhone{color: #646566;font-size: 28rpx;}
	.moneyNum .moneyTop{color: #EE0A24;text-align: center;font-size: 32rpx;}
	.moneyNum .moneyBottom{color: #894746;font-size: 28rpx;display: flex;align-items: center;}
	.moneyBottom image{width: 32rpx;height: 32rpx;}
	
	.msgDetail{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,.5);display: flex;align-items: center;justify-content: center;}
	.msgDetail .msgWrap{background: #fff;padding: 48rpx 48rpx 32rpx;border-radius: 10rpx;}
	.msgWrap .msgTitle{font-size: 32rpx;font-weight: 600;text-align: center;}
	.msgWrap .msgContent{font-size: 28rpx;line-height: 40rpx;text-align: LEFT;padding-top: 16rpx;width: 526rpx;}
	.msgWrap .msgBtn{width: 526rpx;height: 72rpx;border-radius: 36rpx;text-align: center;line-height: 72rpx;color: #fff;background: #EE0A24;margin-top: 16rpx;}
	
	.listEmpImg{height: 568rpx;display: flex;justify-content: center;align-items: flex-end;}
	.listEmpImg image{width: 320rpx;height: 376rpx;}
</style>