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

<template>
    <div class="app-container">
<!--      存油卡-->
      <el-card  style="margin-bottom: 20px">
        <div style="display: flex;align-items: center;justify-content: space-between">
        <el-breadcrumb separator="/" style="margin-right: 35px">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/EventMarketing/CardHolder/index' }" >电子卡券管理</el-breadcrumb-item>
          <el-breadcrumb-item>电子囤油卡</el-breadcrumb-item>
        </el-breadcrumb>
        <el-radio-group v-model="queryParams.type" @input="radiovalue(dict.label)">
          <el-radio-button v-for="dict in dict.type.oil_type"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
          ></el-radio-button>
        </el-radio-group>
        </div>
        <div class="top-sousuo">
          <el-select v-model="queryParams.oilType"  clearable placeholder="请选择油号">
            <el-option
              v-for="dict in oilList"
              :key="dict.id"
              :label="dict.oilName"
              :value="dict.id">
            </el-option>
          </el-select>
          <el-select v-model="queryParams.activeStatus" placeholder="状态" style="margin:0px 20px">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button  type="primary" style="margin-left: 20px ;float: right" icon="el-icon-search" @click="getlist">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </div>
      </el-card>
      <el-card style="margin-bottom: 15px">
        <div style="margin-bottom: 15px">统计</div>
        <el-divider></el-divider>
        <div class="wrap-box">
          <div  class="tjbox" v-for="(item,index) in tjlist" :key="index" >
            <div>油品名称: <span class="cu">{{item.oilName}}</span>  </div>
            <div>总参与人数: <span class="cu">{{item.peoples}}</span> 人</div>
            <div>售出总金额: <span class="cu">{{item.money}}</span> 元</div>
            <div>售出总升数: <span class="cu">{{item.litres}}</span> L</div>
          </div>
        </div>
      </el-card>


      <el-card  style="margin-bottom: 20px">
        <el-button type="primary" icon="el-icon-plus"  style="margin-bottom: 10px " @click="addoilBlock()">新增电子囤油卡</el-button>
        <el-alert
          title="当前配置为锁价活动、锁价活动为充值后所得升数进行锁定,卡类型下每个油品最多可创建6个锁价充值活动"
          type="info"
          :closable="false">
        </el-alert>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            >
          </el-table-column>

          <el-table-column
            prop="type"
            label="油品信息"
          >
          </el-table-column>
          <el-table-column
            prop="lockPrice"
            label="锁价活动价(元)/L"
          >
          </el-table-column>
          <el-table-column
            prop="oilPrice"
            label="当前挂牌价(元)/L"
          >
          </el-table-column>
          <el-table-column
            prop="gbPrice"
            label="当前国标价(元)/L"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="活动时间"
            width="330"
            >
<!--            <template slot-scope="scope" v-if="scope.row.activeTime==='2'">-->
            <template slot-scope="scope">
              <div v-if="scope.row.activeTime==='2'" style="display: flex;align-items: center">
                <div>{{scope.row.createTime}}</div>
                <div> --- </div>
                <div>{{scope.row.endTime}}</div>
              </div>
              <div v-if="scope.row.activeTime==='1'" style="display: flex;align-items: center"><div>不限时间</div></div>
            </template>
          </el-table-column>
<!--          <el-table-column
            prop="type"
            label="到期时间"
            width="350"
          >
            <template slot-scope="scope">
              <div style="display: flex;align-items: center" v-if="scope.row.expireTime">
                <div>{{scope.row.expireTime}}</div>
              </div>
            </template>
          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="oilType"-->
<!--            label="油品"-->
<!--            >-->
<!--          </el-table-column>-->
<!--          <el-table-column
            prop="rechargeBalance"
            label="充值金额（元）"
            >
            <template slot-scope="scope">
              <el-tag>{{scope.row.rechargeBalance}}</el-tag>
            </template>
          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="lockupPrice"-->
<!--            label="锁价单价"-->
<!--            >-->
<!--            <template slot-scope="scope">-->
<!--              <el-tag>{{scope.row.lockupPrice}}</el-tag>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column
            prop="incomeLitres"
            label="所得升数（L）"
            >
            <template slot-scope="scope">
              <el-tag>{{scope.row.incomeLitres}}</el-tag>
            </template>
          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="points"-->
