Merge branch 'master' of https://gitee.com/jyyforjava/hive-app

li-guang

2021-01-05 01b55d7e82c3b13554a412e9c5be0fc96a4906a3

 hive-app/pages/member/detail.vue

@@ -1,77 +1,144 @@
<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>
         <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">
         <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">{{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" @click="call(memberInfo.phone)">
               <text class="icon iconfont icondianhua blue"></text>
            </view>
            <view class="icon-box flex justify-center align-center">
            <view class="icon-box" @click="sendMessage(memberInfo.phone)">
               <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 class="content-row flex justify-around">
            <view class="center">
               <text class="font-18 red">{{memberInfo.totalBalance | formatNum}}</text>
               <text class="font-14 mt-10 block">余额</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 class="center">
               <text class="font-18 green">{{memberInfo.giftBalance | formatNum}}</text>
               <text class="font-14 mt-10 block">赠送余额</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 class="center">
               <text class="font-18 blue">{{memberInfo.totalShopping | formatNum}}</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?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>
               </view>
               <view class="detail-item flex flex-v align-center justify-center">
                  <text class="mt-5">会员信息</text>
               </navigator>
            </view>
            <view class="detail-item">
               <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>
               </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>
               </navigator>
            </view>
            <view class="flex justify-start mt-20">
               <view class="detail-item flex flex-v align-center justify-center">
            <view class="detail-item">
               <navigator :url="'./membershipCard?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail3.png"></image>						
                  <text class="mt-5">卡项</text>
               </navigator>
            </view>
            <view class="detail-item">
               <navigator :url="'./skinDetection?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail4.png"></image>
                  <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>
               </view>
               <view class="detail-item flex flex-v align-center justify-center">
                  <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>
               </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>
                  <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="mt-5">跟进记录</text>
            </view>
            <view class="detail-item">
               <navigator :url="'./memberProfile?id='+id" hover-class="none" >
                  <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail3.png"></image>						
                  <text class="mt-5">会员档案</text>
               </navigator>
            </view>
         </view>
      </view>
      <view class="sticky-footer flex justify-between">
         <navigator :url="'../workbench/selectProduct/index?id='+id+'&vipName='+memberInfo.vipName" class="btn">
            <button class="white-btn">开单</button>
         </navigator>
         <navigator :url="'../workbench/selectService/index?id='+id+'&vipName='+memberInfo.vipName" class="btn">
            <button class="blue-btn">预约</button>
         </navigator>
      </view>
   </view>
</template>

<script>
   export default{
      data(){
         return{
            isHidePhone: true,
            id: '',
            memberInfo: {}
         }
      },
      onLoad(options) {
         this.id = options.id;
      },
      onShow() {
         this.loadMemberInfo()
      },
      methods:{
         loadMemberInfo(){
            this.$httpUtils.request('/api/vip/findVipInfoById/'+this.id).then((res) => {
               if(res.status == 200){
                  this.memberInfo = res.mapInfo.vipInfo;
               }
            })
         },
         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>

<style>
@@ -81,18 +148,21 @@
   }
   .header{
      background: #518EFF;
      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{
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: #FFFFFF;
      border-radius: 50%;
   }
@@ -105,19 +175,28 @@
   .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;
      font-size: 12px;
   }
   .detail-icon{
      width: 32px;
      height: 32px;
      display: block;
      width: 24px;
      height: 24px;
      margin: 0 auto 5px;
   }
   .sticky-footer{
      margin: 0 -8px;
   }
   .btn{
      width: 100%;
      margin: 0 8px;
   }
</style>