cashier_weapp/pages/member/memberdetails.vue

<template>
	<!-- 会员详情 -->
	<view class="content">
		<card :userInfo="userInfo"></card>
		<view class="memberdetailsStyle">
			<text>会员详情</text>
			<view @click="goUrl('member/billDetails')">
				<text>账单明细</text>
				<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
			</view>
			<view @click="goUrlinfo('member/index')">
				<text>会员充值</text>
				<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
	import card from './components/card.vue'
	export default {
		components: {
			card
		},
		data() {
			return {
				shopId_id: null,
				inputshow: 0,
				memberlist: {},
				listdata: [],
				amount: '',
				userInfo: {},

			}
		},
		onLoad(e) {
			console.log(e)
			this.shopId_id = e.shopId_id
		},
		onShow() {
			this.paygetShopByMember(this.shopId_id)
		},
		methods: {
			async paygetShopByMember(w) {
				let res = await this.api.paygetShopByMember({
					page: 1,
					pageSize: 10,
					userId: uni.cache.get('userInfo').id,
					shopId: w
				})
				this.userInfo = res.data.list[0]
			},
			clickinput(a, b) {
				console.log(a, b)
				this.inputshow = b
				this.amount = a.minNum
			},
			goUrl(url) {
				uni.pro.navigateTo(url, this.userInfo)
			},
			goUrlinfo(url) {
				uni.pro.navigateTo(url, {
					shopId: this.shopId_id,
					type: 'list'
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 0 28rpx;

		.towcontentitem {
			width: 100%;
			position: relative;
			padding: 32rpx;
			border-radius: 12rpx;
			background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&::after {
				position: absolute;
				bottom: 0;
				right: 68rpx;
				content: '';
				display: inline-block;
				width: 240rpx;
				height: 232rpx;
				background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
				background-size: 100% 100%;
			}

			.towcontentitemimage {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				z-index: 5;
			}

			.towcontentitemone {
				width: 100%;
				position: relative;
				z-index: 9;

				.towcontentitemoneimage {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}



				.towcontentitemonetext {
					height: 76rpx;
					margin-left: 16rpx;

					.towcontentitemonetextone {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
					}

					.towcontentitemonetexttow {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #422A07;
					}

				}
			}

			.towcontentitemprogressa {
				padding: 8rpx 44rpx;
				z-index: 10;
				position: relative;
				margin-top: 54rpx;
			}

			.towcontentitemtow {
				margin-top: 84rpx;
				z-index: 10;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #422A07;
			}

			.towcontentitevip {
				position: absolute;
				right: 0;
				top: 0;
				width: 92rpx;
				height: 40rpx;
				font-size: 20rpx;
				background: #F4C380;
				border-radius: 0rpx 12rpx 0rpx 12rpx;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				font-family: Source Han Sans CN-Medium;
				font-weight: Medium;

			}

			.towcontentitemthere {
				margin-left: 92rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: Medium;
				font-size: 24rpx;
				color: #333333;

				.towcontentitemtheretext {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
		}

		.therecontent {
			margin-top: 32rpx;
			position: relative;
			padding: 22rpx 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 8rpx;

			input {
				padding-left: 30rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #666666;
			}
		}

		.therecontent::after {
			position: absolute;
			top: 50%;
			left: 32rpx;
			transform: translateY(-50%);
			content: '￥';
			display: inline-block;
			width: 28rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.fourcontent {
			.fourcontentlnage {
				width: 33.33%;

				.fourcontentitem {
					margin: 24rpx 10rpx;
					padding: 16rpx 0;
					text-align: center;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1rpx solid #333333;
					font-size: 28rpx;
					font-family: Roboto-Medium, Roboto;
					font-weight: 500;
					color: #333333;
				}

				.fourcontentitems {
					margin: 24rpx 10rpx;
					padding: 16rpx 0;
					text-align: center;
					border-radius: 8rpx;
					background: #F1CB66;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #F1CB66;
					font-size: 28rpx;
					font-family: Roboto-Medium, Roboto;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

		}

		.fivecontent {
			position: relative;
			bottom: 44rpx;
			margin-top: 62rpx;
			padding: 20rpx 0;
			text-align: center;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			border-radius: 8rpx;
			background: #F1CB66;
		}

		// 会员详情
		.memberdetailsStyle {
			margin-top: 32rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-color: #fff;
			padding: 32rpx;
			height: 252rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			>text {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			>view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
</style>