Skip to content

G
gxpt_wechat
Commit 8d4cdedf by zhangzhen
Options

页面完善

parent 9e44c986
Showing with 435 additions and 66 deletions
pages/vipCreate/vipCreate.vue
......@@ -23,41 +23,98 @@
</view>
</view>
<view class="flex-between">
<view class="part-left">
<text>充值会员</text>
<view class="flex-between action-box-list">
<view class="part part-left" @tap="onTabChange(1)">
<image v-if="tabIndex ==1" :src="assetsPath+'/vip/btn_2_a.png'" class="active"
mode="widthFix"></image>
<image v-else :src="assetsPath+'/vip/btn_2.png'" class="unactive" mode="widthFix"></image>
</view>
<view class="part-right">
<text>权益会员</text>
<view class="part part-right" @tap="onTabChange(2)">
<image v-if="tabIndex ==2" :src="assetsPath+'/vip/btn_1_a.png'" class="active"
mode="widthFix"></image>
<image v-else :src="assetsPath+'/vip/btn_1.png'" class="unactive" mode="widthFix"></image>
</view>
</view>
<view class="list-box">
<view v-if="tabIndex ==1" class="list-box">
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-col item">
<view v-if="item.giveType.includes('1')" class="">
<image class="amount-bg" :src="assetsPath+'/vip/amount_bg.png'" mode="widthFix"></image>
<view class="flex-col item-content">
<view v-if="item.giveType.includes('1')" class="preferential">
<text>送{{item.giveAmount}}小时</text>
</view>
<view v-else-if="item.giveType.includes('2')" class="">
<view v-else-if="item.giveType.includes('2')" class="preferential">
<text>送{{item.giveDuration}}小时</text>
</view>
<view class="line">
<view class="line"></view>
<view class="flex-col part-bottom">
<view class="part-amount">
<view class="flex-row amount">
<text class="symbol">￥</text>
<text class="num">1000</text>
<!-- <text class="num">{{item.rechargeAmount}}</text> -->
</view>
<view class="flex-row">
<text>￥</text><text>{{item.rechargeAmount}}</text>
</view>
<view class="tip-text">
<text>充值送时长,多充多送</text>
</view>
</view>
</view>
</view>
</view>
<view v-if="tabIndex ==2" class="flex-col list-box-2">
<view class="flex-row part-1">
<view class="text-bg-1">
<text>特惠</text>
</view>
<text class="text-2">独享专属福利!</text>
<text class="text-3">（更多充值方案,供您选择）</text>
</view>
<view class="part-2">
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<view class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">权益</text>
<text class="text-2">会员 优惠享不停</text>
</view>
<text class="text-3">有效期：领取后1年内有效</text>
</view>
<view class="flex-3">
<view class="flex-row">
<text class="text-1">￥</text>
<text class="text-2">99.</text>
<text class="text-3">00</text>
</view>
<view class="cu-btn-box">
<button class="cu-btn">立即开通</button>
</view>
</view>
</view>
</view>
<view class="rule-tip">
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink">用户充值协议</text><text>, 并同意协议内容</text>
</view>
</view>
</view>
</view>
<view v-if="tabIndex ==1" class="flex-col">
<button class="cu-btn confirm-btn" @tap="onNavToRecharge">
<text>立即充值</text>
</button>
<view class="rule-tip">
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink">用户充值协议</text><text>, 并同意协议内容</text>
</view>
</view>
</view>
<f-tabbar></f-tabbar>
</view>
......@@ -65,8 +122,14 @@
<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import {equityMembersList,createEquityMembers} from "@/api/uerInfo.js";
import {rechargeConf,createRecharge} from "@/api/recharge.js";
import {
equityMembersList,
createEquityMembers
} from "@/api/uerInfo.js";
import {
rechargeConf,
createRecharge
} from "@/api/recharge.js";
import config from "@/config/index.config";
export default {
......@@ -75,9 +138,11 @@
},
data() {
return {
checked: false,
assetsPath: config.assetsPath,
list:[],
rechargeConfList:[],
list: [],
rechargeConfList: [],
tabIndex: 1,
index: 0
};
},
......@@ -86,34 +151,52 @@
this.onGetRechargeConf();
this.onLoading();
},
methods:{
onLoading(){
methods: {
onRuleTipChange(e){
console.log(e,99999)
this.checked = e.detail.value.includes("checked")
},
onNavToRecharge(){
console.log(this.checked,9999);
if(!this.checked){
uni.showToast({
icon:"none",
title:"请先阅读充值协议并同意"
})
return;
}
},
onLoading() {
equityMembersList().then(res => {
console.log(res,999999)
if(res.data.code == 200 && res.data.rows){
console.log(res, 999999)
if (res.data.code == 200 && res.data.rows) {
this.list = res.data.rows
}
})
},
onGetRechargeConf(){
rechargeConf().then(res =>{
if(res.data.code == 200 && res.data.rows){
this.rechargeConfList = res.data.rows.map(item=>{
onGetRechargeConf() {
rechargeConf().then(res => {
if (res.data.code == 200 && res.data.rows) {
this.rechargeConfList = res.data.rows.map(item => {
return {
...item,
giveType: item.giveType?item.giveType.split(","):[]
giveType: item.giveType ? item.giveType.split(",") : []
}
})
console.log(this.rechargeConfList,9999)
console.log(this.rechargeConfList, 9999)
}
})
},
onSubmit(){
onTabChange(val) {
if (this.tabIndex == val) return;
this.tabIndex = val;
},
onSubmit() {
createEquityMembers({
payType:1,
equityMembersConfigId:this.list[this.index].id
}).then(res =>{
console.log(res,9999)
payType: 1,
equityMembersConfigId: this.list[this.index].id
}).then(res => {
console.log(res, 9999)
if (res.data.data.jsConfig) {
wx.requestPayment({
"timeStamp": res.data.data.jsConfig.timeStamp,
......@@ -145,12 +228,12 @@
})
},
onSubmit2(){
onSubmit2() {
createRecharge({
payType:1,
rechargeConfId:this.rechargeConfList[0].id
}).then(res =>{
console.log(res,9999)
payType: 1,
rechargeConfId: this.rechargeConfList[0].id
}).then(res => {
console.log(res, 9999)
if (res.data.data.jsConfig) {
wx.requestPayment({
"timeStamp": res.data.data.jsConfig.timeStamp,
......@@ -187,50 +270,61 @@
</script>
<style lang="scss" scoped>
.vip-create{
.vip-create {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
justify-content: center;
.bg-header{
.bg-header {
display: block;
image{
image {
display: block;
width: 100%;
}
}
.content{
.content {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
background-color: #FFEABF;
justify-content: center;
align-items: center;
padding-bottom: 60upx;
.bg-box-1{
.bg-box-1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 690upx;
min-height: 596upx;
background: #FFCA7E;
border-radius: 32upx;
padding: 10upx 0;
.bg-box-2{
padding: 6px 0;
.bg-box-2 {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
height: 100%;
width: 668upx;
background: linear-gradient(-42deg, #FFF5CB, #FFFFFF);
border-radius: 32upx;
.title-content{
.title-content {
margin-top: 34upx;
.title-text{
.title-text {
display: flex;
justify-content: center;
position: relative;
margin: 0 20upx;
.text{
.text {
position: relative;
font-weight: normal;
font-size: 48rpx;
......@@ -240,7 +334,8 @@
-webkit-text-fill-color: transparent;
z-index: 2;
}
.line{
.line {
position: absolute;
bottom: 0;
width: 110%;
......@@ -249,9 +344,11 @@
border-radius: 8upx;
}
}
.xx{
.xx {
width: 30upx;
image{
image {
width: 100%;
max-height: 34upx;
}
......@@ -259,35 +356,306 @@
}
}
}
.list-box{
.action-box-list {
display: flex;
justify-content: center;
width: 100%;
margin: 40upx 0 20upx;
.part {
display: flex;
justify-content: center;
width: 48%;
image {
width: 290upx;
height: 116upx;
border-radius: 25upx;
}
.unactive {
border: 1px solid rgba(184, 182, 172, 0.3);
box-shadow: -2upx 10upx 20upx 0upx rgba(162, 68, 3, 0);
}
.active {
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: -2upx 10upx 20upx 0upx rgba(162, 68, 3, 0.52);
}
}
}
.list-box {
display: flex;
flex: 1;
width: 100%;
padding: 0 1%;
justify-content: center;
.item{
align-items: center;
.item {
position: relative;
display: flex;
align-items: center;
width: 31%;
margin: 0 1%;
width: 30%;
margin: 0 2%;
background: linear-gradient(-39deg, #FFEABF, #FFFFFF);
border-radius: 10rpx 28rpx 28rpx 28rpx;
border: 1px solid #FF4D05;
.line{
width: 90%;
.amount-bg {
display: block;
width: 100%;
}
.item-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.line {
width: 80%;
height: 1rpx;
border: 1px solid #FA541D;
border-bottom: 1px dashed #FA541D;
}
.preferential {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 33%;
text {
font-weight: normal;
font-size: 32upx;
color: #000000;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.part-bottom {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
}
.part-amount {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
}
.amount {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
.symbol {
font-weight: 400;
font-size: 29upx;
color: #FE3F00;
margin-bottom: 10upx;
}
.num {
font-weight: 400;
font-size: 64upx;
color: #FE3F00;
}
}
.tip-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50upx;
background: linear-gradient(-90deg, #FCD25B, #FA541D);
border-radius: 0 0 23upx 23upx;
text {
font-size: 19upx;
color: #ffffff;
}
}
}
}
.list-box-2{
width: 100%;
align-items: center;
.part-1{
display: flex;
align-items: center;
width: 90%;
margin-top: 24upx;
.text-bg-1{
display: flex;
justify-content: center;
align-items: center;
padding: 0 12upx;
height: 28rpx;
background: linear-gradient(90deg, #FCD25B 0%, #FA541D 100%);
border-radius: 14rpx;
margin-right: 10upx;
text{
font-weight: normal;
font-size: 20rpx;
color: #FFFFFF;
font-style: italic;
}
}
.text-2{
font-weight: normal;
font-size: 32rpx;
color: #FA561E;
font-style: italic;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-3{
font-weight: 400;
font-size: 20rpx;
color: #999999;
font-style: italic;
}
}
.part-2{
position: relative;
width: 90%;
margin-top: 24upx;
.img-bg{
display: block;
width: 100%;
}
.absolute{
display: flex;
flex-direction: row;
.flex-5{
display: flex;
flex-direction: column;
justify-content: center;
width: 67%;
height: 100%;
padding-left: 24upx;
.flex-row{
align-items: flex-end;
font-weight: bold;
.text-1{
color: #FE2E2E;
font-size: 42upx;
}
.text-2{
color: #333333;
font-size: 34upx;
margin-bottom: 2upx;
}
}
.text-3{
font-weight: 400;
font-size: 24rpx;
color: #A59079;
margin-top: 12upx;
}
}
.flex-3{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
height: 100%;
.flex-row{
align-items: flex-end;
.text-1{
color: #D27E1F;
font-size: 32upx;
margin-bottom: 6upx;
}
.text-2{
color: #D27E1F;
font-size: 56upx;
font-weight: bold;
}
.text-3{
color: #D27E1F;
font-size: 32upx;
margin-bottom: 6upx;
}
.tip-text{
font-size: 16upx;
}
.cu-btn-box{
margin-top: 10upx;
.cu-btn{
padding: 0 20upx;
height: 40upx;
background: #FA561E;
border-radius: 20upx;
font-size: 24upx;
color: #ffffff;
}
}
}
}
}
}
.rule-tip{
margin: 24upx 0 20upx;
}
}
.confirm-btn {
width: 486upx;
height: 88upx;
background: linear-gradient(-90deg, #FCD25B, #FA541D);
box-shadow: -1upx 8upx 3upx 0upx rgba(250, 142, 2, 0.27), 10rpx 1rpx 26rpx 0rpx rgba(255, 255, 255, 0.32);
border-radius: 44rpx;
margin-top: 30upx;
text {
font-weight: 400;
font-size: 46upx;
color: #FFFFFF;
font-style: italic;
}
}
.footer-box{
.rule-tip {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 34upx;
text {
font-weight: normal;
font-size: 24rpx;
color: #777777;
}
.text-pink {
margin: 0 6upx;
font-size: 24rpx;
color: #000000;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.footer-box {
position: absolute;
left: 0;
bottom: 0;
......@@ -296,5 +664,5 @@
align-items: center;
width: 100%;
padding: 30upx;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment