提交

pages/member/detail.vue

@@ -0,0 +1,224 @@
+<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 class="itemCard">
+				<text>会员名称</text>
+				<text>{{detail.gender==1?'男':'女'}}</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.updateTime}}</text>
+						</view>
+					</view>
+					<view class="area2 text-area" style="width: 15%;">
+						<view class="item-padding">
+							<text style="font-size: 32rpx;margin-left: 10rpx;color: #F39248;">{{item.point}}</text>
+						</view>
+					</view>
+					<view class="area3 text-area u-p-r-20" style="width: 30%;">
+						<view class="item-padding" style="flex:1;text-align: right;font-size: 34rpx;">￥{{item.payAmount}}</view>
+					</view>
+				</view>
+			</mescroll-body>
+				
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
+	export default{
+		mixins: [MescrollMixin],
+		data(){
+			return{
+				detail:null,
+				downOption: {
+					auto: false,
+					height:'',
+				},
+				list:[]
+			}
+		},
+		onReady() {
+			this.getElInfo()
+		},
+		onLoad(option) {
+			if(option.detail){
+				this.detail = JSON.parse(option.detail)
+			}
+		},
+		methods:{
+			async getElInfo() {
+				let rectInfo = await this.$u.getRect('.card');
+				this.height=this.$u.sys().windowHeight - rectInfo.top + 'px'
+			},
+			upCallback(mescroll) {
+				if (!this.vuex_shopId) {
+					return
+				}
+				let params = {
+					id: this.detail.id,
+					shopId: this.vuex_shopId,
+					current: mescroll.num,
+					size: mescroll.size,
+				}
+				try {
+					this.$api.memberCenter.billList(params).then(res => {
+						console.log(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>