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-28 18:02:57 +08:00
parent b7cdc8fa3f
commit 8663488c5f
162 changed files with 11387 additions and 7578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
pages/my/my.vue
View File

@ -1,8 +1,161 @@
<template>
<view class="my u-relative">
<view class="my-bg">
<!-- #ifdef MP-WEIXIN -->
<view class="u-text-center text-fff lg" :style="{paddingTop: statusBar + 'px'}">我的</view>
<!-- #endif -->
<view class="u-p-t-60 px32 row-between" @click="toProfile">
<view class="row u-col-top text-fff">
<view>
<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="112"></u-avatar>
</view>
<view class="u-m-l-32 nr u-m-10">
<view>用户昵称</view>
<view class="u-m-t-16">18749957626</view>
</view>
</view>
<view>
<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
</view>
</view>
</view>
<view class="block px32">
<view class="bg-white u-m-t-34 balance row-between br16 u-p-l-22 u-p-r-22 box-shadown">
<view class="u-flex u-row-center" @click="toWallet">
<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
<view class="u-m-l-60 u-text-center">
<view class="nr">0.00</view>
<view class="xs">余额</view>
</view>
</view>
<view>
<u-line class="u-line" direction="col" length="47"></u-line>
</view>
<view class="u-flex u-row-center">
<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
<view class="u-m-l-60 u-text-center">
<view class="nr">0.00</view>
<view class="xs">积分</view>
</view>
</view>
<view>
<u-line class="u-line" direction="col" length="47"></u-line>
</view>
<view class="u-flex u-row-center">
<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
<view class="u-m-l-60 u-text-center">
<view class="nr">0</view>
<view class="xs u-text-center">券</view>
</view>
</view>
</view>
<view class="bg-white u-m-t-32 service br16 u-p-t-32 u-p-l-22 u-p-r-22 box-shadown">
<view class="nr bold-600">服务功能</view>
<view>
<u-grid :col="4" :border="false">
<u-grid-item>
<u-image :src="cloudPath + 'img/icon_my_points.png'" width="64" height="64"></u-image>
<view class="grid-text mt10">积分商城</view>
</u-grid-item>
<u-grid-item>
<u-image :src="cloudPath + 'img/icon_my_coupon.png'" width="64" height="64"></u-image>
<view class="grid-text mt10">我的优惠券</view>
</u-grid-item>
<u-grid-item>
<u-image :src="cloudPath + 'img/icon_my_setting.png'" width="64" height="64"></u-image>
<view class="grid-text mt10">设置</view>
</u-grid-item>
<u-grid-item>
<u-image :src="cloudPath + 'img/icon_my_service.png'" width="64" height="64"></u-image>
<view class="grid-text mt10">联系客服</view>
</u-grid-item>
</u-grid>
</view>
</view>
<!-- 活动图 -->
<view class="br16 u-m-t-32">
<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
console.log(uni.getSystemInfoSync())
},
methods: {
// 跳转个人信息
toProfile() {
uni.navigateTo({
url: '/pages/my/profile'
})
},
// 跳转我的钱包
toWallet() {
uni.navigateTo({
url: '/pages/my/wallet'
})
}
},
computed: {
statusBar() {
return uni.getSystemInfoSync().statusBarHeight + 10
}
}
}
</script>
<style>
<style lang="scss">
page {
background-color: #F6F6F6;
}
.my-bg {
background-image: url(#{$cloudPath}img/my_bg.png);
height: 588rpx;
}
.block {
z-index: 1;
position: absolute;
left: 0;
right: 0;
/* #ifdef MP-WEIXIN*/
top: 410rpx;
/* #endif */
/* #ifndef MP-WEIXIN*/
top: 228rpx;
/* #endif */
background-color: #F6F6F6;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
}
.balance {
height: 132rpx;
}
.service {
height: 249rpx;
}
.box-shadown {
box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
}
</style>

70
pages/my/profile.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<view>
<view class="u-m-t-34">
<view class="row-center">
<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="142"></u-avatar>
</view>
<view class="nr text-default u-text-center u-m-t-16">
点击更换头像
</view>
</view>
<view class=" u-m-l-62 u-m-r-62">
<view class="nr row-between u-col-center u-m-t-48">
<view>昵称</view>
<view class="flex1 u-m-l-80 row u-row-between u-col-center">
<view>杨阳洋</view>
<view>
<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
</view>
</view>
</view>
<view class="nr row-between u-col-center u-m-t-48">
<view>手机号</view>
<view class="flex1 u-m-l-80 row u-row-between u-col-center">
<view>{{formatPhone()}}</view>
<view>
<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
</view>
</view>
</view>
</view>
<view class="fixed left-0 right-0 save">
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">保存</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
formatPhone() {
const phone = '15005837859'
return phone.substring(0, 3) + '****' + phone.substring(7);
}
}
}
</script>
<style lang="scss">
page{
background-color: #fff;
}
.save {
bottom: calc(52rpx + env(safe-area-inset-bottom));
height: 76rpx;
background-color: #212526;
color: #fff;
border-radius: 100rpx;
margin: 0 64rpx;
}
</style>

57
pages/my/wallet.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<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>账户余额(元)</view>
<view>￥ 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>
<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>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss">
.wallet {
position: relative;
}
.bg {
position: absolute;
left: 0;
right: 0;
background-color: #517AAD;
height: 320rpx;
}
.block {
position: absolute;
top: 24rpx;
left: 0;
right: 0;
}
.balance {
padding: 50rpx 280rpx;
}
.wallet-btn {
height: 150rpx;
padding: 0 100rpx;
}
</style>