v3.5.26

config/dev.js

@@ -3,14 +3,14 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    HOST: '"https://dev.fangdeal.cn"',//测试
+    HOST: '"https://dev.fangdeal.cn"', //测试
     WSS_HOST: '"wss://dev.fangdeal.cn"',
     // HOST: '"http://192.168.2.43:8080"',
     // WSS_HOST: '"ws://192.168.2.43:8080"',
-    OSS_PATH: 'https://njcj.oss-cn-shanghai.aliyuncs.com/',
-    OSS_FAST_PATH: 'https://njcj.oss-accelerate.aliyuncs.com/',
-    Version: 'V3.5.24'
+    OSS_PATH: "https://njcj.oss-cn-shanghai.aliyuncs.com/",
+    OSS_FAST_PATH: "https://njcj.oss-accelerate.aliyuncs.com/",
+    Version: "V3.5.26"
   },
   weapp: {},
   h5: {}
-}
+};

config/prod.js

@@ -3,14 +3,14 @@ module.exports = {
     NODE_ENV: '"production"'
   },
   defineConstants: {
-    // HOST: '"https://dev.fangdeal.cn"',//测试
+    // HOST: '"https://dev.fangdeal.cn"', //测试
     // WSS_HOST: '"wss://dev.fangdeal.cn"',
-    HOST: '"https://wx.fangdeal.cn"',//正式
+    HOST: '"https://wx.fangdeal.cn"', //正式
     WSS_HOST: '"wss://wx.fangdeal.cn"',
-    OSS_PATH: 'https://njcj.oss-cn-shanghai.aliyuncs.com/',
-    OSS_FAST_PATH: 'https://njcj.oss-accelerate.aliyuncs.com/',
-    Version: 'V3.5.24'
+    OSS_PATH: "https://njcj.oss-cn-shanghai.aliyuncs.com/",
+    OSS_FAST_PATH: "https://njcj.oss-accelerate.aliyuncs.com/",
+    Version: "V3.5.26"
   },
   weapp: {},
   h5: {}
-}
+};

src/app.scss

@@ -61,4 +61,10 @@
 }
 .wxParse-inline {
   line-height: 50px;
-}
+}
+
+.water-mask-box {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

src/components/PhoneMask/index.jsx

@@ -0,0 +1,15 @@
+import Taro, { useState } from '@tarojs/taro';
+import { maskPhone } from '@/utils/tools';
+
+export default function PhoneMask(props) {
+  const { phone, disable = false } = props
+  const [mask, setMask] = useState(true);
+
+  const toggle = () => setMask(!mask);
+  const text = mask ? maskPhone(phone || '') : phone;
+
+  return (
+    <Text>{text}</Text>
+  )
+}
+

src/components/WaterMask/index.jsx

@@ -0,0 +1,45 @@
+import Taro from '@tarojs/taro';
+import classNames from 'classnames';
+import { View, Text } from '@tarojs/components';
+import { times } from '@/utils/tools';
+
+import './style.scss';
+
+export default function WaterMask(props) {
+  const {
+    className,
+    style,
+    text,
+    textClassName,
+    image,
+    imageClassName,
+    repeat = 3,
+  } = props;
+
+  const mainClass = classNames('water-mask', className);
+  const textClass = classNames('water-mask-text', textClassName);
+
+  return (
+    <View
+      className={mainClass}
+      style={style}
+    >
+      {text ? (
+        <View className={textClass}>
+          {times(repeat).map((_, inx) => {
+            const key = `wt-${inx}`
+            return (
+              <View className="water-mask-text-item" key={key}>
+                <View className="aspect-ratio" />
+                <View className="inner-container">{text}</View>
+              </View>
+            )
+          })}
+        </View>) : null}
+    </View>
+  )
+}
+
+WaterMask.options = {
+  addGlobalClass: true
+}

src/components/WaterMask/style.scss

@@ -0,0 +1,36 @@
+
+.water-mask {
+  z-index: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  &-text {
+    color: rgba($color: #000000, $alpha: 0.08);
+    font-size: 36rpx;
+    text-align: center;
+
+    &-item {
+      display: inline-block;
+      position: relative;
+      min-width: 25%;
+      line-height: 1.2em;
+      transform:rotate(300deg);
+      transform-origin: 100% 0%;
+
+      .aspect-ratio {
+        width: 100%;
+        height: 0;
+        padding-bottom: 100%;
+      }
+
+      .inner-container {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+  }
+}

src/useless/pages/agent/client/index.js

@@ -1,106 +1,115 @@
-import Taro, { Component } from '@tarojs/taro';
-import './index.scss'
-import { getClientList } from '@/services/client'
-import { getItemList } from '@/services/item'
-import emptyImg from '@/assets/empty.png'
-import dayjs from 'dayjs'
-import { savePoint, updatePoint } from '@/services/common'
-import { connect } from '@tarojs/redux'
-import { transferImage } from '@/utils/tools'
-@connect(
-  state => ({ ...state.project, ...state.city }))
-export default class Index extends Component {
+import Taro, { Component } from "@tarojs/taro";
+import "./index.scss";
+import { getClientList } from "@/services/client";
+import { getItemList } from "@/services/item";
+import emptyImg from "@/assets/empty.png";
+import dayjs from "dayjs";
+import { savePoint, updatePoint } from "@/services/common";
+import { connect } from "@tarojs/redux";
+import { transferImage, maskPhone } from "@/utils/tools";
+import WaterMask from "@/components/WaterMask";
 
+@connect(state => ({ ...state.project, ...state.city, ...state.user }))
+export default class Index extends Component {
   config = {
-    navigationBarTitleText: '我的客户'
-  }
+    navigationBarTitleText: "我的客户"
+  };
 
   state = {
     list: [],
-    status: ['报备', '到访', '认购', '签约'],//报备客户状态
-    recomstatus: ['推荐', '到访', '认购', '签约'],//推荐客户状态
-    verifyStatus: ['待审核', '审核同意', '未通过'],
-    floorList: '',
-    floor: '',
+    status: ["报备", "到访", "认购", "签约"], //报备客户状态
+    recomstatus: ["推荐", "到访", "认购", "签约"], //推荐客户状态
+    verifyStatus: ["待审核", "审核同意", "未通过"],
+    floorList: "",
+    floor: "",
     recordId: null,
-    noRecord: false,
-  }
+    noRecord: false
+  };
   componentWillMount() {
     savePoint({
-      event: 'list',
-      eventType: 'agent',
-      propertyName: '我的客户',
-      data: '{}'
+      event: "list",
+      eventType: "agent",
+      propertyName: "我的客户",
+      data: "{}"
     }).then(res => {
       this.setState({
         recordId: res.recordId
-      })
-      console.log('我的客户')
-    })
+      });
+      console.log("我的客户");
+    });
   }
 
-
   componentWillUnmount() {
-    const { recordId } = this.state
-    recordId && updatePoint(recordId)
+    const { recordId } = this.state;
+    recordId && updatePoint(recordId);
   }
   componentDidMount() {
-    this.loadList()
+    this.loadList();
   }
   //获取楼盘列表
   loadGetFloor() {
     const params = {
       pageNumber: 1,
       pageSize: 50,
-      keywords: ''
-    }
+      keywords: ""
+    };
     getItemList(params).then(res => {
       this.setState({
         floorList: res
-      })
-    })
+      });
+    });
   }
   loadList() {
     var that = this;
     const params = {
       pageNumber: 1,
       pageSize: 50,
-      keywords: ''
-    }
-    this.loadGetFloor()
+      keywords: ""
+    };
+    this.loadGetFloor();
     getClientList(params).then(res => {
-      const list = res.records
-      that.setState({
-        list,
-        noRecord: (list || []).length ? false : true
-      }, () => {
-      })
-    })
+      const list = res.records;
+      that.setState(
+        {
+          list,
+          noRecord: (list || []).length ? false : true
+        },
+        () => {}
+      );
+    });
   }
 
   formatDate(value) {
-    return dayjs(value).format('YYYY-MM-DD')
+    return dayjs(value).format("YYYY-MM-DD");
   }
   navigateTo(id) {
-    Taro.navigateTo({ url: `/useless/pages/agent/progress/index?customerId=${id}` })
+    Taro.navigateTo({
+      url: `/useless/pages/agent/progress/index?customerId=${id}`
+    });
   }
   getName(dict, id) {
-    dict = dict.records || []
+    dict = dict.records || [];
     // let floorName = (dict.filter(({ buildingId: target }) => id === target)[0] || {}).name
-    return (dict.filter(({ buildingId: target }) => id === target)[0] || {}).buildingName
-
+    return (dict.filter(({ buildingId: target }) => id === target)[0] || {})
+      .buildingName;
   }
 
   toRecomonedPage() {
-    console.log(this.props, "this.props")
+    console.log(this.props, "this.props");
     Taro.navigateTo({
-      url: `/useless/pages/agent/recommend/index?type=index&cityId=` + this.props.curCity.id
-    })
+      url:
+        `/useless/pages/agent/recommend/index?type=index&cityId=` +
+        this.props.curCity.id
+    });
   }
   render() {
-    const { list, status, floorList, noRecord } = this.state
+    const { list, status, floorList, noRecord } = this.state;
+    const { userInfo } = this.props;
+    const { person = {} } = userInfo || {};
+    const waterText = person.nickname;
+
     return (
-      <View className='myClient'>
+      <View className="myClient">
         {/* <View className='search__box'>
           <Search placeholder='搜索客户姓名/手机号'></Search>
         </View> */}
@@ -108,14 +117,18 @@ export default class Index extends Component {
         {/*<View className='client__status'>
              <Text>{status[item.status - 1]}</Text>
           </View>*/}
-        {noRecord &&
+        {noRecord && (
           <View className="empty">
-            <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
+            <Image
+              className="empty__img"
+              mode="widthFix"
+              src={emptyImg}
+            ></Image>
             <View className="empty__text">暂无我的客户数据~</View>
           </View>
-        }
-        {!noRecord &&
-          <View className='client__content'>
+        )}
+        {!noRecord && (
+          <View className="client__content">
             <ScrollView
               scrollY
               scroll-with-animation
@@ -123,48 +136,83 @@ export default class Index extends Component {
               className="list"
               style={{
                 height: "100vh"
-              }}>
-              {
-                list.map((item, index) => {
-                  return (
-                    <View className='client__list' key={index + 'client'} onClick={this.navigateTo.bind(this, item.customerId)}>
-                      <Image className='bg' src={item.verifyStatus == 2 ? transferImage(require('@/assets/person/card1.png')) : transferImage(require('@/assets/person/card2.png'))}></Image>
-                      <View className='client'>
-                        <View className='client__status2'>
-                          {
-                            //报备1 ，推荐2
-                            item.reportRecommendStatus == 1 ? (<Text>{status[item.status - 1]}</Text>) : (<Text>{item.verifyStatus == 1 ? recomstatus[item.status - 1] : verifyStatus[item.verifyStatus]}</Text>)
-                          }
-                          {/* <Text>{item.verifyStatus==1?status[item.status-1]:verifyStatus[item.verifyStatus]}</Text> */}
-                        </View>
-                        <View className='client__top'>
-                          <View className='client__infor'>
-                            <Text className='client__name'>{item.name} </Text>
-                            <Image className='sex' src={item.sex == 1 ? require('@/assets/person/guest/man.png') : require('@/assets/person/guest/women.png')} mode='widthFix'></Image>
-                          </View>
+              }}
+            >
+              {list.map((item, index) => {
+                return (
+                  <View
+                    className="client__list"
+                    key={index + "client"}
+                    onClick={this.navigateTo.bind(this, item.customerId)}
+                  >
+                    <Image
+                      className="bg"
+                      src={
+                        item.verifyStatus == 2
+                          ? transferImage(require("@/assets/person/card1.png"))
+                          : transferImage(require("@/assets/person/card2.png"))
+                      }
+                    ></Image>
 
+                    <View className="water-mask-box">
+                      <WaterMask text={waterText} />
+                    </View>
 
+                    <View className="client">
+                      <View className="client__status2">
+                        {//报备1 ，推荐2
+                        item.reportRecommendStatus == 1 ? (
+                          <Text>{status[item.status - 1]}</Text>
+                        ) : (
+                          <Text>
+                            {item.verifyStatus == 1
+                              ? recomstatus[item.status - 1]
+                              : verifyStatus[item.verifyStatus]}
+                          </Text>
+                        )}
+                        {/* <Text>{item.verifyStatus==1?status[item.status-1]:verifyStatus[item.verifyStatus]}</Text> */}
+                      </View>
+                      <View className="client__top">
+                        <View className="client__infor">
+                          <Text className="client__name">{item.name} </Text>
+                          <Image
+                            className="sex"
+                            src={
+                              item.sex == 1
+                                ? require("@/assets/person/guest/man.png")
+                                : require("@/assets/person/guest/women.png")
+                            }
+                            mode="widthFix"
+                          ></Image>
                         </View>
+                      </View>
 
-                        <View className='phone'>手机: {item.phone}</View>
-                        <View className='phone'>意向楼盘: {item.intention ? item.intention : '暂无'}</View>
-
+                      <View className="phone">
+                        手机: {maskPhone(item.phone)}
+                      </View>
+                      <View className="phone">
+                        意向楼盘: {item.intention ? item.intention : "暂无"}
                       </View>
-                      <View className='time'>{dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</View>
                     </View>
-                  )
-                })
-              }
+                    <View className="time">
+                      {dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")}
+                    </View>
+                  </View>
+                );
+              })}
             </ScrollView>
           </View>
-        }
+        )}
 
         {/* <View className='recommend' onClick={this.toRecomonedPage}>123</View> */}
-        <View className="recommend" onClick={this.toRecomonedPage}  >
-          <Image src={transferImage(require('@/assets/tuijiankehu.png'))} className='home-img'></Image>
+        <View className="recommend" onClick={this.toRecomonedPage}>
+          <Image
+            src={transferImage(require("@/assets/tuijiankehu.png"))}
+            className="home-img"
+          ></Image>
           <Text className="text">推荐</Text>
         </View>
       </View>
     );
   }
-}
+}

