会员编辑，新增联调

queenwuli

2020-12-23 ccf6a0bc014d86290efffc55cbea9cf3dc860d56

会员编辑，新增联调

 hive-app/common/styles/index.css

@@ -109,7 +109,7 @@
    color: #a5abaf;
}
.light-gray{
    color: #a7a7a7;
    color: #d8d6d6;
}
.dark-gray{
    color: #3a3f3f;

 hive-app/components/filterDropdown/index.vue

@@ -2,21 +2,26 @@
    <view :class="isShow?'dropdown-wrap-open':'dropdown-wrap-close'">
        <view class="mask" @touchmove.stop.prevent="moveHandle" @click.stop="hide">
            <view v-if="type===1" class="dropdown-wrap-con">
                <view v-for="(item, index) in list" class="flex justify-between">
                    <text :class="index===0?'blue':''">{{item}}</text>
                    <text v-if="index===0" class="iconfont icongouxuan blue font-18"></text>
                <view v-for="(item, index) in list" class="flex justify-between" @click="_changeItem(item, index)">
                    <text :class="selectIndex==index?'blue':''">{{item.title}}</text>
                    <text v-if="selectIndex==index" class="iconfont icongouxuan blue font-18"></text>
                </view>
            </view>
            <view v-else class="all-screen-wrap">
                <view v-for="(item, index) in list" class="all-screen">
                <view v-for="(item, index) in list" class="all-screen" @click.stop="show">
                    <text class="title">{{item.title}}</text>
                    <view>
                        <text v-for="op in item.list" class="name">{{op.title}}</text>
                        <text class="name"
                            v-for="op in item.list" 
                            :class="_handleActiveClass(item, op)"
                            @click="_chooseItem(item, op)">
                            {{op.title}}
                        </text>
                    </view>
                </view>
                <view class="btn-group">
                    <text class="btn">重置</text>
                    <text class="btn btn-blue">完成</text>
                    <text class="btn" @click="_reset">重置</text>
                    <text class="btn btn-blue" @click="_confirm">完成</text>
                </view>
            </view>
        </view>
@@ -31,25 +36,58 @@
            },
            type: {
                default: 1 //0表示全部筛选
            },
            filterKey: {
                default: {}
            }
         },
        data(){
            return {
                isShow: false
                isShow: false,
                selectItem: {},
                selectIndex: 0
            }
        },
        created() {
			
            this.init();
        },
        methods:{
            moveHandle(){
                
            },
            init(){
                this.selectItem = JSON.parse(JSON.stringify(this.filterKey));
            },
            show(){
                this.isShow = true;
            },
            hide(){
                this.isShow = false
            },
            // 普通下拉选择
            _changeItem(item, index){
                this.selectIndex = index;
                this.$emit('confirm', item);
            },
			
            // 处理选项选中/不选中状态class
            _handleActiveClass(item, option){
                return this.selectItem[item.key] == option.value?'active':'';
            },
            // 选中筛选条件
            _chooseItem(item, option){
                if(this.selectItem[item.key] === option.value){
                    this.selectItem[item.key] = ''
                } else {
                    this.selectItem[item.key] = option.value;
                }
            },
            _reset(){
                this.init();
                this.$emit('reset');
            },
            _confirm(){
                this.$emit('confirm', this.selectItem);
            }
        }
      }
