161 lines
4.0 KiB
Vue
161 lines
4.0 KiB
Vue
<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 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> |