src/useless/pages/agent/progress/index.js

@@ -1,68 +1,74 @@
-import Taro, { Component } from '@tarojs/taro';
-import './index.scss'
-import buildImg from '@/assets/agent/build.png'
-import phoneImg from '@/assets/agent/Iphone.png'
-import { clientProgress } from '@/services/client'
-import { getItemList } from '@/services/item'
-import { getCardList } from '@/services/card'
-import { savePoint, updatePoint } from '@/services/common'
+import Taro, { Component } from "@tarojs/taro";
+import "./index.scss";
+import buildImg from "@/assets/agent/build.png";
+import phoneImg from "@/assets/agent/Iphone.png";
+import { clientProgress } from "@/services/client";
+import { getItemList } from "@/services/item";
+import { getCardList } from "@/services/card";
+import { savePoint, updatePoint } from "@/services/common";
+// import { maskPhone } from "@/utils/tools";
+import WaterMask from "@/components/WaterMask";
+import { connect } from "@tarojs/redux";
+
 // import { zhuge } from '@/utils/zhuge-wx-mpvue.min'
 
+@connect(state => ({ ...state.user }))
 export default class Index extends Component {
-
   config = {
-    navigationBarTitleText: '客户进度'
-  }
+    navigationBarTitleText: "客户进度"
+  };
   // console.log(this.$router.params)//链接参数
   state = {
-    processData: [{
-      icon: 'waiting',
-      color: 'rgba(0,0,0,0.1)',
-      state: 1
-    },
-    {
-      icon: 'waiting',
-      color: 'rgba(0,0,0,0.1)',
-      state: 2
-    },
-    {
-      icon: 'waiting',
-      color: 'rgba(0,0,0,0.1)',
-      state: 3
-    },
-    {
-      icon: 'waiting',
-      color: 'rgba(0,0,0,0.1)',
-      state: 4
-    }],
+    processData: [
+      {
+        icon: "waiting",
+        color: "rgba(0,0,0,0.1)",
+        state: 1
+      },
+      {
+        icon: "waiting",
+        color: "rgba(0,0,0,0.1)",
+        state: 2
+      },
+      {
+        icon: "waiting",
+        color: "rgba(0,0,0,0.1)",
+        state: 3
+      },
+      {
+        icon: "waiting",
+        color: "rgba(0,0,0,0.1)",
+        state: 4
+      }
+    ],
     detail: {},
-    floorList: '',//楼盘信息
-    adviserList: '',//置业顾问信息
-    floor: '',
-    adviser: '',
-    adviserPhone: '',
-    phone: '',
-    recordId:null
-  }
+    floorList: "", //楼盘信息
+    adviserList: "", //置业顾问信息
+    floor: "",
+    adviser: "",
+    adviserPhone: "",
+    phone: "",
+    recordId: null
+  };
   componentWillMount() {
     // this.setPeocessIcon()
 
-    this.loadList()
+    this.loadList();
     savePoint({
-      event: 'progress',
-      eventType: 'agent',
-      propertyName: '客户进度',
-      data:'{}'
+      event: "progress",
+      eventType: "agent",
+      propertyName: "客户进度",
+      data: "{}"
     }).then(res => {
       this.setState({
-        recordId:res.recordId
-      })
-      console.log('客户进度')
-    })
+        recordId: res.recordId
+      });
+      console.log("客户进度");
+    });
   }
-  componentWillUnmount(){
-    const { recordId } = this.state
-    recordId && updatePoint(recordId)
+  componentWillUnmount() {
+    const { recordId } = this.state;
+    recordId && updatePoint(recordId);
   }
   loadList() {
     var that = this;
@@ -70,61 +76,69 @@ export default class Index extends Component {
     getItemList().then(res => {
       that.setState({
         floorList: res
-      })
-    })
+      });
+    });
     // 获取置业顾问列表
     const params = {
       pageNumber: 1,
       pageSize: 50
-    }
+    };
     getCardList(params).then(res => {
-      that.setState({
-        adviserList: res.records
-      }, () => {
-        that.getClientData()
-      })
-    })
+      that.setState(
+        {
+          adviserList: res.records
+        },
+        () => {
+          that.getClientData();
+        }
+      );
+    });
   }
   getName(dict, id, data) {
-    dict = dict.records || []
+    dict = dict.records || [];
     var that = this;
-    if (data == 'floor') {
-      return  (dict.filter(({ buildingId: target }) => id === target)[0] || {}).buildingName
-      
+    if (data == "floor") {
+      return (dict.filter(({ buildingId: target }) => id === target)[0] || {})
+        .buildingName;
     } else {
-      var adviserName = (dict.filter(({ id: target }) => id === target)[0] || {}).name
-      var phone = (dict.filter(({ id: target }) => id === target)[0] || {}).phone
-      var photo = (dict.filter(({ id: target }) => id === target)[0] || {}).photo
+      var adviserName = (
+        dict.filter(({ id: target }) => id === target)[0] || {}
+      ).name;
+      var phone = (dict.filter(({ id: target }) => id === target)[0] || {})
+        .phone;
+      var photo = (dict.filter(({ id: target }) => id === target)[0] || {})
+        .photo;
       that.setState({
         adviser: adviserName,
         adviserPhone: phone,
         photo: photo
-      })
+      });
     }
