handpos-client 1.0.0 → 1.0.2

package/src/aotePos.js

@@ -1,70 +1,66 @@
-
-import Vue from 'vue'
-import App from './App'
-import 'babel-polyfill'
-// import { system } from 'system-clients'
-
-// import './components/js/jquery.min.js'
-// import './components/js/bootstrap.min.js'
-import AndroidPlugin from './Plugin/AndroidPlugin'
-import PosUtil from './Plugin/PosUtil'
-
-export default function () {
-
-  Vue.use(AndroidPlugin)
-  Vue.use(PosUtil)
-
-// system()
-// require('./components/js/jquery.min.js')
-// require('./components/js/bootstrap.min.js')
-// require('./bootstrap/less/bootstrap.less')
-// require('./components/css/bootstrap.less')
-// require('./components/css/css.less')
-  require('./bootstrap/less/bootstrap.less')
-  require('./components/css/style.less')
-
-
-//参数加载页面
-  Vue.component('init', (resolve) => { require(['./components/Init'], resolve) })
-// 读卡页面
-  Vue.component('main', (resolve) => { require(['./components/Main'], resolve) })
-// 无卡操作
-//   Vue.component('machine-search', (resolve) => { require(['./components/charge/machine/MachineSearch'], resolve) })
-// 读卡跳转页
-  Vue.component('read-card-inter', (resolve) => { require(['./components/charge/card/ReadCardInter'], resolve) })
-// 用户信息
-  Vue.component('user-info', (resolve) => { require(['./components/charge/userinfo/UserInfo'], resolve) })
-// 卡上信息
-  Vue.component('card-info', (resolve) => { require(['./components/charge/card/CardInfo'], resolve) })
-// 购气历史
-  Vue.component('sell-list', (resolve) => { require(['./components/charge/userinfo/SellList'], resolve) })
-// 换表历史
-//   Vue.component('change-meter-list', (resolve) => { require(['./components/charge/userinfo/ChangeMeterList'], resolve) })
-// 补气信息
-//   Vue.component('fill-gas-list', (resolve) => { require(['./components/charge/userinfo/FillGasList'], resolve) })
-// 过户历史
-//   Vue.component('trans-list', (resolve) => { require(['./components/charge/userinfo/TransList'], resolve) })
-// 其他收费信息
-//   Vue.component('other-list', (resolve) => { require(['./components/charge/userinfo/OtherList'], resolve) })
-// 预写卡信息
-  Vue.component('write-card-info', (resolve) => { require(['./components/charge/userinfo/WritecardInfo'], resolve) })
-// 购气历史
-  Vue.component('history-sell-list', (resolve) => { require(['./components/charge/userinfo/HistorySellList'], resolve) })
-// 卡表售气
-  Vue.component('card-sell-gas', (resolve) => { require(['./components/charge/sellgas/CardSellGas'], resolve) })
-// 固定气价显示
-  Vue.component('guding-price', (resolve) => { require(['./components/charge/sellgas/GudingPrice'], resolve) })
-// 阶梯气价显示
-  Vue.component('jieti-price', (resolve) => { require(['./components/charge/sellgas/JietiPrice'], resolve) })
-// 购气前读卡跳转
-//   Vue.component('read-card-to-buy', (resolve) => { require(['./components/charge/card/ReadCardToBuy'], resolve) })
-
-  Vue.component('choose-pay-way', (resolve) => { require(['./components/charge/sellgas/ChoosePayWay'], resolve) })
-  // Vue.component('scannative', (resolve) => { require(['./components/charge/payment/ScanNative'], resolve) })
-  // Vue.component('order-info', (resolve) => { require(['./components/charge/payment/OrderInfo'], resolve) })
-
-  Vue.component('scan-qrcode', (resolve) => { require(['./components/charge/sellgas/ScanQrcode'], resolve) })
-
-  Vue.component('write-card', (resolve) => { require(['./components/charge/sellgas/WriteCard'], resolve) })
-
-}
+import Vue from 'vue'
+import App from './App'
+import 'babel-polyfill'
+import AndroidPlugin from './plugin/AndroidPlugin'
+import PosUtil from './plugin/PosUtil'
+import { all } from 'vue-client'
+import HttpUtil from './plugin/HttpUtil'
+
+Vue.use(AndroidPlugin)
+Vue.use(PosUtil)
+Vue.use(HttpUtil)
+all()
+
+require('./bootstrap/less/bootstrap.less')
+require('./components/css/style.less')
+require('./components/css/garbage.less')
+
+// 参数加载页面
+Vue.component('init', (resolve) => { require(['./components/Init'], resolve) })
+// 主页面
+Vue.component('main', (resolve) => { require(['./components/Main'], resolve) })
+
+// 卡表收费
+Vue.component('card-main', (resolve) => { require(['./components/main/CardMain'], resolve) })
+// 无卡收费
+Vue.component('machine-main', (resolve) => { require(['./components/main/MachineMain'], resolve) })
+
+// 垃圾费相关
+// 垃圾费信息
+Vue.component('garbage-info', (resolve) => { require(['./components/garbage/GarbageInfo'], resolve) })
+// 垃圾费支付方式选择
+Vue.component('garbage-pay-way', (resolve) => { require(['./components/garbage/GarbagePayWay'], resolve) })
+// 垃圾费二维码扫描
+Vue.component('garbage-scan-native', (resolve) => { require(['./components/garbage/GarbageScanNative'], resolve) })
+
+// 卡表用户信息
+Vue.component('card-user-info', (resolve) => { require(['./components/sellgas/CardSellGas'], resolve) })
+// 物联网表信息
+Vue.component('iot-user-info', (resolve) => { require(['./components/sellgas/IotSellGas'], resolve) })
+// 机表用户信息-gas
+Vue.component('machine-user-info-gas', (resolve) => { require(['./components/sellgas/MachineSellGasGas'], resolve) })
+// 机表用户信息-money(常用)
+Vue.component('machine-user-info', (resolve) => { require(['./components/sellgas/MachineSellGasMoney'], resolve) })
+
+// 支付
+// 选择支付方式
+Vue.component('pay-way', (resolve) => { require(['./components/pay/PayWay'], resolve) })
+// 二维码展示界面
+Vue.component('scannative', (resolve) => { require(['./components/pay/ScanNative'], resolve) })
+// 写卡界面
+Vue.component('order-info', (resolve) => { require(['./components/pay/WriteCard'], resolve) })
+
+
+
+// 公共组件
+// 历史收费记录
+Vue.component('history-sell-list', (resolve) => { require(['./components/public/HistorySellList'], resolve) })
+// 预写卡信息
+Vue.component('write-card-info', (resolve) => { require(['./components/public/WritecardInfo'], resolve) })
+// 购气
+Vue.component('buy-gas', (resolve) => { require(['./components/public/BuyGas'], resolve) })
+
+new Vue({
+  el: 'body',
+  components: { App }
+})

