You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
5.0 KiB
184 lines
5.0 KiB
<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>
|