-
   }
   getClientData() {
     var that = this;
-    console.log('customerId:' + this.$router.params.customerId)
-    let { customerId = '4c6077cd39dd2a4b3caa10a7539c0a94' } = this.$router.params
+    console.log("customerId:" + this.$router.params.customerId);
+    let {
+      customerId = "4c6077cd39dd2a4b3caa10a7539c0a94"
+    } = this.$router.params;
     clientProgress(customerId).then(res => {
-      console.log(res)
-      that.getName(that.state.floorList, parseInt(res.intention), 'floor')
-      that.getName(that.state.adviserList, res.realtyConsultant, 'adviser')
+      console.log(res);
+      that.getName(that.state.floorList, parseInt(res.intention), "floor");
+      that.getName(that.state.adviserList, res.realtyConsultant, "adviser");
       // that.getName(that.state.adviserList, 'b6ca865fb4b1cd1b159f415a8b3ea774')//测试
 
-      var index = res.status//记录状态为1的最后的位置
+      var index = res.status; //记录状态为1的最后的位置
       //进度条的状态
-      var processArr = this.state.processData
+      var processArr = this.state.processData;
       for (var i = 0; i < processArr.length; i++) {
-        var item = processArr[i]
-        console.log('item' + item)
+        var item = processArr[i];
+        console.log("item" + item);
         if (item.state == index) {
-          processArr[i].icon = 'success'
-          processArr[i].color = 'rgba(255,0,0,1)'
+          processArr[i].icon = "success";
+          processArr[i].color = "rgba(255,0,0,1)";
         } else {
-          processArr[i].icon = 'waiting'
-          processArr[i].color = 'rgba(0,0,0,0.1)'
+          processArr[i].icon = "waiting";
+          processArr[i].color = "rgba(0,0,0,0.1)";
         }
       }
 
@@ -140,54 +154,89 @@ export default class Index extends Component {
       that.setState({
         processData: processArr,
         detail: res
-      })
-    })
+      });
+    });
   }
 
   render() {
-    const { detail,floorList} = this.state
+    const { detail, floorList } = this.state;
+    const { userInfo } = this.props;
+    const { person = {} } = userInfo || {};
+    const waterText = person.nickname;
+
     return (
-      <View className='client__progress'>
-        <View className='client__infor'>
-          <View className='clieng__name'>{detail.name}</View>
-          <View className='clieng__build'><Image mode="widthFix" className='build__img' src={buildImg}></Image>意向楼盘：{detail.intention || '暂无'}</View>
-          <View className='clieng__phone'><Image mode="widthFix" className='phone__img' src={phoneImg}></Image>{detail.phone || '暂无'}</View>
+      <View className="client__progress">
+        <View className="client__infor">
+          <View className="clieng__name">{detail.name}</View>
+          <View className="clieng__build">
+            <Image
+              mode="widthFix"
+              className="build__img"
+              src={buildImg}
+            ></Image>
+            意向楼盘：{detail.intention || "暂无"}
+          </View>
+          <View className="clieng__phone">
+            <Image
+              mode="widthFix"
+              className="phone__img"
+              src={phoneImg}
+            ></Image>
+            {detail.phone || "暂无"}
+          </View>
           {/* <Image className='client__img' src={headImg}></Image> */}
         </View>
-        <View className='progress__infor'>
-          <View className='recommended__progress'>推荐进度</View>
-          <View className='recommended__step'>
-            <View className='step'>
-              {
-                this.state.processData.map((item, index) => {
-                  return (
-                    <View className='step_tip' key={index+'step'}>
-                      <Icon type={item.icon} size="20" color={item.color} />
-                      <Text className={index === 3 ? 'strip hide' : 'strip'}></Text>
-                    </View>
-                  )
-                })
-              }
+        <View className="progress__infor">
+          <View className="water-mask-box">
+            <WaterMask text={waterText} repeat={20} />
+          </View>
+
+          <View className="recommended__progress">推荐进度</View>
+          <View className="recommended__step">
+            <View className="step">
+              {this.state.processData.map((item, index) => {
+                return (
+                  <View className="step_tip" key={index + "step"}>
+                    <Icon type={item.icon} size="20" color={item.color} />
+                    <Text
+                      className={index === 3 ? "strip hide" : "strip"}
+                    ></Text>
+                  </View>
+                );
+              })}
             </View>
-            <View className='step__txt'>
-              <View className='txt'>{item.reportRecommendStatus == 1 ? '报备' : '推荐'}<View className='tip'></View></View>
-              <View className='txt'>到访<View className='tip'></View></View>
-              <View className='txt'>认购<View className='tip'></View></View>
-              <View className='txt'>签约<View className='tip'></View></View>
+            <View className="step__txt">
+              <View className="txt">
+                {item.reportRecommendStatus == 1 ? "报备" : "推荐"}
+                <View className="tip"></View>
+              </View>
+              <View className="txt">
+                到访<View className="tip"></View>
+              </View>
+              <View className="txt">
+                认购<View className="tip"></View>
+              </View>
+              <View className="txt">
+                签约<View className="tip"></View>
+              </View>
             </View>
           </View>
-          <View className='reception__consultant'>接待顾问</View>
-          <View className='consultant__info'>
+          <View className="reception__consultant">接待顾问</View>
+          <View className="consultant__info">
             {/* <Image className='consultant__img' src={photo} mode="widthFix"></Image> */}
-            <View className='infor consultant__name'>姓名：{detail.consultants.name}</View>
-            <View className='infor consultant__tel'>手机号码：{detail.consultants.phone}</View>
+            <View className="infor consultant__name">
+              姓名：{detail.consultants.name}
+            </View>
+            <View className="infor consultant__tel">
+              手机号码：{detail.consultants.phone}
+            </View>
           </View>
-          <View className='remarks'>客户说明</View>
-          <View className='remarks__txt'>
-            {detail.describe ? detail.describe : '暂无说明'}
+          <View className="remarks">客户说明</View>
+          <View className="remarks__txt">
+            {detail.describe ? detail.describe : "暂无说明"}
           </View>
         </View>
       </View>
     );
   }
-}
+}

src/useless/pages/person/customerAnalysis/followUpCustomer/index.js

@@ -1,252 +1,276 @@
-import Taro, { Component } from '@tarojs/taro';
-import Authorize from '@/components/authorize'
-import ListView from '@/components/ListView'
-import './index.scss'
-import { savePoint, updatePoint } from '@/services/common'
-import { connect } from '@tarojs/redux'
-import { View, Text, Picker } from '@tarojs/components';
-import { queryCustomerList, addFollowRecord } from '@/services/person'
-import { transferImage } from '@/utils/tools'
-import * as noticeType from '@/constants/common.js'
+import Taro, { Component } from "@tarojs/taro";
+import ListView from "@/components/ListView";
+import "./index.scss";
+import { savePoint, updatePoint } from "@/services/common";
+import { connect } from "@tarojs/redux";
+import { View, Text, Picker } from "@tarojs/components";
+import { queryCustomerList, addFollowRecord } from "@/services/person";
+import { transferImage, maskPhone } from "@/utils/tools";
+import * as noticeType from "@/constants/common.js";
+import WaterMask from "@/components/WaterMask";
 
-const maleImg = require('@/assets/person/male.png')
-const femaleImg = require('@/assets/person/female.png')
-const phoneImg = require('@/assets/person/dianhua.png')
-const communicateImg = require('@/assets/person/communicate.png')
+const maleImg = require("@/assets/person/male.png");
+const femaleImg = require("@/assets/person/female.png");
+const phoneImg = require("@/assets/person/dianhua.png");
+const communicateImg = require("@/assets/person/communicate.png");
 
 @connect(({ user, city }) => ({ user, city }))
 export default class followUpCustomer extends Taro.Component {
+  static options = {
+    addGlobalClass: true
+  };
 
   config = {
-    navigationBarTitleText: '跟进客户'
-  }
-
+    navigationBarTitleText: "跟进客户"
+  };
 
   state = {
     recordId: undefined, // 埋点ID
     customerList: [],
-    inputValue: '',
+    inputValue: "",
     screenVisible: false,
-    statusList: ['全部状态', '报备', '到访', '认筹'],
+    statusList: ["全部状态", "报备", "到访", "认筹"],
     statusIndex: -1,
-    startArrivalDate: '',
-    endArrivalDate: '',
-    startReportDate: '',
-    endReportDate: '',
+    startArrivalDate: "",
+    endArrivalDate: "",
+    startReportDate: "",
+    endReportDate: "",
     hasMore: true,
     isEmpty: false,
     pageIndex: 1
-  }
+  };
 
   componentWillUnmount() {
-    const { recordId } = this.state
-    recordId && updatePoint(recordId)
+    const { recordId } = this.state;
+    recordId && updatePoint(recordId);
   }
   componentDidShow() {
-    Taro.showLoading()
-    const pageSize = (Taro.getStorageSync('followPageIndex') || 1) * 10
-    this.loadList(1, pageSize)
-
+    Taro.showLoading();
+    const pageSize = (Taro.getStorageSync("followPageIndex") || 1) * 10;
+    this.loadList(1, pageSize);
   }
   componentDidHide() {
     const { pageIndex } = this.state;
-    Taro.setStorageSync('followPageIndex', pageIndex)
+    Taro.setStorageSync("followPageIndex", pageIndex);
   }
 
   loadList(page = 0, pageSize = 10) {
-    const currentPage = page || this.state.pageIndex
+    const currentPage = page || this.state.pageIndex;
     const payload = {
-      type: 'follow',
+      type: "follow",
       pageSize,
-      pageNumber: currentPage,
-    }
+      pageNumber: currentPage
+    };
 
     queryCustomerList(payload.type, payload).then(res => {
-      const { records, list, total, current, pages, size } = res || {}
-      const _list = records || list || []
-      const newList = current <= 1 ? _list : this.state.customerList.concat(_list)
-      const pageNum = Math.max(Taro.getStorageSync('followPageIndex'), current)
+      const { records, list, total, current, pages, size } = res || {};
+      const _list = records || list || [];
+      const newList =
+        current <= 1 ? _list : this.state.customerList.concat(_list);
+      const pageNum = Math.max(Taro.getStorageSync("followPageIndex"), current);
       this.setState({
         customerList: newList,
         isEmpty: total == 0,
         hasMore: current * size < total,
-        pageIndex: pageNum,
+        pageIndex: pageNum
         // hasMore: current < pages,
         // pageIndex: current >= pages ? pages : current
-      })
-      Taro.hideLoading()
-    })
+      });
+      Taro.hideLoading();
+    });
   }
 
