manyi/static/app/js/device-param-110602.js

function GateParam(option) {
  var _el = option.el
  var _priceParam = option.priceParam
  var _controlParam = option.controlParam
  var _gateDoorArray = option.gateDoorArray

  var app = (this.app = new Vue({
    el: _el,
    template: `
<div>
    <h5 class="mui-content-padded tips-event">
        计费配置
        <i class="tips" title="
           计费方式为周期性计费，每个周期的单价累加即为用户最终需要支付价格；
           例如 设置单价为 1 元，计费周期为2小时，用户临时停车7小时；
           则最终支付价格 为 4个周期 ✖ 周期价格 1元 = 4元
        ">?</i>
    </h5>
    
    <div class="mui-input-group" >
        <div class="mui-input-row ">
            <label class="">单价： </label>
            <input type="number" min=0 max=999 step="0.01" v-model="info.price" />
            <span class="mini-unit">元</span>
        </div>
        <div class="mui-input-row">
            <label class="">计费周期：</label>
            <input type="number"  min=0 max=999 step="0.01" v-model="info.cycle" />
            <span class="mini-unit">小时</span>
        </div>
        <div class="mui-input-row">
            <label class="">费用上限：</label>
            <input type="number"  min=0 max=999 step="0.01" v-model="info.maxFee" />
            <span class="mini-unit">元</span>
        </div>
        <div class="mui-input-row">
            <label class="">免费时间：</label>
            <input type="number"  min=0 max=999 step="0.01" v-model="info.freeHour" />
            <span class="mini-unit">小时</span>
        </div>
    </div>
    
    <h5 class="mui-content-padded tips-event">
        控制配置
        <i class="tips" title="
           从主板中选择可用的门ID作为进门或出门控制；
        ">?</i>
    </h5>
   
    <div class="mui-input-group">
        <div class="mui-input-row" @click="choiceDoor('in')">
            <label class="">进</label>
            <input type="text" v-model="info.in" disabled/>
        </div>
        <div class="mui-input-row" @click="choiceDoor('out')">
            <label class="">出</label>
            <input type="text" v-model="info.out" disabled/>
        </div>
    </div>
    
    <template v-if='info.showDoors'>
      <hr>
      <div class="mui-table-view-cell" v-for="(obj,index) in info.gateDoorArray" @click="closeChoice(obj)">
        <span class="left">名称 </span>
        <span class="right">{{obj.doorName}}</span>
      </div>
    </template>

</div>
        `,
    data: {
      info: {
        price: 0,
        cycle: 0,
        in: 0,
        out: 0,
        freeHour: 0,
        maxFee: 0,
        inDoor: {},
        outDoor: {},
        showDoors: false,
        gateDoorArray: [],
        curChoiceId: '',
      },
    },

    mounted: function () {
      var that = this
      that.initPackages()
    },
    methods: {
      initPackages: function () {
        var that = this
        console.log(_gateDoorArray)
        if (!_gateDoorArray || _gateDoorArray.length === 0) {
          mui.confirm('尚未配置账号，是否需要跳转配置账号？', '温馨提示', ['取消', '确定'], function (e) {
            if (e.index === 1) {
              that.toSetAccount()
            }
          })
        }
        // 初始化参数
        this.info.price = _priceParam.price || this.info.price
        this.info.cycle = _priceParam.cycle || this.info.cycle
        this.info.maxFee = _priceParam.maxFee || this.info.maxFee
        this.info.freeHour = _priceParam.freeHour || this.info.freeHour
        this.info.inDoor = _controlParam.in || this.info.inDoor
        this.info.outDoor = _controlParam.out || this.info.outDoor
        this.info.in = this.info.inDoor.doorName || this.info.in
        this.info.out = this.info.outDoor.doorName || this.info.out

        this.info.gateDoorArray = _gateDoorArray
      },
      toSetAccount: function () {
        var logicalCode = getQueryString('logicalCode') || ''
        var code = getQueryString('code') || ''
        var typeName = getQueryString('type') || ''
        console.log(logicalCode)
        console.log(code)
        console.log(typeName)
        var url = '/app/device-param/accountParam-110602.html'
        var option = {
          logicalCode: logicalCode,
          type: typeName,
          code: code,
        }

        if (url) {
          goPage(url, option)
        }
      },
      choiceDoor: function (currentTarget) {
        this.info.showDoors = true
        this.curChoiceId = currentTarget
      },
      closeChoice: function (item) {
        this.info[this.curChoiceId] = item.doorName
        this.info.showDoors = false
        this.info[this.curChoiceId + 'Door'] = { doorID: item.doorID, doorName: item.doorName }
      }
    },
  }))
}

// 获取设置的计费参数
GateParam.prototype.getPriceParam = function () {
  return {
    price: this.app.info.price,
    cycle: this.app.info.cycle,
    maxFee: this.app.info.maxFee,
    freeHour: this.app.info.freeHour,
  }
}
GateParam.prototype.getControlParam = function () {
  return { in: this.app.info.inDoor, out: this.app.info.outDoor }
}