初始化仓库
This commit is contained in:
wangxiaowei
179
pages/recharge/balance.vue
Normal file
179
pages/recharge/balance.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="index home-bg" :style="[navBackground]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
|
||||
<u-navbar
|
||||
:border-bottom="false"
|
||||
:is-fixed="false"
|
||||
custom-class="home-bg"
|
||||
:background="navBackground"
|
||||
:is-back="true"
|
||||
backText=" "
|
||||
:title="title"
|
||||
title-color="#fff"
|
||||
backIconColor="#fff"
|
||||
>
|
||||
</u-navbar>
|
||||
</u-sticky>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
<view class="row-center balance" :style="{paddingTop: topSpace + 'px'}">
|
||||
<view class="u-text-center w-full">
|
||||
<view class="text-fff" style="font-size: 96rpx;">0</view>
|
||||
<view class="text-fff nr">充值余额</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content u-relative u-m-l-32 u-m-r-32" style="margin-top: 132rpx;">
|
||||
<view class="input row-center br16">
|
||||
<view class="input-money">
|
||||
<u-input placeholder="输入金额: 0" placeholder-style="color: #254062;" :custom-style="{backgroundColor: 'transparent'}" input-align="center"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-38">
|
||||
<view class="sm u-m-b-20 bold-400">选择充值套餐</view>
|
||||
<view class="grid-container">
|
||||
<view :class="['item', {'active': selectIndex === 0}]">
|
||||
<view class="xs text-666">充值</view>
|
||||
<view class="text-333 md u-m-t-4">￥5</view>
|
||||
<view class="text-666 xxs u-m-t-2">赠送11元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-56">
|
||||
<view class="sm u-m-b-20 bold-400">加赠券 价值10元</view>
|
||||
<view class="grid-container u-m-t-18">
|
||||
<view class="coupon u-text-center">
|
||||
<view class="sm text-666">赠券1张</view>
|
||||
<view class="text-333 md u-m-t-28">
|
||||
<price-format color="#FF0000" :price="10" :subscriptSize="22" :firstSize="52"></price-format>
|
||||
</view>
|
||||
<view class="text-666 sm u-m-t-30">满10元可用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-70 u-p-10">
|
||||
<view class="sm u-m-b-20 bold-400">充值说明</view>
|
||||
<view class="text-999">1. 账户充值仅限在线方式支付，充值金额实时到账；</view>
|
||||
<view class="text-999">2. 有问题请联系客服；</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-42 u-p-b-20">
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即充值</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '充值余额',
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
|
||||
selectIndex: 0,
|
||||
backText: '',
|
||||
topSpace: 0
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.topSpace = (80 - this.statusBarHeight)
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.topSpace = (80 + 44)
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 跳转个人信息
|
||||
toProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/profile'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转我的钱包
|
||||
toWallet() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/wallet'
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navBackground() {
|
||||
return {
|
||||
'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 124rpx;
|
||||
background: #D3E0F1;
|
||||
border: 2rpx solid #254062;
|
||||
}
|
||||
|
||||
.input-money {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 209rpx;
|
||||
height: 155rpx;
|
||||
background: #F5F5F5;
|
||||
border: 1rpx solid #F5F5F5;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
padding: 20rpx 20rpx 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #F3F8FF;
|
||||
border: 1rpx solid #254062;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
width: 207rpx;
|
||||
height: 196rpx;
|
||||
background: url(#{$cloudPath}img/coupon_bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
& > view:first-child {
|
||||
color: #845F2E;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
pages/recharge/recharge.vue
Normal file
87
pages/recharge/recharge.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block">
|
||||
<view class="nr">充值金额</view>
|
||||
<view class="u-m-t-16">
|
||||
<text class="price">5.0</text>
|
||||
<text class="bold-400 nr u-m-l-16">元</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 xs">
|
||||
<text class="recharge">充值金额：</text>
|
||||
<text>5元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block">
|
||||
<view class="nr">选择支付方式</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="row-between u-m-t-32">
|
||||
<view class="row-center">
|
||||
<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">微信</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.weixin">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="row-between u-m-t-32">
|
||||
<view class="row-center">
|
||||
<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">支付宝</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.alipay">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 u-m-64">
|
||||
<u-button @click="pay" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即支付</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pay: {
|
||||
weixin: 0,
|
||||
alipay: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pay() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block {
|
||||
box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0,0,0,0.1), 0rpx 16rpx 20rpx 2rpx rgba(0,0,0,0.06), 0rpx 6rpx 28rpx 4rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.recharge {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user