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

<template>
    <div class="app-containers">
      <div class="card-box" style="margin-bottom: 20px">
        <div class="top-hang">
          <div class="d-s">
            <el-select v-model="queryParams.cardAmount"  clearable style="margin-right: 10px" placeholder="请选择面值">
              <el-option
                v-for="item in jglist"
                :key="item.cardAmount"
                :label="item.cardAmount"
                :value="item.cardAmount">
              </el-option>
            </el-select>
            <el-select v-model="queryParams.activateStatus" clearable 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.sailStatus" clearable 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>
          </div>
          <div  class="d-s">
          <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" >下载模板</el-button>
          <el-button type="primary"  @click="centerDialogVisible =! centerDialogVisible"  >新增礼品卡活动</el-button>

          </div>
        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="活动编号"
           >
          </el-table-column>
          <el-table-column
            prop="cardAmount"
            label="活动名称"
            >
          </el-table-column>
          <el-table-column
            prop="useTime"
            label="礼品卡面值"
           >
          </el-table-column>
          <el-table-column
            prop="sailTime"
            label="制卡数量"
           >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="剩余制卡数量"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="有效期"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="关联油品油号"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="密码"
          >
          </el-table-column>
          <el-table-column
            prop="sailStatus"
            label="状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.sailStatus  == 1">已售</span>
              <span v-if="scope.row.sailStatus  != 1">未售</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="创建人"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <div style="display: flex;flex-wrap: wrap">
              <el-button
                type="text"
              >修改</el-button>
              <el-button
                type="text"
                @click="uploadShow()"
              >上传礼品卡数据</el-button>
              <el-button
                type="text"
                @click="Encryption =! Encryption"
              >密码加密</el-button>
              <el-button
                type="text"
                @click="orderShow =! orderShow"
              >查看订单信息</el-button>
              </div>
            </template>
          </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"
        />
      </div>
      <el-drawer
        title="订单记录"
        :visible.sync="orderShow"
        size="55%"
        :before-close="handleClose"
        center>
        <div class="box-der">
          <div class="d-b">
            <div class="d-s">
              <el-input v-model="input" style="width: 200px;margin-right: 10px" placeholder="请输入订单号"></el-input>
              <el-select v-model="value" placeholder="请选择" style="width: 200px;margin-right: 10px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
          <el-table
            :data="orderData"
            border
            style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="date"
              label="订单号"
            >
            </el-table-column>
            <el-table-column
              prop="date"
              label="会员手机号"
            >
            </el-table-column>
            <el-table-column
              prop="date"
              label="礼品卡面值（元）">
            </el-table-column>
            <el-table-column
              prop="date"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="date"
              label="礼品卡金额">
            </el-table-column>
            <el-table-column
              prop="date"
              label="实收金额">
            </el-table-column>
            <el-table-column
              prop="date"
              label="订单状态">
            </el-table-column>
            <el-table-column
              prop="date"
              label="订单完成时间">
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
      <el-dialog
        title="上传礼品卡数据"
        :visible.sync="uploadingShow"
        width="40%"
      >

      </el-dialog>
      <el-dialog
        title="新增/修改礼品卡活动"
        :visible.sync="centerDialogVisible"
        width="40%"
      >
        <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 v-model="ruleForm.quantity"></el-input>
          </el-form-item>
          <el-form-item label="活动名称" prop="quantity">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="礼品卡面值" prop="quantity">
            <el-input placeholder="请输入内容" v-model="ruleForm.name">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="有效期" prop="quantity">
            <el-date-picker
              v-model="ruleForm.value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关联油品油号"  prop="name" >
            <div class="d-s">
              <div class="icon-type" v-for="(item,index) in oillist" :key="index"
                   :class="{ 'acvtive' : index === tindex }" @click="Typeindex(index)">
                <img src="../../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex">
                <img src="../../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex">
                {{ item }}
              </div>
              <el-select v-model="ruleForm.value" placeholder="请选择">
                <el-option
                  v-for="item in oilnumlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="卡类型" prop="quantity">
            <el-date-picker
              v-model="ruleForm.value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关联油品油号"  prop="name" >
            <div class="d-s">
              <div class="icon-type" v-for="(item,index) in modalitylsit" :key="index"
                   :class="{ 'acvtive' : index === tindex }" @click="Typeindex(index)">
                <img src="../../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex">
                <img src="../../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex">
                {{ item }}
              </div>
            </div>
          </el-form-item>
          <el-form-item label="礼品卡说明"  prop="name" >
            <el-input type="textarea" v-model="ruleForm.desc"></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>
      <el-dialog
        title="密码加密"
        :visible.sync="Encryption"
        width="30%"
        >
          <div class="d-b">
           <div class="d-s">
             <span style="margin-right: 15px">活动编号</span>
             <el-input v-model="ruleForm.number" style="width: 200px;margin-right: 10px" placeholder="请输入活动编号"></el-input>
           </div>
            <el-button type="primary" >一键加密</el-button>
          </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          border=""
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="活动编号"
            width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="卡号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="密码"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="address"
            label="加密后的密码"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>

      </el-dialog>

    </div>
