oil-station/fuintCashierWeb/src/views/cashier/NewComponents/WriteOff.vue

<template>
  <div class="">
    <div class="tab-box">
      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"
           :key="index">
        {{ item.name }}
      </div>
    </div>
    <div class="w_boxs" v-if="tabindex == 1" >
      <writeList></writeList>
    </div>
    <div class="w_box"  v-if="tabindex == 0" >
      <div class="title_" >通过手机号查询会员可以核销的卡券或扫码核销（扫码时，请保证输入框有光标闪烁）</div>
      <div  class="input_box" >
        <div style="width: 40%;margin-right: 15px">
          <el-input v-model="queryParams.mobile" placeholder="请输入会员手机号码或卡券核销码"></el-input>
        </div>
        <div >
          <el-button type="primary"  @click="getList">搜索 / 核销</el-button>
        </div>
      </div>
      <div class="wrap-box">

        <div class="coupon-box" @click="getcardExchangeRecord(item.id)" v-for="(item,index) in couponList" :key="index">
          <div style="margin-left: 30%;width: 57%">
            <div class="box-hei">{{item.exchangeName}} </div>
            <div class="box-hui"><span>领取人：</span>     <span>{{item.mobile || '匿名'}}</span>  </div>
            <div class="box-hui"><span>核销码：</span>   <span>{{item.ticketCode}}</span>  </div>
            <div class="box-hui"><span>有效期：</span> <span>{{item.exchangeFrom}}</span> </div>
          </div>
          <div class="hx_">
            立即核销
          </div>
        </div>
      </div>
      <el-empty :image-size="300" v-if="total == 0"></el-empty>
    </div>
  </div>
</template>

<script>
import { listRecord,cardExchangeRecord } from "@/api/online";
import writeList from "@/views/cashier/NewComponents/writeList.vue";
export default {
  name: 'index',
  data(){
    return{
      tabindex: 0,
      tabs: [
        {
          name: "卡券核销",
        },
        {
          name: "核销记录",
        },
      ],
      num:13964068390,
      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,
    }
  },
  components:{
    writeList
  },
  methods:{
    getindex(index) {
      this.tabindex = index

    },
    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: 335px;
  height: 100px;
  background: #ffffff;
  border-radius: 2px;
  margin: 10px;
  background: url("./imgs/qname.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.box-top{
  width: 100%;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  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;
  align-items: center;

}
.box-hei{
  box-sizing: border-box;
  padding: 0px 15px;
  color: #333;
  display: flex;
  font-size: 14px;font-weight: 600;
  margin-bottom: 5px;
}
.anniu{
  box-sizing: border-box;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecf5ff;
  color: #fe8c4a;
  width: 100px;
  border-radius: 6px;
  margin: 5px auto;
  cursor: pointer;
  margin-top: 15px;
}

.w_box{
  width: 98%;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
  min-height: 92vh;
  margin: 10px auto;
}
.w_boxs{
  width: 98%;
  box-sizing: border-box;

  margin: 10px auto;
}
.tab-box {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 15px;

}

.tab_ {
  width: 75px;
  height: 100%;
  //border-bottom: 2px solid #FF770F;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #FF770F !important;
  color: #FF770F !important;
}
.title_{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  color: #333333;
}
.input_box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}
.hx_{
  background: #ff9655;
  color: #fff;
  width: 14px;
  margin-left: 12px;
}
</style>