182 lines
4.0 KiB
Vue
182 lines
4.0 KiB
Vue
<template>
|
|
<div class="center">
|
|
<el-card style="margin-bottom: 20px">
|
|
<div style="display: flex; align-items: center">
|
|
<div style="width: 5%;margin-right: 10px">卡券核销:</div>
|
|
<div style="width: 80%;">
|
|
<!-- 17615834396-->
|
|
<el-input v-model="queryParams.mobile" placeholder="请输入会员手机号码"></el-input>
|
|
</div>
|
|
<div style="width: 10%;margin-left: 20px">
|
|
<el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="wrap-box">
|
|
<div class="coupon-box" v-for="(item,index) in couponList" :key="index">
|
|
<div class="box-top">
|
|
<span>{{item.exchangeName}}</span>
|
|
</div>
|
|
<div class="box-title">{{item.name}}</div>
|
|
<div class="box-hui"><span style="width: 35%">券码:</span> <span>{{item.ticketCode}}</span> </div>
|
|
<div class="box-hui"><span style="width: 35%">有效期:</span> <span>{{item.outTime}}</span> </div>
|
|
<div class="box-hui"><span style="width: 35%">获得方式:</span> <span>{{item.exchangeFrom}}</span> </div>
|
|
<div class="anniu" @click="getcardExchangeRecord(item.id)" >
|
|
<span>立即核销</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty :image-size="300" v-if="total == 0"></el-empty>
|
|
|
|
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listRecord,cardExchangeRecord } from "@/api/online";
|
|
export default {
|
|
name: 'index',
|
|
data(){
|
|
return{
|
|
queryParams : {
|
|
pageNum: 1,
|
|
pageSize: 999,
|
|
cardExchangeId: null,
|
|
mtStaffId: null,
|
|
realName: null,
|
|
staffMobile: null,
|
|
mtUserId: null,
|
|
name: null,
|
|
mobile: null,
|
|
photo: null,
|
|
exchangeName: null,
|
|
ticketCode: null,
|
|
exchangeFrom: null,
|
|
status: 0,
|
|
outTime: null,
|
|
cancelTime: null,
|
|
startTime: null,
|
|
endTime: null,
|
|
},
|
|
couponList:[],
|
|
recordList:[],
|
|
total:0,
|
|
}
|
|
},
|
|
methods:{
|
|
getList() {
|
|
if(!this.queryParams.mobile ){
|
|
this.$message.error("输入框不能为空")
|
|
return
|
|
}
|
|
this.loading = true;
|
|
listRecord(this.queryParams).then(response => {
|
|
this.couponList = response.data.records;
|
|
this.total = response.data.total
|
|
if( response.data.total == 0){
|
|
|
|
}else{
|
|
|
|
}
|
|
this.loading = false;
|
|
});
|
|
},
|
|
getcardExchangeRecord(id){
|
|
this.$confirm('是否确认核销?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
let data = {
|
|
id:id,
|
|
status:1
|
|
}
|
|
cardExchangeRecord(data).then(res=>{
|
|
if(res.code == 200){
|
|
this.$message.success("核销成功")
|
|
this.getList()
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消核销'
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.center{
|
|
width: 95%;
|
|
height: 100vh;
|
|
margin: 10px;
|
|
|
|
}
|
|
.wrap-box{
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
}
|
|
.coupon-box{
|
|
width: 200px;
|
|
height: 250px;
|
|
background: #ffffff;
|
|
border: 1px solid #eef1f6;
|
|
border-radius: 2px;
|
|
margin: 10px;
|
|
}
|
|
.box-top{
|
|
width: 100%;
|
|
height: 100px;
|
|
background: #00afff;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.box-title{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
box-sizing: border-box;
|
|
padding: 5px 15px;
|
|
}
|
|
.box-hui{
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
color: #999999;
|
|
display: flex;
|
|
font-size: 12px;
|
|
}
|
|
.anniu{
|
|
box-sizing: border-box;
|
|
padding: 5px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #ecf5ff;
|
|
color: #409EFF;
|
|
width: 100px;
|
|
border-radius: 6px;
|
|
margin: 5px auto;
|
|
cursor: pointer;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
</style>
|