Ai_GirlFriend/xuniYou/pages/mine/member.vue

<template>
	<view>
		<uni-nav-bar fixed statusBar left-icon="left" right-icon="gear" background-color="transparent" :border="false"
			:style="{ '--right-padding': getMenuInfoList + 'px' }" @clickLeft="back" @clickRight="tosetUp"
			title="开通会员"></uni-nav-bar>
		<view class="back"></view>
		<view class="body">
			<view class="user fa">
				<image :src="userInfo.avatar ? userInfo.avatar : '/static/images/avatar.png'" mode="aspectFill"></image>
				<view class="user_content f1">
					<view class="user_name">{{ userInfo.nickname }}</view>
					<view class="user_text">{{ userInfo.vip == 0 ? '会员未开通' : '会员已开通' }}</view>
				</view>
			</view>
			<view class="module" v-if="userInfo.vip_endtime">
				<view>到期时间： {{ formatTime(userInfo.vip_endtime) }}</view>
			</view>
			<view class="list">
				<view class="list_head fa">
					<image src="/static/images/member_logo.png" mode="widthFix"></image>
					无线畅聊+无线语音
				</view>
				<view class="list_content fa sb">
					<view class="list_member" v-for="(item, index) in memberList" :key="index"
						@click="memberClick(index, item.id)" :class="memberIndex == index ? 'list_active' : ''">
						<view class="list_first" :style="memberIndex == index ? 'color: #FF51B3;' : ''">{{ item.title }}
						</view>
						<view class="list_price fx" :style="memberIndex == index ? 'color: #FF51B3;' : ''">
							¥<text>{{ item.money }}</text></view>
						<view class="list_break" :style="memberIndex == index ? 'color: #FF51B3;' : ''">{{ item.desc }}
						</view>
						<image class="list_tag" v-if="memberIndex == index" src="/static/images/member_tag.png"></image>
					</view>
				</view>
				<view class="list_module">
					<view class="list_title">权益对比</view>
					<view class="list_detail fa sb">
						<view class="list_item">
							<view class="list_item_title faj">权益名称</view>
							<view class="list_item_title faj">聊天条数</view>
							<view class="list_item_title faj">免广告权益</view>
							<view class="list_item_title faj">语音时长</view>
							<view class="list_item_title faj">视频生成</view>
						</view>
						<view class="list_item">
							<view class="list_item_title faj">非VIP会员</view>
							<view class="list_item_title faj">聊天100次/天</view>
							<view class="list_item_title faj">不免广告</view>
							<view class="list_item_title faj">不可语音</view>
							<view class="list_item_title faj">无法生成视频</view>
						</view>
						<view class="list_items faj fc">
							<view class="list_item_titles faj">VIP</view>
							<view class="list_item_titles faj">无限聊天</view>
							<view class="list_item_titles faj">全站免广告</view>
							<view class="list_item_titles faj">无限语音</view>
							<view class="list_item_titles faj">2次/天</view>
						</view>
					</view>
				</view>
				<view class="list_btn faj" @click="toOpenMember">确认协议并开通</view>
				<view class="list_text faj">阅读并确认同意<text>《会员服务协议》</text></view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	VipPackageApi,
	CreateVipOrderApi,
	VipPayApi,
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
import tabBar from '@/components/tab-bar.vue';
export default {
	components: {
		notHave,
		topSafety,
		tabBar,
	},
	data() {
		return {
			memberList: [
				{
					id: 0,
					name: '首次包月',
					price: '14',
					text: '首月享7折',
				},
				{
					id: 1,
					name: '首次包季',
					price: '36',
					text: '首季享7折',
				},
				{
					id: 2,
					name: '首次包年',
					price: '120',
					text: '首年享7折',
				},
			],
			memberIndex: 0,
			userInfo: uni.getStorageSync('userinfo'),
			vip_package_id: '',
			avatar: '',
			nickname: '',
			getMenuInfoList: '',
		}
	},
	onShow() {
		this.getRechargePackage()
	    // #ifdef MP-WEIXIN
		this.getMenuInfo()
		// #endif
	},
	methods: {
		//充值套餐列表
		getRechargePackage() {
			VipPackageApi({}).then(res => {
				if (res.code == 1) {
					this.memberList = res.data
					this.vip_package_id = res.data[0].id
				}
			})
		},
		memberClick(index, id) {
			this.memberIndex = index
			this.vip_package_id = id
		},
		toOpenMember() {
			CreateVipOrderApi({
				vip_package_id: this.vip_package_id,
				pay_type: 'miniWechat'
			}).then(res => {
				if (res.code == 1) {
					VipPayApi({
						out_trade_no: res.data.out_trade_no
					}).then(res => {
						if (res.code == 1) {
							uni.showModal({
								title: '提示',
								content: '会员开通成功！',
								showCancel: false,
								success: () => {
									uni.navigateBack({
										delta: 1
									});
								}
							});
						}
					})
				}
			})



		},
		formatTime(timestamp) {
			// 检查是否为时间戳（数字）
			if (typeof timestamp === 'number') {
				// 时间戳转为日期格式
				const date = new Date(timestamp * 1000); // 注意：JavaScript需要毫秒，所以可能需要 * 1000
				return this.formatDate(date);
			}
			// 如果已经是字符串格式，直接返回
			return timestamp;
		},

		formatDate(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');

			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		tosetUp() {
			uni.navigateTo({
				url: '/pages/mine/setUp'
			})
		},
		getMenuInfo() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			console.log('胶囊信息:', menuButtonInfo);

			// 胶囊宽度
			const capsuleWidth = menuButtonInfo.width;

			// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
			const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;

			console.log('胶囊宽度:', capsuleWidth);
			console.log('胶囊距离右侧的距离:', distanceFromRight);

			this.getMenuInfoList = capsuleWidth + distanceFromRight;

			return {
				width: capsuleWidth,
				distanceFromRight: distanceFromRight,
				menuButtonInfo: menuButtonInfo
			};
		},
	}
}
</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style>
.body {
	position: relative;
	padding: 30rpx 0 0 0;
}

