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

<template>
  <scroll-view scroll-y class="grayBackgroundColor">
    <!-- 按组使用 -->
    <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="bg-white" style="display: flex; padding: 15px 0px 15px 15px">
          <view class="reportLeft">
            <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>

    <view style="position: fixed; right: 0; bottom: 50px">
      <u-image width="67" height="67" src="@/static/images/xunjian/plan-scan.png" shape="circle" @click="scanClick()"></u-image>
    </view>

    <!-- 提示信息弹窗 -->
    <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, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
import { xunJianStores } from "@/store/modules/index";

import { addSite } from "@/api/business/mhxf/xunJian/collect.js";

const xunJianStore = xunJianStores(); //全局变量值Store
const { proxy } = getCurrentInstance();

/**
 * @扫一扫
 * @点击事件
 */
const scanArray = ref([]);
const scanBool = ref(false);
function scanClick() {
  uni.scanCode({
    success: (e) => {
      uni.showToast({
        title: "扫码成功",
        icon: "none",
      });
      uni.navigateTo({
        url: "/pages/business/mhxf/xunJian/collect/components/collectDetail?siteNubmber=" + e.result,
      });
    },
    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]);
});

onReady(() => {});

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

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

<style scoped>
.bg-white {
  background-color: #ffffff;
}

.reportLeft {
  margin-right: 15px;
  display: flex;
}

.reportCenter {
}

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

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