@@ -72,7 +110,7 @@
    }
    .dropdown-wrap-con{
        background: #FFFFFF;
        padding: 10px 10px;
        padding: 5px 10px 10px;
        font-size: 14px;
        line-height: 32px;
        color: #999999;
@@ -86,20 +124,25 @@
    .all-screen .title{
        display: block;
        font-size: 14px;
        padding: 10px 0;
        padding: 5px 0 10px;
        color: #666666;
    }
    .all-screen .name{
        font-size: 12px;
        font-size: 10px;
        background: #F2f2f2;
        color: #666666;
        padding: 5px 10px;
        min-width: 56px;
        padding: 5px 0;
        width: 160rpx;
        box-sizing: border-box;
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        border-radius: 2px;
        margin-bottom: 5px;
        margin-bottom: 8px;
    }
    .all-screen .name.active{
        background: #518EFF;
        color: #FFFFFF;
    }
    .btn-group{
        display: flex;

 hive-app/components/searchBar/index.vue

@@ -1,7 +1,7 @@
<template>
    <view class="search-group">
        <text class="iconfont iconsousuo"></text>
        <input class="uni-input" confirm-type="search" :placeholder=placeholder placeholder-class="placeholder" />
        <input class="uni-input" confirm-type="search" @confirm="confirm" :placeholder="placeholder" placeholder-class="placeholder" />
    </view>
</template>

@@ -9,14 +9,20 @@
    export default {
        props:{
            placeholder: {
                default: '输入会员姓名、手机号、编号查询'
                default: '输入会员姓名、手机号、会员编号、拼音'
            }
        },
        data() {
            return {
            };
        },
        methods:{
            confirm(e){
                this.$emit('confirm', e.detail.value);
        }
    }
		
    }
</script>

<style>

 hive-app/pages/member/detail.vue

@@ -2,11 +2,11 @@
    <!-- 会员详情 -->
    <view>
        <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">{{handlePhone(15569216885)}}</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">
@@ -21,21 +21,21 @@
        <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}}</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}}</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}}</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="mt-5">会员信息</text>
                    </navigator>
@@ -97,35 +97,46 @@
    export default{
        data(){
            return{
                isHidePhone: true
                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(){
                uni.makePhoneCall({
                    phoneNumber: '15200889645',
                    success: (res) => {
						
                    },
                    fail: (err) => {
						
                    }
                    phoneNumber: this.memberInfo.phone
                })
            },
            // 发信息
            sendMessage(){
                // #ifdef APP-PLUS
                let msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
                msg.to = ['15200889645'];
                msg.body = 'This is HTML5 Plus example test message';
                msg.to = [this.memberInfo.phone];
                msg.body = '';
                plus.messaging.sendMessage(msg);
                // #endif
            }
            },
        }
    }
