massage-front/pages_order/mine/memberCenter.vue

<!-- 会员中心页面 -->
<template>
	<view class="page">

		<view class="bg"></view>

		<view class="content">

			<!-- 导航栏 -->
			<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" color="#fff" />

			<view class="flex user">
				<image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image>
				<view class="user-info">
					<view class="flex user-name">
						<text>{{ userInfo.nickName }}</text>
						<image v-if="role" class="icon icon-role" :src="vipInfo.massageVipCombo.imageVip" mode="widthFix"></image>
					</view>
					<view class="user-desc">
						<template v-if="role">
							<text>{{ `将于${$dayjs(vipInfo.validTime).format('YYYY-MM-DD')}到期` }}</text>
						</template>
						<template v-else>
							<text>暂未开通会员</text>
						</template>
					</view>
				</view>
			</view>
			<view class="consumption" v-if="!role">
				<!-- todo: 对接接口 -->
				<memberProgress :current="1000" :total="3800"></memberProgress>
				<text class="consumption-desc">{{ `累积消费达到${3800}元或直接充值即可成为会员` }}</text>
			</view>
			<view class="charge">
				<view class="charge-header">
					<view class="flex charge-header-title">充值会员</view>
					<view class="charge-header-mask"></view>
				</view>
				<view class="charge-content">
					<view class="flex charge-selection">
						<view class="flex charge-option" v-for="item in chargeOptions" :key="item.id"
							:class="[selectedChargeId === item.id ? 'is-active' : '']" @click="onSelectCharge(item.id)">
							<view class="charge-option-value">
								<text class="charge-option-unit">¥</text>
								<text>{{ item.price }}</text>
							</view>
						</view>
					</view>
					<view class="charge-rights">
						<view class="flex charge-rights-header">
							<image class="title" src="../static/memberCenter/title-rights.png" mode="widthFix"></image>
						</view>
						<view class="charge-rights-content">
							<uv-parse :content="configList.config_rights"></uv-parse>
							<image class="icon" src="../static/memberCenter/icon-rights.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex bar">
			<view class="flex count">
				<text>合计：</text>
				<view class="price">
					<text class="price-unit">¥</text>
					<!-- todo: check -->
					<text>{{ totalPrice }}</text>
				</view>
			</view>
			<view class="btn btn-pay" @click="submit">
				开通会员
			</view>
		</view>
	</view>
</template>

