usky-web-mobile/src/pages/business/zhaf/xunJian/collect/index.vue

<template>
  <u-navbar leftIconColor="#fff" :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color" @leftClick="handleToBack()">
    <template #center>
      <view class="u-navbar__content__center__item"> 点位采集 </view>
    </template>
    <template #right>
      <view class="u-navbar__content__right__item font12">
        <span @click="handleIconClick('采集记录')">采集记录</span>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="scroll-height"
    :total="xunJianStore.collectDataList.length"
    :isSticky="false"
    :refresherEnabled="true"
    :refresherEnabledTitle="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <!-- 按组使用 -->
      <uni-swipe-action>
        <uni-swipe-action-item
          v-for="(cu, index) in xunJianStore.collectDataList"
          :key="index"
          :right-options="options"
          @click="bindClick($event, index)"
          @change="swipeChange($event, index)"
          style="margin-bottom: 15px"
        >
          <view class="collect-area bg-white">
            <view class="collect-area_left">
              <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="cu.siteType == 1" shape="circle"></u-image>

              <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/NFC.png" v-if="cu.siteType == 2" shape="circle"></u-image>
            </view>
            <view class="collect-area_center">
              <view class="collect-area_center_title">
                {{ cu.siteName }}
              </view>

              <view class="collect-area_center_time">
                {{ cu.siteTime }}
              </view>
            </view>
            <view style="margin: auto"></view>
            <view class="collect-area_right">
              <view v-if="cu.swipeBool == false" class="collect-area_right_item" @click="handleInsert(cu)"> 提交 </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <oaMovable :themesColor="proxy.$settingStore.themeColor.color">
        <template #content>
          <view class="iconfont oaIcon-nfc menu-item-icon" @click="nfcClick()"></view>
          <view class="iconfont oaIcon-saoyisao menu-item-icon" @click="scanClick()"></view>
        </template>
      </oaMovable>

      <!-- 提示信息弹窗 -->
      <uni-popup ref="message" type="message">
        <uni-popup-message
          :style="{
            color: messageList.color,
          }"
          :type="messageList.type"
          :message="messageList.message"
          :duration="messageList.duration"
        ></uni-popup-message>
      </uni-popup>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onUnload, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { addSite } from "@/api/business/zhaf/xunJian/collect.js";
/*----------------------------------组件引入-----------------------------------*/
import oaMovable from "@/components/oa-movable/index.vue"; // 引入组件
/*----------------------------------store引入-----------------------------------*/
import { xunJianStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const xunJianStore = xunJianStores(); //全局变量值Store
/*----------------------------------变量声明-----------------------------------*/

/**
 * @NFC
 */
function nfcClick() {
  proxy.$nfc.initNFC();
}

/**
 * @扫一扫
 * @点击事件
 */
const scanArray = ref([]);
const scanBool = ref(false);
function scanClick() {
  uni.scanCode({
    autoZoom: false,
    success: (e) => {
      proxy.$modal.msg("扫码成功");
      proxy.$tab.navigateTo(`/pages/business/zhaf/xunJian/collect/components/collectDetail?siteNubmber=${e.result}&siteType=${1}`);
    },
    fail: (err) => {
      proxy.$modal.msg("扫码失败");
    },
    complete: () => {
      console.log("扫码结束");
    },
  });
}

/**
 * @api请求
 * @提交按钮点击事件
 */
const message = ref(null);
const messageList = reactive({
  type: "",
  message: "",
  duration: 0,
  color: "",
});
function handleInsert(e) {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  uni.getLocation({
    type: "gcj02",
    geocode: true,
    highAccuracyExpireTime: 5000,
    success: function (res) {
      api(res.longitude, res.latitude);
    },
    fail: function (res) {
      proxy.$modal.msg("请打开手机定位或相关应用权限定位！");
    },
  });

  function api(longitude, latitude) {
    addSite({
      siteName: e.siteName, //地点名称
      siteNubmber: e.siteNubmber, //地点号码
      siteDescribe: e.siteDescribe, //地点描述
      siteType: e.siteType, //地点类型（1二维码，2NFC）
      longitude: longitude, //经度
      latitude: latitude, //纬度
      pictureUrl: "", //图片地址
      distanceRange: 10, //误差范围
      // areaId: 0, //区域id
      // companyId: 0, //单位ID
      collectTime: e.siteTime ? e.siteTime.replace(" ", "T") : e.siteTime,
    })
      .then((res) => {
        if (res.status == "SUCCESS") {
          messageList.type = "SUCCESS";
          messageList.message = "提交成功";
          messageList.duration = 2000;
          messageList.color = "#09bb07";
          message.value.open();

          xunJianStore.collectDataList.splice(xunJianStore.collectDataList.indexOf(e), 1);
        } else {
        }
      })
      .catch((err) => {
        proxy.$modal.msg(err);
      });
  }
}

const options = ref([
  {
    text: "删除",
    style: {
      backgroundColor: "#dd524d",
    },
  },
]);

/**
 * @左滑删除点击事件
 */
function bindClick(e, index) {
  xunJianStore.collectDataList.splice(index, 1);
}

/**
 * @左滑删除change事件
 */
function swipeChange(e, index) {
  if (e == "right") {
    xunJianStore.collectDataList[index].swipeBool = true;
  } else {
    xunJianStore.collectDataList[index].swipeBool = false;
  }
}

//右侧按钮点击事件
function handleIconClick(type) {
  if (type === "采集记录") {
    proxy.$tab.navigateTo("/pages/business/zhaf/xunJian/collect/components/collectRecord");
  }
}

//返回
function handleToBack() {
  proxy.$tab.navigateBack(1); //返回到需要执行方法的页面
}

onLoad((options) => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);

  uni.$on("NFC_readID", function (value) {
    setTimeout(() => {
      proxy.$tab.navigateTo(`/pages/business/zhaf/xunJian/collect/components/collectDetail?siteNubmber=${value}&siteType=${2}`);
      uni.$off("NFC_readID"); //将值删除监听器
    }, 0);
  });
});

onUnload(() => {
  uni.$off("NFC_readID"); //将值删除监听器
});

onReady(() => {});
</script>

<style lang="scss" scoped>
.collect-area {
  display: flex;
  padding: 15px;

  &_left {
    display: flex;
    margin-right: 15px;
  }

  &_center {
    &_title {
      display: flex;
      font-size: 15px;
      margin-bottom: 5px;
      height: 20px;
      line-height: 20px;
    }

    &_time {
      font-size: 13px;
      color: #a1a1a1;
    }
  }

  &_right {
    display: flex;
    padding: 0 15px;

    &_item {
      margin: auto;
      padding: 0;
      font-size: 14px;
      color: #409eff;
    }
  }
}
</style>