first commit

src/subPackages/home-sub/printerList/printerList.vue

@@ -0,0 +1,205 @@
+<template>
+  <view class="root">
+    <!-- 搜索 和条件判断 -->
+    <view class="search-root">
+      <view class="search-color">
+        <uni-search-bar
+          placeholder="输入打印机编号或备注"
+          @cancel="search"
+          cancel-text="搜索"
+          textColor="#fff"
+        ></uni-search-bar>
+      </view>
+
+      <view class="itme-root">
+        <span
+          @tap="setRuler(item, i)"
+          :class="{ 'span-activt': i == activt }"
+          class="item"
+          v-for="(item, i) in rulerList"
+          :key="i"
+          >{{ item.title }}</span
+        >
+      </view>
+    </view>
+
+    <view class="printer-item-root">
+      <view class="item" v-if="totalCount != 0">
+        <view class="printer" v-for="item in list" :key="item.id">
+          <view class="money-root">
+            <view class="left-money">
+              <view
+                >余额：
+                <span v-if="item.print_bill > 500" class="no-sufficient">{{
+                  item.print_bill
+                }}</span>
+                <span v-else class="warring">{{ item.print_bill }}</span>
+              </view>
+              <img
+                src="http://image.jxc4.com/image/9287b611859af0de50318e1b7f2d8a15.tem.png"
+                alt=""
+              />
+            </view>
+            <span
+              class="play-money"
+              @tap="playMoney(item.print_bill, item.print_no)"
+            >
+              充值
+            </span>
+          </view>
+          <view class="printer-msg-root">
+            <img
+              src="http://image.jxc4.com/image/f1722576b90591cb9fe2aed2f2fb7af5.tem.jpg"
+              alt=""
+            />
+
+            <view class="num">
+              <p class="name">{{ item.name }}</p>
+              <p style="display: flex">
+                打印机编号：<span>{{ item.print_no }}</span>
+                <i class="iconfont icon-fuzhi" @tap="copy(item.print_no)"></i>
+              </p>
+              <p>
+                KEY：<span>{{ item.print_key }}</span>
+              </p>
+            </view>
+          </view>
+
+          <view class="operation-root">
+            <viwe class="status">
+              状态:
+              <span v-if="item.is_online == 1" class="onLine"
+                >在线 正常工作中</span
+              >
+              <span v-else class="noLine">离线 当前打印机离线中</span>
+            </viwe>
+            <view>
+              <span
+                class="playPrinterText"
+                @tap="playPrinterText(item.print_no, item.name)"
+                v-show="item.is_online == 1"
+                >打印测试</span
+              >
+              <span
+                class="modify"
+                @tap="modifyTap(item.print_no, item.name, item.print_key)"
+                >修改</span
+              >
+            </view>
+            <!-- <span class="del" @tap="delPrinter(item.print_no)">删除(没有用删除功能，打印机不用了直接显示下线)</span> -->
+          </view>
+        </view>
+      </view>
+      <zswEmpty v-else title="未找到打印机"></zswEmpty>
+    </view>
+
+    <view class="btn-root-one">
+      <view class="add-btn-printer" @tap="addPrinter">添加打印机</view>
+    </view>
+
+    <!-- 删除打印机(暂时没有使用) -->
+    <zsw-ruler-printer
+      ref="ruler"
+      @determine="determine"
+      :sendCOde="removeCodeText"
+      title="删除打印机"
+      phoneText="原手机号"
+      promptText="为了您的账户安全，删除打印机需要验证绑定账号，如无法验证请联系运营！"
+    >
+    </zsw-ruler-printer>
+
+    <uni-popup ref="modify">
+      <view class="modif-root">
+        <p class="prompt">
+          注意：修改打印机无需验证当定手机号，可进行多次修改，打印机备注字数限制2
+          - 15 个字符
+        </p>
+        <p>
+          你正在修改：<span>{{ printerName }} </span> -- 的打印机
+        </p>
+        <view class="ipt">
+          <span><em>打印机编号：</em></span
+          ><input type="text" disabled :placeholder="printerId" />
+        </view>
+        <view class="ipt">
+          <span><em>打印机KEY：</em></span
+          ><input type="text" disabled :placeholder="deterKey" />
+        </view>
+        <view class="ipt">
+          <span><em>打印机备注：</em></span
+          ><input
+            type="text"
+            cursor-spacing="40"
+            v-model="determineName"
+            placeholder="修改打印机备注"
+          />
+        </view>
+
+        <view class="btn-root">
+          <button @tap="$refs.modify.close()" class="cancel mini-btn">
+            取消
+          </button>
+          <button @tap="determineModif" class="determine mini-btn">确定</button>
+        </view>
+      </view>
+    </uni-popup>
+
+    <uni-popup :mask-click="false" ref="printerText">
+      <view class="printerText">
+        <span class="error"
+          >注意：禁止使用小票打印机打印机违法内容，否则后果自负！</span
+        >
+        <p>备注：{{ printerName }}</p>
+        <p>编号：{{ printerId }}</p>
+        <textarea
+          v-model="text"
+          cursor-spacing="120"
+          maxlength="300"
+          placeholder="京西云打印机测试"
+        />
+        <view class="btn">
+          <span @tap="$refs.printerText.close()">取消</span>
+          <span @tap="play">打印</span>
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import { allMethods } from './methods.js'
+import { allData } from './data.js'
+import zswEmpty from '@/components/zsw-empty/zsw-empty.vue'
+export default {
+  components: {
+    zswEmpty,
+  },
+
+  data() {
+    return {
+      ...allData.data(),
+    }
+  },
+
+  mounted() {
+    let data = { title: '全部', value: 0 }
+    this.setRuler(data, 0)
+  },
+
+  async onPullDownRefresh() {
+    let data = { title: '全部', value: 0 }
+    this.setRuler(data, 0)
+    setTimeout(() => {
+      uni.stopPullDownRefresh()
+    }, 2000)
+  },
+
+  methods: {
+    ...allMethods,
+  },
+}
+</script>
+
+<style lang="scss">
+@import './printerList.scss';
+</style>