-  onScrollToLower = async (fn) => {
+  onScrollToLower = async fn => {
     const { pageIndex } = this.state;
-    this.loadList(pageIndex + 1)
+    this.loadList(pageIndex + 1);
     fn && fn();
-  }
-  onPullDownRefresh = (rest) => {
+  };
+  onPullDownRefresh = rest => {
     // debugger
-    if (this.refreshing) return
-    this.refreshing = true
-    this.loadList(1)
-    rest && rest()
-    this.refreshing = false
-  }
-
+    if (this.refreshing) return;
+    this.refreshing = true;
+    this.loadList(1);
+    rest && rest();
+    this.refreshing = false;
+  };
 
   changeInput = e => {
     this.setState({
       inputValue: e.detail.value
-    })
-  }
+    });
+  };
   // 查询
   searchBtn() {
-
     this.filterCustomerList();
-
   }
   // 筛查跟进客户
   filterCustomerList() {
-
-
     const payload = {
-      type: 'follow',
+      type: "follow",
       pageNumber: 1,
       pageSize: 9999,
       name: this.state.inputValue,
-      status: (this.state.statusIndex == 0 || this.state.statusIndex == -1) ? '' : this.state.statusIndex,
+      status:
+        this.state.statusIndex == 0 || this.state.statusIndex == -1
+          ? ""
+          : this.state.statusIndex,
       startArrivalDate: this.state.startArrivalDate,
       endArrivalDate: this.state.endArrivalDate,
       startReportDate: this.state.startReportDate,
-      endReportDate: this.state.endReportDate,
-    }
+      endReportDate: this.state.endReportDate
+    };
     queryCustomerList(payload.type, payload).then(res => {
-      const { records, total, current, pages, size } = res || {}
+      const { records, total, current, pages, size } = res || {};
+      const pageIndex = 1;
       this.setState({
-
         customerList: records || [],
         isEmpty: total == 0,
         hasMore: current * size < total,
-        pageIndex: pageNum,
-      })
-      Taro.hideLoading()
-    })
+        pageIndex
+      });
+      Taro.setStorageSync("followPageIndex", pageIndex);
+      Taro.hideLoading();
+    });
   }
   saveBtn() {
     this.filterCustomerList();
     this.setState({
-      screenVisible: false,
-    })
+      screenVisible: false
+    });
   }
   // 显示筛查弹框
   screenShow() {
     this.setState({
-      screenVisible: true,
-    })
+      screenVisible: true
+    });
   }
   // 选择状态
   chooseStatus(item, inx) {
     this.setState({
-      statusIndex: inx,
-    })
+      statusIndex: inx
+    });
   }
   // 到访开始时间
   onVisitDateChange = e => {
     this.setState({
       startArrivalDate: e.detail.value
-    })
-  }
+    });
+  };
   // 到访结束时间
   onVisitDateChange2 = e => {
     this.setState({
       endArrivalDate: e.detail.value
-    })
-  }
+    });
+  };
   // 报备开始时间
   onReportDateChange = e => {
     this.setState({
       startReportDate: e.detail.value
-    })
-  }
+    });
+  };
   // 报备结束时间
   onReportDateChange2 = e => {
     this.setState({
       endReportDate: e.detail.value
-    })
-  }
+    });
+  };
   // 取消筛查
   cancelBtn() {
     this.setState({
       screenVisible: false,
       statusIndex: -1,
-      startArrivalDate: '',
-      endArrivalDate: '',
-      startReportDate: '',
-      endReportDate: '',
-    })
+      startArrivalDate: "",
+      endArrivalDate: "",
+      startReportDate: "",
+      endReportDate: ""
+    });
   }
   // 跳转我的客户详情
   toMyCustomer(customerId) {
     Taro.navigateTo({
-      url: `/useless/pages/person/customerAnalysis/myCustomer?customerId=` + customerId
-    })
+      url:
+        `/useless/pages/person/customerAnalysis/myCustomer?customerId=` +
+        customerId
+    });
   }
   // 拨打电话
   handleTelClick(item, e) {
-    e.stopPropagation()
+    e.stopPropagation();
     Taro.makePhoneCall({
       phoneNumber: item.phone
-    })
+    });
     const params = {
-      recordType: '拨打电话',
+      recordType: "拨打电话",
       customerSex: item.sex,
-      customerId: item.customerId,
-    }
-    addFollowRecord(params).then(res => {
-
-    })
+      customerId: item.customerId
+    };
+    addFollowRecord(params).then(res => {});
     this.setState({
-      followVisible: false,
-    })
+      followVisible: false
+    });
   }
 
   renderScreenBox() {
-    const { statusList, statusIndex, startArrivalDate, endArrivalDate, startReportDate, endReportDate } = this.state
+    const {
+      statusList,
+      statusIndex,
+      startArrivalDate,
+      endArrivalDate,
+      startReportDate,
+      endReportDate
+    } = this.state;
     return (
       <View className="mask">
         <View className="content">
           <View style="color:#333;font-size:14px">精准筛选</View>
           <View className="status-box">
-            {
-              statusList.map((item, index) => (
-                <View key={index + 'status'} className={index == statusIndex ? 'checked' : 'status-item'} onClick={this.chooseStatus.bind(this, item, index)}>{item}</View>
-              ))
-            }
+            {statusList.map((item, index) => (
+              <View
+                key={index + "status"}
+                className={index == statusIndex ? "checked" : "status-item"}
+                onClick={this.chooseStatus.bind(this, item, index)}
+              >
+                {item}
+              </View>
+            ))}
           </View>
           <View className="time-box">
             到访时间：
-              <Picker mode='date' onChange={this.onVisitDateChange}>
-              <View className='picker'>
+            <Picker mode="date" onChange={this.onVisitDateChange}>
+              <View className="picker">
                 {startArrivalDate}
-                {!startArrivalDate && <Text className="placeholder">起始时间</Text>}
+                {!startArrivalDate && (
+                  <Text className="placeholder">起始时间</Text>
+                )}
               </View>
-            </Picker>-<Picker mode='date' onChange={this.onVisitDateChange2}>
-              <View className='picker'>
+            </Picker>
+            -
+            <Picker mode="date" onChange={this.onVisitDateChange2}>
+              <View className="picker">
                 {endArrivalDate}
-                {!endArrivalDate && <Text className="placeholder">结束时间</Text>}
+                {!endArrivalDate && (
+                  <Text className="placeholder">结束时间</Text>
+                )}
               </View>
             </Picker>
           </View>
           <View className="time-box" style="margin-top:16px">
             报备时间：
-              <Picker mode='date' onChange={this.onReportDateChange}>
-              <View className='picker'>
+            <Picker mode="date" onChange={this.onReportDateChange}>
+              <View className="picker">
                 {startReportDate}
-                {!startReportDate && <Text className="placeholder">起始时间</Text>}
+                {!startReportDate && (
+                  <Text className="placeholder">起始时间</Text>
+                )}
               </View>
-            </Picker>-<Picker mode='date' onChange={this.onReportDateChange2}>
-              <View className='picker'>
+            </Picker>
+            -
+            <Picker mode="date" onChange={this.onReportDateChange2}>
+              <View className="picker">
                 {endReportDate}
-                {!endReportDate && <Text className="placeholder">结束时间</Text>}
+                {!endReportDate && (
+                  <Text className="placeholder">结束时间</Text>
+                )}
               </View>
             </Picker>
           </View>
@@ -256,45 +280,72 @@ export default class followUpCustomer extends Taro.Component {
             </View>
             <View className="cancel" onClick={this.cancelBtn}>
               取消
-          </View>
-            <View>
             </View>
+            <View></View>
           </View>
         </View>
       </View>
-    )
+    );
   }
   handleChatClick(item, e) {
-    e.stopPropagation()
+    e.stopPropagation();
+
+    const {
+      user: {
+        userInfo: {
+          miniApp: { tpls },
+          person: { personId, nickname, name }
+        }
+      }
+    } = this.props;
+    const tplId = (
+      tpls.filter(
+        x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true
+      )[0] || {}
+    ).tplId;
 
-    const { user: { userInfo: { miniApp: { tpls }, person: { personId, nickname, name } } } } = this.props
-    const tplId = (tpls.filter(x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true)[0] || {}).tplId
     wx.requestSubscribeMessage({
       tmplIds: [tplId],
-      success(res) {
-      },
-      fail(res) {
-
-      },
+      success(res) {},
+      fail(res) {},
       complete() {
         Taro.navigateTo({
-          url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(name || nickname)}&receiverId=${item.personId}&receiverName=${encodeURIComponent(item.name || item.nickname)}`
-        })
+          url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(
+            name || nickname
+          )}&receiverId=${item.personId}&receiverName=${encodeURIComponent(
+            item.name || item.nickname
+          )}`
+        });
       }
-    })
+    });
   }
   render() {
-    const { customerList, screenVisible, isEmpty, hasMore } = this.state
+    const { customerList, screenVisible, isEmpty, hasMore } = this.state;
+    const { user } = this.props;
+    const { person = {} } = (user || {}).userInfo || {};
+    const waterText = person.nickname;
 
     return (
       <View>
         <View className="top-screen" onClick={this.screenShow}>
-          精准筛选<Image src={require('@/assets/person/screen.png')} className="screen-img"></Image>
+          精准筛选
+          <Image
+            src={require("@/assets/person/screen.png")}
+            className="screen-img"
+          ></Image>
         </View>
         {screenVisible && this.renderScreenBox()}
         <View className="search-box">
-          <Input class="input" placeholderClass='placeholder' autoFocus onInput={this.changeInput} placeholder="请输入用户名/手机号" />
-          <Button className="btn" onClick={this.searchBtn} >搜索</Button>
+          <Input
+            class="input"
+            placeholderClass="placeholder"
+            autoFocus
+            onInput={this.changeInput}
+            placeholder="请输入用户名/手机号"
+          />
+          <Button className="btn" onClick={this.searchBtn}>
+            搜索
+          </Button>
         </View>
         <View style="padding:0 10px 10px 10px">
           <ListView
@@ -308,31 +359,56 @@ export default class followUpCustomer extends Taro.Component {
             onScrollToLower={fn => this.onScrollToLower(fn)}
           >
             <View className="list">
-              {
-                customerList.length &&
+              {customerList.length &&
                 customerList.map((item, index) => (
-                  <View class="item" key={index + 'customerList'} onClick={this.toMyCustomer.bind(this, item.customerId)}>
-                    <Image src={transferImage(item.picture) || require('@/assets/default-avatar.png')} className='img'></Image>
+                  <View
+                    className="item"
+                    key={index + "customerList"}
+                    onClick={this.toMyCustomer.bind(this, item.customerId)}
+                  >
+                    <View className="water-mask-box">
+                      <WaterMask text={waterText} />
+                    </View>
+                    <Image
+                      src={
+                        transferImage(item.picture) ||
+                        require("@/assets/default-avatar.png")
+                      }
+                      className="img"
+                    ></Image>
                     <View className="name">
                       <Text class="name-text">{item.name}</Text>
-                      {
-                        item.sex == '1' && <Image style="width:36rpx;height:38rpx;margin-left:10rpx" src={maleImg} />
-                      }
-                      {
-                        item.sex == '2' && <Image src={femaleImg} style="width:36rpx;height:36rpx;margin-left:10rpx" />
-                      }
+                      {item.sex == "1" && (
+                        <Image
+                          style="width:36rpx;height:38rpx;margin-left:10rpx"
+                          src={maleImg}
+                        />
+                      )}
+                      {item.sex == "2" && (
+                        <Image
+                          src={femaleImg}
+                          style="width:36rpx;height:36rpx;margin-left:10rpx"
+                        />
+                      )}
                     </View>
-                    <View className="phone" >{item.phone}</View>
-                    <Image className="phone-icon" onClick={this.handleTelClick.bind(this, item)} src={phoneImg} />
-                    <Image className="goutong-icon" onClick={this.handleChatClick.bind(this, item)} src={communicateImg}></Image>
+                    <View className="phone">{maskPhone(item.phone)}</View>
+                    <Image
+                      className="phone-icon"
+                      onClick={this.handleTelClick.bind(this, item)}
+                      src={phoneImg}
+                    />
+                    <Image
+                      className="goutong-icon"
+                      onClick={this.handleChatClick.bind(this, item)}
+                      src={communicateImg}
+                    ></Image>
                     {/* <View className="status">{item.status == 1 ? '报备' : item.status == 2 ? '到访' : item.status == 3 ? '认筹' : '签约'}</View> */}
                   </View>
-                ))
-              }
+                ))}
             </View>
           </ListView>
         </View>
       </View>
-    )
+    );
   }
-}
+}

src/useless/pages/person/customerAnalysis/index.js

@@ -1,70 +1,71 @@
-import Taro, { Component } from '@tarojs/taro';
-import Authorize from '@/components/authorize'
-import './index.scss'
-import { AtTabs, AtTabsPane } from 'taro-ui'
-import "taro-ui/dist/style/components/tabs.scss"
-import { savePoint, updatePoint } from '@/services/common'
-import { queryMyCustomer } from '@/services/person'
-import { connect } from '@tarojs/redux'
+import Taro, { Component } from "@tarojs/taro";
+import Authorize from "@/components/authorize";
+import "./index.scss";
+import { AtTabs, AtTabsPane } from "taro-ui";
+import "taro-ui/dist/style/components/tabs.scss";
+import { savePoint, updatePoint } from "@/services/common";
+import { queryMyCustomer } from "@/services/person";
+import { connect } from "@tarojs/redux";
 // import Analysis from './analysis'
