jxc4-bluetooth-printer/src/subPackages/home-sub/printerList/printerList.vue

<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>