medicine-xcx/pagesC/vip/openVip.vue

<template>
	<view class="vip flex-1">
		<view class="vip-header flex">
			<view class="flex align-start vip-header-avatar">
				<u-avatar :src="src" size="120"></u-avatar>
				<text class="font-28 text-white m-l-20 m-t-10">今今呀呀~</text>
			</view>
		</view>
		<view class="vip-container position-absolute bg-white flex">
			<scroll-view scroll-y>
				<view class="vip-container-box">
					<view class="vip-container-box-title flex align-center justify-center m-b-30">
						<view class="vip-container-box-title-icon"><image :src="vipImg" mode="widthFix"></image></view>
						<text class="m-l-10 font-32 text-black font-weight-bold">会员购物 更省钱、更实惠</text>
					</view>

					<view class="vip-container-box-grid flex align-center justify-between flex-wrap">
						<view
							class="vip-container-box-grid-item flex flex-column align-center justify-center m-b-16"
							:class="{ 'vip-container-box-grid-item-active': gridActive === item.id }"
							v-for="item in gridData"
							:key="item.id"
							@click="gridActive = item.id"
						>
							<text class="font-34 grid-text font-weight-bold m-b-16">{{ item.name }}</text>
							<text class="font-30 grid-text m-b-16">{{ item.price }}</text>
							<view class="grid-text grid-scale">
								<text>原价：</text>
								<text class="text-through">￥{{ item.originalPrice }}</text>
							</view>
						</view>
					</view>

					<view>
						<view class="vip-container-box-tips flex align-center m-b-30">
							<view class="vip-container-box-tips-icon"><image :src="vipImg" mode="widthFix"></image></view>
							<text class="m-l-10 font-32 text-black font-weight-bold">次卡专属权益</text>
						</view>

						<view class="vip-container-box-list flex align-center  m-b-16">
							<image class="vip-container-box-list-icon" :src="tipImg" mode="widthFix"></image>
							<text class="m-l-16 font-28 text-black font-weight-bold">有效期30分钟</text>
						</view>
						<view class="vip-container-box-list flex align-center  m-b-16">
							<image class="vip-container-box-list-icon" :src="tipImg" mode="widthFix"></image>
							<text class="m-l-16 font-28 text-black font-weight-bold">有效期30分钟</text>
						</view>
						<view class="vip-container-box-list flex align-center  m-b-16">
							<image class="vip-container-box-list-icon" :src="tipImg" mode="widthFix"></image>
							<text class="m-l-16 font-28 text-black font-weight-bold">开通后可享受次卡会员价和返消费金</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="position-fixed vip-btn overflow-hidden flex align-center">
			<view class="flex-1 vip-btn-left font-34 flex align-center justify-center h-100">
				<view class="flex align-end lineHeight-1">
					<text class="vip-btn-left-icon">￥</text>
					<text>365</text>
					<text class="vip-btn-left-txt m-l-2">开通即享特权</text>
				</view>
			</view>
			<view class="flex-1 vip-btn-right font-34 flex align-center justify-center h-100 font-weight-bold" @click="open">立即开通</view>
		</view>
		<!-- <payment-box confirmText="付款" ref="payment" @change="change" @confirm="confirm" @hide="hide"></payment-box> -->
	</view>
</template>

<script>
import { IMG_URL } from '@/env.js'
export default {
	data() {
		return {
			vipImg: IMG_URL + 'vip/vip.png',
			tipImg: IMG_URL + 'vip/tip.png',
			src: IMG_URL + 'test.png',
			idData: [
				{ id: 0, name: '次卡', price: '39元/30分钟', originalPrice: '999' },
				{ id: 1, name: '银卡', price: '39元/30分钟', originalPrice: '999' },
				{ id: 2, name: '金卡', price: '39元/30分钟', originalPrice: '999' },
				{ id: 3, name: '钻石卡', price: '39元/30分钟', originalPrice: '999' }
			],
			gridActive: null
		};
	},
	onReady() {
	},
	methods: {
		open() {
			console.log('微信支付')
		},
	}
};
</script>

<style lang="scss" scoped>
.vip {
	&-header {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 110%;
		height: 360rpx;
		background: #000;
		border-radius: 0 0 50% 50%;
		padding: 30rpx calc(45rpx + 5vw);
	}
	&-container {
		width: calc(100vw - 32rpx);
		height: calc(100vh - 170rpx);
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 60rpx 60rpx 0 0;
		&-box {
			padding: 20rpx 58rpx;
			&-title {
				&-icon {
					width: 45rpx;
				}
			}

			&-grid {
				margin-bottom: 50rpx;
				&-item {
					width: 280rpx;
					height: 220rpx;
					border-radius: 20rpx;
					background: #f5f5f5;
					&-active {
						background: #ffedcf;
						.grid-text {
							color: #8b5b13;
						}
					}
				}
			}

			&-tips {
				&-icon {
					width: 60rpx;
				}
			}
			&-list {
				&-icon {
					width: 21rpx;
				}
			}
		}
	}

	&-btn {
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		width: 620rpx;
		height: 90rpx;
		border-radius: 40rpx;
		&-left {
			background: #302f2d;
			color: #ffda85;
			&-icon {
				font-size: 16rpx;
			}
			&-txt {
				font-size: 14rpx;
			}
		}
		&-right {
			background: #ffda85;
			color: #6f4920;
		}
	}
}
.grid-text {
	color: #000;
}
.grid-scale {
	font-size: 18rpx;
}
</style>