<!--            label="赠送积分"-->
<!--            >-->
<!--            <template slot-scope="scope">-->
<!--              <el-tag>{{scope.row.points}}</el-tag>-->
<!--            </template>-->
<!--          </el-table-column>-->


          <el-table-column
            prop="activeStatus"
            label="活动状态"
            >
            <template slot-scope="scope">

              <el-switch
                v-model="scope.row.activeStatus"
                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
            label="编辑"
            >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>

              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>

          </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="36%"
        center>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <div style="display: flex; align-items: center ">
              <el-form-item label="油品类型" prop="oilType">
                <el-select v-model="ruleForm.oilType" placeholder="请选择"  @change="getoiltype" >
                  <el-option
                    v-for="dict in oilList"
                    :key="dict.id.toString()"
                    :label="dict.oilName"
                    :value="dict.id.toString()">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="margin-left: 10px" v-if="oilPrice&&gbPrice">今日油价：<span style="color: red">{{oilPrice || ''}}</span> 元/L   国标油价：<span style="color: red">{{gbPrice || ''}}</span>元/L  </div>
            </div>


          <el-form-item label="锁价活动价" prop="lockPrice">
            <div style="width: 217px">
              <el-input v-model="ruleForm.lockPrice" min="1" placeholder="请输入锁价活动价">
                <template slot="append">元/升</template>
              </el-input>
            </div>

          </el-form-item>
          <el-form-item label="锁价满足金额" prop="rechargeBalance">
            <div style="width: 217px">
              <el-input v-model="ruleForm.rechargeBalance" min="1" placeholder="请输入锁价满足金额">
                <template slot="append">元</template>
              </el-input>
            </div>

          </el-form-item>
<!--          <el-form-item label="换算升数" prop="incomeLitres">
            <div style="width: 217px">
              <el-input v-model="ruleForm.incomeLitres.toFixed(2)">
                <template slot="append">L</template>
              </el-input>
            </div>

          </el-form-item>-->
          <el-form-item label="赠送积分" prop="points">
            <div style="width: 217px">
              <el-input v-model="ruleForm.points">
                <template slot="append">分</template>
              </el-input>
            </div>

          </el-form-item>
          <el-form-item label="活动时间" prop="resource">

              <el-radio-group v-model="ruleForm.activeTime">
                <el-radio label="1">不限时间</el-radio>
                <el-radio label="2">自定义时间</el-radio>
              </el-radio-group>


          </el-form-item>

          <el-form-item label="时间范围" v-if="ruleForm.activeTime == 2" prop="startTime">
            <div style="width: 100%;display: flex;align-items: center ">
              <div style="width: 217px">
                <el-date-picker
                  v-model="ruleForm.startTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="开始日期">
                </el-date-picker>
              </div>
                <div style="width: 5%">
                  -
                </div>

              <div style="width: 45%">
                <el-date-picker
                  v-model="ruleForm.endTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </el-form-item>

<!--          <el-form-item label="到期时间" prop="expireTime">
&lt;!&ndash;            <div style="width: 100%;display: flex;align-items: center ">&ndash;&gt;
&lt;!&ndash;              <div style="width: 45%">&ndash;&gt;
                <el-date-picker
                  v-model="ruleForm.expireTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="到期时间">
                </el-date-picker>
&lt;!&ndash;              </div>&ndash;&gt;
&lt;!&ndash;            </div>&ndash;&gt;
            <div style="color: red;font-size: 12px;line-height: 18px;margin-top: 5px">注：当前到期时间为用户充值后电子囤油卡的余油的到期时间，如果到期后没有用完则自动转为电子储值卡余额</div>


          </el-form-item>-->

          <el-form-item label="活动状态" prop="resource">
            <el-radio-group v-model="ruleForm.activeStatus">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="postadd(ruleForm)">确 定</el-button>
        </span>
      </el-dialog>


    </div>
</template>

