359 lines
7.0 KiB
Vue
359 lines
7.0 KiB
Vue
|
<!-- 会员充值 -->
|
|||
|
|
<!-- <style lang="scss">
|
|||
|
|
.member {
|
|||
|
|
padding: 40rpx 0 300rpx 0;
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: linear-gradient(to right, #F7EED7, #E7DAAF);
|
|||
|
|
height: 302rpx;
|
|||
|
|
margin: 0 30rpx 30rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 20rpx 0 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.card-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.card-info-right {
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
|
|||
|
|
.phone {
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #444444;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #7B5232;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<template>
|
|||
|
|
<view class="member">
|
|||
|
|
<view class="card">
|
|||
|
|
<view class="card-info">
|
|||
|
|
<up-image width="100rpx" height="100rpx" />
|
|||
|
|
<view class="card-info-right">
|
|||
|
|
<view class="phone">155****4444</view>
|
|||
|
|
<view class="level">初级会员 享受9折优惠</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template> -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 会员充值 -->
|
|||
|
|
<style lang="scss">
|
|||
|
|
.member {
|
|||
|
|
// padding-top: 40rpx;
|
|||
|
|
padding: 40rpx 0 300rpx 0;
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: linear-gradient(to right, #F7EED7, #E7DAAF);
|
|||
|
|
height: 302rpx;
|
|||
|
|
margin: 0 30rpx 30rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 20rpx 0 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.card-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.card-info-right {
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
|
|||
|
|
.phone {
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #444444;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #7B5232;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.money {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-bottom: 34rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin-right: 116rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.charge {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-right: 38rpx;
|
|||
|
|
|
|||
|
|
.charge-left {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
|
|||
|
|
&>view {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #A26341;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.charge-right {
|
|||
|
|
width: 148rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
background: #7B5232;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rules {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin: 0 30rpx 30rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
|
|||
|
|
.rules-title {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 34rpx;
|
|||
|
|
|
|||
|
|
.rules-title-main {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #444444;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rules-title-record {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #444444;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rules-con {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.rules-con-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 188rpx;
|
|||
|
|
height: 220rpx;
|
|||
|
|
border: 2rpx solid #F1F1F1;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-bottom: 28rpx;
|
|||
|
|
|
|||
|
|
&:not(:nth-child(3n)) {
|
|||
|
|
margin-right: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rules-con-item-main {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rules-con-item-sub {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #777777;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rules-con-item-amount {
|
|||
|
|
text {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.symbol {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.attention {
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
|
|||
|
|
.attention-title {
|
|||
|
|
position: relative;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #262626;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin-left: 14rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 6rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
background: #FF8056;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.attention-tips {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #7A7A7A;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
height: 110rpx;
|
|||
|
|
background-color: #F6F6F6;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
/* 兼容 iOS < 11.2 */
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
/* 兼容 iOS >= 11.2 */
|
|||
|
|
|
|||
|
|
|
|||
|
|
.btn-wrap {
|
|||
|
|
width: 670rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: #EFCC6E;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<template>
|
|||
|
|
<view class="member">
|
|||
|
|
<view class="card">
|
|||
|
|
<view class="card-info">
|
|||
|
|
<up-image width="100rpx" height="100rpx" />
|
|||
|
|
<view class="card-info-right">
|
|||
|
|
<view class="phone">155****4444</view>
|
|||
|
|
<view class="level">初级会员 享受9折优惠</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="money">
|
|||
|
|
<text>余额：10000</text>
|
|||
|
|
<view>充值</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="charge">
|
|||
|
|
<view class="charge-left">
|
|||
|
|
<view>
|
|||
|
|
<text>当前已充值1000，升级还需2000</text>
|
|||
|
|
<text>Lv.2</text>
|
|||
|
|
</view>
|
|||
|
|
<up-line-progress :percentage="30" activeColor="#A26341" inactiveColor="#fff"
|
|||
|
|
height="8rpx"></up-line-progress>
|
|||
|
|
</view>
|
|||
|
|
<view class="charge-right">升级会员</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 充值规格 -->
|
|||
|
|
<view class="rules">
|
|||
|
|
<view class="rules-title">
|
|||
|
|
<view class="rules-title-main">充值规格</view>
|
|||
|
|
<view class="rules-title-record">
|
|||
|
|
充值记录
|
|||
|
|
<up-icon name="arrow-right"></up-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="rules-con">
|
|||
|
|
<view class="rules-con-item" v-for="item in 4">
|
|||
|
|
<view class="rules-con-item-main">基础会员</view>
|
|||
|
|
<view class="rules-con-item-sub">永久</view>
|
|||
|
|
<view class="rules-con-item-amount">
|
|||
|
|
<text class="symbol">￥</text>
|
|||
|
|
<text>1000</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="rules-con-define">
|
|||
|
|
<up-input placeholder="点击输入金额" type="number" color="#333" fontSize="28rpx"
|
|||
|
|
:placeholderStyle="{color:'#989898'}">
|
|||
|
|
<template #prefix>
|
|||
|
|
<up-text text="自定义金额" color="#111" size="30rpx" margin="0 3px 0 0" type="tips"></up-text>
|
|||
|
|
</template>
|
|||
|
|
</up-input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 注意事项 -->
|
|||
|
|
<view class="attention">
|
|||
|
|
<view class="attention-title"><text>注意事项：</text></view>
|
|||
|
|
<view class="attention-tips">1、充值后帐户的金额不能提现，可用于消费使用</view>
|
|||
|
|
<view class="attention-tips">2、账户充值出现问题可联系平台客服，也可拨打平台客服咨询热线4008888888</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="member-btn">
|
|||
|
|
<view class="btn-wrap">
|
|||
|
|
确认充值
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
rechargeApi
|
|||
|
|
} from "@/api/user.js";
|
|||
|
|
|
|||
|
|
|
|||
|
|
rechargeApi({
|
|||
|
|
price: 1000
|
|||
|
|
}).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
})
|
|||
|
|
</script>
|