客户管理（详情）

zxl

4 天以前 93bfb1c5512db9feceb16cd3084a92d4dedf615e

 manager/src/views/customer/index.vue

@@ -68,6 +68,7 @@
        @on-selection-change="showSelect"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="openInfo(row)">查看详情</Button>
          <Button type="info" size="small" style="margin-right: 5px" @click="openEdit(row)">编辑标签</Button>
          <Button type="error" size="small" style="margin-right: 5px" @click="joinBlack(row)">加入黑名单</Button>
        </template>
@@ -87,6 +88,82 @@
        ></Page>
      </Row>

      <Modal
        v-model="showCustomerInfo"
        :title="modelTitle"
        width="700"
        :mask-closable="false"
      >
        <div class="customer-detail">
          <div class="avatar-section">
            <Avatar :src="customerInfo.face" size="large" />
            <div class="basic-info">
              <h3>{{ customerInfo.nickName || '微信用户' }}</h3>
              <p>ID: {{ customerInfo.id }}</p>
              <p>用户名: {{ customerInfo.username }}</p>
            </div>
          </div>

          <Divider />

          <div class="detail-grid">
            <div class="detail-row">
              <span class="detail-label">性别：</span>
              <span class="detail-value">{{ customerInfo.sex === 0 ? "女" : "男"}}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">地区：</span>
              <span class="detail-value">{{ customerInfo.region || '未设置' }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">手机号：</span>
              <span class="detail-value">{{ customerInfo.mobile || '未绑定' }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">当前积分：</span>
              <span class="detail-value">{{ customerInfo.point }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">总积分：</span>
              <span class="detail-value">{{ customerInfo.totalPoint }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">账号状态：</span>
              <span class="detail-value">
          <Tag :color="customerInfo.disabled ? 'error' : 'success'">
            {{ customerInfo.disabled ? '已禁用' : '正常' }}
          </Tag>
        </span>
            </div>
            <div class="detail-row">
              <span class="detail-label">是否关联店铺：</span>
              <span class="detail-value">{{ customerInfo.haveStore ? '是' : '否' }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">注册时间：</span>
              <span class="detail-value">{{ customerInfo.createTime }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">最后登录时间：</span>
              <span class="detail-value">{{ customerInfo.lastLoginDate }}</span>
            </div>
          </div>

          <div v-if="customerInfo.customerTagList && customerInfo.customerTagList.length > 0" class="tags-section">
            <h4>用户标签</h4>
            <div>
              <Tag v-for="tag in customerInfo.customerTagList" :key="tag" color="default" style="margin-right: 8px;">
                {{ tag }}
              </Tag>
            </div>
          </div>
        </div>

        <div slot="footer">
          <Button type="primary" @click="showCustomerInfo = false">关闭</Button>
        </div>
      </Modal>
<!--      标签弹窗-->
      <Modal
        v-model="showCustomerTag"
        :title="modelTitle"
@@ -125,7 +202,7 @@

<script>
import JsonExcel from "vue-json-excel";
import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions} from "@/api/customer";
import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions,getCustomerInfo} from "@/api/customer";
import {addCustomerBlackByPC} from "@/api/customer-black.js"

export default {
@@ -135,6 +212,30 @@
  },
  data(){
    return{
      customerInfo: {
        birthday: null,
        blackId: null,
        clientEnum: null,
        createTime: "",
        customerTagList: [],
        disabled: true,
        experience: null,
        face: "",
        gradeId: null,
        haveStore: false,
        id: "",
        lastLoginDate: "",
        mobile: null,
        nickName: "",
        openId: null,
        point: 10,
        region: "",
        regionId: "",
        sex: 0,
        storeId: null,
        totalPoint: 0,
        username: ""
      },
      loading: false, // 表单加载状态
      //查询客户列表请求参数
      searchForm:{
@@ -225,8 +326,9 @@
      selectCount: 0, // 已选数量
      selectList: [], // 已选数据列表

      //客户详情对话框---
      showCustomerInfo:false,
      //客户标签对话框---

      showCustomerTag:false,
      submitLoading:false,
      selectLoading:false,
@@ -301,6 +403,39 @@
      this.selectList = e.map(d => d.id);
      this.selectCount = e.length;
    },
    //查看详情
    openInfo(row){
      this.showCustomerInfo = true;
      this.modelTitle = "用户详情"
      getCustomerInfo(row.id).then(res =>{
        if(res.code === 200){
          this.customerInfo = {
            birthday: res.data.birthday || null,
            blackId: res.data.blackId || null,
            clientEnum: res.data.clientEnum || null,
            createTime: res.data.createTime || '',
            customerTagList: res.data.customerTagList || [],
            disabled: res.data.disabled || false,
            experience: res.data.experience || null,
            face: res.data.face || '默认头像URL',
            gradeId: res.data.gradeId || null,
            haveStore: res.data.haveStore || false,
            id: res.data.id || '',
            lastLoginDate: res.data.lastLoginDate || '',
            mobile: res.data.mobile || null,
            nickName: res.data.nickName || '微信用户',
            openId: res.data.openId || null,
            point: res.data.point || 0,
            region: res.data.region || '',
            regionId: res.data.regionId || '',
            sex: res.data.sex || 0,
            storeId: res.data.storeId || null,
            totalPoint: res.data.totalPoint || 0,
            username: res.data.username || ''
          };
        }
      })
    },
    // 编辑标签
    openEdit(row){
      this.showCustomerTag = true
@@ -360,6 +495,40 @@

</script>
<style lang="scss" scoped>
.customer-detail {
  padding: 16px;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.basic-info {
  margin-left: 16px;
}

.basic-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.basic-info p {
  margin: 6px 0;
  color: #808695;
  font-size: 14px;
}

.tags-section {
  margin-top: 16px;
  padding-top: 16px;
}

.tags-section h4 {
  margin-bottom: 12px;
  color: #17233d;
}
.export {
  margin: 10px 20px 10px 0;
}