oil-station/fuintAdmin/src/views/EventMarketing/giftBlock/index.vue

<template>
    <div class="app-container">
<!--      礼品卡-->
      <el-card  style="margin-bottom: 20px">
        <div class="top-hang">
        <el-input v-model="queryParams.number"  style="width: 20%;margin-right: 10px" placeholder="礼品卡号  "></el-input>
        <el-input v-model="queryParams.remark" style="width: 20%;margin-right: 10px" placeholder="备注信息"></el-input>
        <el-select v-model="queryParams.activateStatus" style="margin-right: 10px" placeholder="请选择">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.status" style="margin-right: 10px" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
        </div>
      </el-card>
      <div class="tj">

        <el-card  class="kar" >
          <div class="tj-num">{{tjdata.tatol || 0}}</div>
          <div class="tj-siez">礼品卡总数</div>
        </el-card>
        <el-card  class="kar" >
          <div class="tj-num">{{tjdata.alreadyTatal || 0}}</div>
          <div class="tj-siez">已激活</div>
        </el-card>
        <el-card  class="kar" >
          <div class="tj-num">{{tjdata.total_amount || 0}}</div>
          <div class="tj-siez">总额度</div>
        </el-card>
        <el-card  class="kar" >
          <div class="tj-num">{{tjdata.remaining_amount || 0}}</div>
          <div class="tj-siez">剩余额度</div>
        </el-card>
<!--        <el-card  class="kar" style="cursor: pointer;height: 106px " >

          <div class="tj-num"> <el-tag v-if="tjdata.exchangeStatus == 0"  @click="putStatus(1)">启用</el-tag> <el-tag type="info" v-if="tjdata.exchangeStatus == 1 "  @click="putStatus(0)">禁用</el-tag> </div>
          <div class="tj-siez">兑换功能状态</div>
        </el-card>-->
      </div>

      <el-card  style="margin-bottom: 20px">
        <div>
          <el-button type="primary" icon="el-icon-plus" @click="daking()" >新增礼品卡</el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="batchNumber"
            label="批次号"
            width="220">
          </el-table-column>
          <el-table-column
            prop="cardAmount"
            label="面值金额"
            width="180">
          </el-table-column>
          <el-table-column
            prop="number"
            label="礼品卡卡号"
            width="210">
          </el-table-column>
          <el-table-column
            prop="cardPassword"
            label="兑换卡密"
            width="180">
          </el-table-column>
          <el-table-column
            prop="activateStatus"
            label="激活状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.activateStatus == 1"> <el-tag type="success">已使用</el-tag> </span>
              <span v-if="scope.row.activateStatus != 1"> <el-tag type="info">未激活</el-tag> </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="礼品卡状态"
            width="120">
            <template slot-scope="scope">

              <el-switch
                v-model="scope.row.status"
                :active-value="'1'"
                :inactive-value="'2'"
                active-color="#409EFF"
                inactive-color="#909399"
                @change="posteid(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="220"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注信息"
            width="280">
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNo"
          :limit.sync="pageSize"
          @pagination="getlist"
        />
      </el-card>
      <el-dialog
        title="生产礼品卡"
        :visible.sync="centerDialogVisible"
        width="30%"
        >
<!--          表-->
        <el-form :model="ruleForm" :rules="rules" :label-position="labelPosition" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="生成数量" prop="quantity">
            <el-input-number v-model="ruleForm.quantity" controls-position="right" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="礼品卡金额" prop="cardAmount">
            <el-input v-model="ruleForm.cardAmount">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="礼品卡状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="卡描述" >
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addBlock()">创建</el-button>
          </span>
      </el-dialog>

    </div>
</template>

<script>
  import { getList,getListtj,addList,eitList,deleteList,oilDepotConfiguration } from "@/api/EventMarketing/giftBlock";
  export default {
    name: 'index',
    data() {
      return {
        labelPosition:'left',
        queryParams: {
          number:'',
          remark:'',
          activateStatus:'',
          status:'',
          pageNo:1,
          pageSize:10
        },
        centerDialogVisible:false,
        input:'',
        total:0,
        pageNo:1,
        pageSize:10,
        option: [
          {
            value: '',
            label: '全部'
          },
          {
          value: '1',
          label: '已使用'
        }, {
          value: '0',
          label: '未激活'
        },],
        options: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '正常'
          }, {
            value: '2',
            label: '禁用'
          },],
        value: '',
        tjdata:{},
        tableData: [
          {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        ruleForm: {
          status:'1',
          quantity:'1',
          cardAmount:'1',
          remark:''

        },
        rules: {
          status: [
            { required: true, message: '此为必填项', trigger: 'blur' },
          ],
          quantity: [
            { required: true, message: '此为必填项', trigger: 'blur' },
          ],
          cardAmount: [
            { required: true, message: '此为必填项', trigger: 'blur' },
          ],

        }

      }
    },
    mounted() {
      this.getlist()
      this.gettj()

    },
    methods:{
      putStatus(id){
        let data = {
          id:1,
          exchangeStatus:id,
        }
        oilDepotConfiguration(data).then(res =>{
         if(res.code == 200){
           this.$message.success("操作成功")
           this.gettj()
         }
        })

      },
      getlist(){
        this.queryParams.pageNo=this.pageNo
        this.queryParams.pageSize=this.pageSize
        getList(this.queryParams).then(res=>{
          this.tableData = res.data.records
          this.total = res.data.total;
        })
      },

      posteid(data){
        eitList(data).then(res=>{
          if(res.code == 200){
            this.$message.success('修改成功');
          }else {
            this.$message.error('修改失败请稍后再试');
          }
        })
      },
      gettj(){
        getListtj().then(res=>{
          this.tjdata = res.data
        })
      },
      daking(){
        this.centerDialogVisible = true
        this.ruleForm = {
                          activateStatus:'0',
                          quantity:'1',
                          cardAmount:'1',
                          remark:''
                          }
      },
      addBlock(){
        if(this.ruleForm.quantity == '' ||this.ruleForm.cardAmount == '' ||this.ruleForm.status == '' ){
          this.$message.error('必填项不能有空')
          return
        }
        let data = this.ruleForm
        addList(data).then(res=>{
          if(res.code == 200){
            this.$message.success('添加成功');
            this.gettj()
            this.getlist()
          }else {
            this.$message.error('操作失败请稍后再试');
          }
        })
        this.centerDialogVisible = false
      }
    }
  }
</script>

<style scoped>
.tj{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
  .kar{
    width: 25%;
    margin-right: 10px;
  }
  .tj-num{
      margin: 5px auto;
      font-size: 28px;
      color: #666;
    text-align: center;
  }
  .tj-siez{
    margin: 5px auto;
    color: #909399;
    font-size: 14px;
    text-align: center;
  }
  .top-hang{
    width: 100%;
    display: flex;
    align-items: center;
  }
</style>