会员中心页面修改，余额明细调整，开通会员页面调整

pages/user/member/charge-detail/charge-detail.vue

@@ -0,0 +1,168 @@
+<!-- 充值中心 -->
+<template>
+	<view class="container">
+		<up-navbar bgColor="transparent" title="明细" @leftClick="back"></up-navbar>
+		<view class="header-wrap">
+			<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
+
+			<view class="u-flex info text-center">
+				<view class="u-flex-1">
+					<view class="color-333 font-14">我的余额</view>
+					<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
+				</view>
+				<view class="u-flex-1">
+					<view class="color-333 font-14">我的积分</view>
+					<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="u-flex tabs">
+				<view class="color-333 font-16 tabs-item" v-for="(item,index) in tabs.list" :key="index"
+					@click="tabs.sel=index" :class="{active:tabs.sel==index}">
+					<view>
+						{{item.name}}
+					</view>
+					<view class="u-flex u-flex-center u-m-t-10">
+						<view class="block">
+							
+						</view>
+					</view>
+					
+				</view>
+			</view>
+			
+			
+			<view class="u-m-t-32">
+				<view class="color-333 font-16 font-700">订单消费</view>
+				<view v-for="(item,index) in lists" :key="index">
+					<view>森食界创意轻食(未央店)</view>
+				</view>
+			</view>
+			
+			
+			
+
+
+		</view>
+
+	</view>
+</template>
+
+<script setup>
+	import * as vipApi from '@/common/api/market/recharge.js'
+	import {
+		joinMember
+	} from '@/common/api/order/index.js'
+	import {
+		ref,
+		onMounted,
+		computed,
+		reactive
+	} from 'vue'
+	import {
+		onLoad,onReachBottom
+	} from '@dcloudio/uni-app'
+
+
+	async function buy() {
+		const res = await joinMember()
+	}
+
+	function back() {
+		uni.navigateBack();
+	}
+	const list = ref([])
+	async function init() {
+		const res = await vipApi.config()
+		if (res) {
+			list.value = res
+		}
+	}
+	onMounted(init)
+
+	const tabs = reactive({
+		list: [{
+				name: '余额明细'
+			},
+			{
+				name: '积分明细'
+			},
+		],
+		sel: 0
+	})
+
+	onLoad(() => {
+
+	})
+	
+	onReachBottom(()=>{
+		console.log('onReachBottom');
+	})
+</script>
+
+<style scoped lang="scss">
+	.tabs {
+		justify-content: center;
+		gap: 138rpx;
+
+		.tabs-item {
+			.block {
+				width: 58rpx;
+				height: 6rpx;
+				background-color: transparent;
+				border-radius: 6rpx;
+				transition: all .3s ease-in-out;
+			}
+
+			&.active {
+				.block {
+					background-color: #FFAA62;
+				}
+			}
+		}
+	}
+
+	.color1 {
+		color: #5F2E0F;
+	}
+
+	.color2 {
+		color: #FF6300;
+	}
+
+
+
+
+
+	.header-wrap {
+		width: 100%;
+		height: 530rpx;
+		box-sizing: border-box;
+		padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
+		position: relative;
+
+		.bg {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		.info {
+			position: relative;
+		}
+
+
+
+
+	}
+
+	.bottom {
+		background-color: rgba(255, 255, 255, .3);
+		padding: 40rpx 28rpx 0 28rpx;
+		transform: translateY(-140rpx);
+		border-radius: 74rpx 74rpx 0 0;
+	}
+</style>