<script>
	import memberProgress from '../components/memberProgress.vue'
	import mixinsConfigList from '@/mixins/configList.js'

	import {
		mapGetters,
		mapState
	} from 'vuex'

	export default {
		name: "MemberCenter",
		mixins: [mixinsConfigList],
		components: {
			memberProgress,
		},
		data() {
			return {
				chargeOptions: [],
				selectedChargeId: '001',
			}
		},
		onShow() {
			// #ifdef H5
			this.fetchCargeOptions()
			// #if
		},
		computed: {
			...mapGetters(['role']),
			...mapState(['userInfo', 'vipInfo']),
			selectedChargeObj() {
				return this.chargeOptions.find(item => item.id === this.selectedChargeId)
			},
			totalPrice() {
				return this.selectedChargeObj?.price || 0
			}
		},
		methods: {
			async fetchCargeOptions() {
				try {
					this.chargeOptions = (await this.$fetch('queryComboList'))?.records || []
					this.selectedChargeId = this.chargeOptions?.[0]?.id
				} catch (err) {

				}
			},
			onSelectCharge(id) {
				this.selectedChargeId = id
			},
			async submit() {
				try {
					let params = {
						comoId: this.selectedChargeId
					}

					let result = await this.$fetch('addVip', params)

					// #ifdef H5
					// H5环境下使用微信JSSDK支付
						await this.$wxPay({result})
					// #endif

					// #ifdef MP-WEIXIN
					// 小程序环境使用原有支付方式
					await uni.requestPaymentWxPay({result})
					// #endif

					uni.showToast({
						title: '充值成功',
						icon : 'none'
					})
					setTimeout(uni.navigateBack, 800, -1)

				} catch (err) {
					console.error('支付失败:', err)
					if (err.type === 'cancel') {
						uni.showToast({
							title: '用户取消支付',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	$bar-height: 132rpx;

	.bg {
		width: 100vw;
		height: 550rpx;
		background-image: linear-gradient(#84A73F, #D8FF8F);
	}

	.page {
		padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
		background-color: $uni-fg-color;
		min-height: 100vh;
		position: relative;
	}

	.content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
	}

	.user {
		align-items: flex-start;
		color: $uni-text-color-inverse;
		font-size: 22rpx;
		margin: 34rpx 18rpx 0 18rpx;

		&-avatar {
			width: 147rpx;
			height: 147rpx;
			margin-right: 8rpx;
			border-radius: 50%;
		}

		&-info {
			flex: 1;
		}

		&-name {
			font-size: 32rpx;
			margin-top: 16rpx;

			justify-content: flex-start;

			.icon {
				height: auto;

				&-role {
					width: 138rpx;
				}
			}
		}

		&-desc {
			margin-top: 26rpx;
		}
	}

	.consumption {
		margin: 0 28rpx;

		&-desc {
			color: $uni-text-color-inverse;
			font-size: 22rpx;
			margin-top: 1rpx;
		}
	}

	.charge {
		background-color: $uni-fg-color;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
		margin-top: 45rpx;

		&-header {
			$header-height: 90rpx;

			height: $header-height;
			position: relative;

			&-title {
				width: calc(50% + 25rpx);
				height: 100%;
				color: $uni-text-color-inverse;
				font-size: 28rpx;
				background-image: linear-gradient(#84A73F, #D8FF8F);
				box-sizing: border-box;
				border-top-left-radius: 18rpx;
				border-bottom-right-radius: 90rpx;
			}

			&-mask {
				$marsk-width: 50rpx;

				position: absolute;
				top: 0;
				right: 50%;
				transform: translateX(25rpx);
				// height: 100%;
				// width: 70rpx;
				width: 0;
				height: 0;
				border-top: calc(#{$header-height}/2) solid transparent;
				border-left: calc(#{$marsk-width}/2) solid transparent;
				border-bottom: calc(#{$header-height}/2) solid $uni-fg-color;
				border-right: calc(#{$marsk-width}/2) solid $uni-fg-color;
			}
		}

		&-content {
			padding: 57rpx 14rpx;
		}

		&-selection {
			justify-content: space-between;
			font-size: 0;
    	flex-wrap: wrap;
		}

		&-option {
			width: 230rpx;
			height: 248rpx;
			box-sizing: border-box;
			background-color: #F5F5F5;
			border: 3rpx solid #C7C7C7;
			border-radius: 16rpx;
			box-shadow: 0rpx 3rpx 6rpx 0rpx #eef3e3;
			color: #999999;
			margin-bottom: 20rpx;

			&-value {
				font-size: 61rpx;
			}

			&-unit {
				font-size: 34rpx;
				margin-right: 6rpx;
			}

			&.is-active {
				background-color: rgba($color: #E9FFC3, $alpha: 0.74);
				border-color: $uni-color-light;
				color: #F64041;
			}
		}

		&-rights {
			margin-top: 47rpx;

			&-header {
				.title {
					width: 202rpx;
					height: auto;
				}
			}

			&-content {
				margin-top: 31rpx;
				color: $uni-color-light;
				font-size: 28rpx;
				line-height: 66rpx;
				background-color: rgba($color: #E2FFAE, $alpha: 0.71);
				border-radius: 16rpx;
				padding: 29rpx 30rpx;
				width: 100%;
				min-height: 500rpx;
				box-sizing: border-box;
				position: relative;

				.icon {
					position: absolute;
					top: 23rpx;
					right: 11rpx;
					width: 131rpx;
					height: auto;
				}
			}

		}
	}

	// 下单
	.bar {
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: $bar-height;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $uni-fg-color;

		.count {
			flex: 1;
			color: #000000;
			font-size: 28rpx;
			margin-left: 48rpx;

			justify-content: flex-start;

			.price {
				color: #FF2A2A;
				font-size: 30rpx;

				&-unit {
					font-size: 18rpx;
				}
			}
		}

		.btn {
			border: none;
			line-height: 1;
			background-color: transparent;
			padding: 0;
			width: auto;
			height: auto;
			margin: 0;

			&-pay {
				margin-right: 41rpx;
				padding: 24rpx 137rpx;
				color: $uni-text-color-inverse;
				font-size: 28rpx;
				border-radius: 44rpx;
				background-image: linear-gradient(to right, #84A73F, #D8FF8F);
			}

		}
	}
</style>