230 lines
5.2 KiB
Vue
230 lines
5.2 KiB
Vue
<template>
|
||
<view class="top-up-page">
|
||
<NavCom title="充值"></NavCom>
|
||
<view class="info">
|
||
<image :src="infoDetail.avatarResource.url ? infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'" class="avatar" mode=""></image>
|
||
<view class="detail">
|
||
<view class="name">{{infoDetail.nickname||''}}</view>
|
||
<view class="price">代币余额：10</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="main">
|
||
<view class="list">
|
||
<view class="item" :class="{'item-active':listIndex === index}" v-for="(item,index) in list" :key="index" @click="handleItem(index)">
|
||
<view :class="{'give-active': item.give && listIndex === index,'give':item.give && listIndex !== index}" v-if="item.give">
|
||
赠送{{item.give}}代币
|
||
</view>
|
||
<view>
|
||
<text class="token">{{item.price}}</text>
|
||
<text class="token-sym">代币</text>
|
||
</view>
|
||
<view class="price" :class="{'price-active':listIndex === index}">¥6</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="total">合计 ¥300</view>
|
||
<view class="pay" @click="pay">立即支付</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import NavCom from '@/pages/components/nav.vue'
|
||
import { userInfo } from '@/API/user.js'
|
||
export default{
|
||
data(){
|
||
return{
|
||
list:[
|
||
{price:6,token:100,give:10,visible:true},
|
||
{price:6,token:100,give:10,visible:false},
|
||
{price:6,token:100,give:10,visible:false},
|
||
{price:6,token:100,give:10,visible:false},
|
||
{price:6,token:100,give:10,visible:false},
|
||
{price:6,token:100,give:10,visible:false},
|
||
{price:6,token:100,give:10,visible:false},
|
||
],
|
||
listIndex:0,
|
||
infoDetail:{
|
||
phone:"",
|
||
avatarResource:{}
|
||
}
|
||
}
|
||
},
|
||
components:{NavCom},
|
||
mounted() {
|
||
this.getUserInfo()
|
||
},
|
||
methods:{
|
||
// 获取用户信息
|
||
getUserInfo(){
|
||
userInfo().then(res => {
|
||
if(res.code === 200){
|
||
this.infoDetail = res.data
|
||
|
||
}else if(res.code == 400){
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('info')
|
||
this.$api.msg(res.message)
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
handleItem(index){
|
||
this.listIndex = index
|
||
},
|
||
pay(){
|
||
uni.navigateTo({
|
||
url:'/pages/mine/topUpOrder'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.top-up-page{
|
||
.info{
|
||
padding: 130rpx 42rpx 24rpx 42rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.avatar{
|
||
width: 105rpx;
|
||
height: 105rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.detail{
|
||
margin-left: 22rpx;
|
||
.name{
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
}
|
||
.price{
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.main{
|
||
height: calc(100vh - 260rpx);
|
||
background: #FFFEFE;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
.list{
|
||
display: grid;
|
||
gap: 12rpx;
|
||
grid-template-rows: 1fr;
|
||
margin: 0px auto;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
padding: 30rpx 22rpx;
|
||
.item{
|
||
width: 218rpx;
|
||
height: 164rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
border: 4rpx solid #EAEAEA;
|
||
position: relative;
|
||
padding-top: 46rpx;
|
||
margin-bottom: 30rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
.give{
|
||
position: absolute;
|
||
top: -24rpx;
|
||
left: 0;
|
||
width: 174rpx;
|
||
height: 51rpx;
|
||
background-image: url('@/static/index/n.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 25rpx;
|
||
color: #333333;
|
||
}
|
||
.give-active{
|
||
position: absolute;
|
||
top: -24rpx;
|
||
left: 0;
|
||
width: 174rpx;
|
||
height: 51rpx;
|
||
background-image: url('@/static/index/y.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 25rpx;
|
||
color: #fff;
|
||
}
|
||
.token{
|
||
font-size: 60rpx;
|
||
|
||
}
|
||
.token-sym{
|
||
font-size: 24rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
.price{
|
||
font-size: 29rpx;
|
||
color: #666666;
|
||
margin-top: -18rpx;
|
||
}
|
||
.price-active{
|
||
font-size: 29rpx;
|
||
color: #FF9A93;
|
||
}
|
||
}
|
||
.item-active{
|
||
background: linear-gradient(0deg, #FCE2E8 0%, #FFF6F5 100%);
|
||
border: 4rpx solid #FF8880;
|
||
color: #FF574C;
|
||
}
|
||
}
|
||
.footer{
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
left: 20rpx;
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.total{
|
||
width: 390rpx;
|
||
height: 88rpx;
|
||
background: #FF867C;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
border-radius: 44rpx 0px 0px 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.pay{
|
||
width: 316rpx;
|
||
height: 88rpx;
|
||
background: #F35649;
|
||
border-radius: 0px 44rpx 44rpx 0px;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |