|
|
<template>
|
|
|
<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
|
|
|
<view class="charge">
|
|
|
<view class="tops">
|
|
|
|
|
|
</view>
|
|
|
<view class="charge-header">
|
|
|
<view class="charge-header-title">
|
|
|
当前剩余次数：<text class="colors">10</text>次
|
|
|
</view>
|
|
|
<view class="charge-header-center">
|
|
|
<img class="charge-header-center-img" src="" alt="" />
|
|
|
<text class="centers">当前次卡适用于全平台全部门店</text>
|
|
|
</view>
|
|
|
<view class="charge-header-bottom">
|
|
|
<view class="charge-header-bottom-left" @click="explainBtn">
|
|
|
次卡说明
|
|
|
</view>
|
|
|
|
|
|
|
<view class="charge-header-bottom-left" @click="secondBright">
|
|
|
次卡明细
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="charge-body">
|
|
|
<view class="charge-body-title">
|
|
|
请选择次卡套餐办理
|
|
|
</view>
|
|
|
<view class="charge-body-box">
|
|
|
<view class="box active">
|
|
|
<view class="box-title">
|
|
|
<text>4次卡</text><text class="q">￥ <text class="colors">30</text> </text>
|
|
|
</view>
|
|
|
<view class="box-bottom">
|
|
|
<text class="size">每次使用上线15分钟</text>
|
|
|
<text class="size">有效期60天</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="box">
|
|
|
<view class="box-title">
|
|
|
<text>4次卡</text><text class="q">￥ <text class="colors">30</text> </text>
|
|
|
</view>
|
|
|
<view class="box-bottom">
|
|
|
<text class="size">每次使用上线15分钟</text>
|
|
|
<text class="size">有效期60天</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="ding">
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="charge-play">
|
|
|
<view class="charge-body-title">
|
|
|
请选择次卡套餐办理
|
|
|
</view>
|
|
|
<view class="charge-play-icon">
|
|
|
<view class="icon-left">
|
|
|
<img class="icon-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
|
|
|
<text>微信支付</text>
|
|
|
</view>
|
|
|
<view class="icon-right icon-active">
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="charge-btnPlay">
|
|
|
立即充值
|
|
|
</view>
|
|
|
</view>
|
|
|
<explain v-if="explainShow===1" @close="close"></explain>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {ref} from 'vue'
|
|
|
const titles = ref('次卡购买')
|
|
|
const bgcolor= ref('#fff')
|
|
|
const color = ref('#000')
|
|
|
const explainShow = ref(0)
|
|
|
const explainBtn = ()=>{
|
|
|
explainShow.value = 1
|
|
|
}
|
|
|
const close = (val)=>{
|
|
|
explainShow.value =val
|
|
|
}
|
|
|
const secondBright = ()=>{
|
|
|
uni.navigateTo({
|
|
|
url:"/pages/secondBright/secondBright"
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.charge {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
background-color: #f2f2f2;
|
|
|
.tops{
|
|
|
width: 100%;
|
|
|
height: 11%;
|
|
|
}
|
|
|
|
|
|
.charge-header {
|
|
|
width: 94%;
|
|
|
// height: 400rpx;
|
|
|
background-color: #ffffff;
|
|
|
border: 1rpx solid #02a7f0;
|
|
|
border-bottom: none;
|
|
|
margin-left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
margin-top: 30rpx;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
.charge-header-title {
|
|
|
width: 100%;
|
|
|
margin-top: 20rpx;
|
|
|
// height: 110rpx;
|
|
|
font-size: 28rpx;
|
|
|
// line-height: 110rpx;
|
|
|
text-align: right;
|
|
|
box-sizing: border-box;
|
|
|
padding-right: 20rpx;
|
|
|
|
|
|
// background-color: deeppink;
|
|
|
.colors {
|
|
|
font-size: 50rpx;
|
|
|
color: #d9001b;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.charge-header-center {
|
|
|
width: 100%;
|
|
|
height: 160rpx;
|
|
|
// background-color: rebeccapurple;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
.charge-header-center-img {
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
border-radius: 50%;
|
|
|
border: 1rpx solid #666;
|
|
|
}
|
|
|
|
|
|
.centers {
|
|
|
width: 470rpx;
|
|
|
display: block;
|
|
|
text-align: center;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.charge-header-bottom {
|
|
|
margin-top: 20rpx;
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
border: 1rpx solid #02a7f0;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
.charge-header-bottom-left {
|
|
|
width: 50%;
|
|
|
height: 80rpx;
|
|
|
text-align: center;
|
|
|
line-height: 80rpx;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.charge-body {
|
|
|
width: 94%;
|
|
|
// height: 400rpx;
|
|
|
background-color: #ffffff;
|
|
|
margin-left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
margin-top: 30rpx;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
.charge-body-title {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
box-sizing: border-box;
|
|
|
line-height: 80rpx;
|
|
|
padding-left: 20rpx;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 700;
|
|
|
padding-top: 15rpx;
|
|
|
}
|
|
|
|
|
|
.charge-body-box {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.box {
|
|
|
margin-left: 15rpx;
|
|
|
margin-right: 15rpx;
|
|
|
width: 43%;
|
|
|
margin-top: 20rpx;
|
|
|
// height: 300rpx;
|
|
|
border: 1rpx solid #02a7f0;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
.box-title {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
font-size: 26rpx;
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 20rpx;
|
|
|
|
|
|
.colors {
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box-bottom {
|
|
|
width: 100%;
|
|
|
font-size: 26rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding-left: 20rpx;
|
|
|
padding-bottom: 10rpx;
|
|
|
margin-top: 40rpx;
|
|
|
|
|
|
.size {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ding {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.active {
|
|
|
background-color: #02a7f0;
|
|
|
|
|
|
.box-title {
|
|
|
color: #d9001b;
|
|
|
|
|
|
.q {
|
|
|
color: black;
|
|
|
|
|
|
.colors {
|
|
|
color: #d9001b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box-bottom {
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.charge-play {
|
|
|
width: 94%;
|
|
|
height: 200rpx;
|
|
|
background-color: #ffffff;
|
|
|
margin-left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
margin-top: 30rpx;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
.charge-body-title {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
box-sizing: border-box;
|
|
|
line-height: 80rpx;
|
|
|
padding-left: 20rpx;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 700;
|
|
|
padding-top: 15rpx;
|
|
|
}
|
|
|
.charge-play-icon{
|
|
|
width: 100%;
|
|
|
height: 90rpx;
|
|
|
margin-top: 15rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
.icon-left{
|
|
|
width: 260rpx;
|
|
|
height: 90rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
font-size: 28rp;
|
|
|
.icon-img{
|
|
|
width: 90rpx;
|
|
|
height: 90rpx;
|
|
|
border-radius: 50%;
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
.icon-right{
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
border-radius: 50%;
|
|
|
border: 1rpx solid #666;
|
|
|
margin-right: 50rpx;
|
|
|
}
|
|
|
.icon-active{
|
|
|
border: none;
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url("https://www.jiubaotongxue.love/image/xuanzhong.png");
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.charge-btnPlay{
|
|
|
position: fixed;
|
|
|
bottom: 0rpx;
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
background-color: #d9001b;
|
|
|
text-align: center;
|
|
|
line-height: 100rpx;
|
|
|
color: white;
|
|
|
bottom: constant(safe-area-inset-bottom);
|
|
|
bottom: env(safe-area-inset-bottom);
|
|
|
}
|
|
|
}
|
|
|
</style> |