</script>
@@ -142,9 +153,9 @@
        border-bottom-right-radius: 20px;
        padding: 0 15px 15px;
    }
    .header-img{
        width: 80px;
        height: 80px;
    .avatar{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .icon-box{

 hive-app/pages/member/editMember.vue

@@ -1,20 +1,24 @@
<template>
    <view class="container">
        <form @submit="add">
        <form @submit="submit" id="list">
            <view class="input-group-row">
                <text class="label">会员姓名<text class="require">*</text></text>
                <input name="account" type="text" value="" placeholder="请填写会员姓名" placeholder-class='placeholder'/>
                <input name="vipName" v-model="formData.vipName" type="text" maxlength="20"  placeholder="请填写会员姓名" placeholder-class='placeholder'/>
            </view>
            <view class="input-group-row">
                <text class="label">会员编号<text class="require">*</text></text>
                <input name="vipNo" v-model="formData.vipNo" type="text" maxlength="10" placeholder="请填写会员编号" placeholder-class='placeholder'/>
            </view>
            <view class="input-group-row">
                <text class="label">手机号码<text class="require">*</text></text>
                <input name="account" type="number" value="" placeholder="请填写手机号码" placeholder-class='placeholder'/>
                <input name="phone" v-model="formData.phone" type="number" maxlength="11" placeholder="请填写手机号码" placeholder-class='placeholder'/>
            </view>
            <view class="input-group-row">
                <text class="label">性别<text class="require">*</text></text>
                <view class="right-text">
                    <radio-group @change="sexChange">
                        <label><radio name="sex" value="1" color="#518EFF"  class="radio" checked/>男</label>
                        <label><radio name="sex" value="2" color="#518EFF" class="radio"/>女</label>
                    <radio-group name="sex">
                        <label><radio value="男" color="#518EFF"  class="radio" :checked="formData.sex==='男'"/>男</label>
                        <label><radio value="女" color="#518EFF" class="radio" :checked="formData.sex==='女'"/>女</label>
                    </radio-group>
                </view>
            </view>
@@ -22,27 +26,26 @@
                <text class="label">生日</text>
                <view class="right-text">
                    <picker mode="date" @change="dateChange" :end="endDate">
                        <view>{{birthday}}</view>
                        <text :class="formData.birthday?'':'gray'">{{formData.birthday?formData.birthday:'请选择生日'}}</text>
                    </picker>
                </view>
            </view>
            <view class="input-group-row">
                <text class="label">省市区</text>
                <view @click="openAddres" class="right-text">
                    <text v-if="regionText">{{regionText}}</text>
                    <text v-else class="gray">请选择省市区</text>
                    <text :class="formData.areas?'':'gray'">{{formData.areas?formData.areas:'请选择省市区'}}</text>
                </view>
            </view>
            <view class="input-group-row">
                <text class="label">详细地址</text>
                <input name="account" type="text" value="" placeholder="请填写详细地址" placeholder-class='placeholder'/>
                <input name="address" v-model="formData.address" type="text" value="" placeholder="请填写详细地址" placeholder-class='placeholder'/>
            </view>
            <view class="input-group-row">
                <text class="label">到店途径</text>
                <view class="right-text">
                    <picker mode="selector" :range="wayList" @change="wayChange">
                    <picker mode="selector" range-key="value" :range="arrivalWayList" @change="wayChange">
                        <view>
                            {{way}}
                            <text :class="formData.arrivalWay?'':'gray'">{{formData.arrivalWay?formData.arrivalWay:'请选择到店途径'}}</text>
                            <text class="iconfont iconjiantouarrow486 gray"></text>
                        </view>
                    </picker>
@@ -51,9 +54,9 @@
            <view class="input-group-row">
                <text class="label">推荐人</text>
                <view class="right-text">
                    <picker mode="selector" :range="referrerList" @change="referrerChange">
                    <picker mode="selector" range-key="vipName" :range="referrerList" @change="referrerChange">
                        <view>
                            {{referrer}}
                            <text :class="recommendName?'':'gray'">{{recommendName?recommendName:'请选择推荐人'}}</text>
                            <text class="iconfont iconjiantouarrow486 gray"></text>
                        </view>
                    </picker>
@@ -61,16 +64,15 @@
            </view>
            <view class="input-group-row">
                <text class="label">备注</text>
                <input name="account" type="text" value="" placeholder="请填写备注" placeholder-class='placeholder'/>
                <input name="remark" v-model="formData.remark" maxlength="60" type="text" placeholder="请填写备注" placeholder-class='placeholder'/>
            </view>
            <view class="input-group-row">
                <text class="label">标签</text>
                <view class="right-text">
                    <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text>
                    <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text>
                    <!-- <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text> -->
                </view>
            </view>
            <button type="submit" class="blue-btn sticky-footer">保存</button>
            <button form-type="submit" :disabled="isDisabled" class="blue-btn sticky-footer">保存</button>
        </form>
        <region ref="simpleAddress" @onConfirm="addressChange" themeColor="#518EFF" cancelColor="#8c9fad"></region>
    </view>
@@ -84,20 +86,36 @@
        },
        data(){
            return {
                birthday: '1990-01-02',
                regionText: '',
                wayList: ['美团','户外广告'],
                way: '美团',
                referrerList: ['张三'],
                referrer: '张三'
                formData: {
                    vipName: '',
                    vipNo: '',
                    phone: '',
                    sex: '女',
                    birthday: '',
                    areas: '',
                    address: '',
                    arrivalWay: '',
                    recommendId: '',
                    remark: '',
                    labels: []
                },
                id: '',
                isDisabled: false,
                arrivalWayList: [],
                referrerList: [],
                recommendName: ''
            }
        },
        onLoad(options) {
            if(options.id){
                this.id = options.id;
                uni.setNavigationBarTitle({
                    title: '编辑会员'
                });
                this.getMemberInfo()
            }
            this.loadArrivalWayList();
            this.loadReferrerList();
        },
        computed: {
            endDate() {
@@ -105,15 +123,48 @@
            }
        },
        methods:{
            add(){
				
            // 加载到店途径列表
            loadArrivalWayList(){
                this.$httpUtils.request('/api/vip/findArrivalWayList').then((res) => {
                    if(res.status == 200){
                        this.arrivalWayList = res.rows;
                    }
                })
            },
            sexChange(e){
                console.log(e)
            // 加载推荐人列表
            loadReferrerList(){
                this.$httpUtils.request('/api/vip/findAllVipInfo').then((res) => {
                    if(res.status == 200){
                        this.referrerList = res.rows;
                        if(this.id){
                            for(var i in this.referrerList){
                                if(this.referrerList[i].id === this.formData.recommendId){
                                    this.recommendName = this.referrerList[i].vipName;
                                    break;
                                }
                            }
                        }
                    }
                })
            },
            // 查询会员详情
            getMemberInfo(){
                this.$httpUtils.request('/api/vip/findVipInfoDetailById/'+this.id).then((res) => {
                    if(res.status == 200){
                        const result = res.mapInfo.vipInfo;
                        const {province, city, area} = result;
                        for(var key in this.formData){
                            this.formData[key] = result[key];
                        }
                        let arr = [province, city, area].filter((item) => {
                            return item
                        })
                        this.formData.areas = arr.join('-')
                    }
                })
            },
            dateChange(e){
                this.birthday = e.detail.value;
                console.log(e)
                this.formData.birthday = e.detail.value;
            },
            getDate(type) {
                const date = new Date();
@@ -132,14 +183,56 @@
                this.$refs.simpleAddress.open();
            },
            addressChange(e){
                this.regionText = e.labelArr.join(' ');
                this.formData.areas = e.labelArr.join('-');
            },
            wayChange(e){
                this.way = this.wayList[e.detail.value];
                this.formData.arrivalWay = this.arrivalWayList[e.detail.value].value;
            },
            referrerChange(e){
                this.referrer = this.referrerList[e.detail.value];
                this.formData.recommendId = this.referrerList[e.detail.value].id;
                this.recommendName = this.referrerList[e.detail.value].vipName;
            },
            valid(){
                const {vipName, vipNo, phone, sex} = this.formData;
                if(!vipName){
                    this.$toast.info('请填写会员姓名');
                    return false;
            }
                if(!vipNo){
                    this.$toast.info('请填写会员编号');
                    return false;
                }
                if(!this.$utils.checkPhone(phone)){
                    this.$toast.info('请填写正确的手机号码');
                    return false;
                }
                if(!sex){
                    this.$toast.info('请选择性别');
                    return false;
                }
            },
            submit(e){
                let url = '';
                if(this.valid() === false){
                    return;
                }
                this.isDisabled = true;
                if(this.id){
                    url = '/api/vip/modifyVip';
                    Object.assign(this.formData, {vipId: this.id})
                } else {
                    url = '/api/vip/addVip';
                }
                this.$httpUtils.request(url, this.formData, 'POST').then((res) => {
                    if(res.status == 200){
                        uni.navigateBack()
                    }
                    this.$toast.info(res.info);
                    this.isDisabled = false;
                }).catch(() => {
                    this.isDisabled = false;
                })
            },
        }
    }
</script>

 hive-app/pages/member/index.vue

@@ -3,33 +3,33 @@
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <search-bar></search-bar>
        <search-bar @confirm="search"></search-bar>
        <view class="sort-wrap">
            <view @click="filterCustom(1)">
                <text>本月到店次数</text>
            <view @click="showFilterCustom(1)">
                <text>{{filterText}}</text>
                <text class="iconfont iconjiantouarrow486 gray"></text>
            </view>
            <view @click="filterCustom(3)">
            <view @click="showFilterCustom(2)">
                <text>筛选</text>
                <text class="iconfont iconshaixuan gray"></text>
            </view>
        </view>
        <filter-dropdown ref="filterDropdownEl" :list="filterList" :type="filterType"></filter-dropdown>
        <view class="flex justify-between" @click="toDetail">
        <filter-dropdown ref="filterDropdownEl" :list="filterList" :filterKey="filterKeys" :type="filterType" @confirm="confirmFilter" @reset="resetFilter"></filter-dropdown>
        <view class="flex justify-between">
            <view class="flex-1 mr-10">
                <view class="member-list flex align-center" v-for="(item, index) in 15">
                    <text class="first-name" :style="{background: caculateBgcolor(index)}">李</text>
                <navigator :url="'./detail?id='+item.id" hover-class="none" class="member-list" v-for="(item, index) in list">
                    <text class="first-name" :style="{background: caculateBgcolor(index)}">{{item.vipName | formatName}}</text>
                    <view class="flex-1 flex align-center justify-between member-list-con">
                        <view>
                            <text>李广</text>
                            <text class="ml-10">152****9645</text>
                        <view class="flex flex-v">
                            <text>{{item.vipName}}</text>
                            <text class="font-13 gray mt-5">{{$utils.encryptAccount(item.phone)}}</text>
                        </view>
                        <view>
                            <text class="blue">30天未到店</text>
                            <text class="iconfont iconarrow-backimg gray"></text>
                            <text class="blue">到店{{item.arriveCnt || 0}}次</text>
                            <text class="iconfont iconarrow-backimg light-gray"></text>
                        </view>
                    </view>
                </view>
                </navigator>
            </view>
            <indexed-list></indexed-list>
        </view>
@@ -56,60 +56,107 @@
                colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
                filterType: 1,
                filterList: [],
                filter1: ['本月到店次数（由低到高）','本月到店次数（由高到低）','本年到店次数（由低到高）','本年到店次数（由高到低）','本月消费（由高到低）','本月消费（由低到高）','本月消耗（由高到低）','本月消耗（由低到高）'],
                filter2: ['7天内卡项到期','15天内卡项到期','30天内卡项到期'],
                filter3: [{
                    title: '到店途径',
                filterText: '首字母排序',
                filter1: [{
                    title: '首字母排序',
                    key: '',
                    value: ''
                },{
                    title: '本月到店次数（由高到低）',
                    key: 'monthArrived',
                    value: 'desc'
                },{
                    title: '本月到店次数（由低到高）',
                    key: 'monthArrived',
                    value: 'asc'
                },{
                    title: '本年到店次数（由高到低）',
                    key: 'yearArrived',
                    value: 'desc'
                },{
                    title: '本年到店次数（由低到高）',
                    key: 'yearArrived',
                    value: 'asc'
                },{
                    title: '本月消费（由高到低）',
                    key: 'used',
                    value: 'desc'
                },{
                    title: '本月消费（由低到高）',
                    key: 'used',
                    value: 'asc'
                },{
                    title: '本月消耗（由高到低）',
                    key: 'consume',
                    value: 'desc'
                },{
                    title: '本月消耗（由低到高）',
                    key: 'consume',
                    value: 'asc'
                },{
                    title: '会员级别（由高到低）',
                    key: 'vipLevel',
                    value: 'desc'
                },{
                    title: '会员级别（由低到高）',
                    key: 'vipLevel',
                    value: 'asc'
                },{
                    title: '上次到店时间（由近到远）',
                    key: 'arriveTime',
                    value: 'desc'
                },{
                    title: '上次到店时间（由远到近）',
                    key: 'arriveTime',
                    value: 'asc'
                }],
                filterKeys: {birthType: '', vipType: '', other: ''},
                filter2: [{
                    title: '生日',
                    key: 'birthType',
                    list: [
                        {
                            'title': '美团预约',
                            'value': ''
                            'title': '三天内生日',
                            'value': 1
                        },
                        {
                            'title': '网络预约',
                            'value': ''
                            'title': '本月生日',
                            'value': 2
                        },
                        {
                            'title': '下月生日',
                            'value': 3
                        }
                    ]
                },
                {
                    title: '会员等级',
                    title: '会员类型',
                    key: 'vipType',
                    list: []
                },
                {
                    title: '其他',
                    key: 'other',
                    list: [
                        {
                            'title': '一级会员',
                            'value': ''
                            'title': '老客户',
                            'value': 1
                        },
                        {
                            'title': '二级会员',
                            'value': ''
                        },
                        {
                            'title': '三级会员',
                            'value': ''
                            'title': '新客户',
                            'value': 2
                        }
                    ]
                },
                {
                    title: '活跃度',
                    list: [
                        {
                            'title': '活跃',
                            'value': ''
                        },
                        {
                            'title': '不活跃',
                            'value': ''
                        },
                        {
                            'title': '睡眠',
                            'value': ''
                        },
                        {
                            'title': '沉睡',
                            'value': ''
                        }
                    ]
                }]
                }],
                queryKey: '',
                sort: '',
                order: '',
                list: []
            };
        },
        onLoad() {
            this.loadMemberType()
            this.loadMemberList()
        },
        onHide(){
            this.$refs.filterDropdownEl.hide();
@@ -118,23 +165,76 @@
            caculateBgcolor(index){
                return this.colors[index%8];
            },
            toDetail(){
                uni.navigateTo({
                    url:'./detail'
                })
            },
            filterCustom(type){
            showFilterCustom(type){
                this.$refs.filterDropdownEl.show();
                if(type===1){
                    this.filterList = this.filter1;
                    this.filterType = 1;
                } else if(type===2){
                    this.filterList = this.filter2;
                    this.filterType = 1;
                } else {
                    this.filterList = this.filter3;
                    this.filterList = this.filter2;
                    this.filterType = 0;
                }
            },
			
            // 搜索
            search(val){
                this.queryKey = val;
                this.loadMemberList();
            },
            // 重置筛选
            resetFilter(){
                this.filterKeys = {birthType: '', vipType: '', other: ''};
                this.loadMemberList();
            },
            // 全部筛选
            confirmFilter(val){
                if(this.filterType == 1){
                    this.sort = val.key;
                    this.order = val.value;
                    this.filterText = val.title;
                } else {
                    this.filterKeys = val;
                }
                this.loadMemberList();
            },
            // 获取会员类型
            loadMemberType(){
                this.$httpUtils.request('/api/vip/findVipType').then((res) => {
                    if(res.status == 200){
                        let result = res.rows.map((item) => {
                            return {
                                title: item.levelName,
                                value: item.id
                            }
                        });
                        this.filter2[1].list = result;
                    }
                })
            },
            loadMemberList(){
                let parma = Object.assign({
                    order: this.order,
                    queryKey: this.queryKey,
                    sort: this.sort
                }, this.filterKeys)
                this.$httpUtils.request('/api/vip/findVipInfoList', parma, 'POST').then((res) => {
                    if(res.status == 200){
                        this.list = res.rows;
                    } else {
                        this.list = [];
                    }
                }).catch((err) => {
                    this.list = [];
                })
            }
        },
        filters:{
            formatName(val){
                if(!val){
                    return '无'
                }
                val = val.trim();
                return val.substr(0, 1)
            }
        }
    }
@@ -167,10 +267,12 @@
        font-size: 16px;
    }
    .member-list{
        display: flex;
        align-items: center;
        font-size: 14px;
    }
    .member-list-con{
        padding: 18px 0 18px 5px;
        padding: 15px 0 15px 5px;
        border-bottom: 1px solid #EDEAF4;
    }
    .quick-entry{
@@ -184,7 +286,6 @@
        border-radius: 50%;
        background: #518EFF;
        color: #FFFFFF;
        box-shadow: 4px 4px 5px #ddd;
    }
    .quick-entry .iconfont{
        font-size: 24px;

 hive-app/pages/workbench/customerInfo.vue

@@ -2,37 +2,37 @@
    <!-- 客户信息 -->
    <view class="container">
        <view class="header">
            <image class="avatar" src="../../static/images/head-img.jpg"></image>
            <text>李某</text>
            <image class="avatar" :src="memberInfo.photo?memberInfo.photo:'../../static/images/default-avatar.png'"></image>
            <text>{{memberInfo.vipName}}</text>
        </view>
        <view>
            <view class="list-row">
                <text class="font-14">手机号码</text>
                <text class="font-14 gray">15569218888</text>
                <text class="font-14 gray">{{memberInfo.phone}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">会员级别</text>
                <text class="font-14 gray">普通会员</text>
                <text class="font-14 gray">{{memberInfo.vipLevel || '-'}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">卡号</text>
                <text class="font-14 gray">Q232</text>
                <text class="font-14">会员编号</text>
                <text class="font-14 gray">{{memberInfo.vipNo}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">总余额</text>
                <text class="font-14 gray">￥2,323</text>
                <text class="font-14 gray">￥{{memberInfo.totalBalance}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">赠送余额</text>
                <text class="font-14 gray">￥1,323</text>
                <text class="font-14 gray">￥{{memberInfo.giftBalance}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">剩余积分</text>
                <text class="font-14 gray">123</text>
                <text class="font-14 gray">{{memberInfo.integral}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">所属门店</text>
                <text class="font-14 gray">东莞店</text>
                <text class="font-14 gray">{{memberInfo.shopName}}</text>
            </view>
        </view>
        <navigator :url="url">
@@ -45,7 +45,8 @@
    export default{
        data(){
            return{
                url: './selectProduct/index',
                memberInfo: {},
                url: './selectProduct/index'
            }
        },
        onLoad(options) {
@@ -54,9 +55,16 @@
            } else {
                this.url = './selectService';
            }
            this.loadMemberInfo(options.id);
        },
        methods:{
			
            loadMemberInfo(id){
                this.$httpUtils.request('/api/vip/findVipInfoById/'+id).then((res) => {
                    if(res.status == 200){
                        this.memberInfo = res.mapInfo.vipInfo;
                    }
                })
            }
        }
    }
</script>

 hive-app/pages/workbench/selectCustomer.vue

@@ -1,22 +1,25 @@
<template>
    <view class="container">
        <search-bar placeholder="客户姓名、手机、卡号、拼音"></search-bar>
        <search-bar @confirm="search"></search-bar>
        <view class="flex justify-between">
            <navigator :url="'./customerInfo?type='+type" hover-class="none"  class="flex-1 mr-10">
                <view class="member-list flex align-center" v-for="(item, index) in 15">
                    <text class="first-name" :style="{background: caculateBgcolor(index)}">李</text>
            <view class="flex-1 mr-10">
                <navigator class="member-list flex align-center" 
                    :url="'./customerInfo?type='+type+'&id='+item.id" 
                    hover-class="none"
                    v-for="(item, index) in list">
                    <text class="first-name" :style="{background: caculateBgcolor(index)}">{{item.vipName | formatName}}</text>
                    <view class="flex-1 flex align-center justify-between member-list-con">
                        <view>
                            <text>李广</text>
                            <text class="ml-10">152****9645</text>
                        <view class="flex flex-v">
                            <text>{{item.vipName}}</text>
                            <text class="font-13 gray mt-5">{{$utils.encryptAccount(item.phone)}}</text>
                        </view>
                        <view>
                            <text class="blue">东莞店</text>
                            <text class="iconfont iconarrow-backimg gray"></text>
                        </view>
                            <text class="blue">{{item.shopName}}</text>
                            <text class="iconfont iconarrow-backimg light-gray"></text>
                    </view>
                </view>
            </navigator>
            </view>
            <indexed-list></indexed-list>
        </view>
    </view>
@@ -33,18 +36,46 @@
        data() {
            return {
                type: 1 ,//1新建订单 2新建服务单
                colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4']
                colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
                queryKey: '',
                list: []
            };
        },
        onLoad(options) {
            if(options.type){
                this.type = options.type;
            }
            this.loadMemberList()
        },
        methods:{
            caculateBgcolor(index){
                return this.colors[index%8];
            },
            search(val){
                this.queryKey = val;
                this.loadMemberList();
            },
            loadMemberList(){
                let parma = Object.assign({
                    order: this.order,
                    queryKey: this.queryKey,
                    sort: this.sort
                }, this.filterKeys)
                this.$httpUtils.request('/api/vip/findVipInfoList', parma, 'POST').then((res) => {
                    if(res.status == 200){
                        this.list = res.rows;
                    }
                })
            }
        },
        filters:{
            formatName(val){
                if(!val){
                    return '无'
                }
                val = val.trim();
                return val.substr(0, 1)
            }
        }
    }
</script>
@@ -78,7 +109,7 @@
        font-size: 14px;
    }
    .member-list-con{
        padding: 18px 0 18px 5px;
        padding: 15px 0 15px 5px;
        border-bottom: 1px solid #EDEAF4;
    }
    .quick-entry{

 hive-app/static/images/no-data.png