</template>

<script>
import {
  getList,
  getListtj,
  addList,
  eitList,
  deleteList,
  oilDepotConfiguration,
  getdownload,
  getselectGiftValue,
  getyi,
  getwei,
  getqb,
  getsk
} from "@/api/EventMarketing/giftBlock";
  import {getToken} from "@/utils/auth";
  export default {
    name: 'index',
    data() {
      return {
        Encryption:false,
        uploadingShow:false,
        oillist:[
          "不限",
          "自定义"
        ],
        modalitylsit:[
          "免密",
          "密码"
        ],
        oilnumlist:[
          {
            value: '1',
            label: '#95'
          },
          {
            value: '2',
            label: '#92'
          },
        ],
        tindex:0,
        jglist:[],
        onelist:[],
        twolist:[],
        threelist:[],
        orderShow:false,
        orderData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, ],
        headers: {
          'Access-Token': getToken(),
        },
        uploading: false,
        fileList: [],
        labelPosition:'left',
        queryParams: {
          number:'',
          remark:'',
          activateStatus:null,
          status:'',
          pageNo:1,
          pageSize:10
        },
        centerDialogVisible:false,
        input:'',
        total:0,
        pageNo:1,
        pageSize:10,
        option: [
          {
          value: '0',
          label: '已激活'
        }, {
          value: '1',
          label: '未激活'
        },],
        options: [
          {
            value: '1',
            label: '已售'
          }, {
            value: '0',
            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:{
      uploadShow(){
        this.uploadingShow =! this.uploadingShow
      },
      Typeindex(index){
        this.tindex = index
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getwysk(row){
        if(row.sailStatus == 1){
          this.$message.error("此卡已经售出过了呦")
          return
        }
        if(row.activateStatus == 1){
          this.$message.error("此卡还未激活呦")
          return
        }
        let data = {
          id:row.id,
          sailStatus :1
        }
        getsk(data).then(res=>{
          this.getlist()
          console.log(res)
          this.$message.success("售卡成功")
        })
      },

      // 下载
      handleChange(file, fileList) {
        this.uploading = true;
        console.log(file)
        if(file.status === 'success'){
          this.uploading = false;
          this.openUpload = false;
          this.openUser = false;

          this.fileList.splice(0,1)
          this.result = file.response.data
          this.getlist()
        }
      },
      putStatus(id){
        let data = {
          id:1,
          exchangeStatus:id,
        }
        oilDepotConfiguration(data).then(res =>{
         if(res.code == 200){
           this.$message.success("操作成功")
           this.gettj()
         }
        })

      },
      // 重置按钮操作
      resetQuery() {
        this.queryParams = {
          number:'',
          remark:'',
          activateStatus:null,
          status:'',
          pageNo:1,
          pageSize:10
        }
        this.getlist();
      },
      getlist(){
        getselectGiftValue().then(res=>{
          console.log(res)
          this.jglist = res.data
        })
        getqb().then(res=>{

          this.onelist = res.data
          console.log(this.onelist)
        })
        getyi().then(res=>{
          this.twolist = res.data
        })
        getwei().then(res=>{
          this.threelist = res.data
        })
        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 lang="scss">
.tj{
  width: 100%;
  display: flex;
  justify-content: space-between;

}
.box-der{
  box-sizing: border-box;
  padding: 15px;
}
  .kar{
    width: 100%;
    background: #FFFFFF;
    margin-bottom: 10px;

  }
.d-b{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
  .one-size{
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
.two-size{
  font-size: 20px;
  font-weight: bold;
  color: #78b0fb;
}
.three-size{
  font-size: 20px;
  font-weight: bold;
  color: #f73f3f;
}
  .ds{
    width: 100%;
    display: flex;
    align-items: center;
    background: #f4f4f4;
    border-radius: 6px;
   margin-bottom: 15px;
    box-sizing: border-box;
    padding: 15px 5px;
  }
  .tj-text{
    font-size: 18px;
    font-weight: bold;
  }
  .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;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .d-s{
    display: flex;
    align-items: center;
  }
  .butoon{
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid #fe8c4a;
    border-radius: 6px;
    font-size: 16px;
    margin-left: 15px;
  }
  .sshi{
    width: 33%;
  background: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 6px;
    //background: #f9f9f9;
  }
  .tjaocuo{
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
  }
.title_{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 20px;
}
.card-box{
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 10px;
}
.icon-type {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  margin-right: 20px;
  cursor: pointer;
}
.acvtive {
  color: #FF770F !important;
}
</style>