-import Followup from './followUpCustomer'
-import TransactionCustomer from './transactionCustomer'
+import Followup from "./followUpCustomer";
+import TransactionCustomer from "./transactionCustomer";
 @connect(({ user, city }) => ({ user, city }))
 export default class customer extends Taro.Component {
-
   config = {
-    navigationBarTitleText: '盘客工具'
-  }
+    navigationBarTitleText: "盘客工具"
+  };
 
   state = {
     current: 0,
     recordId: undefined, // 埋点ID
-    customerNum: {},
-  }
+    customerNum: {}
+  };
 
   componentWillUnmount() {
-    const { recordId } = this.state
-    recordId && updatePoint(recordId)
+    const { recordId } = this.state;
+    recordId && updatePoint(recordId);
   }
   componentDidShow() {
-    Taro.showLoading()
-    this.loadInfo()
-
+    Taro.showLoading();
+    this.loadInfo();
   }
 
   loadInfo() {
     queryMyCustomer().then(res => {
-
       this.setState({
         customerNum: res || {}
-      })
-      Taro.hideLoading()
-    })
+      });
+      Taro.hideLoading();
+    });
   }
 
-
   handleClick(value) {
     this.setState({
       current: value
-    })
+    });
   }
   toTransactionCustomer() {
     Taro.navigateTo({
       url: `/pages/person/customerAnalysis/transactionCustomer/index`
-    })
+    });
   }
   toFollowUpCustomer() {
     Taro.navigateTo({
       url: `/pages/person/customerAnalysis/followUpCustomer/index`
-    })
+    });
   }
 
   render() {
-
-    const tabList = [{ title: '跟进客户' }, { title: '成交客户' }]
-    const { customerNum, current } = this.state
+    const tabList = [{ title: "跟进客户" }, { title: "成交客户" }];
+    const { customerNum, current } = this.state;
     return (
-      <AtTabs className="tab-customer" current={current} tabList={tabList} onClick={this.handleClick.bind(this)} swipeable={false}>
+      <AtTabs
+        className="tab-customer"
+        current={current}
+        tabList={tabList}
+        onClick={this.handleClick.bind(this)}
+        swipeable={false}
+      >
         <AtTabsPane current={current} index={0}>
           <Followup />
           {/* <View style="padding:10px 20px; display: flex;flex-wrap: wrap;align-content: flex-start;justify-content: space-between;">
@@ -80,13 +81,12 @@ export default class customer extends Taro.Component {
             </View>
           </View> */}
         </AtTabsPane>
-        <AtTabsPane current={current} index={1} >
-          <View >
+        <AtTabsPane current={current} index={1}>
+          <View>
             <TransactionCustomer />
           </View>
         </AtTabsPane>
-
       </AtTabs>
-    )
+    );
   }
-}
+}

src/useless/pages/person/customerAnalysis/transactionCustomer/index.js

@@ -1,23 +1,26 @@
-import Taro, { Component } from '@tarojs/taro';
-import ListView from '@/components/ListView'
-import './index.scss'
-import { connect } from '@tarojs/redux'
-import { queryCustomerList, addFollowRecord } from '@/services/person'
-import { transferImage } from '@/utils/tools'
-import * as noticeType from '@/constants/common.js'
-
-const maleImg = require('@/assets/person/male.png')
-const femaleImg = require('@/assets/person/female.png')
-const phoneImg = require('@/assets/person/dianhua.png')
-const communicateImg = require('@/assets/person/communicate.png')
+import Taro, { Component } from "@tarojs/taro";
+import ListView from "@/components/ListView";
+import WaterMask from "@/components/WaterMask";
+import "./index.scss";
+import { connect } from "@tarojs/redux";
+import { queryCustomerList, addFollowRecord } from "@/services/person";
+import { transferImage, maskPhone } from "@/utils/tools";
+import * as noticeType from "@/constants/common.js";
 
+const maleImg = require("@/assets/person/male.png");
+const femaleImg = require("@/assets/person/female.png");
+const phoneImg = require("@/assets/person/dianhua.png");
+const communicateImg = require("@/assets/person/communicate.png");
 
 @connect(({ user, city }) => ({ user, city }))
 export default class transactionCustomer extends Taro.Component {
+  static options = {
+    addGlobalClass: true
+  };
 
   config = {
-    navigationBarTitleText: '成交客户'
-  }
+    navigationBarTitleText: "成交客户"
+  };
 
   state = {
     recordId: undefined, // 埋点ID
@@ -25,100 +28,116 @@ export default class transactionCustomer extends Taro.Component {
     hasMore: true,
     isEmpty: false,
     pageIndex: 1
-  }
+  };
 
   componentDidShow() {
-    Taro.showLoading()
-    const pageSize = (Taro.getStorageSync('clinchPageIndex') || 1) * 10
-    this.loadList(1, pageSize)
+    Taro.showLoading();
+    const pageSize = (Taro.getStorageSync("clinchPageIndex") || 1) * 10;
+    this.loadList(1, pageSize);
   }
   componentDidHide() {
     const { pageIndex } = this.state;
-    Taro.setStorageSync('clinchPageIndex', pageIndex)
+    Taro.setStorageSync("clinchPageIndex", pageIndex);
   }
 
   loadList(page = 0, pageSize = 10) {
-    const currentPage = page || this.state.pageIndex
+    const currentPage = page || this.state.pageIndex;
     const payload = {
-      type: 'clinch',
+      type: "clinch",
       pageSize,
-      pageNumber: currentPage,
-    }
+      pageNumber: currentPage
+    };
     queryCustomerList(payload.type, payload).then(res => {
-      const { records, list, total, current, pages, size } = res || {}
-      const _list = records || list || []
-      const newList = current <= 1 ? _list : this.state.customerList.concat(_list)
-      const pageNum = Math.max(Taro.getStorageSync('clinchPageIndex'), current)
+      const { records, list, total, current, pages, size } = res || {};
+      const _list = records || list || [];
+      const newList =
+        current <= 1 ? _list : this.state.customerList.concat(_list);
+      const pageNum = Math.max(Taro.getStorageSync("clinchPageIndex"), current);
       this.setState({
         customerList: newList,
         isEmpty: total == 0,
         hasMore: current * size < total,
-        pageIndex: pageNum,
+        pageIndex: pageNum
         // hasMore: current < pages,
         // pageIndex: current >= pages ? pages : current
-      })
-      Taro.hideLoading()
-    })
+      });
+      Taro.hideLoading();
+    });
   }
-  onScrollToLower = async (fn) => {
+  onScrollToLower = async fn => {
     const { pageIndex } = this.state;
-    this.loadList(pageIndex + 1)
+    this.loadList(pageIndex + 1);
     fn && fn();
-  }
-  onPullDownRefresh = (rest) => {
+  };
+  onPullDownRefresh = rest => {
     // debugger
-    if (this.refreshing) return
-    this.refreshing = true
-    this.loadList(1)
-    rest && rest()
-    this.refreshing = false
-  }
+    if (this.refreshing) return;
+    this.refreshing = true;
+    this.loadList(1);
+    rest && rest();
+    this.refreshing = false;
+  };
   // 跳转我的客户详情
   toMyCustomer(customerId) {
     Taro.navigateTo({
-      url: `/useless/pages/person/customerAnalysis/myCustomer?customerId=` + customerId
-    })
+      url:
+        `/useless/pages/person/customerAnalysis/myCustomer?customerId=` +
+        customerId
+    });
   }
   // 拨打电话
   handleTelClick(item, e) {
-    e.stopPropagation()
+    e.stopPropagation();
     Taro.makePhoneCall({
       phoneNumber: item.phone
-    })
+    });
     const params = {
-      recordType: '拨打电话',
+      recordType: "拨打电话",
       customerSex: item.sex,
-      customerId: item.customerId,
-    }
-    addFollowRecord(params).then(res => {
-
-    })
+      customerId: item.customerId
+    };
+    addFollowRecord(params).then(res => {});
     this.setState({
-      followVisible: false,
-    })
+      followVisible: false
+    });
   }
   handleChatClick(item, e) {
-    e.stopPropagation()
+    e.stopPropagation();
 
-    const { user: { userInfo: { miniApp: { tpls }, person: { personId, nickname, name } } } } = this.props
-    const tplId = (tpls.filter(x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true)[0] || {}).tplId
+    const {
+      user: {
+        userInfo: {
+          miniApp: { tpls },
+          person: { personId, nickname, name }
+        }
+      }
+    } = this.props;
+    const tplId = (
+      tpls.filter(
+        x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true
+      )[0] || {}
+    ).tplId;
     wx.requestSubscribeMessage({
       tmplIds: [tplId],
-      success(res) {
-      },
-      fail(res) {
-
-      },
+      success(res) {},
+      fail(res) {},
       complete() {
         Taro.navigateTo({
-          url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(name || nickname)}&receiverId=${item.personId}&receiverName=${encodeURIComponent(item.name || item.nickname)}`
-        })
+          url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(
+            name || nickname
+          )}&receiverId=${item.personId}&receiverName=${encodeURIComponent(
+            item.name || item.nickname
+          )}`
+        });
       }
-    })
+    });
   }
 
   render() {
-    const { customerList, isEmpty, hasMore } = this.state
+    const { customerList, isEmpty, hasMore } = this.state;
+    const { user } = this.props;
+    const { person = {} } = (user || {}).userInfo || {};
+    const waterText = person.nickname;
 
     return (
       <View style="padding:0 10px 10px 10px">
@@ -133,30 +152,54 @@ export default class transactionCustomer extends Taro.Component {
           onScrollToLower={fn => this.onScrollToLower(fn)}
         >
           <View className="list">
-            {
-              customerList.length &&
+            {customerList.length &&
               customerList.map((item, index) => (
-                <View class="item" key={index + 'transaction'} onClick={this.toMyCustomer.bind(this, item.customerId)}>
-                  <Image src={transferImage(item.picture) || require('@/assets/default-avatar.png')} className='img'></Image>
+                <View
+                  className="item"
+                  key={index + "transaction"}
+                  onClick={this.toMyCustomer.bind(this, item.customerId)}
+                >
+                  <View className="water-mask-box">
+                    <WaterMask text={waterText} />
+                  </View>
+                  <Image
+                    src={
+                      transferImage(item.picture) ||
+                      require("@/assets/default-avatar.png")
+                    }
+                    className="img"
+                  ></Image>
                   <View className="name">
                     <Text class="name-text">{item.name}</Text>
-                    {
-                      item.sex == '1' && <Image style="width:36rpx;height:38rpx;margin-left:20rpx" src={maleImg} />
-                    }
-                    {
-                      item.sex == '2' && <Image style="width:36rpx;height:36rpx;margin-left:20rpx" src={femaleImg} />
-                    }
+                    {item.sex == "1" && (
+                      <Image
+                        style="width:36rpx;height:38rpx;margin-left:20rpx"
+                        src={maleImg}
+                      />
+                    )}
+                    {item.sex == "2" && (
+                      <Image
+                        style="width:36rpx;height:36rpx;margin-left:20rpx"
+                        src={femaleImg}
+                      />
+                    )}
                   </View>
-                  <View className="phone">{item.phone} </View>
-                  <Image className="phone-icon" src={phoneImg} onClick={this.handleTelClick.bind(this, item)} />
-                  <Image className="goutong-icon" onClick={this.handleChatClick.bind(this, item)} src={communicateImg} ></Image>
-
+                  <View className="phone">{maskPhone(item.phone)}</View>
+                  <Image
+                    className="phone-icon"
+                    src={phoneImg}
+                    onClick={this.handleTelClick.bind(this, item)}
+                  />
+                  <Image
+                    className="goutong-icon"
+                    onClick={this.handleChatClick.bind(this, item)}
+                    src={communicateImg}
+                  ></Image>
                 </View>
-              ))
-            }
+              ))}
           </View>
         </ListView>
       </View>
-    )
+    );
   }
