<template>
|
<div class="search">
|
<Card>
|
<Form
|
ref="searchForm"
|
:model="searchForm"
|
inline
|
:label-width="75"
|
class="search-form mb_10"
|
>
|
<!-- <Form-item label="优惠券名称" prop="couponName">-->
|
<!-- <Input-->
|
<!-- type="text"-->
|
<!-- v-model="searchForm.couponName"-->
|
<!-- placeholder="请输入优惠券名称"-->
|
<!-- clearable-->
|
<!-- style="width: 200px"-->
|
<!-- />-->
|
<!-- </Form-item>-->
|
<!-- <Form-item label="会员名称" prop="memberName">-->
|
<!-- <Input-->
|
<!-- type="text"-->
|
<!-- v-model="searchForm.memberName"-->
|
<!-- placeholder="请输入会员名称"-->
|
<!-- clearable-->
|
<!-- style="width: 200px"-->
|
<!-- />-->
|
<!-- </Form-item>-->
|
<!-- <Form-item label="获取方式" prop="getType">-->
|
<!-- <Select-->
|
<!-- v-model="searchForm.getType"-->
|
<!-- placeholder="请选择"-->
|
<!-- clearable-->
|
<!-- style="width: 200px"-->
|
<!-- >-->
|
<!-- <Option value="FREE">免费获取</Option>-->
|
<!-- <Option value="ACTIVITY">活动获取</Option>-->
|
<!-- </Select>-->
|
<!-- </Form-item>-->
|
<!-- <Form-item label="优惠券状态" prop="memberCouponStatus">-->
|
<!-- <Select-->
|
<!-- v-model="searchForm.memberCouponStatus"-->
|
<!-- placeholder="请选择"-->
|
<!-- clearable-->
|
<!-- style="width: 200px"-->
|
<!-- >-->
|
<!-- <Option value="NEW">已领取</Option>-->
|
<!-- <Option value="USED">已使用</Option>-->
|
<!-- <Option value="EXPIRE">已过期</Option>-->
|
<!-- <Option value="CLOSED">已作废</Option>-->
|
<!-- </Select>-->
|
<!-- </Form-item>-->
|
<Button
|
@click="handleSearch"
|
type="primary"
|
icon="ios-search"
|
class="search-btn"
|
>搜索</Button
|
>
|
</Form>
|
<Table
|
v-if="refreshTable"
|
:loading="loading"
|
border
|
:columns="columns"
|
:data="data"
|
ref="table"
|
class="mt_10"
|
>
|
<template slot-scope="{ row }" slot="action">
|
<Button
|
@click="supplementaryMaterials(row)"
|
type="primary"
|
class="add-btn"
|
v-if="row.material === 'NOT_GENERATE' && row.claimStatus ==='CLAIM'"
|
>补充材料</Button>
|
</template>
|
</Table>
|
<Row type="flex" justify="end" class="mt_10">
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="changePage"
|
@on-page-size-change="changePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
</Card>
|
|
<Modal
|
title="补充材料"
|
v-model="showModal"
|
width="1200"
|
:mask-closable="false"
|
@on-cancel="handleCancel">
|
|
|
<Upload
|
v-if="!tempUrl"
|
:before-upload="(file) => handleBeforeUpload(file)"
|
:format="['jpg','jpeg','png','gif']"
|
:max-size="20480"
|
action=""
|
accept="image/*"
|
>
|
<Button icon="ios-cloud-upload-outline" >上传图片</Button>
|
</Upload>
|
<div v-if="tempUrl" class="upload-file-info">
|
<img :src="tempUrl" alt="图片" class="preview-image-limit">
|
<Button type="text" @click="handleRemove('content')">删除</Button>
|
</div>
|
|
<Input
|
v-model="form.content"
|
style="width: 300px"
|
:rows="4"
|
type="textarea"
|
placeholder="请输入内容"
|
/>
|
<div slot="footer">
|
<Button @click="handleCancel">取消</Button>
|
<Button type="primary" :loading="submitLoading" @click="save">提交</Button>
|
</div>
|
</Modal>
|
|
</div>
|
</template>
|
<script>
|
import { uploadFileByLmk, delByKey } from "@/api/common.js"
|
import { getPage,add } from "@/api/prize-store.js"
|
export default {
|
name: "store-prize-proof",
|
data() {
|
return {
|
submitLoading:false,
|
file: null,
|
tempUrl:null,
|
showModal:false,
|
loading: true, // 表单加载状态
|
form:{
|
storePrizeClaimId:null,
|
urlPath:null,
|
content:""
|
},
|
searchForm: {
|
// 搜索框初始化对象
|
pageNumber: 1, // 当前页数
|
pageSize: 10, // 页面大小
|
},
|
columns: [
|
{
|
title: "活动名",
|
key: "prizeActivityName",
|
align: "center",
|
tooltip: true
|
},
|
{
|
title: "编号",
|
key: "no",
|
align: "center",
|
tooltip: true
|
},
|
{
|
title: "材料补充状态",
|
key: "material",
|
align: "center",
|
tooltip: true,
|
render: (h, params) => {
|
const status = params.row.material;
|
const color = status === 'GENERATE' ? 'success' : status === 'NOT_GENERATE' ? 'default' : 'warning';
|
const text = status === 'GENERATE' ? '已补充' : status === 'NOT_GENERATE' ? '未补充' : '未知';
|
|
return h('Tag', {
|
props: {
|
color: color
|
}
|
}, text);
|
}
|
},
|
|
{
|
title: "领取状态",
|
key: "claimStatus",
|
align: "center",
|
tooltip: true,
|
render: (h, params) => {
|
const status = params.row.claimStatus;
|
const color = status === 'CLAIM' ? 'success' : status === 'NOT_CLAIM' ? 'default' : 'warning';
|
const text = status === 'CLAIM' ? '已领取' : status === 'NOT_CLAIM' ? '未领取' : '未知';
|
|
return h('Tag', {
|
props: {
|
color: color
|
}
|
}, text);
|
}
|
},
|
{
|
title: "操作",
|
slot: "action",
|
align: "center",
|
fixed: "right"
|
}
|
],
|
data: [], // 表单数据
|
total: 0, // 表单数据总数
|
refreshTable: true, // 修改选中状态后刷新表格
|
};
|
},
|
methods: {
|
// 文件上传前处理
|
handleBeforeUpload(file) {
|
this.file = file;
|
this.tempUrl = URL.createObjectURL(file);
|
return false;
|
},
|
handleRemove(type) {
|
this.file = null;
|
this.tempUrl = null;
|
},
|
async save(){
|
await this.myUploadFileByLmk();
|
let fileState = false;
|
let contentState = false;
|
if (this.form.url_path === '' || this.form.url_path=== null) {
|
fileState= true;
|
}
|
if (this.form.content === '' || this.form.content=== null){
|
contentState = true;
|
}
|
if (fileState && contentState){
|
this.$Message.error("请选择图片或输入文本内容补全材料！")
|
}
|
this.submitLoading = true
|
add(this.form).then(res =>{
|
this.submitLoading = false
|
if (res.code === 200){
|
this.$Message.success("成功")
|
}
|
this.showModal = false;
|
})
|
this.getDataList();
|
},
|
async myUploadFileByLmk(){
|
if (this.file){
|
const formData = new FormData()
|
formData.append('file', this.file)
|
await uploadFileByLmk(formData).then(res => {
|
this.submitLoading = false
|
if (res.code === 200) {
|
this.form.urlPath = res.data.fileKey;
|
}else{
|
|
}
|
}).catch(() => {
|
this.submitLoading = false
|
})
|
}
|
},
|
|
supplementaryMaterials(row){
|
this.form ={
|
storePrizeClaimId:null,
|
urlPath:null,
|
content:""
|
}
|
this.file = null;
|
this.tempUrl = null;
|
this.showModal = true;
|
this.form.storePrizeClaimId = row.id;
|
},
|
// 初始化数据
|
init() {
|
this.getDataList();
|
},
|
changePage(v) {
|
// 改变页码
|
this.searchForm.pageNumber = v;
|
this.getDataList();
|
},
|
changePageSize(v) {
|
// 改变页数
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = v;
|
this.getDataList();
|
},
|
handleSearch() {
|
// 搜索
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
this.getDataList();
|
},
|
handleCancel(){
|
this.showModal =false;
|
},
|
|
getDataList() {
|
// 获取数据
|
this.loading = true;
|
getPage(this.searchForm).then((res) => {
|
this.loading = false;
|
if (res.code === 200) {
|
this.data = res.data;
|
this.total = res.total;
|
}
|
});
|
this.total = this.data.length;
|
this.loading = false;
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.preview-image{
|
width: 200px;
|
height: auto;
|
object-fit: contain
|
}
|
.preview-image {
|
max-width: 100%;
|
max-height: 70vh;
|
object-fit: contain;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
display: block;
|
margin: 0 auto;
|
}
|
.preview-image-limit{
|
max-width: 100%;
|
max-height: 200px;
|
object-fit: contain;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
display: block;
|
}
|
</style>
|
