<template>
|
<!-- 会员详情 -->
|
<view>
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #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>
|
<view class="flex align-center mt-5">
|
<text class="font-12 white mr-10">{{this.eye==false?encryptAccount(15569216885):'15569216885'}}</text>
|
<text class="icon iconfont white" :class="this.eye==false?'iconyanjing':'iconyanjing1'" @click="eyeSwitch"></text>
|
</view>
|
<view class="flex align-center mt-10">
|
<view class="icon-box flex justify-center align-center mr-20">
|
<text class="icon iconfont icondianhua blue"></text>
|
</view>
|
<view class="icon-box flex justify-center align-center">
|
<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">
|
<text class="font-18 red">600.00</text>
|
<text class="font-14 mt-10">余额</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 green">600.00</text>
|
<text class="font-14 mt-10">赠送余额</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 blue">600.00</text>
|
<text class="font-14 mt-10">累计消费</text>
|
</view>
|
</view>
|
<view class="content-row mt-10">
|
<view class="flex">
|
<view class="detail-item flex flex-v align-center justify-center">
|
<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">
|
<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>
|
</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>
|
</view>
|
</view>
|
<view class="flex content-btn justify-around">
|
<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>
|
.status_bar{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
.header{
|
background: #518EFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 15px;
|
}
|
.header-img{
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
}
|
.icon-box{
|
width: 28px;
|
height: 28px;
|
background: #FFFFFF;
|
border-radius: 50%;
|
}
|
.icon{
|
font-size: 18px;
|
}
|
.content{
|
padding: 0 10px;
|
}
|
.content-row{
|
border: 1px solid #EDEAF4;
|
background: #FFFFFF;
|
padding: 15px 0;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.detail-item{
|
width: 25%;
|
}
|
.detail-icon{
|
width: 28px;
|
height: 28px;
|
}
|
.content-btn{
|
position: absolute;
|
bottom: 15px;
|
width: 100%;
|
}
|
.btn{
|
width: 45%;
|
}
|
</style>
|