-}
+}

src/utils/tools.js

@@ -1,31 +1,31 @@
-import Taro from '@tarojs/taro';
-import store from '../store'
-import rtLog from './rtLog';
+import Taro from "@tarojs/taro";
+import store from "../store";
+import rtLog from "./rtLog";
 
 /**
  * 是否为空
- * @param {*} o 
+ * @param {*} o
  */
 export function isEmpty(o) {
-  if (typeof o === 'string') {
-    if (!o || o === 'null' || o === 'undefined') {
-      return true
+  if (typeof o === "string") {
+    if (!o || o === "null" || o === "undefined") {
+      return true;
     }
   }
 
-  if (typeof o === 'object') {
-    return !Object.keys(o).length
+  if (typeof o === "object") {
+    return !Object.keys(o).length;
   }
 
   if (Array.isArray(o)) {
-    return !o.length
+    return !o.length;
   }
 
   if (o === null || o === undefined) {
-    return true
+    return true;
   }
 
-  return false
+  return false;
 }
 
 export function ifNull(o, def) {
@@ -34,104 +34,127 @@ export function ifNull(o, def) {
 
 /**
  * 是否函数
- * @param {*} f 
+ * @param {*} f
  */
 export function isFunction(f) {
-  return typeof f === 'function'
+  return typeof f === "function";
 }
 
 /**
  * 是否分享场景(含扫码)
- * @param {*} scene 
+ * @param {*} scene
  */
 export function sceneInShare(scene) {
-  return [1007, 1008, 1011, 1012, 1013, 1031, 1032, 1036, 1047, 1048, 1049].indexOf(scene) > -1
+  return (
+    [1007, 1008, 1011, 1012, 1013, 1031, 1032, 1036, 1047, 1048, 1049].indexOf(
+      scene
+    ) > -1
+  );
 }
 
 /**
  * 造空数组
- * @param {int}} n 
+ * @param {int}} n
  */
 export function times(n) {
-  return n > 0 ? '*'.repeat(n - 1).split('*') : []
+  return n > 0 ? "*".repeat(n - 1).split("*") : [];
+}
+
+/**
+ * 屏蔽手机中间 4 位
+ * @param {*} phone
+ */
+export function maskPhone(phone) {
+  return phone.replace(/^(\d{3})(\d{4})/, "$1****");
 }
 
 /**
  * 将 b 中不为 null 或者 undefined 的值合并到 a 中
- * @param {*} a 
- * @param {*} b 
+ * @param {*} a
+ * @param {*} b
  */
 export function mergeNotNull(a, b) {
-  const bKeys = Object.keys(b || {})
+  const bKeys = Object.keys(b || {});
   if (!bKeys.length) {
-    return a
+    return a;
   }
 
-  let res = { ...(a || {}) }
+  let res = { ...(a || {}) };
 
   bKeys.forEach(k => {
-    const v = b[k]
+    const v = b[k];
     if (v === null || v === undefined) {
-      return
+      return;
     }
 
-    res[k] = v
-  })
+    res[k] = v;
+  });
 
-  return res
+  return res;
 }
 
-const ossPath = OSS_PATH
-const ossFastPath = OSS_FAST_PATH
+const ossPath = OSS_PATH;
+const ossFastPath = OSS_FAST_PATH;
 
 /**
- * 
- * @param {*} img 
+ *
+ * @param {*} img
  * @param {*} quality  仅支持 70,50,30,5
  */
 export function getThumbnail(img, quality) {
-  if (!img) return img
+  if (!img) return img;
 
   if (img.indexOf(ossPath) === 0 || img.indexOf(ossFastPath) === 0) {
-    return `${img.replace(ossPath, ossFastPath)}?x-oss-process=style/compress${quality || 30}`
+    return `${img.replace(
+      ossPath,
+      ossFastPath
+    )}?x-oss-process=style/compress${quality || 30}`;
   }
 
-  return img
+  return img;
 }
 
-
 export function resizeImage(img, size) {
-  if (!img) return img
+  if (!img) return img;
 
   if (img.indexOf(ossPath) === 0 || img.indexOf(ossFastPath) === 0) {
-    return `${img.replace(ossPath, ossFastPath)}?x-oss-process=style/resize${size || 750}`
+    return `${img.replace(
+      ossPath,
+      ossFastPath
+    )}?x-oss-process=style/resize${size || 750}`;
   }
 
-  return img
+  return img;
 }
 
 /**
  * 压缩图片 80%, 最大宽度 750
- * @param {*} img 
+ * @param {*} img
  */
 export function transferImage(img) {
-  if (!img) return img
+  if (!img) return img;
 
   if (img.indexOf(ossPath) === 0 || img.indexOf(ossFastPath) === 0) {
-    if (store.getState().system.systemInfo.platform !== 'ios') {
+    if (store.getState().system.systemInfo.platform !== "ios") {
       // ios 暂时不支持 webp
-      return `${img.replace(ossPath, ossFastPath)}?x-oss-process=style/transwebp`
+      return `${img.replace(
+        ossPath,
+        ossFastPath
+      )}?x-oss-process=style/transwebp`;
     }
 
-    return `${img.replace(ossPath, ossFastPath)}?x-oss-process=image/resize,m_lfit,w_750/quality,Q_80`
+    return `${img.replace(
+      ossPath,
+      ossFastPath
+    )}?x-oss-process=image/resize,m_lfit,w_750/quality,Q_80`;
   }
 
-  return img
+  return img;
 }
 
 /**
  * 简易版解析 url
- * @param {*} url 
+ * @param {*} url
  */
 export function parseURL(url) {
   if (!url) return undefined;
@@ -140,48 +163,55 @@ export function parseURL(url) {
   let query;
   let hash;
 
-  const gotHash = url.split('#')
-  strTmp = gotHash[0]
+  const gotHash = url.split("#");
+  strTmp = gotHash[0];
   if (gotHash.length > 1) {
-    hash = gotHash[1]
+    hash = gotHash[1];
   }
-  
-  const gotQuery = strTmp.split('?')
-  strTmp = gotQuery[0]
+
+  const gotQuery = strTmp.split("?");
+  strTmp = gotQuery[0];
   if (gotQuery.length > 1) {
-    query = gotQuery[1]
+    query = gotQuery[1];
   }
 
   // 小程序只支持 https 开头
-  const [_, origin, path] = /(https:\/\/[^/]+)(.*)/.exec(strTmp)
+  const [_, origin, path] = /(https:\/\/[^/]+)(.*)/.exec(strTmp);
 
   return {
     origin,
     path,
     query,
     hash
-  }
+  };
 }
 
-
 /**
  * 解析 queryString   a=b&c=d  ==> { a:b, c:d }
- * @param {*} queryString 
+ * @param {*} queryString
  */
 export function parseQueryString(queryString) {
-  if (!queryString || '?' === queryString) return undefined
-
-  const query = queryString.indexOf('?') === 0 ? queryString.replace(/^\?/, '') : queryString
-  
-  return query.split('&').filter(x => x).reduce((acc, it) => {
-    const [k, v] = it.split('=')
-    const val = Object.prototype.hasOwnProperty.call(acc, k) ? [...([].concat(acc[k])), v] : v
-
-    return {
-      ...acc,
-      [`${k}`]: val,
-    }
-  }, {})
+  if (!queryString || "?" === queryString) return undefined;
+
+  const query =
+    queryString.indexOf("?") === 0
+      ? queryString.replace(/^\?/, "")
+      : queryString;
+
+  return query
+    .split("&")
+    .filter(x => x)
+    .reduce((acc, it) => {
+      const [k, v] = it.split("=");
+      const val = Object.prototype.hasOwnProperty.call(acc, k)
+        ? [...[].concat(acc[k]), v]
+        : v;
+
+      return {
+        ...acc,
+        [`${k}`]: val
+      };
+    }, {});
 }
 
 /**
@@ -195,26 +225,28 @@ export function formateLeftTime(leftTime, unit) {
   const ns = 1000;
 
   const day = Math.floor(leftTime / nd);
-  const hour = Math.floor(leftTime % nd / nh);
-  const min = Math.floor(leftTime % nd % nh / nm);
-  const sec = Math.floor(leftTime % nd % nh % nm / ns);
+  const hour = Math.floor((leftTime % nd) / nh);
+  const min = Math.floor(((leftTime % nd) % nh) / nm);
+  const sec = Math.floor((((leftTime % nd) % nh) % nm) / ns);
 
   switch (unit) {
-    case 'min':
-      return `${day}天${hour}小时${min}分`
+    case "min":
+      return `${day}天${hour}小时${min}分`;
     default:
-      return `${day}天${hour}小时${min}分${sec}秒`
+      return `${day}天${hour}小时${min}分${sec}秒`;
   }
 }
 
 export function getDownloadURL(url, type) {
-  if (!url) return url
+  if (!url) return url;
 
   switch (type) {
-    case 'avatar':
-      return url.replace('https://wx.qlogo.cn/', `${HOST}/qlogo/`);
-    case 'alioss':
-      return url.replace(ossPath, `${HOST}/alioss/`).replace(ossFastPath, `${HOST}/alioss/`);
+    case "avatar":
+      return url.replace("https://wx.qlogo.cn/", `${HOST}/qlogo/`);
+    case "alioss":
+      return url
+        .replace(ossPath, `${HOST}/alioss/`)
+        .replace(ossFastPath, `${HOST}/alioss/`);
     default:
       return url;
   }
@@ -224,20 +256,20 @@ export function getDownloadURL(url, type) {
  * @description 获取当前页url
  */
 export const getCurrentPageUrl = () => {
-  let pages = Taro.getCurrentPages()
-  let currentPage = pages[pages.length - 1]
-  let url = currentPage.route
-  return url
+  let pages = Taro.getCurrentPages();
+  let currentPage = pages[pages.length - 1];
+  let url = currentPage.route;
+  return url;
 };
 
 export const pageToLogin = () => {
-  let path = getCurrentPageUrl()
-  if (!path.includes('login')) {
+  let path = getCurrentPageUrl();
+  if (!path.includes("login")) {
     Taro.navigateTo({
       url: "/pages/login/login"
     });
   }
-}
+};
 
 let endTime;
 export function throttle(callback, time = 500) {
@@ -248,7 +280,7 @@ export function throttle(callback, time = 500) {
   }
 }
 
-export const wait = function (time = 500) {
+export const wait = function(time = 500) {
   return new Promise(res => {
     setTimeout(() => {
       res();
@@ -256,142 +288,152 @@ export const wait = function (time = 500) {
   });
 };
 
-export const getQueryString = function (str, name) {
+export const getQueryString = function(str, name) {
   var regex = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
   var r = str.match(regex);
   if (r != null) return unescape(r[2]);
   return null;
-}
+};
 // 项目详情海报
-export const makeProjectPoster = (res) => {
+export const makeProjectPoster = res => {
   return new Promise(resolve => {
-
-    const { poster, qrcode, nickname, avatarurl, canvasName } = res
+    const { poster, qrcode, nickname, avatarurl, canvasName } = res;
     const ctx = Taro.createCanvasContext(canvasName);
-    const _avatarurl = getDownloadURL(avatarurl, 'avatar');
-    const _poster = getDownloadURL(poster, 'alioss');
+    const _avatarurl = getDownloadURL(avatarurl, "avatar");
+    const _poster = getDownloadURL(poster, "alioss");
 
     Promise.all([
       Taro.downloadFile({ url: _poster }),
       Taro.downloadFile({ url: qrcode }),
       Taro.downloadFile({ url: _avatarurl })
-    ]).then(list => {
-
-
-      ctx.setFillStyle("#ffffff")
-      ctx.fillRect(0, 0, 640, 1136)
-
-      // 背景海报
-      ctx.drawImage(list[0].tempFilePath, 0, 0, 640, 1136);
-
-
-      //绘制名字
-      ctx.setFontSize(30);
-      ctx.setFillStyle('#fff');
-      ctx.setTextAlign('left');
-      ctx.fillText(nickname, 160, 920, 250);
-      ctx.stroke();
-      ctx.save();
-      ctx.arc(500, 910, 60, 0, 2 * Math.PI)
-      ctx.strokeStyle = "#ffffff";
-      ctx.setFillStyle('#fff');
-      ctx.fill();
-      ctx.clip(); //裁剪上面的圆形
-      ctx.drawImage(list[1].tempFilePath, 0, 0, 430, 430, 440, 850, 120, 120);
-      ctx.restore()
-
-      //绘制头像
-      ctx.arc(96, 906, 50, 0, 2 * Math.PI) //画出圆
-      ctx.strokeStyle = "#ffffff";
-      ctx.clip(); //裁剪上面的圆形
-      ctx.drawImage(list[2].tempFilePath, 46, 856, 100, 100);
-      ctx.draw(false, function () {
-        Taro.canvasToTempFilePath({
-          canvasId: canvasName, success: function ({ tempFilePath }) {
-            resolve(tempFilePath)
-          }
-        })
+    ])
+      .then(list => {
+        ctx.setFillStyle("#ffffff");
+        ctx.fillRect(0, 0, 640, 1136);
+
+        // 背景海报
+        ctx.drawImage(list[0].tempFilePath, 0, 0, 640, 1136);
+
+        //绘制名字
+        ctx.setFontSize(30);
+        ctx.setFillStyle("#fff");
+        ctx.setTextAlign("left");
+        ctx.fillText(nickname, 160, 920, 250);
+        ctx.stroke();
+        ctx.save();
+        ctx.arc(500, 910, 60, 0, 2 * Math.PI);
+        ctx.strokeStyle = "#ffffff";
+        ctx.setFillStyle("#fff");
+        ctx.fill();
+        ctx.clip(); //裁剪上面的圆形
+        ctx.drawImage(list[1].tempFilePath, 0, 0, 430, 430, 440, 850, 120, 120);
+        ctx.restore();
+
+        //绘制头像
+        ctx.arc(96, 906, 50, 0, 2 * Math.PI); //画出圆
+        ctx.strokeStyle = "#ffffff";
+        ctx.clip(); //裁剪上面的圆形
+        ctx.drawImage(list[2].tempFilePath, 46, 856, 100, 100);
+        ctx.draw(false, function() {
+          Taro.canvasToTempFilePath({
+            canvasId: canvasName,
+            success: function({ tempFilePath }) {
+              resolve(tempFilePath);
+            }
+          });
+        });
+      })
+      .catch(err => {
+        rtLog.error(
+          "下载图片失败, 图片地址 (" +
+            `${_poster} , ${qrcode}, ${_avatarurl}` +
+            "), 错误消息: " +
+            (err.message || err.errMsg || err)
+        );
       });
-    }).catch((err) => {
-      rtLog.error('下载图片失败, 图片地址 ('+ `${_poster} , ${qrcode}, ${_avatarurl}` +'), 错误消息: ' + ( err.message || err.errMsg || err))
-    })
-  })
-}
+  });
+};
 
 // 删除本地缓存文件
-export const removeLocalFile = (callback) => {
+export const removeLocalFile = callback => {
   Taro.getSavedFileList().then(res => {
     if (res.fileList.length > 0) {
       res.fileList.map(file => {
-        Taro.removeSavedFile({ filePath: file.filePath })
-      })
-      callback && callback()
+        Taro.removeSavedFile({ filePath: file.filePath });
+      });
+      callback && callback();
     } else {
-      callback && callback()
+      callback && callback();
     }
-  })
-}
-
+  });
+};
 
 // 把当前画布指定区域的内容导出生成指定大小的图片
 export const canvasToTempFilePath = (canvasName, callback) => {
   Taro.canvasToTempFilePath({
     canvasId: canvasName,
-    success: function (data) {
-      var tempFilePath = data.tempFilePath
-      callback(tempFilePath)
+    success: function(data) {
+      var tempFilePath = data.tempFilePath;
+      callback(tempFilePath);
     },
-    fail: function (res) {
+    fail: function(res) {
       console.log(res);
     }
   });
-}
+};
 // 保存文件到本地
 export const saveFile = (tempFilePath, callback) => {
   Taro.saveFile({
     tempFilePath,
     success(res1) {
-      Taro.hideLoading()
-      console.log('成功' + res1.savedFilePath)
+      Taro.hideLoading();
+      console.log("成功" + res1.savedFilePath);
       callback(res1.savedFilePath);
     },
-    fail: function (res) {
-      console.log('失败');
+    fail: function(res) {
+      console.log("失败");
     }
-  })
-}
+  });
+};
 // 下载文件
 export const downloadFile = (imgUrl, callback) => {
   Taro.downloadFile({
     url: imgUrl,
-    success: function (param) {
+    success: function(param) {
       if (param.statusCode === 200) {
-
-        callback(param)
+        callback(param);
       }
     },
-    fail: function (res) {
-      console.log('生成失败请稍候重试');
+    fail: function(res) {
+      console.log("生成失败请稍候重试");
     }
-  })
-}
+  });
+};
 
 // 生成名片海报
