<template> <div class="not_buy"> <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline size="small"> <el-form-item label="用户ID"> <el-input v-model="searchFrom.user_id" style="width: 80px" @change="getList"></el-input> </el-form-item> <el-form-item label="用户昵称"> <el-input v-model="searchFrom.nickname" @change="getList" style="width: 120px"></el-input> </el-form-item> <el-form-item label="手机号"> <el-input v-model="searchFrom.mobile" @change="getList"></el-input> </el-form-item> <el-form-item label="商品名称"> <el-select v-model="searchFrom.goods_id" placeholder="请选择" @change="getList" clearable> <el-option v-for="(data,index) in goodList" :key="index" :label="data | filterGoods" :value="data.id"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" plain @click="getList">搜索</el-button> <el-button type="primary" plain @click="exportTable" v-if="$store.state.export">导出</el-button> <el-button plain type="success" v-if="!$store.state.readonly" @click="entranceObj.show=true">无需登录入口</el-button> </el-form-item> </el-form> <el-table :data="configList" style="width: 100%" size="small"> <el-table-column label="用户ID" sortable prop="scope.row.user_id" className="userInfo"> <template slot-scope="scope"> <img class="avatar" :src="scope.row.avatar"> {{scope.row.nickname}}(ID:{{scope.row.user_id}}) </template> </el-table-column> <el-table-column prop="class_name" label="班级名称"> </el-table-column> <el-table-column label="期数标题" prop="periods_name"> </el-table-column> <el-table-column label="商品名称" prop="goods_name"> </el-table-column> <el-table-column label="手机号" prop="mobile"> </el-table-column> <el-table-column prop="created_at" label="创建时间" sortable> </el-table-column> <el-table-column label="备注" prop="desc"> </el-table-column> <el-table-column label="操作" v-if="!$store.state.readonly" width="220"> <template slot-scope="scope"> <el-button @click="editComment(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button> </template> </el-table-column> </el-table> <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" /> <entrance :entranceObj="entranceObj"/> </div> </template> <script> import entrance from "./entrance"; import { getClassConfigApi ,getGoodsListApi,updateDescApi,exportExcelApi } from "../../service/api"; import page from "../framework/page"; import {GOODSTYPE} from "../../util/wordbook"; export default { name: "notBuyClass", data() { return { nowPage: 1, total: 0, limit: 10, configList: [], entranceObj: { title: "无需登录入口", show: false }, searchFrom:{ user_id:"", goods_id:"", mobile:"", }, goodList:[], }; }, components: { entrance, page }, filters:{ filterGoods(val){ return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name } }, mounted() { this.getList(); this.getGoodsOption(); }, methods: { onPageChange(val) { this.nowPage = val; this.getList(); }, onSizeChange(val) { this.nowPage = 1; this.limit = val; this.getList(); }, getList() { let json = { limit: this.limit, page: this.nowPage }; // 搜索筛选 if(this.searchFrom.user_id){ json.user_id=this.searchFrom.user_id } if(this.searchFrom.goods_id){ json.goods_id=this.searchFrom.goods_id } if(this.searchFrom.nickname){ json.nickname=this.searchFrom.nickname } if(this.searchFrom.mobile){ json.mobile=this.searchFrom.mobile } getClassConfigApi(json).then(res => { this.total = res.total; this.configList=res.list; }); }, getGoodsOption(){ let json = { page: 1, limit: 100 }; getGoodsListApi(json).then(res=>{ this.goodList = res.list; }) }, editComment(id, desc) { this.$prompt('', '编辑备注', { confirmButtonText: '确定', cancelButtonText: '取消', inputType:'textarea', inputValue: desc || '' }).then(({ value }) => { this.$confirm('确定保存?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(()=>{ updateDescApi({desc: value},id).then(res=>{ this.$message({ type: 'success', message: '编辑备注成功' }); this.getList(); }); }); }) }, exportTable(){ let json = {}; if(this.searchFrom.user_id){ json.user_id=this.searchFrom.user_id } if(this.searchFrom.goods_id){ json.goods_id=this.searchFrom.goods_id } if(this.searchFrom.mobile){ json.mobile=this.searchFrom.mobile } if(this.searchFrom.nickname){ json.nickname=this.searchFrom.nickname } exportExcelApi('/api/admin/user/receive/course/log/export',json) }, } }; </script> <style scoped lang="less"> .not_buy { .head { margin-bottom: 10px; } width: 100%; padding: 20px 0; .page-div { text-align: center; padding-top: 20px; } } .avatar { width: 50px; min-width:50px !important; height: 50px; border-radius: 50%; line-height:1; } </style> <style> .userInfo >div{ display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } </style>