supply-front/src/components/Mall/Member/member-detail.vue

<template>
  <div class="detail-container">
    <el-page-header @back="goBack" content="会员详情"></el-page-header>
    <el-container>
      <el-header height="100">
        <div class="title">基础信息</div>
        <el-divider></el-divider>
        <el-row :gutter="20" class="member-info">
          <el-col :xs="24" :sm="4" :md="3" :lg="2">
            <el-avatar :size="80" :src="userDetail.avatar">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </el-col>
          <el-col :xs="24" :sm="20" :md="21" :lg="22">
            <!-- 普通用户 -->
            <el-row :gutter="20" v-if="userDetail.type !== 'SERVICE'">
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>昵称：</span><span>{{ userDetail.nickName }}</span><i class="el-icon-edit pointer" @click="editName()"></i></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>性别：</span><span>{{ userDetail.sex }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>微信手机号：</span><span>{{ userDetail.mobile }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>注册时间：</span><span>{{ userDetail.createTime }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>角色：</span><span>{{ userDetail.type | MEMBER_CURRENT_TYPE_FILTER }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>业务员：</span><span>{{ userDetail.serviceName ? userDetail.serviceName:'暂无' }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>业务员电话：</span><span>{{ userDetail.servicePhone ? userDetail.servicePhone:'暂无' }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div><el-button type="primary" size="small" @click="applyWorker">成为业务员</el-button></div></el-col>
            </el-row>
            <!-- 业务员 -->
            <el-row :gutter="20" v-if="userDetail.type === 'SERVICE'">
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>昵称：</span><span>{{ userDetail.nickName }}</span><i class="el-icon-edit pointer" @click="editName()"></i></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>性别：</span><span>{{ userDetail.sex }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>微信手机号：</span><span>{{ userDetail.mobile }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>注册时间：</span><span>{{ userDetail.createTime }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>角色：</span><span>{{ userDetail.type | MEMBER_CURRENT_TYPE_FILTER }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>真实姓名：</span><span>{{ userDetail.workerName }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>手机号码：</span><span>{{ userDetail.workerPhone }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>职位：</span><span>{{ userDetail.position }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>收益：</span><span>{{ userDetail.totalAmount }}</span></div></el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5"><div class="item"><span>客户：</span><span>{{ userDetail.customerNums }}</span></div></el-col>
            </el-row>
          </el-col>
          
        </el-row>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="账户明细" name="account" v-if="userDetail.type === 'SERVICE'" lazy>
            <member-account :user="userDetail"/>
          </el-tab-pane>
          <el-tab-pane label="订单管理" name="order" lazy>
            <member-order :user="userDetail"/>
          </el-tab-pane>
          <el-tab-pane label="会员地址" name="address" lazy>
            <member-address :user="userDetail"/>
          </el-tab-pane>
          <el-tab-pane label="收藏记录" name="favorite" lazy>
            <member-favorite :user="userDetail"/>
          </el-tab-pane>
          <el-tab-pane label="浏览记录" name="browse" lazy>
            <member-browse :user="userDetail"/>
          </el-tab-pane>
          <el-tab-pane label="优惠券" name="coupon" lazy>
            <member-coupon :user="userDetail"/>
          </el-tab-pane>
          <el-tab-pane label="企微客户" name="customer" v-if="userDetail.type === 'SERVICE'" lazy>
            <member-customer :user="userDetail"/>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import MemberAccount from "@/components/Mall/Member/member-account";
import MemberOrder from "@/components/Mall/Member/member-order";
import MemberAddress from "@/components/Mall/Member/member-address";
import MemberFavorite from "@/components/Mall/Member/member-favorite";
import MemberBrowse from "@/components/Mall/Member/member-browse";
import MemberCoupon from "@/components/Mall/Member/member-coupon";
import MemberCustomer from "@/components/Mall/Member/member-customer";
import {getMemberDetail, applyWorker, editNickname} from "@/api/member";

export default {
  name: 'MemberDetail',
  componentName: 'MemberDetail',
  props: ['user'],
  components: {
    MemberAccount, MemberOrder, MemberAddress, MemberFavorite, MemberBrowse, MemberCoupon, MemberCustomer
  },
  data() {
    return {
      activeName: this.user.type === 'SERVICE' ? 'account' : 'order',
      userDetail: {}
    }
  },
  created() {
    this.getMemberDetail(this.user.userId)
  },
  methods: {
    // 返回列表
    goBack() {
      this.$emit('backListFromDetail')
    },
    // 切换显示
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 获取会员详情
    getMemberDetail(userId) {
      getMemberDetail({ userId }).then(res => {
        this.userDetail = res.data
      })
    },

    // 成为业务员
    applyWorker() {
      this.$prompt('请输入企业微信手机号码', '成为业务员', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^1[3456789]\d{9}$/,
        inputErrorMessage: '请输入正确的手机号码'
      }).then(({ value }) => {
        applyWorker({
          personalPhone: this.userDetail.mobile,
          workPhone: value,
        }).then(res => {
          this.getMemberDetail(this.user.userId);
        })
      }).catch(() => {
          
      });
      
    },

    // 修改昵称
    editName() {
      this.$prompt('请输入会员昵称', '修改会员昵称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: this.userDetail.nickName,
        inputValidator: function(value) {
          if(!value) return '请输入会员昵称'
        },
      }).then(({ value }) => {
        editNickname({
          userId: this.user.userId,
          newNickName: value,
        }).then(res => {
          this.getMemberDetail(this.user.userId);
        })
      }).catch(() => {
          
      });
    },
  },
  beforeDestroy() {
    console.log("执行销毁前")
  }
}
</script>

<style scoped lang="scss">
  .detail-container {
    width:100%;
    height: 100%;
    ::v-deep .el-container {
      margin-top: 20px;
    }
    ::v-deep .el-header {
      .title {
        font-size: 16px;
      }
      .el-row {
        //display: flex;
        /* 实现垂直居底 */
        //align-items: end;
        /* 实现水平居中 */
        //justify-content: center;
        .el-col {
          .item {
            padding: 10px 0;
            white-space:nowrap;
          }
        }
      }
    }
  }
  .pointer {
    cursor: pointer;
    color: #409EFF;
    margin-left: 5px;
  }
</style>

<style lang="scss">
  .pagination {
    margin-top: 30px;
  }
</style>