easypay-admin/src/views/user/list/index.vue
2024-03-08 09:30:20 +08:00

2056 lines
68 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="divBox relative">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-tabs v-model="loginType" @tab-click="getList(1)">
<el-tab-pane :label="item.name" :name="item.type.toString()" v-for="(item, index) in headeNum" :key="index" />
</el-tabs>
<div class="container">
<el-form inline size="small" :model="userFrom" ref="userFrom" :label-position="labelPosition"
label-width="100px">
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
<el-col v-bind="grid">
<el-form-item label="用户搜索:">
<el-input v-model="userFrom.keywords" placeholder="请输入姓名或手机号" clearable class="selWidth" />
</el-form-item>
</el-col>
</el-col>
<template v-if="collapse">
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
<el-col v-bind="grid">
<el-form-item label="用户等级:">
<el-select v-model="levelData" placeholder="请选择" class="selWidth" clearable filterable multiple>
<el-option :value="item.id" v-for="(item, index) in levelList" :key="index"
:label="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="grid">
<el-form-item label="用户分组:">
<el-select v-model="groupData" placeholder="请选择" class="selWidth" clearable filterable multiple>
<el-option :value="item.id" v-for="(item, index) in groupList" :key="index"
:label="item.groupName"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="grid">
<el-form-item label="用户标签:">
<el-select v-model="labelData" placeholder="请选择" class="selWidth" clearable filterable multiple>
<el-option :value="item.id" v-for="(item, index) in labelLists" :key="index"
:label="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
<el-col v-bind="grid">
<el-form-item label="国家:">
<el-select v-model="userFrom.country" placeholder="请选择" class="selWidth" clearable
@on-change="changeCountry">
<el-option value="" label="全部"></el-option>
<el-option value="CN" label="中国"></el-option>
<el-option value="OTHER" label="国外"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="grid" v-if="userFrom.country === 'CN'">
<el-form-item label="省份:">
<el-cascader :options="addresData" :props="propsCity" filterable v-model="address"
@change="handleChange" clearable class="selWidth"></el-cascader>
</el-form-item>
</el-col>
<el-col v-bind="grid">
<el-form-item label="消费情况:">
<el-select v-model="userFrom.payCount" placeholder="请选择" class="selWidth" clearable>
<el-option value="" label="全部"></el-option>
<el-option value="0" label="0"></el-option>
<el-option value="1" label="1+"></el-option>
<el-option value="2" label="2+"></el-option>
<el-option value="3" label="3+"></el-option>
<el-option value="4" label="4+"></el-option>
<el-option value="5" label="5+"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="grid">
<el-form-item label="时间选择:" class="timeBox">
<el-date-picker v-model="timeVal" align="right" unlink-panels value-format="yyyy-MM-dd"
format="yyyy-MM-dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间"
class="selWidth" :picker-options="pickerOptions" @change="onchangeTime" />
</el-form-item>
</el-col>
</el-col>
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
</el-col> -->
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
<el-col v-bind="grid">
<el-form-item label="访问情况:">
<el-select v-model="userFrom.accessType" placeholder="请选择" class="selWidth" clearable>
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="首次访问"></el-option>
<el-option :value="2" label="时间段访问过"></el-option>
<el-option :value="3" label="时间段未访问"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="grid">
<el-form-item label="性别:">
<el-radio-group v-model="userFrom.sex" type="button" class="selWidth">
<el-radio-button label="">
<span>全部</span>
</el-radio-button>
<el-radio-button label="0">
<span>未知</span>
</el-radio-button>
<el-radio-button label="1">
<span>男</span>
</el-radio-button>
<el-radio-button label="2">
<span>女</span>
</el-radio-button>
<el-radio-button label="3">
<span>保密</span>
</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col v-bind="grid">
<el-form-item label="身份:">
<el-radio-group v-model="userFrom.isPromoter" type="button" class="selWidth">
<el-radio-button label="">
<span>全部</span>
</el-radio-button>
<el-radio-button label="1">
<span>推广员</span>
</el-radio-button>
<el-radio-button label="0">
<span>普通用户</span>
</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-col>
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
</el-col> -->
</template>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right userFrom">
<el-form-item>
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="small"
@click="userSearchs">搜索</el-button>
<el-button class="ResetSearch mr10" @click="reset('userFrom')" size="small">重置</el-button>
<a class="ivu-ml-8" @click="collapse = !collapse">
<template v-if="!collapse"> 展开 <i class="el-icon-arrow-down"></i> </template>
<template v-else> 收起 <i class="el-icon-arrow-up"></i> </template>
</a>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="btn_bt">
<el-button class="mr10" size="small" @click="onSend" type="primary"
v-hasPermi="['admin:coupon:user:receive']">发送优惠券</el-button>
<el-button class="mr10" size="small" @click="setBatch('group')"
v-hasPermi="['admin:user:group']">批量设置分组</el-button>
<el-button class="mr10" size="small" @click="setBatch('label')"
v-hasPermi="['admin:user:tag']">批量设置标签</el-button>
</div>
</div>
<el-table ref="table" v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini"
@selection-change="onSelectTab" highlight-current-row v-if="false">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="身份:">
<span>{{ props.row.isPromoter | filterIsPromoter }}</span>
</el-form-item>
<el-form-item label="首次访问:">
<span>{{ props.row.createTime | filterEmpty }}</span>
</el-form-item>
<el-form-item label="近次访问:">
<span>{{ props.row.lastLoginTime | filterEmpty }}</span>
</el-form-item>
<el-form-item label="手机号:">
<span>{{ props.row.phone | filterEmpty }}</span>
</el-form-item>
<el-form-item label="标签:">
<span>{{ props.row.tagName | filterEmpty }}</span>
</el-form-item>
<el-form-item label="地址:">
<span>{{ props.row.addres | filterEmpty }}</span>
</el-form-item>
<el-form-item label="备注:" style="width: 100%; display: flex; margin-right: 10px">
<span>{{ props.row.mark | filterEmpty }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="uid" label="ID" min-width="80" v-if="checkedCities.includes('ID')" />
<el-table-column label="头像" min-width="80" v-if="checkedCities.includes('头像')">
<template slot-scope="scope">
<div class="demo-image__preview">
<el-image style="width: 36px; height: 36px" :src="scope.row.avatar"
:preview-src-list="[scope.row.avatar]" />
</div>
</template>
</el-table-column>
<el-table-column label="姓名" min-width="160" v-if="checkedCities.includes('姓名')">
<template slot-scope="scope">
<span>{{ scope.row.nickname | filterEmpty }} | {{ scope.row.sex | sexFilter }}</span>
</template>
</el-table-column>
<el-table-column label="用户等级" min-width="100" v-if="checkedCities.includes('用户等级')">
<template slot-scope="scope">
<span>{{ scope.row.level | levelFilter | filterEmpty }}</span>
</template>
</el-table-column>
<el-table-column prop="groupName" label="分组" min-width="100" v-if="checkedCities.includes('分组')" />
<el-table-column prop="spreadNickname" label="推荐人" min-width="130" v-if="checkedCities.includes('推荐人')" />
<el-table-column label="手机号" min-width="100" v-if="checkedCities.includes('手机号')">
<template slot-scope="scope">
<span>{{ scope.row.phone | filterEmpty }}</span>
</template>
</el-table-column>
<!--<el-table-column-->
<!--label="用户类型"-->
<!--min-width="100"-->
<!--&gt;-->
<!--<template slot-scope="scope">-->
<!--<span>{{scope.row.userType | typeFilter}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column prop="nowMoney" label="余额" min-width="100" v-if="checkedCities.includes('余额')" />
<el-table-column prop="integral" label="积分" min-width="100" v-if="checkedCities.includes('积分')" />
<el-table-column label="操作" min-width="130" fixed="right" align="center" :render-header="renderHeader">
<template slot-scope="scope">
<el-button type="text" @click="editUser(scope.row.uid)" size="small"
v-hasPermi="['admin:user:infobycondition']">编辑</el-button>
<el-dropdown trigger="click">
<span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right" /> </span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="onDetails(scope.row.uid)"
v-if="checkPermi(['admin:user:topdetail'])">账户详情</el-dropdown-item>
<el-dropdown-item @click.native="onIdentityInfo(scope.row.uid)"
v-if="checkPermi(['admin:user:topdetail'])">身份信息</el-dropdown-item>
<el-dropdown-item @click.native="editPoint(scope.row.uid)"
v-if="checkPermi(['admin:user:operate:founds'])">积分余额</el-dropdown-item>
<el-dropdown-item @click.native="setBatch('group', scope.row)"
v-if="checkPermi(['admin:user:group'])">设置分组</el-dropdown-item>
<el-dropdown-item @click.native="setBatch('label', scope.row)"
v-if="checkPermi(['admin:user:tag'])">设置标签</el-dropdown-item>
<el-dropdown-item @click.native="setPhone(scope.row)"
v-if="checkPermi(['admin:user:update:phone'])">修改手机号</el-dropdown-item>
<el-dropdown-item @click.native="onLevel(scope.row.uid, scope.row.level)"
v-if="checkPermi(['admin:user:update:level'])">修改用户等级</el-dropdown-item>
<el-dropdown-item @click.native="setExtension(scope.row)"
v-if="checkPermi(['admin:user:update:spread'])">修改上级推广人</el-dropdown-item>
<el-dropdown-item @click.native="clearSpread(scope.row)"
v-if="scope.row.spreadUid && scope.row.spreadUid > 0 && checkPermi(['admin:retail:spread:clean'])">清除上级推广人</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<el-table ref="table" v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini"
@selection-change="onSelectTab" highlight-current-row>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="身份:">
<span>{{ props.row.isPromoter | filterIsPromoter }}</span>
</el-form-item>
<el-form-item label="首次访问:">
<span>{{ props.row.createTime | filterEmpty }}</span>
</el-form-item>
<el-form-item label="近次访问:">
<span>{{ props.row.lastLoginTime | filterEmpty }}</span>
</el-form-item>
<el-form-item label="手机号:">
<span>{{ props.row.phone | filterEmpty }}</span>
</el-form-item>
<el-form-item label="标签:">
<span>{{ props.row.tagName | filterEmpty }}</span>
</el-form-item>
<el-form-item label="地址:">
<span>{{ props.row.addres | filterEmpty }}</span>
</el-form-item>
<el-form-item label="备注:" style="width: 100%; display: flex; margin-right: 10px">
<span>{{ props.row.mark | filterEmpty }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="realName" label="姓名" min-width="80" align="center" />
<el-table-column prop="createTime" label="注册日期" min-width="80" align="center" />
<el-table-column prop="phone" label="手机号" min-width="80" />
<el-table-column prop="email" label="邮箱" min-width="80" align="center" />
<el-table-column prop="idCardNumber" label="身份证" min-width="80" align="center" />
<el-table-column prop="orderNum" label="订单数" min-width="80" align="center" />
<el-table-column prop="orderAmount" label=" 订单总金额" width="180" align="center">
</el-table-column>
<el-table-column prop="pendingRepayment" label=" 待还金额" width="100">
</el-table-column>
<el-table-column prop="address" label=" 状态(逾期/待还款)" width="180">
<template slot-scope="scope">
<div class="cont" style="width: 100px;" v-if="scope.row.repaymentStatus == 'Pending'">
待还款
</div>
<div class="cont" style="width: 100px;" v-if="scope.row.repaymentStatus == 'Late'">
已逾期
</div>
</template>
</el-table-column>visible
<el-table-column label="操作" min-width="120" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="getuserinfo(scope.row.uid)" class="mr10"
>查看用户详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="userFrom.limit" :current-page="userFrom.page"
layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
@current-change="pageChange" />
</div>
<el-dialog title="" :visible.sync="dialogVisibles" width="1388px" :before-close="handleClose">
<div class="detailbox" v-if="dialogVisibles">
<div class="titbox">
<div class="tit" v-for="(item, index) in detaillist" :key="index" v-if="index!=4&&index!=5&&index!=6&&index!=7&&index!=8" :class="detailindex == index ? 'act' : ''"
@click="changeindex(index)">{{ item.tit }}</div>
</div>
<div class="info_box" v-show="detailindex == 0">
<div class="info">
<div class="infoli">用户姓名:{{ userinfo.detailinfo.realName }}</div>
<div class="infoli">手机号:{{ userinfo.detailinfo.phoneNumber }}</div>
<div class="infoli">邮箱:{{ userinfo.detailinfo.email }}</div>
<div class="infoli">身份证号:{{ userinfo.detailinfo.idCardNumber }}</div>
</div>
<div class="tit" v-if="userinfo.detailinfo.userEmergencyContactsList">
紧急联系人:
</div>
<div class="addbox" v-if="userinfo.detailinfo.userEmergencyContactsList">
<div class="addli" style="width: 100%;" v-for="(item, index) in userinfo.detailinfo.userEmergencyContactsList" :key="index">
<div class="addtxt">
姓名:{{ item.contactName }}
</div>
<div class="addtxt">
手机号:{{ item.phoneNumber }}
</div>
<div class="addtxt" v-show="item.relationship != null">
关系:{{ getRelationship(item.relationship) }}
</div>
</div>
</div>
<div class="tit">
订单
</div>
<!-- <a @click="downloadAndOpenPDF" href="#">下载并打开PDF文件</a> -->
<div class="info">
<div class="infoli">总计订单:{{ userinfo.detailinfo.allOrderCount }} </div>
<div class="infoli">总金额:{{ userinfo.detailinfo.totalPendingRepayment }} </div>
<div class="infoli">待还金额:{{ userinfo.detailinfo.allConsumeCount }} </div>
</div>
<div class="tit">
身份证照片
</div>
<div class="info">
<div class="infoimg" style="justify-content: start;">
<!-- <div class="infoimg_box">
<div class="noimg">手持身份证照片</div>
<img src=""
alt=""
v-show="false">
<div class="text">手持身份证照片</div>
</div> -->
<div class="infoimg_box" style="margin-right: 100px;">
<div class="noimg" v-show="userinfo.detailinfo.idCardFrontPhoto == null">身份证正面</div>
<img :src="userinfo.detailinfo.idCardFrontPhoto" alt=""
v-show="userinfo.detailinfo.idCardFrontPhoto != ''"
@click="openImage(userinfo.detailinfo.idCardFrontPhoto)">
<div class="text">身份证正面</div>
</div>
<div class="infoimg_box" style="margin-right: 100px;">
<div class="noimg" v-show="userinfo.detailinfo.idCardBackPhoto == null">身份证反面</div>
<img :src="userinfo.detailinfo.idCardBackPhoto" alt="" v-show="userinfo.detailinfo.idCardBackPhoto != ''"
@click="openImage(userinfo.detailinfo.idCardBackPhoto)">
<div class="text">身份证反面</div>
</div>
<div class="infoimg_box">
<div class="noimg" v-show="userinfo.detailinfo.handIdCard == null">手持身份证正面</div>
<img :src="userinfo.detailinfo.handIdCard" alt="" v-show="userinfo.detailinfo.handIdCard != null"
@click="openImage(userinfo.detailinfo.handIdCard)">
<div class="text">手持身份证正面</div>
</div>
</div>
</div>
<div v-if="isImageOpen" class="overlay" @click="closeImage">
<div class="image-container">
<img :src="openedImage" alt="" class="enlarged-image">
</div>
</div>
<div class="tit">
收货地址:
</div>
<div class="addbox">
<div class="addli" v-for="(item, index) in userinfo.detailinfo.addresses" :key="index">
<div class="addtxt">
姓名:{{ item.realName }}
</div>
<div class="addtxt">
手机号:{{ item.phone }}
</div>
<div class="addtxt">
收件地址:{{ item.city }} {{ item.district }}{{ item.detail }}
</div>
</div>
</div>
<div class="tit">
IP记录
</div>
<div class="info" style="display: flex;flex-wrap: nowrap;" v-for="(item, index) in userinfo.detailinfo.ips":key="index">
<div class="infoli">{{ item.loginTime }}</div>
<div class="infoli">{{ item.ipaddr }}</div>
<!-- <div class="infoli">{{item.loginLocation}}</div> -->
<div class="infoli" style="color: red;">{{ item.loginLocation }}</div>
</div>
</div>
<div class="fkbox" v-if="detailindex == 3 && userinfo.tlxinfo && userinfo.zwxinfo">
<div class="titbox" style="margin-top: 10px;">
<div class="tit" :class="fkxindex == 0 ? 'act' : ''" @click="fkxindex = 0">
天狼星报告
</div>
<div class="tit" :class="fkxindex == 1 ? 'act' : ''" @click="fkxindex = 1">
紫微星报告
</div>
</div>
<div v-show="fkxindex == 0">
<div class="noreport">
<div class="btn" v-show="userinfo.tlxinfo.url == null" @click="tlxReport()">获取报告</div>
<div class="btn" v-show="userinfo.tlxinfo.url != null" @click="tlxReport()">重新获取报告</div>
<div class="tip" v-show="userinfo.tlxinfo.url == null">暂无报告</div>
</div>
<img :src="userinfo.tlxinfo.url" alt="" v-show="userinfo.tlxinfo.url != null">
</div>
<div v-show="fkxindex == 1">
<div class="noreport">
<div class="btn" v-show="userinfo.zwxinfo.url == null" @click="zwxReport()">获取报告</div>
<div class="btn" v-show="userinfo.zwxinfo.url != null" @click="zwxReport()">重新获取报告</div>
<div class="tip" v-show="userinfo.zwxinfo.url == null">暂无报告</div>
</div>
<img :src="userinfo.zwxinfo.url" alt="" v-show="userinfo.zwxinfo.url != null">
</div>
</div>
<div class="zdbox" v-if="detailindex != 0 && userinfo && detailindex != 3 && detailindex != 9 "
style="width: 1500px;">
<el-col :span="20">
<el-table :data="tableDatas.data" style="width: 1200px;" v-loading="loading" max-height="700">
<el-table-column :prop="item.key" :label="item.title" width="item.minWidth" :show-overflow-tooltip="true"
v-for="(item, index) in columns" :key="index" />
</el-table>
<div class="block">
<el-pagination :page-sizes="[6, 12, 18, 24]" :page-size="tableFroms.limit" :current-page="tableFroms.page"
layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.total"
@size-change="handleSizeChanges" @current-change="pageChanges" />
</div>
</el-col>
</div>
<div class="remake" v-if="detailindex == 9">
<el-popover placement="right" width="400" trigger="manual" v-model="visibl">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="adremake">
</el-input>
<el-button type="text" size="small" class="mr10" @click="addremark()">确认添加</el-button>
<el-button type="text" size="small" class="mr10" @click="visibl = false">取消</el-button>
<el-button type="text" size="small" slot="reference" class="mr10" @click="visibl = !visibl">添加备注</el-button>
</el-popover>
<el-table :data="remakeData.data" style="width: 100%" size="mini">
<el-table-column prop="updateTime" label="备注时间" min-width="50" align="center" />
<el-table-column prop="remark" label="备注内容" min-width="50" align="center" />
<el-table-column label="操作" min-width="120" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="delremark(scope.row)" class="mr10"
v-hasPermi="['admin:channel:update']">删除备注</el-button>
<el-popover placement="right" width="400" trigger="manual" v-model="visibless">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="upremake">
</el-input>
<el-button type="text" size="small" class="mr10" @click="upRemake(scope.row)">确认修改</el-button>
<el-button type="text" size="small" class="mr10" @click="visibless = false">取消</el-button>
<el-button type="text" size="small" slot="reference" class="mr10"
@click="visibless = !visibless">修改备注</el-button>
</el-popover>
<!-- <el-switch v-model="scope.row.status" :active-value="true" :inactive-value="false" active-text="打开"
inactive-text="关闭" @change="onchangeIsShow(scope.row)" /> -->
</template>
</el-table-column>
<!-- <el-table-column prop="installmentNumber" label="期数" min-width="50" align="center"/> -->
</el-table>
</div>
</div>
</el-dialog>
</el-card>
<div class="card_abs" v-show="card_select_show" :style="{ top: collapse ? 570 + 'px' : 270 + 'px' }">
<template>
<div class="cell_ht">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-button type="text" @click="checkSave()">保存</el-button>
</div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item in columnData" :label="item" :key="item" class="check_cell">{{ item }}</el-checkbox>
</el-checkbox-group>
</template>
</div>
<!--修改推广人-->
<el-dialog title="修改推广人" :visible.sync="extensionVisible" width="500px" :before-close="handleCloseExtension">
<el-form class="formExtension mt20" ref="formExtension" :model="formExtension" :rules="ruleInline"
label-width="120px" @submit.native.prevent v-loading="loading">
<el-form-item label="用户头像:" prop="image">
<div class="upLoadPicBox" @click="modalPicTap">
<div v-if="formExtension.image" class="pictrue"><img :src="formExtension.image" /></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="onSubExtension('formExtension')">确 定</el-button>
</span>
</el-dialog>
<!--用户列表-->
<el-dialog title="用户列表" :visible.sync="userVisible" width="900px">
<user-list v-if="userVisible" @getTemplateRow="getTemplateRow"></user-list>
<span slot="footer" class="dialog-footer">
<el-button @click="userVisible = false">取 消</el-button>
<el-button type="primary" @click="userVisible = false">确 定</el-button>
</span>
</el-dialog>
<!--批量设置-->
<el-dialog title="设置" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"
v-loading="loading">
<el-form-item prop="groupId" label="用户分组" :rules="[{ required: true, message: '请选择用户分组', trigger: 'change' }]"
v-if="batchName === 'group'" key="1">
<el-select v-model="dynamicValidateForm.groupId" placeholder="请选择分组" style="width: 80%" filterable>
<el-option :value="item.id" v-for="(item, index) in groupList" :key="index"
:label="item.groupName"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="groupId" label="用户标签" :rules="[{ required: true, message: '请选择用户标签', trigger: 'change' }]"
v-else>
<el-select v-model="dynamicValidateForm.groupId" placeholder="请选择标签" style="width: 80%" multiple filterable>
<el-option :value="item.id" v-for="(item, index) in labelLists" :key="index" :label="item.name"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">确 定</el-button>
</span>
</el-dialog>
<!--编辑-->
<el-dialog title="编辑" :visible.sync="visible" width="600px">
<edit-from v-if="visible" :uid="uid" @resetForm="resetForm"></edit-from>
</el-dialog>
<!--积分余额-->
<el-dialog title="积分余额" :visible.sync="VisiblePoint" width="500px" :close-on-click-modal="false"
:before-close="handlePointClose">
<el-form :model="PointValidateForm" ref="PointValidateForm" label-width="100px" class="demo-dynamic"
v-loading="loadingPoint">
<el-form-item label="修改余额" required>
<el-radio-group v-model="PointValidateForm.moneyType">
<el-radio :label="1">增加</el-radio>
<el-radio :label="2">减少</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="余额" required>
<el-input-number type="text" v-model="PointValidateForm.moneyValue" :precision="2" :step="0.1" :min="0"
:max="999999"></el-input-number>
</el-form-item>
<el-form-item label="修改积分" required>
<el-radio-group v-model="PointValidateForm.integralType">
<el-radio :label="1">增加</el-radio>
<el-radio :label="2">减少</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="积分" required>
<el-input-number type="text" step-strictly v-model="PointValidateForm.integralValue" :min="0"
:max="999999"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handlePointClose">取 消</el-button>
<el-button type="primary" :loading="loadingBtn" @click="submitPointForm('PointValidateForm')">确 定</el-button>
</span>
</el-dialog>
<!--账户详情-->
<el-dialog title="用户详情" :visible.sync="Visible" width="1600px" v-if="Visible" :before-close="Close">
<user-details ref="userDetails" :uid="uid" v-if="Visible"></user-details>
</el-dialog>
<!--身份信息-->
<el-dialog title="身份信息" :visible.sync="IdVisible" width="1600px" v-if="IdVisible" :before-close="Close">
<user-identity ref="userIdentity" :uid="uid" v-if="IdVisible"></user-identity>
</el-dialog>
<!-- 用户等级 -->
<el-dialog title="设置" :visible.sync="levelVisible" width="600px" :before-close="Close">
<level-edit :levelInfo="levelInfo" :levelList="levelList"></level-edit>
</el-dialog>
</div>
</template>
<script>
import {
userListApi,
groupListApi,
levelListApi,
tagListApi,
groupPiApi,
tagPiApi,
foundsApi,
updateSpreadApi,
updatePhoneApi,
} from '@/api/user';
import { spreadClearApi } from '@/api/distribution';
import editFrom from './edit';
import userDetails from './userDetails';
import userIdentity from './userIdentity';
import levelEdit from './level';
import userList from '@/components/userList';
import * as logistics from '@/api/logistics.js';
import Cookies from 'js-cookie';
import { checkPermi } from '@/utils/permission'; // 权限判断函数
import { Debounce } from '@/utils/validate';
import { integralListApi } from '@/api/marketing';
import {
getIdentityInfos,getZwxReportCache,getTlxReportCache,infobyconditionApi,getZwxReport,getTlxReport,remarkList, remarkUpdata, addRemark, delRemark
} from '@/api/user'
export default {
name: 'UserIndex',
components: { editFrom, userDetails, userList, levelEdit, userIdentity },
filters: {
sexFilter(status) {
const statusMap = {
0: '未知',
1: '男',
2: '女',
3: '保密',
};
return statusMap[status];
},
},
data() {
return {
isImageOpen: false,
openedImage: '',
formExtension: {
image: '',
spreadUid: '',
userId: '',
},
detailindex: 0,
userinfo:[
],
fkxindex: 0,
columns: [],
tableDatas: {
data: [],
total: 0,
},
detaillist: [
{ tit: '用户基础信息 ' },
{ tit: ' 订单记录 ' },
{ tit: '账单列表 ' },
{ tit: '风控报告 ' },
{ tit: '余额变动 ' },
{ tit: '好友关系 ' },
{ tit: '积分明细 ' },
{ tit: '签到记录 ' },
{ tit: '持有优惠券 ' },
{ tit: '备注' },
],
dialogVisibles: false,
ruleInline: {},
extensionVisible: false,
userVisible: false,
levelInfo: '',
pickerOptions: this.$timeOptions,
loadingBtn: false,
PointValidateForm: {
integralType: 2,
integralValue: 0,
moneyType: 2,
moneyValue: 0,
uid: '',
},
loadingPoint: false,
VisiblePoint: false,
visible: false,
userIds: '',
dialogVisible: false,
levelVisible: false,
levelData: [],
groupData: [],
labelData: [],
selData: [],
labelPosition: 'right',
collapse: false,
props: {
children: 'child',
label: 'name',
value: 'name',
emitPath: false,
},
propsCity: {
children: 'child',
label: 'name',
value: 'name',
},
headeNum: [
{ type: '', name: '全部用户' },
{ type: 'wechat', name: '微信公众号用户' },
{ type: 'routine', name: '微信小程序用户' },
{ type: 'h5', name: 'H5用户' },
],
listLoading: true,
tableData: {
data: [],
total: 0,
},
loginType: '',
userFrom: {
labelId: '',
userType: '',
sex: '',
isPromoter: '',
country: '',
payCount: '',
accessType: 0,
dateLimit: '',
keywords: '',
province: '',
city: '',
page: 1,
limit: 15,
level: '',
groupId: '',
},
grid: {
xl: 8,
lg: 12,
md: 12,
sm: 24,
xs: 24,
},
levelList: [],
labelLists: [],
groupList: [],
selectedData: [],
timeVal: [],
addresData: [],
dynamicValidateForm: {
groupId: [],
},
tableFroms: {
page: 1,
limit: 6,
type: '0',
userId: '',
},
loading: false,
groupIdFrom: [],
selectionList: [],
batchName: '',
uid: 0,
Visible: false,
IdVisible: false,
keyNum: 0,
address: [],
multipleSelectionAll: [],
idKey: 'uid',
card_select_show: false,
checkAll: false,
checkedCities: ['ID', '头像', '姓名', '用户等级', '分组', '推荐人', '手机号', '余额', '积分'],
columnData: ['ID', '头像', '姓名', '用户等级', '分组', '推荐人', '手机号', '余额', '积分'],
isIndeterminate: true,
uid: '',
remarkFrom: {
page: 1,
limit: 6,
type: '0',
uid: ''
},
tableDatas: {
data: [],
total: 0,
},
remakeData: {
data: [],
total: 0,
},
Visible: false,
upremake: '',
adremake: '',
visible: false,
visibl: false,
visibless:false
};
},
activated() {
this.userFrom.keywords = '';
this.loginType = '0';
this.getList(1);
},
mounted() {
this.getList();
this.groupLists();
this.levelLists();
this.getTagList();
this.getCityList();
},
methods: {
getRelationship(value) {
console.log(value,'valuevaluevaluevalue');
switch(value) {
case '0':
return '父母';
case '1':
return '子女';
case '2':
return '兄弟';
case '3':
return '姐妹';
case '4':
return '亲戚';
case '5':
return '朋友';
case '6':
return '配偶';
case '7':
return '同事';
default:
return '未知关系';
}
},
openImage(image) {
this.openedImage = image;
this.isImageOpen = true;
},
closeImage() {
this.isImageOpen = false;
},
checkPermi,
setPhone(row) {
this.$prompt('修改手机号', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '请输入修改手机号',
inputType: 'text',
inputValue: row.phone,
inputPlaceholder: '请输入手机号',
closeOnClickModal: false,
inputValidator: (value) => {
if (!value) return '请填写手机号';
// if (!/^1[3456789]\d{9}$/.test(value)) return '手机号格式不正确!'
// if(!value) return '输入不能为空'
},
})
.then(({ value }) => {
updatePhoneApi({ id: row.uid, phone: value }).then(() => {
this.$message.success('编辑成功');
this.getList();
});
})
.catch(() => {
this.$message.info('取消输入');
});
},
handleSizeChanges(val) {
this.tableFroms.limit = val;
if(this.detailindex==6){
this.integral()
}else{
this.getInfos();
}
},
pageChanges(page) {
this.tableFroms.page = page;
if(this.detailindex==6){
this.integral()
}else{
this.getInfos();
}
},
getuserinfo(id){
console.log('idididdidi',id);
this.detailindex=0
this.uid=id
this.tableFroms.userId=id
getIdentityInfos(id)
.then((res) => {
let detailinfo={}
detailinfo= res
this.userinfo.detailinfo=detailinfo
this.dialogVisibles=true
})
.catch((res) => {
this.loading = false;
});
getTlxReportCache(id)
.then((res) => {
this.userinfo.tlxinfo=res
})
.catch((res) => {
});
getZwxReportCache(id)
.then((res) => {
this.userinfo.zwxinfo=res
})
.catch((res) => {
});
console.log(this.userinfo,'detailinfodetailinfodetailinfo');
},
async upRemake(row) {
console.log(this.upremake, 'idididid');
let data = {
remark: this.upremake,
}
let id = row.id
await remarkUpdata(id, data).then((res) => {
this.upremake = ''
this.visible = false
this.getremake()
});
},
delremark(row) {
delRemark(row.id).then((res) => {
this.getremake()
});
},
addremark() {
let data = {
remark: this.adremake,
uid: this.uid
}
addRemark(data).then((res) => {
this.adremake = ''
this.visibl = false
this.getremake()
});
},
changeindex(index) {
console.log(index, 'indexindexindex');
this.detailindex = index
if (index == 2) {
this.tableFroms.type = '6'
this.getInfos()
} else if (index == 1) {
this.tableFroms.type = '0'
this.getInfos()
} else if (index == 4) {
this.tableFroms.type = '4'
this.getInfos()
} else if (index == 5) {
this.tableFroms.type = '5'
this.getInfos()
} else if (index == 6) {
// this.tableFroms.type='2'
this.integral()
} else if (index == 7) {
this.tableFroms.type = '2'
this.getInfos()
} else if (index == 8) {
this.tableFroms.type = '3'
this.getInfos()
} else if (index == 9) {
this.getremake()
}
},
getremake() {
this.remarkFrom.uid = this.uid
remarkList(this.remarkFrom)
.then((res) => {
this.remakeData.data = res.list;
this.remakeData.total = res.total;
})
.catch(() => {
});
},
integral() {
// this.loading = true;
integralListApi({ limit: this.tableFroms.limit, page: this.tableFroms.page }, { uid: this.uid })
.then((res) => {
this.tableDatas.data = res.list;
this.tableDatas.total = res.total;
this.columns = [
{
title: '来源/用途',
key: 'title',
minWidth: 120,
},
{
title: '积分变化',
key: 'integral',
minWidth: 120,
},
{
title: '变化后积分',
key: 'balance',
minWidth: 120,
},
{
title: '日期',
key: 'updateTime',
minWidth: 120,
},
{
title: '备注',
key: 'mark',
minWidth: 120,
},
];
this.loading = false;
})
.catch((res) => {
this.loading = false;
});
},
getInfos(){
infobyconditionApi(this.tableFroms)
.then((res) => {
this.tableDatas.data = res.list;
this.tableDatas.total = res.total;
console.log( this.tableDatas,' this.tableDatas this.tableDatas');
switch (this.tableFroms.type) {
case '0':
this.columns = [
{
title: '订单ID',
key: 'orderId',
minWidth: 250,
},
{
title: '收货人',
key: 'realName',
minWidth: 90,
},
{
title: '商品数量',
key: 'totalNum',
minWidth: 80,
},
{
title: '订单状态',
key: 'statusStr.value',
minWidth: 80,
},
{
title: '商品总价',
key: 'totalPrice',
minWidth: 90,
},
{
title: '实付金额',
key: 'payPrice',
minWidth: 90,
},
{
title: '交易完成时间',
key: 'payTime',
minWidth: 160,
},
];
break;
case '2':
this.columns = [
{
title: '动作',
key: 'title',
minWidth: 120,
},
{
title: '获得积分',
key: 'number',
minWidth: 120,
},
{
title: '签到时间',
key: 'createTime',
minWidth: 120,
},
{
title: '备注',
key: 'title',
minWidth: 120,
},
];
break;
case '3':
this.columns = [
{
title: '优惠券名称',
key: 'name',
minWidth: 120,
},
{
title: '面值',
key: 'money',
minWidth: 120,
},
{
title: '有效期',
key: 'endTime',
minWidth: 120,
},
{
title: '最低消费额',
key: 'minPrice',
minWidth: 120,
},
{
title: '兑换时间',
key: 'updateTime',
minWidth: 120,
},
];
break;
case '4':
this.columns = [
{
title: '变动金额',
key: 'number',
minWidth: 120,
},
{
title: '变动后',
key: 'balance',
minWidth: 120,
},
{
title: '类型',
key: 'title',
minWidth: 120,
},
{
title: '创建时间',
key: 'add_time',
minWidth: 120,
},
{
title: '备注',
key: 'mark',
minWidth: 120,
},
];
break;
case '5':
this.columns = [
{
title: 'ID',
key: 'uid',
minWidth: 120,
},
{
title: '昵称',
key: 'nickname',
minWidth: 120,
},
{
title: '等级',
key: 'level',
minWidth: 120,
},
{
title: '加入时间',
key: 'createTime',
minWidth: 120,
},
];
break;
default:
this.columns = [
{
title: '账单ID',
key: 'id',
minWidth: 50,
},
{
title: '订单号',
key: 'orderIdStr',
minWidth: 200,
},
{
title: '期数',
key: 'installmentNumberStr',
minWidth: 30,
},
{
title: '还款时间',
key: 'repaymentDeadlineStr',
minWidth: 180,
},
{
title: '还款金额(元)',
key: 'repaymentAmount',
minWidth: 100,
},
{
title: '还款方式',
key: 'paymentMethod',
minWidth: 80,
},
{
title: '状态',
key: 'repaymentStatus',
minWidth: 80,
},
{
title: '创建时间',
key: 'createTime',
minWidth: 180,
},
];
}
})
.catch(() => {
});
},
tlxReport() {
console.log("获取天狼星报告")
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
getTlxReport({ userId: this.uid }).then((res) => {
// console.log("11111111111111111---------"+JSON.stringify(res))
this.userinfo.tlxinfo = res
loading.close();
console.log(res,'resresres');
if(res.code==500){
this.$message.error(res.msg);
}
this.$forceUpdate()
});
},
zwxReport() {
console.log("获取紫微星报告")
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
getZwxReport({ userId: this.uid }).then((res) => {
this.userinfo.zwxinfo = res
loading.close();
if(res.code==500){
this.$message.error(res.msg);
}
this.$forceUpdate()
});
},
loghandleClose() {
this.dialogVisibles = false;
},
// 清除
clearSpread(row) {
this.$modalSure('解除【' + row.nickname + '】的上级推广人吗').then(() => {
spreadClearApi(row.uid).then((res) => {
this.$message.success('清除成功');
this.getList();
});
});
},
onSubExtension(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
updateSpreadApi(this.formExtension).then((res) => {
this.$message.success('设置成功');
this.extensionVisible = false;
this.getList();
});
} else {
return false;
}
});
},
getTemplateRow(row) {
this.formExtension.image = row.avatar;
this.formExtension.spreadUid = row.uid;
},
setExtension(row) {
this.formExtension = {
image: '',
spreadUid: '',
userId: row.uid,
};
this.extensionVisible = true;
},
handleCloseExtension() {
this.extensionVisible = false;
},
modalPicTap() {
this.userVisible = true;
},
resetForm() {
this.visible = false;
},
reset(formName) {
this.userFrom = {
labelId: '',
userType: '',
sex: '',
isPromoter: '',
country: '',
payCount: '',
accessType: 0,
dateLimit: '',
keywords: '',
province: '',
city: '',
page: 1,
limit: 15,
level: '',
groupId: '',
};
this.levelData = [];
this.groupData = [];
this.labelData = [];
this.timeVal = [];
this.getList();
},
// 列表
async getCityList() {
let res = await logistics.cityListTree();
//res.forEach((el, index) => {
// el.child.forEach((cel, j) => {
// delete cel.child
// })
// })
this.addresData = res;
// })
},
// 发送文章
sendNews() {
if (this.selectionList.length === 0) return this.$message.warning('请先选择用户');
const _this = this;
this.$modalArticle(function (row) { }, 'send');
},
// 发送优惠劵
onSend() {
if (this.selectionList.length === 0) return this.$message.warning('请选择要设置的用户');
const _this = this;
this.$modalCoupon(
'send',
(this.keyNum += 1),
[],
function (row) {
_this.formValidate.give_coupon_ids = [];
_this.couponData = [];
row.map((item) => {
_this.formValidate.give_coupon_ids.push(item.coupon_id);
_this.couponData.push(item.title);
});
_this.selectionList = [];
},
this.userIds,
'user',
);
},
Close() {
this.Visible = false;
this.levelVisible = false;
this.IdVisible = false;
},
// 账户详情
onDetails(id) {
this.uid = id;
this.Visible = true;
},
// 身份信息
onIdentityInfo(id) {
this.uid = id;
this.IdVisible = true;
},
// 等级
onLevel(id, level) {
var userLevel = new Object();
this.levelList.forEach((item) => {
if (item.id == level) {
userLevel.gradeLevel = item.grade;
}
});
userLevel.uid = id;
userLevel.level = level;
this.levelInfo = userLevel;
this.levelVisible = true;
},
// 积分余额
editPoint(id) {
this.uid = id;
this.VisiblePoint = true;
},
// 积分余额
submitPointForm: Debounce(function (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.PointValidateForm.uid = this.uid;
this.loadingBtn = true;
foundsApi(this.PointValidateForm)
.then((res) => {
this.$message.success('设置成功');
this.loadingBtn = false;
this.handlePointClose();
this.getList();
})
.catch(() => {
this.loadingBtn = false;
});
} else {
return false;
}
});
}),
// 积分余额
handlePointClose() {
this.VisiblePoint = false;
this.PointValidateForm = {
integralType: 2,
integralValue: 0,
moneyType: 2,
moneyValue: 0,
uid: '',
};
},
editUser(id) {
this.uid = id;
this.visible = true;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loading = true;
this.batchName === 'group'
? groupPiApi({ groupId: this.dynamicValidateForm.groupId, id: this.userIds })
.then((res) => {
this.$message.success('设置成功');
this.loading = false;
this.handleClose();
this.getList();
})
.catch(() => {
this.loading = false;
})
: tagPiApi({ tagId: this.dynamicValidateForm.groupId.join(','), id: this.userIds })
.then((res) => {
this.$message.success('设置成功');
this.loading = false;
this.handleClose();
this.getList();
})
.catch(() => {
this.loading = false;
});
} else {
return false;
}
});
},
setBatch(name, row) {
this.batchName = name;
if (row) {
this.userIds = row.uid;
if (this.batchName === 'group') {
this.dynamicValidateForm.groupId = row.groupId ? Number(row.groupId) : '';
} else {
this.dynamicValidateForm.groupId = row.tagId ? row.tagId.split(',').map(Number) : [];
}
} else {
this.dynamicValidateForm.groupId = '';
}
if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户');
this.dialogVisible = true;
},
handleClose() {
this.dialogVisible = false;
this.dialogVisibles=false
// this.$refs['dynamicValidateForm'].resetFields();
},
// 全选
onSelectTab(selection) {
this.selectionList = selection;
setTimeout(() => {
this.changePageCoreRecordData();
let data = [];
if (this.multipleSelectionAll.length) {
this.multipleSelectionAll.map((item) => {
data.push(item.uid);
});
this.userIds = data.join(',');
}
}, 50);
},
// 搜索
userSearchs() {
this.userFrom.page = 1;
this.getList();
},
// 选择国家
changeCountry() {
if (this.userFrom.country === 'OTHER' || !this.userFrom.country) {
this.selectedData = [];
this.userFrom.province = '';
this.userFrom.city = '';
this.address = [];
}
},
// 选择地址
handleChange(value) {
this.userFrom.province = value[0];
this.userFrom.city = value[1];
},
// 具体日期
onchangeTime(e) {
this.timeVal = e;
this.userFrom.dateLimit = e ? this.timeVal.join(',') : '';
},
// 分组列表
groupLists() {
groupListApi({ page: 1, limit: 9999 }).then(async (res) => {
this.groupList = res.list;
});
},
//标签列表
getTagList() {
tagListApi({ page: 1, limit: 9999 }).then((res) => {
this.labelLists = res.list;
});
},
// 等级列表
levelLists() {
levelListApi().then(async (res) => {
this.levelList = res;
localStorage.setItem('levelKey', JSON.stringify(res));
});
},
// 列表
getList(num) {
this.listLoading = true;
this.userFrom.page = num ? num : this.userFrom.page;
this.userFrom.userType = this.loginType;
if (this.loginType == 0) this.userFrom.userType = '';
this.userFrom.level = this.levelData.join(',');
this.userFrom.groupId = this.groupData.join(',');
this.userFrom.labelId = this.labelData.join(',');
userListApi(this.userFrom)
.then((res) => {
this.tableData.data = res.list;
this.tableData.total = res.total;
this.$nextTick(function () {
this.setSelectRow(); // 调用跨页选中方法
});
this.listLoading = false;
})
.catch(() => {
this.listLoading = false;
});
this.checkedCities = this.$cache.local.has('user_stroge')
? this.$cache.local.getJSON('user_stroge')
: this.checkedCities;
this.$set(this, 'card_select_show', false);
},
// 设置选中的方法
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
return;
}
// 标识当前行的唯一键的名称
const idKey = this.idKey;
const selectAllIds = [];
this.multipleSelectionAll.forEach((row) => {
selectAllIds.push(row[idKey]);
});
this.$refs.table.clearSelection();
for (var i = 0; i < this.tableData.data.length; i++) {
if (selectAllIds.indexOf(this.tableData.data[i][idKey]) >= 0) {
// 设置选中记住table组件需要使用ref="table"
this.$refs.table.toggleRowSelection(this.tableData.data[i], true);
}
}
},
// 记忆选择核心方法
changePageCoreRecordData() {
// 标识当前行的唯一键的名称
const idKey = this.idKey;
const that = this;
// 如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算
if (this.multipleSelectionAll.length <= 0) {
this.multipleSelectionAll = this.selectionList;
return;
}
// 总选择里面的key集合
const selectAllIds = [];
this.multipleSelectionAll.forEach((row) => {
selectAllIds.push(row[idKey]);
});
const selectIds = [];
// 获取当前页选中的id
this.selectionList.forEach((row) => {
selectIds.push(row[idKey]);
// 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.multipleSelectionAll.push(row);
}
});
const noSelectIds = [];
// 得到当前页没有选中的id
this.tableData.data.forEach((row) => {
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey]);
}
});
noSelectIds.forEach((uid) => {
if (selectAllIds.indexOf(uid) >= 0) {
for (let i = 0; i < that.multipleSelectionAll.length; i++) {
if (that.multipleSelectionAll[i][idKey] == uid) {
// 如果总选择中有未被选中的,那么就删除这条
that.multipleSelectionAll.splice(i, 1);
break;
}
}
}
});
},
pageChange(page) {
this.changePageCoreRecordData();
this.userFrom.page = page;
this.getList();
},
handleSizeChange(val) {
this.changePageCoreRecordData();
this.userFrom.limit = val;
this.getList();
},
// 删除
handleDelete(id, idx) {
this.$modalSure().then(() => {
productDeleteApi(id).then(() => {
this.$message.success('删除成功');
this.getList();
});
});
},
onchangeIsShow(row) {
row.isShow
? putOnShellApi(row.id)
.then(() => {
this.$message.success('上架成功');
this.getList();
})
.catch(() => {
row.isShow = !row.isShow;
})
: offShellApi(row.id)
.then(() => {
this.$message.success('下架成功');
this.getList();
})
.catch(() => {
row.isShow = !row.isShow;
});
},
renderHeader(h) {
return (
<p>
<span style="padding-right:5px;">操作</span>
<i class="el-icon-setting" onClick={() => this.handleAddItem()}></i>
</p>
);
},
handleAddItem() {
if (this.card_select_show) {
this.$set(this, 'card_select_show', false);
} else if (!this.card_select_show) {
this.$set(this, 'card_select_show', true);
}
},
handleCheckAllChange(val) {
this.checkedCities = val ? this.columnData : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.columnData.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnData.length;
},
checkSave() {
this.card_select_show = false;
this.$modal.loading('正在保存到本地,请稍候...');
this.$cache.local.setJSON('user_stroge', this.checkedCities);
setTimeout(this.$modal.closeLoading(), 1000);
},
},
};
</script>
<style scoped lang="scss">
/*.timeBox{*/
/*width: 100%;*/
/*::v-deep.el-form-item__content{*/
/*width: 87% !important;*/
/*}*/
/*}*/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.image-container {
max-width: 80%;
max-height: 80%;
}
.enlarged-image {
max-width: 800px;
max-height: 800px;
}
.el-dropdown-link {
cursor: pointer;
color: #409eff;
font-size: 12px;
}
.el-icon-arrow-down {
font-size: 12px;
}
.text-right {
text-align: right;
}
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 33.33%;
}
.selWidth {
width: 100% !important;
}
.detailbox::-webkit-scrollbar {
width: 10px;
}
.detailbox::-webkit-scrollbar-track {
background-color: #FFFFFF;
}
.detailbox::-webkit-scrollbar-thumb {
background-color: #EAF4FF;
border-radius: 10px;
// height: .625rem;
}
.detailbox::-webkit-scrollbar-thumb:hover {
background-color: #EAF4FF;
}
.detailbox {
padding: 10px 60px;
width: 100%;
max-height: 670px;
overflow-x: hidden;
overflow-y: auto;
min-height: 600px;
.titbox {
display: flex;
flex-wrap: nowrap;
align-items: center;
.tit {
margin-right: 20px;
font-size: 18px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 700;
color: #9B9B9B;
cursor: pointer;
}
.act {
color: #3D3D3D;
font-size: 24px;
}
}
.info_box {
margin-top: 25px;
width: 100%;
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.infoli {
// width: 33%;
font-size: 18px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #3D3D3D;
line-height: 50px;
}
.infoimg {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.infoimg_box {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 305px;
.noimg {
display: flex;
align-items: center;
justify-content: center;
width: 305px;
height: 181px;
background: #D8D8D8;
border-radius: 10px 10px 10px 10px;
font-size: 18px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #959595;
}
img {
width: 305px;
height: 181px;
border-radius: 10px 10px 10px 10px;
}
.text {
margin-top: 10px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #3A3A3A;
}
}
}
}
.tit {
font-size: 18px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 700;
color: #3D3D3D;
line-height: 50px;
}
.addbox {
display: flex;
flex-wrap: wrap;
.addli {
display: flex;
flex-wrap: nowrap;
.addtxt {
margin-right: 20px;
font-size: 18px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #3D3D3D;
line-height: 50px;
}
}
}
}
.fkbox {
.titbox {
display: flex;
flex-wrap: nowrap;
align-items: center;
.tit {
margin-right: 30px;
font-size: 18px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 700;
color: #9B9B9B;
cursor: pointer;
}
.act {
color: #3D3D3D;
font-size: 22px;
}
}
img {
width: 100%;
height: auto;
}
.noreport {
display: flex;
flex-wrap: wrap;
// justify-content: center;
.tip {
margin-top: 80px;
width: 100%;
font-size: 35px;
text-align: center;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #CDCDCD;
}
.btn {
cursor: pointer;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 40px;
background: #468DFF;
border-radius: 10px 10px 10px 10px;
font-size: 16px;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.seachTiele {
line-height: 30px;
}
.container {
min-width: 821px;
::v-deepel-form-item {
width: 100%;
}
::v-deepel-form-item__content {
width: 72%;
}
}
.ivu-ml-8 {
font-size: 12px;
color: #1682e6;
}
.btn_bt {
border-top: 1px dashed #ccc;
padding-top: 20px;
}
.relative {
position: relative;
}
.card_abs {
position: absolute;
padding-bottom: 15px;
right: 40px;
width: 200px;
background: #fff;
z-index: 99999;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
}
.cell_ht {
height: 50px;
padding: 15px 20px;
box-sizing: border-box;
border-bottom: 1px solid #eeeeee;
display: flex;
justify-content: space-between;
align-items: center;
}
.check_cell {
width: 100%;
padding: 15px 20px 0;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
color: #606266;
}
</style>