webapp / GreenwayWeb

<template>
  <div style="">
    <div style="height:58px;line-height:58px;background-color: #fff;padding: 0 10px;">
        <div style="color:#0006"> <span>会员管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">会员详情</span></div>
      </div>
    <div class="custom_info_page">
      
      <TitleWithCircle title="客户信息" style="margin-bottom: 15px;"/>
      <div class="custom_info">
        <div class="info_item">
          <img :src="userObj.headImage" alt>
        </div>
        <div class="info_item">
          <ul>
            <li v-for="(item, index) in infoList" :key="index">
              <p>
                <span>{{ item.name }} :</span>
                <span>{{ item.value }}</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <div class="custom_tag">
        <TitleWithCircle title="客户标签" style="margin-bottom: 15px;"/>
        <div class="Tag">
          <p v-for="(item, index) in tagList" :key="index" style="margin-right:10px">{{item}}</p>
          <p @click="addTag">贴标签</p>
        </div>
      </div>
      <div class="custom_data">
        <TitleWithCircle title="消费数据" style="margin-bottom: 15px;"/>
        <div class="data_list">
          <p>
            <span>
              下 单 数:
              <font>{{ userObj.orders }}</font>
            </span>
            支付成功数:
            <font>{{ userObj.pays }}</font>
          </p>
          <p>
            <span>
              售后次数:
              <font>{{ userObj.afters }}</font>
            </span>
            售后单数:
            <font>{{ userObj.afterOrders }}</font>
          </p>
        </div>
        <div class="tab_list">
          <p
            v-for="(item, index) in tabList"
            :key="index"
            :class="[{ active: componentName === item.componentName }]"
            @click="changeTab(item)"
          >{{ item.tabName }}</p>
        </div>
      </div>
      <div v-if="componentName === 'order'">
        <el-form :inline="true" :model="userForm" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="userForm.orderFormid" placeholder="请输入订单编号" />
          </el-form-item>
          <el-form-item>
            <el-button style="background-color: #3F9B6A;color: #fff" @click="searchOrders">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="userObj.orderList"
         :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >
          <el-table-column prop="orderFormid" label="订单编号" />
          <el-table-column prop="shopName" label="店铺名称" />
          <el-table-column prop="products" label="商品数量">
            <template slot-scope="scope">
              <span>{{scope.row.products}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="订单金额(元)" />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">待付款</span>
              <span v-if="scope.row.state === 2">待发货</span>
              <span v-if="scope.row.state === 3">待收货</span>
              <span v-if="scope.row.state === 4">已完成</span>
              <span v-if="scope.row.state === 5">已关闭</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="componentName === 'comment'">
        <el-table
          :data="userObj.comments"
         :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >
          <el-table-column prop="shopName" label="店铺名称" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="comments" label="评论">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="seeComment(scope.row.commentId)">查看</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="componentName === 'addressInfo'">
        <el-table
          :data="userObj.receives"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >
          <el-table-column prop="receiveName" label="姓名" />
          <el-table-column prop="receivePhone" label="电话" />
          <el-table-column prop="receiveAdress" label="地址">
            <template slot-scope="scope">
              <span>{{scope.row.receiveAdress}}{{scope.row.address}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- *************对话框开始************* -->
      <!-- 打标签 -->
      <el-dialog
        title="选择标签"
        :visible.sync="addFormDialog"
        width="30%"
        append-to-body
        center
        :close-on-click-modal="false"
      >
        <div>
          <!-- 表单搜索 -->
          <el-form :inline="true" :model="tipsForm" class="demo-form-inline">
            <el-form-item label="标签名称">
              <el-input v-model="tipsForm.labelName" placeholder="请输入标签名称" />
            </el-form-item>
            <el-form-item>
              <el-button @click="searchTips" style="background-color: #3F9B6A;color: #fff">查询</el-button>
            </el-form-item>
            <el-form-item>
              <div class="tableBtn greens" @click="runTips">管理标签</div>
            </el-form-item>
          </el-form>
          <!-- 多选 -->
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="(item, index) in tipsList"
              :key="index"
              class="checkBoxStyle"
              :label="item.buyerLabelId"
            >{{ item.labelName }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFormDialog = false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
          <el-button style="background-color: #3F9B6A;color: #fff"  @click="saveTips">确定</el-button>
        </span>
      </el-dialog>
      <!-- 查看评论弹框 -->
      <el-dialog
        title="评论详情"
        :visible.sync="comDialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        width="60%"
        center
        :append-to-body="true"
      >
        <div class="pinStyle">
          <div class="comment">
            <div class="com_left">评论：</div>
            <div class="com_right">{{ commentDetails.comment }}</div>
          </div>
          <div v-if="commentDetails.images.length != 0" class="comment_imgList">
            <div class="img_left">图片：</div>
            <div class="imgList">
              <el-image
                v-for="(item,index) in commentDetails.images"
                :key="index"
                :src="item"
                :preview-src-list="commentDetails.images"
              />
            </div>
          </div>
        <!--  <div class="comment">
            <div v-if="commentDetails.addComment !=''" class="com_left">追评：</div>
            <div class="com_right">{{ commentDetails.addComment }}</div>
          </div>
          <div v-if="commentDetails.addImages.length != 0" class="comment_imgList">
            <div class="img_left">图片</div>
            <div class="imgList">
              <el-image
                v-for="(item,index) in commentDetails.addImages"
                :key="index"
                :src="item"
                :preview-src-list="commentDetails.addImages"
              />
            </div>
          </div> -->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button v-if="comState" @click="toShow" style="background-color: #3F9B6A;color: #fff">允许展示</el-button>
          <el-button v-else @click="noneShow" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">隐藏</el-button>
          <el-button class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="delCom">删除</el-button>
        </span>
      </el-dialog>
      <div style="margin-top: 10px;">
      <el-button class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="doCancel">取消</el-button>
      <!-- <el-button style="background-color: #3F9B6A;color: #fff" @click="doSubmit">确认</el-button> -->
    </div>
    </div>
   
  </div>
</template>

<script>
import { customerMageGetById, getLabels, customerSaveUserLabel } from '@/api/customerMage'
import { commentSysGetById, commentSysUpdate, commentSysDelete, commentAllow } from '@/api/comment'
import TitleWithCircle from '@/components/top/index';
export default {
  components: {
      TitleWithCircle
    },
    props: {  
    // 声明接收的数据  
    message: {  
      type: Object, // 指定数据的类型  
      required: true, // 指定该数据是必需的  
      default: {}// 指定默认值  
    }
  },
  data () {
    return {
      visible: false,
      infoList: [
        { name: '用户昵称', value: '', fields: 'name' },
        { name: '手 机 号', value: '', fields: 'phone' },
        { name: '性  别', value: '', fields: 'sex' },
        { name: '注册时间', value: '', fields: 'createTime' },
        { name: '生   日', value: '', fields: 'birthday' }
      ],
      tagList: [],
      tabList: [
        { tabName: 'TA的订单', componentName: 'order' },
        { tabName: 'TA的评论', componentName: 'comment' },
        { tabName: 'TA的收货地址', componentName: 'addressInfo' }
      ],
      componentName: 'order',
      customData: {},
      dialog: {},
      user: '',
      userObj: {},
      addFormDialog: false,
      tipsForm: {
        labelName: ''
      },
      userForm: {
        orderFormid: ''
      },
      checkList: [],
      tipsList: [],
      comDialogVisible: false,
      commentDetails: { images: [], addImages: [] },
      commentId: '',
      comState: 1 // 是否隐藏 1-是 0-否
    }
  },
  mounted () {
    this.getUser(this.message)

  },
  methods: {
    // 允许展示
    async toShow () {
      const res = await commentAllow({
        commentId: this.commentId,
        state: 1
      })
      if (res.code === '') {
        this.$message.success('成功')
        this.comDialogVisible = false
        this.comState = 0
        this.getUser(this.user)
      }
    },
    // 隐藏
    async noneShow () {
      const res = await commentSysUpdate({
        commentId: this.commentId,
        state: 0
      })
      if (res.code === '') {
        this.comState = 1
        this.$message.success('隐藏成功')
        this.comDialogVisible = false
        this.getUser(this.user)
      }
    },
    // 删除
    async delCom () {
      const res = await commentSysDelete({
        commentId: this.commentId
      })
      if (res.code === '') {
        this.$message.success('删除成功')
        this.comDialogVisible = false
        this.getUser(this.user)
      }
    },
    // 评论详情
    async seeComment (commentId) {
      this.comDialogVisible = true
      const res = await commentSysGetById({ commentId: commentId })
      this.commentId = commentId
      this.commentDetails = res.data
    },
    handleClose () {
      this.comDialogVisible = false
    },
    closeModalDetail () {
      this.comState = 1
      this.componentName = 'order'
    },
    // 贴标签
    addTag () {
      this.addFormDialog = true
      this.getSelect({ labelName: this.tipsForm.labelName })
    },
    // 查询订单
    searchOrders () {
      this.user.orderFormid = this.userForm.orderFormid
      this.getUser(this.user)
    },
    // 查询标签
    searchTips () {
      console.log('查询标签',this.tipsForm)
      this.getSelect({ labelName: this.tipsForm.labelName })
    },
    // 跳转标签页面
    runTips () {
      this.$router.push({
        path: '/member/tips'
      })
    },
    // 打标签
    async saveTips (row) {
      console.log(this.checkList)
      const res = await customerSaveUserLabel({
        buyerUserId: this.user.buyerUserId,
        buyerLabelIds: this.checkList
      })
      if (res.code === '') {
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.checkList = []
        this.addFormDialog = false
        this.getUser(this.user)
      }
    },
    changeTab (item) {
      this.componentName = item.componentName
    },
    // 客户详情
    async getUser (obj) {
      this.user = obj
      const res = await customerMageGetById({
        buyerUserId: obj.buyerUserId,
        orderFormid: obj.orderFormid
      })
      this.userObj = res.data
      this.visible = true
      this.tagList = this.userObj.labels
      this.getInfoList(this.userObj)
    },
    // 获取客户信息
    getInfoList (ob) {
      this.infoList.map(item => {

        item.value = ob[item.fields] || ''
        if (item.fields === 'sex') {
          item.value = item.value === '1' ? '男' : '女'
        }
      })
    },
    // 初始化查询所有标签
    async getSelect (name) {
      const res = await getLabels(name)
      this.tipsList = res.data
    },
    doCancel () {
      this.visible = false
      this.$emit('childMessage', this.visible); 
    },
    doSubmit () {
      this.visible = false
      this.$emit('reset')
    },
  }
}
</script>

<style lang='scss' scoped>
// 评论详情
.comment_manage_page {
  padding: 20px;
}
.pinStyle {
  .comment {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .com_left {
      font-size: 20px;
      color: #333333;
      margin-right: 20px;
    }
    .com_right {
      font-size: 18px;
      color: #333333;
    }
  }
  .comment_imgList {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;

    .img_left {
      font-size: 20px;
      color: #333333;
      margin-right: 20px;
      width: 60px;
    }
    .imgList {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .el-image {
        width: 200px;
        height: 134px;
        border-radius: 4px;
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }
  }
  // .line {
  //   width: 890px;
  //   height: 1px;
  //   background: #e0e5eb;
  //   margin: 0 auto;
  //   margin-bottom: 33px;
  // }
  // .addComment {
  //   font-size: 20px;
  //   color: #3F9B6A;
  //   margin-bottom: 20px;
  // }
}
//
h2 {
  font-size: 24px;
  font-weight: 500;
  position: relative;
  &::before {
    content: "";
    height: 24px;
    width: 4px;
    background-color: #3F9B6A;
    position: absolute;
    left: -10px;
    top: 2px;
    display: block;
  }
}
.custom_info_page {
  padding: 20px 40px;
  background-color: #fff;
  min-height: 500px;

  .custom_info {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    .info_item {
      &:nth-child(1) {
        height: 180px;
        width: 100px;
        img {
          width: 100px;
          height: 100px;
          border-radius: 50px;
          text-align: center;
          margin-top: 40px;
        }
      }
      &:nth-child(2) {
        margin-left: 100px;
        ul {
          overflow: hidden;
          list-style: none;
          li {
            float: left;
            width: 50%;
            p {
              font-size: 16px;
              color: #333;
              line-height: 40px;
              span:nth-child(2) {
                color: #666;
              }
            }
          }
        }
      }
    }
  }

  .custom_tag {
    margin-bottom: 30px;
    .Tag{
      padding-top: 20px ;
    }
    p {
      display: inline-block;
      background-color: #d8e1fc;
      font-size: 16px;
      color: #333;
      text-align: center;
      // margin-right: 20px;
      border-radius: 4px;
      padding: 8px 15px;
      &:last-child {
        background-color: #fff;
        color: #3F9B6A;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .custom_data {
    .data_list {
      padding: 20px 0 40px 0;
      p {
        font-size: 16px;
        line-height: 40px;
        font {
          color: #666;
        }
        span {
          display: inline-block;
          width: 200px;
        }
      }
    }
    .tab_list {
      overflow: hidden;
      margin-bottom: 20px;
      p {
        float: left;
        padding: 0 50px;
        font-size: 16px;
        border: 1px #e0e5eb solid;
        box-sizing: border-box;
        color: #999999;
        height: 48px;
        line-height: 48px;
        &:nth-child(-n + 2) {
          border-right: 0;
        }
        &:nth-child(1) {
          border-radius: 4px 0 0 4px;
        }
        &:nth-child(3) {
          border-radius: 0 4px 4px 0;
        }
        &:hover {
          cursor: pointer;
        }
      }
      .active {
        background-color: #3F9B6A;
        color: #fff;
        border: 0;
      }
    }
  }
}
 .tableBtn {
       display: inline-block;
       margin-right: 10px;
     }

   .greens {
       color: #3F9B6A ;
     }
     ::v-deep .buttonHover:hover{
       color:#3f9b6a !important;
       border-color: #c5e1d2 !important;
       background-color: #ecf5f0 !important;
       outline: none;
     }
</style>