package/src/bootstrap/less/navs.less

@@ -265,7 +265,7 @@
     display: none;
     // padding: 0px 15px 0px 15px;
     // 原本没有，自己添加
-    padding-top: 10px;
+    //padding-top: 10px;
     background: #FFF; // 原本，之前修改的为#FCFEEE
   }
   > .active {

package/src/components/Init.vue

@@ -1,9 +1,9 @@
 <template>
   <div >
-    <div class="mhead" v-if="!hideHead">
+    <div class="mhead">
       <ul>
         <li>
-          <text>购气写卡</text>
+          <text>自助缴费机</text>
         </li>
       </ul>
     </div>
@@ -17,123 +17,129 @@
         </div>
       </div>
     </div>
-    <div class="foot" v-if="!hideHead" @click="home()" >
-      <text >退出</text>
-    </div>
-    <div class="foot" v-if="hideHead" @click="back()">
+    <div class="foot">
       <text >返回</text>
     </div>
   </div>
 </template>
 
 <script>
-  import Vue from 'vue'
-
-  export default {
-    title: '初始化工作框',
-    name: "Init",
-    data() {
-      return {
-        loading_text: '正在对机器进行初始化操作,请稍等',
-        dots: '',
-        timeOut: undefined,
-        timeIndex: 0,
-        errorShow: false
+import Vue from 'vue'
+let getConfig = self => {
+  console.group('getConfigParam')
+  let param = {
+    device_num: self.$PosUtil.Sn
+  }
+  console.log('getConfigParam参数: ', param)
+  self.$resetpost(Vue.ProxyUrl +'rs/logic/getConfigParam', param, {resolveMsg: null, rejectMsg: null}).then(res => {
+    self.loading_text = "初始化成功"
+    self.clearThisInterval()
+    // 设置从后台拿过来的参数值
+    Object.assign(self.$PosUtil.posParam, res.data)
+
+    console.log(self.$PosUtil.posParam)
+
+    // 验证通过
+    self.$goto('main', {}, 'self')
+  }).catch(res => {
+    console.log('res.status:', res.status)
+    if (res.status === 501) {
+      self.loading_text = "该设备未注册，请注册后点击重试"
+    } else if (res.status === 404) {
+      self.loading_text = "设备网络故障或连接服务器异常"
+    } else if (res.status === 500) {
+      self.loading_text = "服务器内部错误"
+    } else {
+      self.loading_text = "未知错误"
+    }
+    self.errorShow = true
+    self.clearThisInterval()
+  })
+  console.groupEnd()
+}
+export default {
+  title: '初始化',
+  name: "Init",
+  data() {
+    return {
+      loading_text: '正在对机器进行初始化操作,请稍等',
+      dots: '',
+      timeOut: undefined,
+      timeIndex: 0,
+      errorShow: false
+    }
+  },
+  ready() {
+    this.start()
+  },
+  methods: {
+    //判断当前运行环境
+    isAndroidDevice() {
+      try {
+        console.log('android环境')
+        HostApp
+        this.$AndroidPlugin.isAndroid = true
+        let url = this.$AndroidPlugin.getProxyURL() + '/'
+        if (Vue.phoneBuild){
+          url = this.$AndroidPlugin.getProxyURL() + '/pos/'
+        }
+        Vue.ProxyUrl = url
+      } catch (e) {
+        console.log('PC测试环境')
+        Vue.AndroidPlugin.isAndroid = false
+        //如果是非安卓环境，config中配置的链接地址肯定是不能用的，所以改成空的即可
+        Vue.ProxyUrl = ''
       }
     },
-    ready() {
-      this.start()
+    back(){
+      this.$back()
     },
-    props: {
-      hideHead: false
+    getSn() {
+      this.Sn = this.$AndroidPlugin.getSN()
+      Vue.PosUtil.Sn = this.Sn
     },
-    methods: {
-      //判断当前运行环境
-      isAndroidDevice() {
-        try {
-          HostApp
-          this.$AndroidPlugin.isAndroid = true
-          Vue.ProxyUrl = this.$AndroidPlugin.getProxyURL()
-        } catch (e) {
-          Vue.AndroidPlugin.isAndroid = false
-          //如果是非安卓环境，config中配置的链接地址肯定是不能用的，所以改成空的即可
-          Vue.ProxyUrl = '/pos'
-        }
-      },
-      back(){
-        this.$back()
-      },
-      getSn() {
-        this.Sn = this.$AndroidPlugin.getSN()
-        Vue.PosUtil.Sn = this.Sn
-      },
-      home() {
-        this.$AndroidPlugin.back_home()
-      },
-      /**
-       * 给等待条添加一个点
-       * */
-      addDots() {
-        this.timeIndex++
-        this.dots += '.'
-      },
-      /**
-       * 结束本组件内的计时器
-       * */
-      clearThisInterval() {
-        window.clearInterval(this.timeOut)
-        this.initDots()
-      },
-      /**
-       * 清空等待条中的点
-       * */
-      initDots() {
-        this.timeIndex = 0
-        this.dots = ''
-      },
-      /**
-       * 启动计时器
-       * */
-      async start() {
-        await this.isAndroidDevice()
-        await this.getSn()
-        this.errorShow = false
-        this.loading_text = '正在进行初始化操作,请稍等...'
-        this.timeOut = window.setInterval(this.setTimeOutMethod, 1000)
-        getConfig(this)
-      },
-      /**
-       * 判断增加一个点还是清空点
-       * */
-      setTimeOutMethod() {
-        this.timeIndex >= 3 ? this.initDots() : this.addDots()
-      }
+    home() {
+      this.$AndroidPlugin.back_home()
+    },
+    /**
+     * 给等待条添加一个点
+     * */
+    addDots() {
+      this.timeIndex++
+      this.dots += '.'
+    },
+    /**
+     * 结束本组件内的计时器
+     * */
+    clearThisInterval() {
+      window.clearInterval(this.timeOut)
+      this.initDots()
+    },
+    /**
+     * 清空等待条中的点
+     * */
+    initDots() {
+      this.timeIndex = 0
+      this.dots = ''
+    },
+    /**
+     * 启动计时器
+     * */
+    async start() {
+      await this.isAndroidDevice()
+      await this.getSn()
+      this.errorShow = false
+      this.loading_text = '正在进行初始化操作,请稍等...'
+      this.timeOut = window.setInterval(this.setTimeOutMethod, 1000)
+      getConfig(this)
+    },
+    // 判断增加一个点还是清空点
+    setTimeOutMethod() {
+      this.timeIndex >= 3 ? this.initDots() : this.addDots()
     }
   }
-  /**
-   * 获取后台配置文件来进行初始化工作
-   * */
-  let getConfig = self => {
-    console.log('传的数据',self.$PosUtil.Sn)
-    self.$resetpost(Vue.ProxyUrl +'/rs/logic/getConfigParam', {data: {device_num: self.$PosUtil.Sn}}, {resolveMsg: null, rejectMsg: null}).then(res => {
-      self.loading_text = "初始化成功"
-      self.clearThisInterval()
-      // 设置从后台拿过来的参数值
-      Object.assign(self.$PosUtil.posParam,res.data)
-
-      console.log(self.$PosUtil.posParam)
-      // 跳转
-      self.$goto('main', {}, 'self')
-    }).catch(res => {
-      console.log('resss',res)
-      // self.$showMessage("错误状态码:" + res.status + "\n错误信息:" + res.statusText)
-      self.loading_text = "初始化失败（" + res.status + "），请确认网络连接正常后重试"
-      self.errorShow = true
-      self.clearThisInterval()
-    })
-  }
+}
 </script>
-
 <style>
   .span-height-center {
     position: relative;
@@ -187,7 +193,7 @@
   }
 
   .loading-text-style {
-    margin: 0px 10% 0px 10%;
+    margin: 0 10% 0 10%;
     height: 30%;
     border-radius: 10px;
     text-align: center
@@ -201,6 +207,6 @@
 
   .ErrorBtnLocation {
     position: relative;
-    height: 0%;
+    height: 0;
   }
 </style>

package/src/components/Main.vue

@@ -1,80 +1,81 @@
-<template>
-  <div>
-    <div class="mhead" v-if="!hideHead">
-      <ul>
-        <li>
-          <text>购气写卡</text>
-        </li>
-      </ul>
-    </div>
-    <div class="body" style="background: #f0f0f0;padding: 20%;">
-
-       <div @click='card("hasOfflineWrite")' class="auto" style="margin-top: -10%;" v-if="hasOfflineWrite">
-         <img src="./image/xxxk.png" alt="" class="img-responsive" />
-       </div>
-       <div @click='card("hasCardUser")'class="auto" style="margin-top: 10%;" v-if="hasCardUser">
-         <img src="./image/kbgq.png" alt="" class="img-responsive" />
-       </div>
-       <div @click='pay()'class="auto" style="margin-top: 10%;" v-if="hasMachine">
-         <img src="./image/fkbgq.png" alt="" class="img-responsive" />
-       </div>
-    </div>
-    <div class="foot" v-if="!hideHead" @click="home()">
-      <text >退出</text>
-    </div>
-    <div class="foot" v-if="hideHead" @click="back()">
-      <text >返回</text>
-    </div>
-  </div>
-
-</template>
-
-<script>
-  // import * as Util from '../util'
-  export default {
-    title: '收费导航页',
-    data () {
-      return {
-        Sn:'',
-        hasMachine: false,
-        hasCardUser: false,
-        hasOfflineWrite: false
-      }
-    },
-    props: {
-      hideHead: false
-    },
-    methods: {
-      callBack(msg) {
-        console.log(msg)
-        if (msg === 'tomain') {
-          return
-        }
-        if (msg !== undefined && msg !== null && msg !== '') {
-          this.$showMessage(msg)
-          return
-        }
-      },
-      back(){
-        this.$back()
-      },
-      home() {
-        this.$AndroidPlugin.back_home()
-      },
-      card (type) {
-        console.log("type====", type)
-        this.$goto('read-card-inter',{sellType: type},'self',this.callBack)
-      }
-    },
-    ready () {
-      this.Sn=this.$PosUtil.Sn
-        this.hasMachine= this.$PosUtil.posParam.hasMachine
-        this.hasCardUser =this.$PosUtil.posParam.hasCardUser
-        this.hasOfflineWrite =this.$PosUtil.posParam.hasOfflineWrite
-    }
-
-  }
-</script>
-<style>
-
-</style>
+<template>
+  <div>
+    <div class="mhead">
+      <ul>
+        <li>
+          <text>自助缴费机</text>
+        </li>
+      </ul>
+    </div>
+    <div class="body" style="background: #f0f0f0;padding: 20%;">
+      <!-- 卡表缴费 -->
+      <div @click='sale("card")' class="auto" style="margin-top: 10%;" v-if="hasCardSale">
+        <img src="./image/cardSale.png" alt="" class="img-responsive" />
+      </div>
+      <!-- 无卡收费 -->
+      <div @click='sale("machine")' class="auto" style="margin-top: 10%; " v-if="hasMachine">
+        <img src="./image/machineSale.png" class="img-responsive"/>
+      </div>
+      <!-- 主页二维码展示-->
+      <div class="auto" style="margin-top: 10%;" v-if="hasShowCode">
+        <img :src="code()" height="70%" width="70%" style="margin: 0 auto;display: none !important;" class="img-responsive"/>
+        <h5 style="margin-left: 15%;color: #000000">{{tips}}</h5>
+       </div>
+    </div>
+    <div class="foot">
+      <text >返回</text>
+    </div>
+  </div>
+</template>
+<script>
+
+import Vue from 'vue'
+export default {
+  title: '收费导航页',
+  name: 'Main',
+  data () {
+    return {
+      Sn: '',
+      hasCardSale: false,
+      hasMachine: false,
+      hasShowCode: false,
+      tips: ''
+    }
+  },
+  props: {
+    hideHead: false
+  },
+  methods: {
+    callBack(msg) {
+      if (msg !== 'toMain') {
+        this.$showNewMessage('错误', '返回错误' + msg, [], 'newmgs')
+      }
+    },
+    sale (type) {
+      if (type === 'card') {
+        // 卡表缴费
+        this.$goto('card-main', {}, 'self', this.callBack)
+      } else {
+        // 无表缴费
+        this.$goto('machine-main', {}, 'self', this.callBack)
+      }
+    },
+    // 获取二维码
+    code () {
+      if (this.$PosUtil.posParam.isShowCode) {
+        return Vue.ProxyUrl + '/res/' + this.$PosUtil.posParam.codeImagePath + '/code.jpg'
+      }
+    }
+  },
+  ready () {
+    this.Sn=this.$PosUtil.Sn
+    this.hasCardSale = this.$PosUtil.posParam.hasCardSale
+    this.hasMachine = this.$PosUtil.posParam.hasMachine
+    this.hasShowCode = this.$PosUtil.posParam.hasShowCode
+    this.tips = this.$PosUtil.posParam.tips
+  }
+}
+</script>
+<style>
+
+</style>

package/src/components/css/garbage.less

@@ -0,0 +1,80 @@
+/* 垃圾费相关样式 */
+
+// 垃圾费按钮样式
+.garbage-btn {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+  color: white;
+}
+
+.garbage-btn:hover {
+  background-color: #449d44;
+  border-color: #398439;
+  color: white;
+}
+
+// 垃圾费信息面板样式
+.garbage-panel {
+  .panel-heading {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .panel-title {
+    color: #333;
+    font-weight: bold;
+  }
+}
+
+// 垃圾费表格样式
+.garbage-table {
+  .table {
+    margin-bottom: 0;
+
+    th {
+      background-color: #499edf;
+      color: white;
+      text-align: center;
+    }
+
+    td {
+      text-align: center;
+    }
+  }
+}
+
+// 缴费按钮样式
+.pay-btn {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+  color: white;
+  font-size: 16px;
+  padding: 12px 24px;
+
+  &:hover {
+    background-color: #449d44;
+    border-color: #398439;
+  }
+}
+
+// 返回主页按钮样式
+.back-btn {
+  background-color: #6c757d;
+  border-color: #6c757d;
+  color: white;
+  font-size: 16px;
+  padding: 12px 24px;
+
+  &:hover {
+    background-color: #545b62;
+    border-color: #545b62;
+  }
+}
+
+// 垃圾费图标样式
+.garbage-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+  display: block;
+}