-export const makeCardPoster = (data) => {
+export const makeCardPoster = data => {
   return new Promise(resolve => {
-    const { bgImg, qrcodeImg, name, nickname, avatarurl, company, post, canvasName } = data
+    const {
+      bgImg,
+      qrcodeImg,
+      name,
+      nickname,
+      avatarurl,
+      company,
+      post,
+      canvasName
+    } = data;
     const ctx = Taro.createCanvasContext(canvasName);
-    const _qrcodeImg = getDownloadURL(qrcodeImg, 'alioss');
-    const _avatarurl = getDownloadURL(avatarurl, 'avatar');
+    const _qrcodeImg = getDownloadURL(qrcodeImg, "alioss");
+    const _avatarurl = getDownloadURL(avatarurl, "avatar");
 
     Promise.all([
       Taro.downloadFile({ url: _avatarurl }),
-      Taro.downloadFile({ url: _qrcodeImg }),
+      Taro.downloadFile({ url: _qrcodeImg })
     ]).then(list => {
-
       // 绘制背景
-      ctx.setFillStyle("#ffe200")
-      ctx.fillRect(0, 0, 640, 1040)
+      ctx.setFillStyle("#ffe200");
+      ctx.fillRect(0, 0, 640, 1040);
       ctx.drawImage(bgImg, 0, 0, 640, 1040);
 
       // 绘制小程序码
@@ -399,85 +441,87 @@ export const makeCardPoster = (data) => {
 
       //绘制名字
       ctx.setFontSize(35);
-      ctx.setFillStyle('#000');
-      ctx.setTextAlign('center');
+      ctx.setFillStyle("#000");
+      ctx.setTextAlign("center");
       ctx.fillText(name, 320, 356, 450);
       ctx.stroke();
 
       // 绘制圆角矩形
       roundRect(ctx, 220, 180, 320, 80, 10);
       ctx.strokeStyle = "#7ff724";
-      ctx.setFillStyle("#7ff724")
+      ctx.setFillStyle("#7ff724");
       ctx.fill();
-      ctx.stroke()
+      ctx.stroke();
 
       //推荐语
       ctx.setFontSize(20);
-      ctx.setFillStyle('#000');
-      ctx.setTextAlign('left');
+      ctx.setFillStyle("#000");
+      ctx.setTextAlign("left");
 
       // 文字换行
-      var str = nickname + ':给你推荐个人,Ta特别靠谱~'
+      var str = nickname + ":给你推荐个人,Ta特别靠谱~";
       var lineWidth = 0;
-      var canvasWidth = 260;//文字宽度
-      var initHeight = 213;//绘制字体距离canvas顶部初始的高度
+      var canvasWidth = 260; //文字宽度
+      var initHeight = 213; //绘制字体距离canvas顶部初始的高度
       var lastSubStrIndex = 0; //每次开始截取的字符串的索引
       for (let i = 0; i < str.length; i++) {
         lineWidth += ctx.measureText(str[i]).width;
         if (lineWidth > canvasWidth) {
-          ctx.fillText(str.substring(lastSubStrIndex, i), 250, initHeight);//绘制截取部分
-          initHeight += 30;//20为字体的高度
+          ctx.fillText(str.substring(lastSubStrIndex, i), 250, initHeight); //绘制截取部分
+          initHeight += 30; //20为字体的高度
           lineWidth = 0;
           lastSubStrIndex = i;
         }
-        if (i == str.length - 1) {//绘制剩余部分
+        if (i == str.length - 1) {
+          //绘制剩余部分
           ctx.fillText(str.substring(lastSubStrIndex, i + 1), 250, initHeight);
         }
       }
       ctx.stroke();
       //绘制职位
       ctx.setFontSize(25);
-      ctx.setFillStyle('#606060');
-      ctx.setTextAlign('center');
+      ctx.setFillStyle("#606060");
+      ctx.setTextAlign("center");
       ctx.fillText(post, 320, 446, 450);
       ctx.stroke();
       //绘制公司
       ctx.setFontSize(25);
-      ctx.setFillStyle('#606060');
-      ctx.setTextAlign('center');
+      ctx.setFillStyle("#606060");
+      ctx.setTextAlign("center");
       ctx.fillText(company, 320, 500, 450);
       ctx.stroke();
       //长按或扫一扫了解Ta
       ctx.setFontSize(20);
-      ctx.setFillStyle('#a5a5a5');
-      ctx.setTextAlign('center');
-      ctx.fillText('长按或扫一扫了解Ta', 320, 860, 450);
+      ctx.setFillStyle("#a5a5a5");
+      ctx.setTextAlign("center");
+      ctx.fillText("长按或扫一扫了解Ta", 320, 860, 450);
       ctx.stroke();
-      ctx.save()
+      ctx.save();
 
       // 绘制头像
-      ctx.arc(146, 216, 50, 0, 2 * Math.PI) //画出圆
+      ctx.arc(146, 216, 50, 0, 2 * Math.PI); //画出圆
       ctx.strokeStyle = "#ffffff";
       ctx.clip(); //裁剪上面的圆形
       ctx.drawImage(list[0].tempFilePath, 96, 166, 100, 100);
-      ctx.restore()
+      ctx.restore();
 
       // 绘制二维码
-      ctx.save()
-      ctx.arc(315, 675, 65, 0, 2 * Math.PI) //画出圆
+      ctx.save();
+      ctx.arc(315, 675, 65, 0, 2 * Math.PI); //画出圆
       ctx.strokeStyle = "#ffffff";
       ctx.clip();
       ctx.drawImage(list[1].tempFilePath, 50, 0, 400, 400, 249, 610, 130, 130);
-      ctx.draw(false, function () {
+      ctx.draw(false, function() {
         Taro.canvasToTempFilePath({
-          canvasId: canvasName, success: function ({ tempFilePath }) {
-            resolve(tempFilePath)
+          canvasId: canvasName,
+          success: function({ tempFilePath }) {
+            resolve(tempFilePath);
           }
-        })
+        });
       });
-    })
-  })
-}
+    });
+  });
+};
 
 // 圆角矩形
 export const roundRect = (ctx, x, y, w, h, r) => {
@@ -490,20 +534,26 @@ export const roundRect = (ctx, x, y, w, h, r) => {
   ctx.arcTo(x, y + h, x, y, r);
   ctx.arcTo(x, y, x + w, y, r);
   ctx.closePath();
-}
+};
 
