wangxiaowei/jianbing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面

Browse Source
This commit is contained in:
wangxiaowei
2025-04-29 15:57:57 +08:00
parent 8663488c5f
commit 644c7f0767
189 changed files with 10029 additions and 7895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/my/my.vue
View File

@ -124,7 +124,7 @@
}
.my-bg {
background-image: url(#{$cloudPath}img/my_bg.png);
background-image: url(#{$cloudPath}img/my_bg1.png);
height: 588rpx;
}

65
pages/my/wallet.vue
View File

@ -2,22 +2,55 @@
<view class="wallet">
<view class="bg"></view>
<view class="block">
<view class="bg-white balance u-m-l-16 u-m-r-16 br24">
<view class="bg-white balance u-m-l-16 u-m-r-16 br24 column-center">
<view>账户余额(元)</view>
<view>￥ 0.00</view>
<view class="u-m-t-14 bold-600 xxl">￥ 0.00</view>
</view>
<view class="bg-white wallet-btn u-m-t-24 u-m-l-16 u-m-r-16 row-between br24">
<view class="row">
<u-image :src="cloudPath + 'img/icon_my_wallet.png'" width="56" height="56"></u-image>
<text class="text-default u-m-l-18">充值</text>
<view>
<navigator hover-class="none" url="/pages/recharge/balance" class="row">
<u-image :src="cloudPath + 'img/icon_my_wallet.png'" width="56" height="56"></u-image>
<text class="u-m-l-18 nr">充值</text>
</navigator>
</view>
<view>
<u-line color="#EEE" direction="col" length="60"/>
</view>
<view class="row">
<u-image :src="cloudPath + 'img/icon_my_wallet_record.png'" width="56" height="56"></u-image>
<text class="text-default u-m-l-18">充值记录</text>
<view>
<navigator hover-class="none" url="/pages/recharge/balance" class="row">
<u-image :src="cloudPath + 'img/icon_my_wallet_record.png'" width="56" height="56"></u-image>
<text class="u-m-l-18 nr">充值记录</text>
</navigator>
</view>
</view>
<view class="list bg-white br16 u-p-32">
<view class="lg">钱包明细</view>
<view class="u-m-t-16">
<view class="u-m-b-16">
<view class="nr row-between">
<view>消费</view>
<view class="deduct">-2000</view>
</view>
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
</view>
<view class="u-m-b-16">
<view class="nr row-between">
<view>消费</view>
<view class="deduct">-2000</view>
</view>
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
</view>
<view class="u-m-b-16">
<view class="nr row-between">
<view>消费</view>
<view class="deduct">-2000</view>
</view>
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
</view>
</view>
</view>
</view>
@ -47,11 +80,25 @@
}
.balance {
padding: 50rpx 280rpx;
height: 209rpx;
}
.wallet-btn {
height: 150rpx;
padding: 0 100rpx;
}
.list {
margin: 22rpx 34rpx;
height: 962rpx;
box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
}
.deduct {
color: rgba(0, 0, 0, 0.6)
}
.date {
color: rgba(0, 0, 0, 0.4)
}
</style>

179
pages/recharge/balance.vue Normal file
View 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>