chat/src/pages/mine/mine.vue

<template>
  <div class="cx-mine">
    <movable-area class="moveMenuBox">
      <movable-view class="moveMenuCont" :x="tran" :y="vert" direction="all" damping="30" friction="5" @change="handleChange">
        <img class="moveMenuPic" src="/static/images/headPic5.jpg">
        <p class="msgText">80</p>
        <p class="text">聊一聊</p>
      </movable-view>

      <!--头部-->
      <div class="headDivBox">
        <div class="imgBox">
          <img class="headImg" :src="userInfo.avatarUrl">
          <img class="vip" src="/static/images/vip.png" v-if="userInfo.isVip">
          <img class="authen" src="/static/images/presonAuthen.png"> <!--认证-->
        </div>
        <div class="userInfoBox">
          <p class="userName">{{userInfo.name}}</p>
          <p class="userVipExp" v-if="userInfo.isVip">VIP有效期至{{userInfo.vipExpirse}}</p>
        </div>
        <div class="vipRenew">
          <p class="text" v-text="userInfo.isVip ? 'VIP续费' : '成为VIP'"></p>
        </div>
      </div>

      <!--基本信息-->
      <div class="userInfoDivBox">
        <div class="optionsDiv toRight" @click="toWallet()">
          <img class="img" src="/static/images/money.png">
          <p class="num">{{userInfo.myMoney}}</p>
          <p class="text">我的钱包</p>
        </div>

        <div class="optionsDiv toRight">
          <img class="img" src="/static/images/goods.png">
          <p class="num">{{userInfo.myGoodsNum}}件</p>
          <p class="text">商品管理</p>
        </div>

        <div class="optionsDiv" @click="toCustomerManage()">
          <img class="img" src="/static/images/CRM.png">
          <p class="num">{{userInfo.myCustomerNum}}人</p>
          <p class="text">客户管理</p>
        </div>
      </div>

      <!--名片管理-->
      <div class="optionsBox">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-card.png">
          <p class="text" v-show="false">●</p>
        </div>
        <p class="title">名片管理</p>
        <p class="toMore">&gt;</p>
      </div>

      <!--邀请好友-->
      <div class="optionsBox" @click="inviteFriends()">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-share.png">
          <p class="text" v-show="true">●</p>
        </div>
        <p class="title">邀请好友</p>
        <p class="toMore">&gt;</p>
      </div>

      <!--认证-->
      <div class="optionsBox" @click="toAuthen(userInfo.name)">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-authen.png">
          <p class="text" v-show="true">●</p>
        </div>
        <p class="title">认证</p>
        <p class="tips">还未认证，快来认证吧！</p>
        <p :class="true ? 'toMore2' : 'toMore'">&gt;</p>
      </div>

      <!--服务号提醒-->
      <div class="optionsBox" @click="toServiceRemind()">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-remind.png">
          <p class="text" v-show="false">●</p>
        </div>
        <p class="title">服务号提醒</p>
        <p class="toMore">&gt;</p>
      </div>

      <!--隐私-->
      <div class="optionsBox">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-private.png">
          <p class="text" v-show="false">●</p>
        </div>
        <p class="title">隐私</p>
        <p class="toMore">&gt;</p>
      </div>

      <!--聊一聊自动回复设置-->
      <div class="optionsBox" @click="toAutoReply()">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-service.png">
          <p class="text" v-show="false">●</p>
        </div>
        <p class="title">聊一聊自动回复设置</p>
        <p class="toMore">&gt;</p>
      </div>

      <!--定制企业版-->
      <div class="optionsBox">
        <div class="imgBox">
          <img class="img" src="/static/images/companyDiy.png">
          <p class="text" v-show="false">●</p>
        </div>
        <p class="title">定制企业版</p>
        <p class="toMore">&gt;</p>
      </div>

      <!--帮助与反馈-->
      <div class="optionsBox">
        <div class="imgBox">
          <img class="img" src="/static/images/mine-help.png">
          <p class="text" v-show="false">●</p>
        </div>
        <p class="title">帮助与反馈</p>
        <p class="toMore">&gt;</p>
      </div>

    </movable-area>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tran: 350,     //横轴(移动菜单)
      vert: 500,     //纵轴(移动菜单)
      userInfo: {name: '康娟', avatarUrl: '../../static/images/headPic3.jpg', isVip: true, vipExpirse: '2019-11-25', myMoney: 200.01, myGoodsNum: 500, myCustomerNum: 1000}
    }
  },

  onLoad() {
    wx.getLocation({
      success (res) {
        console.log(res);
      }
    })
  },

  methods: {
    handleChange(e) {
      this.tran = e.detail.x;
      this.vert = e.detail.y;
      if (this.tran <= 188) {
          this.tran = 0;
      } else {
          this.tran = 350;
      }
    },
    toAuthen(name) {
      wx.navigateTo({
        url: './authentication?userName=' + name
      });
    },
    toWallet() {
      wx.navigateTo({
        url: './myWallet'
      });
    },
    inviteFriends() {
      wx.navigateTo({
        url: './inviteFriends'
      });
    },
    toCustomerManage() {
      wx.navigateTo({
        url: './customerManage'
      });
    },
    toServiceRemind() {
      wx.navigateTo({
        url: './serviceRemind'
      });
    },
    toAutoReply() {
      wx.navigateTo({
        url: './setServiceAutoReply'
      });
    }
  }
}
</script>

<style lang="less">

</style>