li-guang
2021-01-05 01b55d7e82c3b13554a412e9c5be0fc96a4906a3
hive-app/pages/member/detail.vue
@@ -1,22 +1,19 @@
<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 mt-5">333</text>
         <text class="font-14 mt-5">会员编号: 101010</text>
         <image class="avatar" :src="memberInfo.photo?memberInfo.photo:'../../static/images/default-avatar.png'"></image>
         <text class="font-18 mt-5">{{memberInfo.vipName}}</text>
         <text class="font-14 mt-5">会员编号: {{memberInfo.vipNo}}</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>
            <text class="font-12 mr-10">{{handlePhone(memberInfo.phone)}}</text>
            <text class="icon iconfont" :class="isHidePhone?'iconyanjing':'iconyanjing1'" @click="isHidePhone=!isHidePhone"></text>
         </view>   
         <view class="flex mt-10">
            <view class="icon-box mr-20">
            <view class="icon-box mr-20" @click="call(memberInfo.phone)">
               <text class="icon iconfont icondianhua blue"></text>
            </view>
            <view class="icon-box">
            <view class="icon-box" @click="sendMessage(memberInfo.phone)">
               <text class="icon iconfont iconxinxiduanxinsixinduihua blue"></text>
            </view>
         </view>
@@ -24,70 +21,72 @@
      <view class="content">
         <view class="content-row flex justify-around">
            <view class="center">
               <text class="font-18 red">600.00</text>
               <text class="font-18 red">{{memberInfo.totalBalance | formatNum}}</text>
               <text class="font-14 mt-10 block">余额</text>
            </view>
            <view class="center">
               <text class="font-18 green">600.00</text>
               <text class="font-18 green">{{memberInfo.giftBalance | formatNum}}</text>
               <text class="font-14 mt-10 block">赠送余额</text>
            </view>
            <view class="center">
               <text class="font-18 blue">600.00</text>
               <text class="font-18 blue">{{memberInfo.totalShopping | formatNum}}</text>
               <text class="font-14 mt-10 block">累计消费</text>
            </view>
         </view>
         <view class="content-row flex flex-wrap">
            <view class="detail-item">
               <navigator url="./editMember" hover-class="none" >
               <navigator :url="'./editMember?id='+id" hover-class="none" >
                  <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image>
                  <text class="font-14 mt-5">会员信息</text>
                  <text class="mt-5">会员信息</text>
               </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>
               <navigator :url="'./projectPlan?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail2.png"></image>
                  <text class="font-14 mt-5">项目/套餐</text>
               </navigator>
            </view>
            <view class="detail-item">
               <navigator url="./membershipCard" hover-class="none" >
               <navigator :url="'./membershipCard?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail3.png"></image>                  
                  <text class="font-14 mt-5">卡项</text>
                  <text class="mt-5">卡项</text>
               </navigator>
            </view>
            <view class="detail-item">
               <navigator url="./skinDetection" hover-class="none" >
               <navigator :url="'./skinDetection?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail4.png"></image>
                  <text class="font-14 mt-5">皮肤检测</text>
                  <text class="mt-5">皮肤检测</text>
               </navigator>
            </view>
            <view class="detail-item">
               <navigator url="../workbench/orderList" hover-class="none" >
                  <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
                  <text class="font-14 mt-5">订单记录</text>
                  <text class="mt-5">订单记录</text>
               </navigator>
            </view>
            <view class="detail-item">
               <navigator url="../workbench/serviceOrderList" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail6.png"></image>
                  <text class="font-14 mt-5">服务单记录</text>
                  <text class="mt-5">服务单记录</text>
               </navigator>
            </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>
               <text class="mt-5">跟进记录</text>
            </view>
            <view class="detail-item">
               <navigator url="" hover-class="none" >
               <navigator :url="'./memberProfile?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail3.png"></image>                  
                  <text class="font-14 mt-5">会员档案</text>
                  <text class="mt-5">会员档案</text>
               </navigator>
            </view>
         </view>
      </view>
      <view class="sticky-footer flex justify-between">
         <navigator url="../workbench/selectProduct/index" class="btn">
         <navigator :url="'../workbench/selectProduct/index?id='+id+'&vipName='+memberInfo.vipName" class="btn">
            <button class="white-btn">开单</button>
         </navigator>
         <navigator url="../workbench/selectService/index" class="btn">
         <navigator :url="'../workbench/selectService/index?id='+id+'&vipName='+memberInfo.vipName" class="btn">
            <button class="blue-btn">预约</button>
         </navigator>
      </view>
@@ -98,20 +97,46 @@
   export default{
      data(){
         return{
            eye:false
            isHidePhone: true,
            id: '',
            memberInfo: {}
         }
      },
      onLoad(options) {
         this.id = options.id;
      },
      onShow() {
         this.loadMemberInfo()
      },
      methods:{
         encryptAccount(val) {
             if (/^1[3456789]\d{9}$/.test(val)) {
               return String(val).substr(0, 3) + '****' + String(val).substr(7);
             } else {
               return val;
             }
         loadMemberInfo(){
            this.$httpUtils.request('/api/vip/findVipInfoById/'+this.id).then((res) => {
               if(res.status == 200){
                  this.memberInfo = res.mapInfo.vipInfo;
               }
            })
         },
         eyeSwitch(){
            this.eye=!this.eye
         }
         handlePhone(val){
            if(this.isHidePhone){
               return this.$utils.encryptAccount(val);
            }
            return val;
         },
         // 打电话
         call(val){
            // #ifdef APP-PLUS
            plus.device.dial(val, false);
            // #endif
         },
         // 发信息
         sendMessage(val){
            // #ifdef APP-PLUS
            let msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
            msg.to = [val];
            msg.body = '';
            plus.messaging.sendMessage(msg);
            // #endif
         },
      }
   }
</script>
@@ -126,11 +151,11 @@
      color: #FFFFFF;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      padding: 15px;
      padding: 0 15px 15px;
   }
   .header-img{
      width: 80px;
      height: 80px;
   .avatar{
      width: 60px;
      height: 60px;
      border-radius: 50%;
   }
   .icon-box{
@@ -159,12 +184,13 @@
      width: 25%;
      margin: 10px 0;
      text-align: center;
      font-size: 12px;
   }
   .detail-icon{
      display: block;
      width: 26px;
      height: 26px;
      margin: 0 auto;
      width: 24px;
      height: 24px;
      margin: 0 auto 5px;
   }
   .sticky-footer{
      margin: 0 -8px;