| | |
| | | <!-- #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-18 mt-5">333</text> |
| | | <text class="font-14 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> |
| | | <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 align-center mt-10"> |
| | | <view class="icon-box flex justify-center align-center mr-20"> |
| | | <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> |
| | | </navigator> |
| | | </view> |
| | | <view class="detail-item flex flex-v align-center justify-center"> |
| | | <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 flex flex-v align-center justify-center"> |
| | | <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 class="detail-item flex flex-v align-center justify-center"> |
| | | <view class="detail-item"> |
| | | <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"> |
| | | <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 flex flex-v align-center justify-center"> |
| | | <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 flex flex-v align-center justify-center"> |
| | | <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> |
| | | </view> |
| | | </view> |
| | | <view class="flex content-btn justify-around"> |
| | | <view class="sticky-footer flex justify-between"> |
| | | <button class="white-btn btn">开单</button> |
| | | <button class="blue-btn btn">预约</button> |
| | | </view> |
| | |
| | | } |
| | | .header{ |
| | | background: #518EFF; |
| | | color: #FFFFFF; |
| | | border-bottom-left-radius: 20px; |
| | | border-bottom-right-radius: 20px; |
| | | padding: 15px; |
| | |
| | | .icon-box{ |
| | | width: 28px; |
| | | height: 28px; |
| | | line-height: 28px; |
| | | text-align: center; |
| | | background: #FFFFFF; |
| | | border-radius: 50%; |
| | | } |
| | |
| | | .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%; |
| | | margin: 10px 0; |
| | | text-align: center; |
| | | } |
| | | .detail-icon{ |
| | | width: 28px; |
| | | height: 28px; |
| | | display: block; |
| | | width: 26px; |
| | | height: 26px; |
| | | margin: 0 auto; |
| | | } |
| | | .content-btn{ |
| | | position: absolute; |
| | | bottom: 15px; |
| | | width: 100%; |
| | | .sticky-footer{ |
| | | margin: 0 -8px; |
| | | } |
| | | .btn{ |
| | | width: 45%; |
| | | width: 100%; |
| | | margin: 0 8px; |
| | | } |
| | | </style> |