.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 596rpx;
	background: linear-gradient(180deg, #FFE3E9 0%, #F7F7F7 100%);
}

.user {
	position: relative;
	padding: 0 40rpx;
}

.user image {
	width: 120rpx;
	height: 120rpx;
	display: block;
	border-radius: 100rpx;
	flex-shrink: 0;
}

.user_content {
	position: relative;
	margin: 0 0 0 30rpx;
}

.user_name {
	font-weight: 500;
	font-size: 36rpx;
	color: #000000;
	line-height: 50rpx;
}

.user_text {
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.module {
	position: relative;
	margin: 40rpx 40rpx 0 40rpx;
	padding: 44rpx 40rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
}

.list {
	position: relative;
	margin: 40rpx 0 0 0;
	padding: 44rpx 40rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0 0;
}

.list_head {
	position: relative;
	margin: 0 0 0 20rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.list_head image {
	margin: 0 26rpx 0 0;
	width: 102rpx;
	height: 50rpx;
	display: block;
}

.list_content {
	position: relative;
	margin: 38rpx 0 0 0;
}

.list_member {
	position: relative;
	padding: 20rpx 40rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(194, 194, 194, 0.3);
	border-radius: 26rpx;
	border: 2rpx solid #FFFFFF;
}

.list_active {
	color: #FF51B3 !important;
	background: #FFEBF6;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(194, 194, 194, 0.3);
	border: 2rpx solid #FF51B3;
}

.list_first {
	font-weight: 400;
	font-size: 28rpx;
	color: #333333;
	line-height: 50rpx;
}

.list_price {
	margin: 10rpx 0 0 0;
	font-weight: 700;
	font-size: 28rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_price text {
	font-size: 52rpx;
	line-height: 30rpx;
}

.list_break {
	margin: 12rpx 0 0 0;
	font-weight: 400;
	font-size: 24rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.list_tag {
	position: absolute;
	left: -2rpx;
	top: -11rpx;
	width: 48rpx;
	height: 50rpx;
	display: block;
}

.list_module {
	position: relative;
	margin: 40rpx 0 0 0;
}

.list_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_detail {
	position: relative;
	margin: 46rpx 0 0 0;
}

.list_item {
	position: relative;
}

.list_item_title {
	padding: 20rpx 100rpx 18rpx 48rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #9E9E9E;
	line-height: 50rpx;
	background: #FAFAFA;
	border-radius: 12rpx 12rpx 0rpx 0rpx;
}

.list_item:nth-child(2) .list_item_title {
	padding: 20rpx 28rpx 18rpx 100rpx;
}

.list_item:nth-child(1) .list_item_title:nth-child(2n) {
	background: #FFFFFF;
}

.list_item:nth-child(2) .list_item_title:nth-child(2n) {
	background: #FFFFFF;
}

.list_items {
	position: absolute;
	left: 0;
	right: 0;
	top: -25rpx;
	margin: auto 0;
}

.list_item_titles {
	padding: 20rpx 18rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FF51B3;
	line-height: 50rpx;
	background: #FFEBF6;
	width: 150rpx;
}

.list_items .list_item_titles:nth-child(1) {
	padding: 45rpx 18rpx 20rpx 18rpx;
	border-radius: 12rpx 12rpx 0rpx 0rpx;
}

.list_items .list_item_titles:nth-child(5) {
	padding: 15rpx 18rpx 35rpx 18rpx;
	border-radius: 0rpx 0rpx 12rpx 12rpx;
}

.list_btn {
	margin: 76rpx 0 0 0;
	padding: 24rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #FF51B3 100%);
	border-radius: 12rpx;
}

.list_text {
	position: relative;
	margin: 50rpx 0 0 0;
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.list_text text {
	color: #8449FE;
}

.uni-navbar__header-btns {
	padding-right: var(--right-padding, 0);
}

.uni-navbar__header-btns-right.data-v-26544265 {
	width: 60rpx !important;
}
</style>