-export const makeCardShareImg = (data) => {
+export const makeCardShareImg = data => {
   return new Promise(resolve => {
-
-    const { bgImg, post, name, phoneImg, phone, picture, addrImg, company, canvasName } = data
+    const {
+      bgImg,
+      post,
+      name,
+      phoneImg,
+      phone,
+      picture,
+      addrImg,
+      company,
+      canvasName
+    } = data;
     const ctx = Taro.createCanvasContext(canvasName);
-    const _picture = getDownloadURL(picture, 'alioss');
-    Promise.all([
-      Taro.downloadFile({ url: _picture })
-    ]).then(list => {
-
-      ctx.setFillStyle("#ffffff")
-      ctx.fillRect(0, 0, 750, 400)
+    const _picture = getDownloadURL(picture, "alioss");
+    Promise.all([Taro.downloadFile({ url: _picture })]).then(list => {
+      ctx.setFillStyle("#ffffff");
+      ctx.fillRect(0, 0, 750, 400);
 
       // 背景海报
       ctx.drawImage(bgImg, 0, 0, 750, 600);
@@ -526,55 +576,56 @@ export const makeCardShareImg = (data) => {
       // 手机图片
       ctx.drawImage(phoneImg, 48, 450, 36, 36);
       //手机号码
-      ctx.fillText('TEL: ' + phone, 100, 478);
+      ctx.fillText("TEL: " + phone, 100, 478);
 
       //绘制头像
-      ctx.arc(550, 200, 100, 0, 2 * Math.PI) //画出圆
+      ctx.arc(550, 200, 100, 0, 2 * Math.PI); //画出圆
       ctx.strokeStyle = "#ffffff";
-      ctx.stroke()
+      ctx.stroke();
 
       ctx.clip(); //裁剪上面的圆形
       ctx.drawImage(list[0].tempFilePath, 450, 100, 200, 200, 400, 100);
 
-      ctx.draw(false, function () {
-        Taro.canvasToTempFilePath({ canvasId: canvasName, quality: 1 }).then(({ tempFilePath }) => {
-          resolve(tempFilePath)
-        })
+      ctx.draw(false, function() {
+        Taro.canvasToTempFilePath({ canvasId: canvasName, quality: 1 }).then(
+          ({ tempFilePath }) => {
+            resolve(tempFilePath);
+          }
+        );
       });
-    })
-  })
-}
+    });
+  });
+};
 
-export const isObject = function (value) {
+export const isObject = function(value) {
   var type = typeof value;
-  return value != null && type === 'object';
-}
+  return value != null && type === "object";
+};
 
 //使用递归的方式实现数组、对象的深拷贝
-export const deepClone = function (obj) {
+export const deepClone = function(obj) {
   if (!isObject(obj)) {
-    throw new Error('obj 不是一个对象！')
+    throw new Error("obj 不是一个对象！");
   }
-  let isArray = Array.isArray(obj)
-  let cloneObj = isArray ? [] : {}
+  let isArray = Array.isArray(obj);
+  let cloneObj = isArray ? [] : {};
   for (let key in obj) {
-    cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
+    cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
   }
 
-  return cloneObj
-}
-
+  return cloneObj;
+};
 
-export const validateAuth = function (name, callback) {
+export const validateAuth = function(name, callback) {
   Taro.getSetting().then(res => {
-    const hasAuth = res.authSetting[name]
+    const hasAuth = res.authSetting[name];
     if (hasAuth) {
-      callback && callback(true)
+      callback && callback(true);
     } else {
-      callback && callback(false)
+      callback && callback(false);
     }
-  })
-}
+  });
+};
 
 /**
  * 检测 `phoneNumber` 是否是中国的手机号码。
@@ -583,12 +634,15 @@ export const validateAuth = function (name, callback) {
  * @param strict 是否严格模式
  * @returns `phoneNumber` 是中国的手机号码返回 `true`，否则返回 `false`
  */
-export const isChineseMobilePhoneNumber = function (phoneNumber, strict) {
+export const isChineseMobilePhoneNumber = function(phoneNumber, strict) {
   if (strict === undefined) {
     strict = false;
   }
-  return (strict ? /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/ : /^1[3-9][0-9]{9}$/).test(phoneNumber.toString());
-}
+  return (strict
+    ? /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/
+    : /^1[3-9][0-9]{9}$/
+  ).test(phoneNumber.toString());
+};
 
 /**
  * 检查 `value` 是否是一个邮件地址。
@@ -597,87 +651,88 @@ export const isChineseMobilePhoneNumber = function (phoneNumber, strict) {
  * @returns `value` 是邮件地址返回 `true`，否则返回 `false`
  * @see http://emailregex.com/
  */
-export const isEmail = function (value) {
+export const isEmail = function(value) {
   var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(value);
-}
+};
 
 /**
  * 转换海报的数据库配置为可用配置
- * @param {*} config 
- * @param {*} params 
+ * @param {*} config
+ * @param {*} params
  */
 export function getCanvasConfig(config, params) {
   if (!config || !params) {
-    throw new Error('转换海报配置出错: config 或 params 不能为空')
+    throw new Error("转换海报配置出错: config 或 params 不能为空");
   }
 
-  const { basic, items } = typeof config === 'string' ? JSON.parse(config) : config
+  const { basic, items } =
+    typeof config === "string" ? JSON.parse(config) : config;
 
   const itemConf = items.reduce((conf, item) => {
-    const { type, remark, value, variable, ...others } = item
-    const settingOfType = conf[type] || []
-    let val = variable ? params[variable] : value
+    const { type, remark, value, variable, ...others } = item;
+    const settingOfType = conf[type] || [];
+    let val = variable ? params[variable] : value;
 
-    let mainVal = {}
+    let mainVal = {};
     switch (type) {
-      case 'texts':
-        mainVal = { text: val }
+      case "texts":
+        mainVal = { text: val };
         break;
-      case 'images':
-        mainVal = { url: val }
+      case "images":
+        mainVal = { url: val };
         break;
       default:
-        val = true
+        val = true;
         break;
     }
 
     if (val) {
       settingOfType.push({
         ...mainVal,
-        ...others,
-      })
-      conf[type] = settingOfType
+        ...others
+      });
+      conf[type] = settingOfType;
     }
-    
-    return conf
-  }, {})
+
+    return conf;
+  }, {});
 
   return {
     ...basic,
-    ...itemConf,
-  }
+    ...itemConf
+  };
 }
 
 /**
  * 身份证校验
- * 
+ *
  * https://blog.csdn.net/gqzydh/article/details/90295842
- * 
- * @param {*} idcode 
+ *
+ * @param {*} idcode
  */
-export function checkIDCard(idcode){
+export function checkIDCard(idcode) {
   // 加权因子
-  var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
+  var weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
   // 校验码
-  var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
+  var check_code = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
 
   var code = idcode + "";
-  var last = idcode[17];//最后一位
+  var last = idcode[17]; //最后一位
 
-  var seventeen = code.substring(0,17);
+  var seventeen = code.substring(0, 17);
 
   // ISO 7064:1983.MOD 11-2
   // 判断最后一位校验码是否正确
   var arr = seventeen.split("");
   var len = arr.length;
   var num = 0;
-  for(var i = 0; i < len; i++){
-      num = num + arr[i] * weight_factor[i];
+  for (var i = 0; i < len; i++) {
+    num = num + arr[i] * weight_factor[i];
   }
-  
+
   // 获取余数
-  var resisue = num%11;
+  var resisue = num % 11;
   var last_no = check_code[resisue];
 
   // 格式的正则