158 lines
3.6 KiB
Vue
158 lines
3.6 KiB
Vue
<template>
|
|
<view class="top-up-order-page">
|
|
<NavCom title="提交订单"></NavCom>
|
|
<scroll-view scroll-y="true" class="scroll-view">
|
|
<view class="main">
|
|
<view class="item border-bottom">
|
|
<view class="label">充值金额</view>
|
|
<view class="value">¥6</view>
|
|
</view>
|
|
<view class="item border-bottom">
|
|
<view class="label">充值代币</view>
|
|
<view class="value">120代币</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">充值奖励</view>
|
|
<view class="value">0代币</view>
|
|
</view>
|
|
</view>
|
|
<view class="main" v-for="(item,index) in payList" :key="index" @click="payChange(index)">
|
|
<view class="item">
|
|
<view class="item-detail">
|
|
<image :src="item.img" mode="" :style="{width:item.width,height:item.height}" class="pay-icon"></image>
|
|
{{item.label}}
|
|
</view>
|
|
<image src="@/static/mine/g.png" mode="" class="select-img" v-if="item.visible"></image>
|
|
<view class="select-view" v-else></view>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="price">
|
|
¥<text class="value">48.8</text>
|
|
</view>
|
|
<view class="btn" @click="pay">立即支付</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import NavCom from '@/pages/components/nav.vue'
|
|
export default{
|
|
data(){
|
|
return{
|
|
payList:[
|
|
{label:'微信支付',value:'',img:'',visible:true,width: '34rpx',height: '29rpx',img: '../../static/index/wx.png',},
|
|
{label:'支付宝支付',value:'',img:'',visible:false,height: '30rpx',width: '30rpx',img: '../../static/index/zfb.png',}
|
|
],
|
|
payIndex:0
|
|
}
|
|
},
|
|
components:{NavCom},
|
|
methods:{
|
|
payChange(index){
|
|
this.payIndex = index;
|
|
this.payList.forEach((item, idx) => {
|
|
item.visible = idx === index;
|
|
});
|
|
},
|
|
pay(){
|
|
uni.navigateTo({
|
|
url:`/pages/mine/topUpSuc`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.top-up-order-page{
|
|
.scroll-view{
|
|
height: 100vh;
|
|
padding: 130rpx 22rpx 0 22rpx;
|
|
.main{
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
padding: 0 20rpx;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 88rpx;
|
|
border-radius: 10rpx;
|
|
padding-left: 12rpx;
|
|
.label{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.value{
|
|
font-size: 28rpx;
|
|
color: #888888;
|
|
}
|
|
}
|
|
.border-bottom{
|
|
border-bottom: 1px solid #EEEEEE;
|
|
}
|
|
.item-detail{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
.pay-icon{
|
|
margin-right: 13rpx;
|
|
}
|
|
}
|
|
.select-img{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.select-view{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #888888;
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
height: 147rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 22rpx 0 54rpx;
|
|
background-color: #fff;
|
|
left: 0;
|
|
.price{
|
|
font-size: 24rpx;
|
|
color: #EF4235;
|
|
font-weight: 500;
|
|
.value{
|
|
font-size: 46rpx;
|
|
}
|
|
}
|
|
.btn{
|
|
width: 431rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |