<template> <div class="qrcode"> <el-form label-width="100px" inline=""> <el-form-item label="标题"> <el-input/> </el-form-item> <el-form-item label="二维码类型"> <el-select v-model="searchFrom.type" placeholder="请选择" @change="nowPage = 1;initPage()"> <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="渠道类型"> <el-select v-model="searchFrom.code_type" placeholder="请选择" @change="nowPage = 1;initPage()"> <el-option v-for="item in code_typeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="状态"> <el-select v-model="searchFrom.status" placeholder="请选择" @change="nowPage = 1;initPage()"> <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label=""> <el-button @click="initPage" type="primary" plain> 搜索 </el-button> </el-form-item> <el-form-item label=""> <el-button type="success" plain @click="newObj.show = true"> 创建二维码 </el-button> </el-form-item> </el-form> <el-table style="width: 100%" :data="list"> <el-table-column prop="title" label="标题"> </el-table-column> <el-table-column prop="title" label="二维码类型"> <template slot-scope="scope"> {{scope.row.type | qrType}} </template> </el-table-column> <el-table-column prop="invite_code" label="推广码"> </el-table-column> <el-table-column label="渠道码类型"> <template slot-scope="scope"> {{scope.row.code_type | qrCodeType}} </template> </el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> {{scope.row.status | qrStatus}} </template> </el-table-column> <el-table-column label="二维码"> <template slot-scope="scope"> <a target="_blank" download="二维码" :href="scope.row.open_url"> <img :src="scope.row.open_url" class="img"/> </a> </template> </el-table-column> <el-table-column prop="desc" label="备注"> </el-table-column> <el-table-column fixed="right" label="操作" width="200"> <template slot-scope="scope"> <el-button @click="editComment(scope.$index, list)" type="text" size="small" v-if="!$store.state.readonly"> 备注 </el-button> <el-button @click.native.prevent="editRow(scope.$index, list)" type="text" size="small" v-if="!$store.state.readonly"> 编辑 </el-button> <el-button @click.native.prevent="detail(scope.$index, list)" type="text" size="small"> 查看详情 </el-button> </template> </el-table-column> </el-table> <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> <dialog-div :newObj="newObj" @initPage="initPage" @changeShow="changeShow"></dialog-div> </div> </template> <script> import dialogDiv from './dialog' import {getQrCodeListApi,getQrCodeDetailUrlApi,updateQrcodeDescApi} from "../../service/api"; import {QRCODETYPE,QRSTATUS,QRTYPE} from "../../util/wordbook"; import page from '../framework/page' export default { name: "index", filters:{ qrType(value){ return QRTYPE[value] }, qrStatus(value){ return QRSTATUS[value] }, qrCodeType(value){ return QRCODETYPE[value] } }, data(){ return { newObj:{ show:false, }, list:[], limit:10, nowPage:1, typeOption:[ { label:'请选择', value:'' },{ label:'永久', value:1 },{ label:'临时', value:2 }, ], code_typeOption:[ { label:'请选择', value:'' },{ label:'渠道', value:1 },{ label:'用户', value:2 }, ], statusOption:[ { label:'请选择', value:'' },{ label:'正常', value:0 },{ label:'禁用', value:1 }, ], total:0, searchFrom:{ title:'', type:'', code_type:'', status:'' } } }, components:{ dialogDiv, page }, mounted(){ this.initPage() }, methods:{ onPageChange(val){ this.nowPage = val this.initPage() }, onSizeChange(val){ this.nowPage = 1 this.limit = val this.initPage() }, initPage(){ let json = { limit: this.limit, page: this.nowPage }; if(this.searchFrom.title){ json.title = this.searchFrom.title } if(this.searchFrom.type){ json.type = this.searchFrom.type } if(this.searchFrom.code_type){ json.code_type = this.searchFrom.code_type } if(this.searchFrom.status){ json.status = this.searchFrom.status } getQrCodeListApi(json).then(res=>{ this.list = res ? res.list : []; this.total = res ? res.total : 0; }) }, newQrcode(){ this.newObj = { show: true, title:null, type:2, invite_code:null, status:0, end_at:null } }, editRow(index, list){ let _obj = list[index] getQrCodeDetailUrlApi(_obj.id).then(res=> { this.newObj = { title: res.title, type: res.type, invite_code: res.invite_code ? res.invite_code.split('-')[2] : '', status: res.status, end_at: res.end_at, id: _obj.id } if(res.auto_reply){ this.newObj.list = JSON.parse(res.auto_reply) } this.newObj.editFlag = true; this.newObj.show = true; }); }, editComment(index, list) { this.$prompt('', '编辑备注', { confirmButtonText: '确定', cancelButtonText: '取消', inputType:'textarea', inputValue: list[index].desc ? list[index].desc : '' }).then(({ value }) => { updateQrcodeDescApi(list[index].id,{desc: value}).then(res=>{ this.$message({ type: 'success', message: '编辑备注成功' }); this.initPage() }); }) }, detail(index, list){ let _obj = list[index] getQrCodeDetailUrlApi(_obj.id).then(res=> { this.newObj = { title: res.title, type: res.type, invite_code: res.invite_code ? res.invite_code.split('-')[2] : '', status: res.status, end_at: res.end_at, id: _obj.id } if(res.auto_reply){ this.newObj.list = JSON.parse(res.auto_reply) } this.newObj.readFlag = true; this.newObj.show = true; }); }, changeShow(val){ this.newObj = { show: false, title:null, type:2, invite_code:null, status:0, end_at:null } }, getQrCodeDetail(id){ getQrCodeDetailUrlApi(id).then(res=> { }) } } } </script> <style scoped lang="less"> @import "../../util/public"; .text-r{ padding: 10px; text-align: right; } .qrcode{ padding: 10px; } .img{ width: 50px; } </style>