<script>
  import { getList,oilName,addList,eitList,getById,getoilnum,getstatistics,deleteById} from "@/api/EventMarketing/oilBlock";
  import {deletedelById} from "@/api/EventMarketing/SaveBlock";
  export default {
    dicts: ['oil_type'],
    name: 'index',
    data(){
      return{
        gbPrice:null,
        oilPrice:null,
        tjlist:[],
        value:'',
        type:0,
        centerDialogVisible:false,
        value1:'',
        total:0,
        pageNo:1,
        pageSize:10,
        option: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '正常'
          }, {
            value: '2',
            label: '禁用'
          },],
        tableData: [],
        oilList:[],
        ruleForm:{
          oilType:2,
          lockupPrice: "" ,
          lockPrice: "" ,
          lockMoney: "" ,
          rechargeBalance:"",
          incomeLitres:0,
          points:'',
          status:'0',
          activeTime:'1',
          activeStatus:'0'
        },
        queryParams:{
          type:'汽油',
          oilType:'',
          activeStatus:'',
          pageNo:1,
          pageSize:10,
        },
        queryParamss:{
          type:'',
          oilType:'',
          activeStatus:'',
          pageNo:1,
          pageSize:10,
        },
        rules:{
          oilType: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          rechargeBalance: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          points: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          lockPrice: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
        }
      }

    },
    mounted() {
      this.getlist()
      this.radiovalue()
    },
    watch:{
      'ruleForm.rechargeBalance':{
        handler: function() {
          if(this.ruleForm.rechargeBalance != 0 && this.ruleForm.lockupPrice != 0 ){
            this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice

          }else {
            this.ruleForm.incomeLitres = 0
          }

        },
      },
      'ruleForm.lockupPrice':{
        handler: function() {
          if(this.ruleForm.rechargeBalance != 0 && this.ruleForm.lockupPrice != 0 ){
            this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice

          }else {
            this.ruleForm.incomeLitres = 0
          }
        },
      }
    },
    computed: {
      // 计算属性很重要的特性: 带缓存, 性能极强
      // 在第一次使用该属性时进行计算, 计算后将结果缓存起来, 后面如果还有其他地方用到, 会直接从缓存中取值, 不会再次计算
      // 如果依赖的数据更新, 也会重新计算, 然后重复上述操作
      totalCount () {
        console.log('我是 computed 里的求和属性')
        this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice
        return this.ruleForm.incomeLitres
      }
    },

    methods:{

      getoiltype(e){

        getoilnum(e).then(res=>{
          console.log(res)
          if(res.code == 200){
            this.gbPrice = res.data.gbPrice
            this.oilPrice = res.data.oilPrice
          }

        })
      },

      radiovalue(lable){
        this.oilList = []
        oilName(this.queryParams.type).then(res=>{
          this.oilList = res.data.records
          console.log('我的油站' ,res)
        })
        this.getlist()
      },
      // 重置按钮操作
      resetQuery() {
        this.queryParams = {
          type:'汽油',
            oilType:'',
            activeStatus:'',
            pageNo:1,
            pageSize:10,
        }
        this.getlist();
      },
      getlist(){
        this.queryParams.pageNo=this.pageNo
        this.queryParams.pageSize=this.pageSize
          getList(this.queryParams).then(res=>{
            if(res.code == 200){
              this.tableData = res.data.records
              this.total = res.data.total;
            }
          })
        getstatistics().then(res=>{
          console.log(res)
          this.tjlist = res.data
        })

      },
      addoilBlock(){
        this.gbPrice = null,
          this.oilPrice=null,
        this.ruleForm = {
            type:this.queryParams.type,
            lockupPrice: 0 ,
            rechargeBalance:0,
            incomeLitres:0,

            points:'',
            activeTime:'1',
            activeStatus:'1',
            tatus:'1'
        },
          this.radiovalue()
        this.centerDialogVisible = true
      },
      posteid(data){
        eitList(data).then(res=>{
          if (res.code == 200){
            this.$message.success('修改成功')
          }
        })
      },
      postadd(formName){
        if( this.ruleForm.oilType ==''  || this.ruleForm.rechargeBalance =='' || this.ruleForm.points =='' ){
          this.$message.error("必填项不能为空")
          return
        }
        this.ruleForm.type = this.queryParams.type
        this.ruleForm.status = '1'
        // this.ruleForm.startTime = this.ruleForm.startTime.toLocaleDateString()
        // this.ruleForm.endTime = this.ruleForm.endTime.toLocaleDateString()
        if( this.ruleForm.id ){
          console.log("修改")
          eitList(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.$message.success('修改成功')
              this.getlist()
            }
          })
        }else{
          addList(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.$message.success('新增成功')
              this.getlist()
            }
          })
        }

        this.centerDialogVisible = false
      },
      handleDelete(data){

        this.$modal.confirm('确定删除此条电子囤油卡信息？').then(function() {
          return deleteById(data.id);
        }).then(() => {
          this.getlist()
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handleUpdate(data){
        getById(data.id).then(res=>{
          if (res.code == 200){
            this.ruleForm = res.data
            this.centerDialogVisible = true
          }
        })
      }

    }
  }
</script>

<style scoped lang="scss">
  .top-sousuo{
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
  .tjbox{
    width: 19%;
    background: #f9f9f9;
    margin-right: 1%;
    margin-bottom: 1%;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 6px;
  }
  .cu{
    font-weight: bold;
  }
  .wrap-box{
    width: 100%;
    display: flex;
   flex-wrap: wrap;
    margin-bottom: 20px;
  }
</style>