From 82c48f3b548145d0cb3c652c47ed4def1e3e4c77 Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Fri, 18 Dec 2020 15:48:04 +0800
Subject: [PATCH] Merge branch 'master' of https://gitee.com/jyyforjava/hive-app
---
hive-app/pages/member/detail.vue | 137 ++++++++++++++++++++++++++++++---------------
1 files changed, 91 insertions(+), 46 deletions(-)
diff --git a/hive-app/pages/member/detail.vue b/hive-app/pages/member/detail.vue
index 76eeab0..cf80247 100644
--- a/hive-app/pages/member/detail.vue
+++ b/hive-app/pages/member/detail.vue
@@ -6,72 +6,106 @@
<!-- #endif -->
<view class="header flex flex-v align-center">
<image class="header-img" src="../../static/images/head-img.jpg"></image>
- <text class="font-18 white mt-5">333</text>
- <text class="font-14 white mt-5">会员编号: 101010</text>
- <text class="font-12 white mt-5">湖南 长沙 22</text>
- <view class="flex align-center mt-10">
- <view class="icon-box flex justify-center align-center mr-20">
+ <text class="font-18 mt-5">333</text>
+ <text class="font-14 mt-5">会员编号: 101010</text>
+ <view class="flex align-center mt-5">
+ <text class="font-12 mr-10">{{this.eye==false?encryptAccount(15569216885):'15569216885'}}</text>
+ <text class="icon iconfont" :class="this.eye==false?'iconyanjing':'iconyanjing1'" @click="eyeSwitch"></text>
+ </view>
+ <view class="flex mt-10">
+ <view class="icon-box mr-20">
<text class="icon iconfont icondianhua blue"></text>
</view>
- <view class="icon-box flex justify-center align-center">
+ <view class="icon-box">
<text class="icon iconfont iconxinxiduanxinsixinduihua blue"></text>
</view>
</view>
</view>
<view class="content">
- <view class="content-row flex justify-around mt-10">
- <view class="flex flex-v align-center">
+ <view class="content-row flex justify-around">
+ <view class="center">
<text class="font-18 red">600.00</text>
- <text class="font-14 mt-10">余额</text>
+ <text class="font-14 mt-10 block">余额</text>
</view>
- <view class="flex flex-v align-center">
+ <view class="center">
<text class="font-18 green">600.00</text>
- <text class="font-14 mt-10">赠送余额</text>
+ <text class="font-14 mt-10 block">赠送余额</text>
</view>
- <view class="flex flex-v align-center">
+ <view class="center">
<text class="font-18 blue">600.00</text>
- <text class="font-14 mt-10">累计消费</text>
+ <text class="font-14 mt-10 block">累计消费</text>
</view>
</view>
- <view class="content-row mt-10">
- <view class="flex">
- <view class="detail-item flex flex-v align-center justify-center">
+ <view class="content-row flex flex-wrap">
+ <view class="detail-item">
+ <navigator url="./editMember" hover-class="none" >
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image>
<text class="font-14 mt-5">会员信息</text>
- </view>
- <view class="detail-item flex flex-v align-center justify-center">
- <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image>
- <text class="font-14 mt-5">项目/套餐</text>
- </view>
- <view class="detail-item flex flex-v align-center justify-center">
+ </navigator>
+ </view>
+ <view class="detail-item">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image>
+ <text class="font-14 mt-5">项目/套餐</text>
+ </view>
+ <view class="detail-item">
+ <navigator url="./membershipCard" hover-class="none" >
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail3.png"></image>
<text class="font-14 mt-5">卡项</text>
- </view>
- <view class="detail-item flex flex-v align-center justify-center">
- <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail4.png"></image>
- <text class="font-14 mt-5">皮肤监测</text>
- </view>
+ </navigator>
</view>
- <view class="flex justify-start mt-20">
- <view class="detail-item flex flex-v align-center justify-center">
- <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
- <text class="font-14 mt-5">消费记录</text>
- </view>
- <view class="detail-item flex flex-v align-center justify-center">
- <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail6.png"></image>
- <text class="font-14 mt-5">服务记录</text>
- </view>
- <view class="detail-item flex flex-v align-center justify-center">
- <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image>
- <text class="font-14 mt-5">跟进记录</text>
- </view>
+ <view class="detail-item">
+ <navigator url="./skinDetection" hover-class="none" >
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail4.png"></image>
+ <text class="font-14 mt-5">皮肤检测</text>
+ </navigator>
+ </view>
+ <view class="detail-item">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
+ <text class="font-14 mt-5">消费记录</text>
+ </view>
+ <view class="detail-item">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail6.png"></image>
+ <text class="font-14 mt-5">服务记录</text>
+ </view>
+ <view class="detail-item">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image>
+ <text class="font-14 mt-5">跟进记录</text>
+ </view>
+ <view class="detail-item">
+ <navigator url="./membershipCard" hover-class="none" >
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail3.png"></image>
+ <text class="font-14 mt-5">会员档案</text>
+ </navigator>
</view>
</view>
+ </view>
+ <view class="sticky-footer flex justify-between">
+ <button class="white-btn btn">开单</button>
+ <button class="blue-btn btn">预约</button>
</view>
</view>
</template>
<script>
+ export default{
+ data(){
+ return{
+ eye:false
+ }
+ },
+ methods:{
+ encryptAccount(val) {
+ if (/^1[3456789]\d{9}$/.test(val)) {
+ return String(val).substr(0, 3) + '****' + String(val).substr(7);
+ } else {
+ return val;
+ }
+ },
+ eyeSwitch(){
+ this.eye=!this.eye
+ }
+ }
+ }
</script>
<style>
@@ -81,6 +115,7 @@
}
.header{
background: #518EFF;
+ color: #FFFFFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 15px;
@@ -93,6 +128,8 @@
.icon-box{
width: 28px;
height: 28px;
+ line-height: 28px;
+ text-align: center;
background: #FFFFFF;
border-radius: 50%;
}
@@ -105,19 +142,27 @@
.content-row{
border: 1px solid #EDEAF4;
background: #FFFFFF;
+ margin-top: 10px;
padding: 15px 0;
border-radius: 4px;
box-shadow:0 6px 6px rgba(237,234,244,0.5);
}
.detail-item{
width: 25%;
- }
- .detail-icon-box{
- width: 32px;
- height: 32px;
+ margin: 10px 0;
+ text-align: center;
}
.detail-icon{
- width: 32px;
- height: 32px;
+ display: block;
+ width: 26px;
+ height: 26px;
+ margin: 0 auto;
+ }
+ .sticky-footer{
+ margin: 0 -8px;
+ }
+ .btn{
+ width: 100%;
+ margin: 0 8px;
}
</style>
--
Gitblit v1.9.1