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

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <!-- 按组使用 -->
    <uni-swipe-action>
      <uni-swipe-action-item
        class="mb15"
        v-for="(cu, index) in xunJianStore.collectDataList"
        :key="index"
        :right-options="options"
        @click="bindClick($event, index)"
        @change="swipeChange($event, index)"
      >
        <view class="flex bg-white p15 pt0">
          <view class="flex mr15">
            <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="reportCenter">
            <view class="centerSiteName">
              {{ cu.siteName }}
            </view>

            <view style="font-size: 13px; color: #a1a1a1">
              {{ cu.siteTime == "" || cu.siteTime == null ? "无" : cu.siteTime }}
            </view>
          </view>
          <view style="margin: auto"></view>
          <view class="reportRight">
            <view style="margin: auto" v-if="cu.swipeBool == false">
              <view style="padding: 0; font-size: 14px; color: #409eff" @click="handleInsert(cu)"> 提交 </view>
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <oaMovable :themesColor="proxy.$settingStore.themeColor.color">
      <template #content>
        <view class="iconfont ucicon-nfc menu-item-icon" @click="nfcClick()"></view>
        <view class="iconfont ucicon-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>

    <u-empty marginTop="20%" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="xunJianStore.collectDataList.length <= 0"> </u-empty>
  </scroll-view>
</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 { xunJianStores } from "@/store/modules/index";
import { addSite } from "@/api/business/mhxf/xunJian/collect.js";
import oaMovable from "@/components/oa-movable/index.vue"; // 引入组件

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) => {
      uni.showToast({
        title: "扫码成功",
        icon: "none",
      });
      uni.navigateTo({
        url: `/pages/business/mhxf/xunJian/collect/components/collectDetail?siteNubmber=${e.result}&siteType=${1}`,
      });
    },
    fail: (err) => {
      uni.showToast({
        title: "扫码失败",
        icon: "none",
      });
      console.log("扫码失败", err);
    },
    complete: () => {
      console.log("扫码结束");
    },
  });
}

/**
 * @api请求
 * @提交按钮点击事件
 */
const message = ref(null);
const messageList = reactive({
  type: "",
  message: "",
  duration: 0,
  color: "",
});
function handleInsert(e) {
  uni.getLocation({
    type: "wgs84",
    success: function (res) {
      console.log("当前位置的经度：" + res.longitude);
      console.log("当前位置的纬度：" + res.latitude);
      api(res.longitude, res.latitude);
    },
    fail: function (res) {
      uni.showToast({
        title: "请打开手机定位或相关应用权限定位！",
        icon: "none",
      });
    },
  });

  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
    }).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 {
      }
    });
  }
}

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

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/mhxf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {});

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

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

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

onReady(() => {});

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

<style lang="scss">
.is-selected {
  color: #1989fa;
}
</style>

<style scoped>
.reportCenter .centerSiteName {
  font-size: 15px;
  margin-bottom: 5px;
  height: 20px;
  line-height: 20px;
  display: flex;
}

.reportRight {
  display: flex;
  padding: 0 15px;
}
</style>