<template>
|
<!-- 会员详情 -->
|
<view>
|
<view class="header flex flex-v align-center">
|
<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" @click="sendMessage(memberInfo.phone)">
|
<text class="icon iconfont iconxinxiduanxinsixinduihua blue"></text>
|
</view>
|
</view>
|
</view>
|
<view class="content">
|
<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="center">
|
<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">{{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" v-if="$utils.hasPermission('hyxx')">
|
<navigator :url="'./editMember?id='+id" hover-class="none" >
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image>
|
<text class="mt-5">会员信息</text>
|
</navigator>
|
</view>
|
<view class="detail-item" v-if="$utils.hasPermission('tcxm')">
|
<navigator :url="'./projectPlan?id='+id+'&vipName='+memberInfo.vipName" 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" v-if="$utils.hasPermission('kaxiang')">
|
<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" v-if="$utils.hasPermission('pfjc')">
|
<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" v-if="$utils.hasPermission('xfjl')">
|
<navigator :url="'../workbench/orderList?queryKey='+memberInfo.phone" hover-class="none" >
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
|
<text class="mt-5">订单记录</text>
|
</navigator>
|
</view>
|
<view class="detail-item" v-if="$utils.hasPermission('fwjl')">
|
<navigator :url="'../workbench/serviceOrderList?queryKey='+memberInfo.phone" hover-class="none" >
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail6.png"></image>
|
<text class="mt-5">服务单记录</text>
|
</navigator>
|
</view>
|
<view class="detail-item" v-if="$utils.hasPermission('gjjl')">
|
<navigator :url="'../workbench/followRecords/index?selectInfo='+JSON.stringify(selectInfo)" hover-class="none" >
|
<image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image>
|
<text class="mt-5">跟进记录</text>
|
</navigator>
|
</view>
|
<view class="detail-item" v-if="$utils.hasPermission('hyda')">
|
<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" v-if="$utils.hasPermission('ddgl.add')">
|
<button class="white-btn">开单</button>
|
</navigator>
|
<navigator :url="'../workbench/selectService/index?id='+id+'&vipName='+memberInfo.vipName" class="btn" v-if="$utils.hasPermission('fwdgl.add')">
|
<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()
|
},
|
computed:{
|
selectInfo(){
|
return {
|
vipName: this.memberInfo.vipName,
|
photo: this.memberInfo.photo,
|
id: this.id
|
}
|
}
|
},
|
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>
|
.status_bar{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
.header{
|
background: #518EFF;
|
color: #FFFFFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 0 15px 15px;
|
}
|
.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%;
|
}
|
.icon{
|
font-size: 18px;
|
}
|
.content{
|
padding: 0 10px;
|
}
|
.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;
|
font-size: 12px;
|
}
|
.detail-icon{
|
display: block;
|
width: 24px;
|
height: 24px;
|
margin: 0 auto 5px;
|
}
|
.sticky-footer{
|
margin: 0 -8px;
|
}
|
.btn{
|
width: 100%;
|
margin: 0 8px;
|
}
|
</style>
|
