guosen-ldt-shop/pages/member/detail.vue

<template>
	<view>
		<view class="headCard">
			<image class="avatar" :src="detail.avatar" mode="aspectFit" ></image>
			<view class="itemCard">
				<text>会员名称</text>
				<text>{{detail.nickName  || '暂无'}}</text>
			</view>
			<view class="itemCard">
				<text>手机号码</text>
				<text>{{detail.phone || '暂无'}}</text>
			</view>
		</view>
		<view class="cell">
			<text class="cell-item" style="font-weight: bold;font-size: 28rpx;">消费记录</text>
			<!-- <text class="cell-item" style="color: #D18C42;font-size: 22rpx;">消费总额￥{{detail.payTotal}}</text> -->
		</view>
		<view class="card">
			<view class="u-flex">
				<view class="area1 area-padding " style="padding-left: 40rpx;">
					<text>交易日期</text>
				</view>
				<view class="area2 area-padding">
					<!-- <image style="width: 35rpx;height: 35rpx;margin-right: 10rpx;margin-bottom: -10rpx;"
						src="@/static/icon/points-value.png"></image> -->
					<text>折扣</text>
				</view>
				<view class="area3 area-padding u-text-right u-p-r-20">
					<text>消费金额</text>
				</view>
			</view>
			<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="area1">
						<view class="item-padding">
							<text>{{item.createTime}}</text>
						</view>
					</view>
					<view class="area2 text-area" style="width: 15%;">
						<view class="center">
							<text style="font-size: 26rpx;color: #666;margin-left: -10rpx;">{{discount(item.discount)}}</text>
						</view>
					</view>
					<view class="area3 text-area u-p-r-20" style="width: 30%;">
						<view class="item-padding price text-base" style="flex:1;text-align: right;font-size: 34rpx;">{{item.cost}}</view>
					</view>
				</view>
			</mescroll-body>
				
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin],
		data(){
			return{
				id:'',
				userId:'',
				detail:null,
				downOption: {
					auto: false,
					height:'',
				},
				list:[]
			}
		},
		onReady() {
			this.getElInfo()
		},
		onLoad(options) {
			if(options.userId){
				this.userId = options.userId
			}
			if (options.id) {
				this.id=options.id
			}
			this.fetchDetail()
		},
		methods:{
			async getElInfo() {
				let rectInfo = await this.$u.getRect('.card');
				this.height=this.$u.sys().windowHeight - rectInfo.top + 'px'
			},
			fetchDetail(){
				this.$api.member.detail({id:this.id}).then(res=>{
					this.detail=res.data
				})
			},
			upCallback(mescroll) {
				if (!this.vuex_shopId) {
					return
				}
				let params = {
					payId:this.userId,
					receiveId: this.vuex_shopId,
					payStatus:this.$global.PAY_STATUS.SUCCESS,
					current: mescroll.num,
					size: mescroll.size,
				}
				try {
					this.$api.bills.list(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
			
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 200)
			},
		}
	}
</script>

<style scoped lang="scss">
	.headCard {
		margin-top: 100rpx;
		padding: 70rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		position: relative;
		.avatar{
			position: absolute;
			margin: 0 auto;
			transform: translateY(-50%);
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			left: 0;
			right: 0;
			top: 0;
		}
		.itemCard{
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #888888;
			margin: 0 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}
	.cell{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 60rpx;
		padding: 30rpx 30rpx;
		box-sizing: content-box;
	}
	.card {
		background-color: #FFFFFF;
	
		.area-padding {
			padding: 40rpx 0 20rpx;
		}
	
		.text-area {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	
		.area1 {
			padding-left: 30rpx;
			width: 55%;
	
			view:first-child {
				display: flex;
	
				image {
					width: 80rpx;
					height: 80rpx
				}
	
				view {
					padding-left: 15rpx;
					padding-bottom: 5rpx;
					display: flex;
					flex-direction: column;
	
					text:first-child {
						font-size: 32rpx;
						padding-bottom: 10rpx;
						color: #000;
					}
	
					text:last-child {
						font-size: 22rpx;
						color: #888888;
					}
				}
			}
		}
	
		.area2 {
			width: 25%;
		}
	
		.area3 {
			width: 20%;
		}
	
		.item-padding {
			padding: 20rpx 0;
		}
	
		.item {
			padding: 5rpx;
			display: flex;
			border-bottom: 1rpx solid #DDDDDD;
		}
	
		.item:last-child {
			border: none;
		}
	
	
	
	}
</style>