webapp / GreenwayWeb

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="visible==false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>会员管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">会员管理</span></div>
      </div>
      <div class="content">
        <!-- 顶部搜索 -->
        <div class="toolbar">
          <!-- 顶部搜索 -->
          <el-form :inline="true" :model="formParams">
            <el-form-item label="客户昵称">
              <el-input v-model="formParams.name" placeholder="请输入客户昵称"
               style="width: 168px;margin-right: 15px" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="formParams.phone" placeholder="请输入手机号"
               style="width: 168px;margin-right: 15px"/>
            </el-form-item>
            <el-form-item label="标签">
              <el-select v-model="formParams.labelId" placeholder="请选择"
                   style="width: 168px;margin-right: 15px">
                <el-option
                  v-for="(item, index) in tipsList"
                  :key="index"
                  :label="item.labelName"
                  :value="item.buyerLabelId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="最近消费时间">
              <el-date-picker
                v-model="formParams.dates"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd"

                 style="width: 168px;margin-right: 15px"
              />
            </el-form-item>
            <el-form-item>
              <el-form-item label="累计消费金额">
                <el-input v-model="formParams.minMoney" placeholder="请输入最小值"
               style="width: 168px;margin-right: 15px"/>
              </el-form-item>
              <el-form-item label="-">
                <el-input v-model="formParams.maxMoney" placeholder="请输入最大值"
               style="width: 168px;margin-right: 15px" />
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-form-item label="购买次数">
                <el-input v-model="formParams.minBuyers" type="number" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最小值"
               style="width: 168px;margin-right: 15px"/>
              </el-form-item>
              <el-form-item label="-">
                <el-input v-model="formParams.maxBuyers" type="number" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最大值"
               style="width: 168px;margin-right: 15px" />
              </el-form-item>
            </el-form-item>

            <el-form-item label-width="0">

              <el-button   @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
              <el-button  @click="clear" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" >重置</el-button>
              <el-button   @click="handleExport" style="background-color: #3F9B6A;color: #fff">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--  表格 -->
        <div class="content_table">
          <div class="table">
            <el-table
              :data="tableData"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            >
              <el-table-column prop="name" label="客户昵称" />
              <el-table-column prop="phone" label="手机号" show-overflow-tooltip/>
              <el-table-column prop="memberLevelName" label="会员等级" />
              <el-table-column prop="total" label="消费总额" />
              <el-table-column prop="buyers" label="购买次数" />
              <!-- <el-table-column prop="credit" label="剩余积分" /> -->
              <el-table-column prop="time" label="最近消费时间"  show-overflow-tooltip/>
              <el-table-column prop="createTime" label="注册时间"  width="200"/>
              <el-table-column :formatter="row=>row.registerIp?row.registerIp:'-'" label="注册IP" show-overflow-tooltip />
              <el-table-column :formatter="row=>row.lastLoginIp?row.lastLoginIp:'-'" prop="time" label="最后登录IP" show-overflow-tooltip />
              <el-table-column label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                  <div @click="details(scope.row)" class="tableBtn greens">详情</div>
                  <!-- <div  @click="setIntegral(scope.row)" class="tableBtn greens">设置积分</div> -->
                  <div @click="makeTag(scope.row.buyerUserId)" class="tableBtn greens">打标签</div>
                  <div  @click="addBlackList(scope.row)" class="tableBtn greens">
                    {{ scope.row.ifBlack ? "取消黑名单" : "加入黑名单" }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye">
              <el-pagination
                :current-page="currentPage"
                background
                small
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- *************对话框开始************* -->
    <!-- 打标签 -->
    <el-dialog
      title="选择标签"
      :visible.sync="addFormDialog"
      width="30%"
      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>
            <el-button style="background-color: #3F9B6A;color: #fff" @click="runTips" >管理标签</el-button>
          </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="editIntegral"
      width="30%"
      center
      :close-on-click-modal="false"
      @close="credit = 0"
    >
      <el-form label-width="100px">
        <el-form-item label="修改积分">
          <el-radio-group v-model="updateWay" @change="changeWayRadio">
            <el-radio :label="true">增加</el-radio>
            <el-radio :label="false">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="积分">
          <el-input-number v-if="updateWay" v-model="credit" :min="0" />
          <el-input-number v-if="!updateWay" v-model="credit" :max="0" />
        </el-form-item>
        <el-form-item style="margin-top:-18px;color:#999999">
          <span>提示 : 在原有积分上增加或减少</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editIntegral = false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
        <el-button style="background-color: #3F9B6A;color: #fff" @click="saveIntegral">确定</el-button>
      </span>
    </el-dialog>
    <member-details ref="memberDetails" @reset="reset" @childMessage="childMessage"  :message="parentMessage"  v-if="visible"/>
  </div>
</template>

<script>
import {
  customerMageGetAll,
  getLabels,
  customerSaveUserLabel,
  customerBlacklist,
  updateBuyerCredit,
  exportBuyerUser
} from '@/api/customerMage'
// import { getSelect } from '../../../api/renovation'
import memberDetails from './details'
// import { constants } from 'fs';
export default {
  components: { memberDetails },
  data () {
    return {
      showMore: false,
      formParams: {
        name: '', // 用户昵称
        phone: '', // 手机号
        labelId: '', // 标签id
        dates: [], // 最近消费时间日期数组
        minMoney: '', // 累计消费金额最小值
        maxMoney: '', // 累计消费金额最大值
        minBuyers: '', // 购买次数最小值
        maxBuyers: '', // 购买次数最大值
        startTime: '', // 申请开始时间
        endTime: '', // 申请结束时间
        page: 1,
        pageSize: 10
      },
      tipsForm: {
        labelName: ''
      },
      date: [],
      total: 1,
      tableData: [],
      currentPage: 1,
      dialog: {},
      tipsList: [],
      checkList: [],
      addFormDialog: false,
      editIntegral: false,
      buyerUserId: '', // 用户id
      credit: '', // 积分值 扣减积分则传负数
      updateWay: true, // 修改积分单选绑定
      visible:false,
      parentMessage:{

      }
    }
  },
  created () {
    this.getAll(this.formParams)
    this.getSelect({ labelName: '' })
  },
  methods: {
    /**
     * 导出
     */
    async handleExport () {
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      console.log(this.formParams, 'this.formParams')
      const res = await exportBuyerUser(this.formParams)
      if (!res) {
        return
      }
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      const fileName = '用户列表.xls'
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.href = URL.createObjectURL(blob)
        elink.style.display = 'none'
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    handleSizeChange (val) {
      this.formParams.pageSize = val
      this.getAll(this.formParams)
    },
    handleCurrentChange (val) {
      this.formParams.page = val
      this.getAll(this.formParams)
    },
    // 查询
    search () {
      this.total = 1
      this.formParams.page = 1
      this.getAll(this.formParams)
    },
    // 查询标签
    searchTips () {
      console.log(this.tipsForm)
      this.getSelect({ labelName: this.tipsForm.labelName })
    },
    changeWayRadio (val) {
      this.updateWay = val
    },
    // 设置积分（更新积分）
    setIntegral (row) {
      this.editIntegral = true
      this.buyerUserId = row.buyerUserId
    },
    async saveIntegral () {
      if (this.credit === '' || this.credit === undefined) {
        return this.$message('积分不能为空！')
      } else if (this.credit === 0) {
        this.editIntegral = false
      } else {
        const res = await updateBuyerCredit({
          buyerUserId: this.buyerUserId,
          credit: this.credit
        })
        if (res.code === '') {
          this.getAll(this.formParams)
          this.editIntegral = false
          this.$message.success('修改积分成功')
        }
      }
    },
    // 打标签
    async saveTips (row) {
      console.log(this.checkList)
      const res = await customerSaveUserLabel({
        buyerUserId: this.buyerUserId,
        buyerLabelIds: this.checkList
      })
      if (res.code === '') {
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.checkList = []
        this.tipsForm.labelName = ''
        this.addFormDialog = false
      }
    },
    // 加入黑名单
    addBlackList (row) {
      //  "ifBlack": "是否加入黑名单 1-是 0-否"
      console.log(row.ifBlack)
      this.$confirm(
        `${
          row.ifBlack
            ? '确认是否取消黑名单'
            : '加入黑名单后，对方将无法登录商城'
        }`,
        `${row.ifBlack ? '取消黑名单' : '加入黑名单'}`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (!row.ifBlack) {
            customerBlacklist({
              buyerUserId: row.buyerUserId,
              ifBlack: 1
            }).then(res => {
              if (res.code === '') {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
                this.getAll(this.formParams)
              }
            })
          } else {
            customerBlacklist({
              buyerUserId: row.buyerUserId,
              ifBlack: 0
            }).then(res => {
              if (res.code === '') {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
                this.getAll(this.formParams)
              }
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 跳转标签页面
    runTips () {
      this.$router.push({
        path: '/member/tips'
      })
    },
    // 清除
    clear () {
      this.formParams = {
        name: '', // 用户昵称
        phone: '', // 手机号
        labelId: '', // 标签id
        dates: [], // 最近消费时间日期数组
        minMoney: '', // 累计消费金额最小值
        maxMoney: '', // 累计消费金额最大值
        minBuyers: '', // 购买次数最小值
        maxBuyers: '', // 购买次数最大值
        page: 1,
        pageSize: 10
      }
      this.getAll(this.formParams)
    },
    // 打标签
    makeTag (buyerUserId) {
      this.checkList = []
      this.tipsForm.labelName = ''
      this.addFormDialog = true
      this.buyerUserId = buyerUserId
    },
    details (row) {
      // this.$router.push({
      //   name: 'customerDetails',
      //   params: { buyerUserId: row.buyerUserId, orderFormid: row.orderFormid }
      // })
    
    this.parentMessage ={
      buyerUserId: row.buyerUserId, 
      orderFormid: row.orderFormid
    }
    this.visible = true
    },
    // 初始化查询所有数据
    async getAll (formParams) {
      const res = await customerMageGetAll(formParams)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    // 初始化查询所有标签
    async getSelect (name) {
      const res = await getLabels(name)
      this.tipsList = res.data
    },
    reset () {
      this.getAll(this.formParams)
    },
    childMessage(msg){
      this.visible = msg
    }
  }
}
</script>

<style lang='scss' scoped>
@import url("../../../styles/elDialog.scss");

.checkBoxStyle {
  margin-bottom: 20px;
}
 .zhuti {
  padding: 0  20px 20px 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #Fff;
  }
  ::v-deep .el-input__inner:focus {
       border: #11be59 1px solid;
    }
    ::v-deep .el-input__inner:hover {
         border: #11be59 1px solid;
      }
    ::v-deep .el-select .el-input.is-focus .el-input__inner{
          border-color:#11be59
      }
     ::v-deep .el-form-item__label{
         font-weight: normal;
          font-size: 12px;
        }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
     background-color: #3F9B6A;
   }
   .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;
     }
     ::v-deep .el-pagination__total {
         position: absolute;
         left: 10px;
       }
</style>