BJYSYBZ/WEB-VIEW/src/webview.vue

<template>
  <div class="webview">
    <WebViewMap class="mapBox" @mapClick="mapClickHandle" />
    <SlideCard>
      <div class="titleBox">
        <div class="search">
          <input
            v-model="dkbhModel"
            placeholder-class="address"
            class="input"
            type="text"
            placeholder="请输入地块编号"
          />
        </div>
        <div class="searchBtn" @click="queryClick()">
          <img class="icon" src="./assets/images/webview/search.png" />
        </div>
      </div>
      <div class="overs">
        <div
          @click="cardBoxClick(item, index)"
          v-for="(item, index) in listData"
          :key="index"
          :class="{'cardBox': true, 'active': currentIndex === index}"
        >
          <div class="cardBoxTitle">
            <div class="titleOne">
              <div class="x1">{{ index + 1 }}</div>
              <div class="x2">{{ item.dkbh }}</div>
            </div>
            <div class="citys">
              <img class="icon" src="./assets/images/webview/citys.png" />
              <div class="x1">{{ item.dkwz }}</div>
            </div>
          </div>
          <div class="cardBoxContent">
            <div class="x1">管地单位：{{ item.gddw }}</div>
            <div class="x1">地块面积：{{ item.mj }} 亩</div>
            <div class="x1">上次巡查时间：{{ item.xcsj }}</div>
          </div>
          <div class="cardBoxBtns">
            <div class="btn btn1" @click="toDetailHandle(item)">
              <img class="icon" src="./assets/images/webview/xcxq.png" />
              <div class="x1">详情</div>
            </div>
            <div class="btn btn2" @click.stop="toDetailHandle1(item)">
              <img class="icon" src="./assets/images/webview/xuncha.png" />
              <div class="x1">巡查</div>
            </div>
          </div>
        </div>
      </div>
    </SlideCard>
  </div>
</template>

<script>
import WebViewMap from './webViewMap';
import wx from 'weixin-js-sdk';
import SlideCard from './SlideCard';
export default {
  name: 'Login',
  components: { WebViewMap, SlideCard },
  data() {
    return {
      citys: {},
      userInfo: {},
      dkbhModel: '',
      scale: 12,
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      latitude: 30.131,
      longitude: 120.19308,
      covers: [],
      count: 0,
      listData: [{}, {}, {}],
      scrollTop: 0,
      pageNo: 1, //当前页
      pageSize: 10, //每页显示多少条
      isRequest: true, //是否请求 是 true，否 false
      detailData: {},
      mapObj: null,
      currentIndex: -1
    };
  },
  mounted() {},
  created() {
    console.log(this.$vm);
    let that = this;
    setInterval(() => {
      that.citys = JSON.parse(that.$route.query.city);
      that.$vm.$emit('addPoint', that.citys);
    }, 3000);
    this.userInfo = JSON.parse(this.$route.query.objs);
    this.queryWarningPage();
  },

  methods: {
    mapClickHandle (payload) {
      this.toDetailInfo(payload['dksyh'])
    },
    toDetailInfo (dksyh) {
      const urlApi = `/app/xc/getXcryDkDetailByDksyh`;
      let params = {
        dksyh: dksyh
      };
      this.$ajax.get(urlApi, params, this, false).then((result) => { 
        if (result.data) {
          console.log(result.data)
          this.toDetailHandle(result.data);
        }
      });
    },
    toDetailHandle (item) {
      wx.miniProgram.navigateTo({
        url: `/pages/receivedDetail/index?obj=${JSON.stringify(item)}`,
      });
    },
    toDetailHandle1(item) {
      wx.miniProgram.navigateTo({
        url: `/pages/nocheckDetail/index?obj=${JSON.stringify(item)}`,
      });
    },
    abc() {
      wx.miniProgram.postMessage({
        data: {
          title: '我是从uni-app H5 传递过来的 message',
          desc: '传递的消息信息，必须写在 data 对象中',
        },
      });
      // uni.webView.navigateBack();
    },
    cardBoxClick(item, index) {
      let dksyh = item.dksyh;
      this.currentIndex = index;
      this.$vm.$emit('location-feature-where', {
        layerId: 'bj-dkgl',
        where: `dksyh = '${dksyh}'`,
        setting: { outFields: 'dksyh,dkbh,dkwz,gddw,dkmj' },
        isFit: true,
      });
    },
    queryClick() {
      this.queryWarningPage();
    },
    queryWarningPage() {
      let urlApi = `/app/xc/getXcryDkList`;
      let params = {
        dkbh: this.dkbhModel ? this.dkbhModel.toUpperCase() : '',
        xcryId: this.userInfo.id,
      };
      this.$ajax.get(urlApi, params, this, false).then((result) => {
        if (result.data) {
          this.listData = result.data;
          this.listData.forEach((item) => {
            if (item.lxdh.indexOf('\n') > -1) {
              item.lxdh = item.lxdh.replace('\n', '');
            }
            for (let key in item) {
              if (item[key] == null) {
                item[key] = '';
              }
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.webview {
  width: 100%;
  height: 100%;
  .mapBox {
  }
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
    height: 32px;
    border: 1px solid #e7eaef;
    background-color: #f9f9f9;
    border-radius: 4px;

    .search {
      width: calc(100% - 35px);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .input {
        width: 100%;
        height: 100%;
        padding-left: 10px;
        border: 0;
        outline: none; /*清除input点击之后的黑色边框*/
        font-size: 14px;
        background-color: transparent;
      }

      .address {
        color: #a6aab2;
      }
    }

    .searchBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 32px;
      background-color: #3991fe;
      border-radius: 4px;

      .icon {
        width: 16px;
        height: 16px;
      }
    }
  }

  .cardBox {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 3px 11px 0px #ebf1f9;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #eff2f8;
    margin-bottom: 10px;
    &.active {
      background-color: #e1edfc;
    }
    .cardBoxTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .titleOne {
        display: flex;
        align-items: center;

        .x1 {
          width: 20px;
          height: 20px;
          background: linear-gradient(180deg, #67abff 0%, #246ddc 100%);
          border-radius: 4px 4px 4px 4px;
          color: #fff;
          line-height: 20px;
          text-align: center;
          margin-right: 10px;
          font-size: 14px;
        }

        .x2 {
          color: #2c3649;
          font-size: 20px;
          font-weight: 600;
        }
      }

      .citys {
        display: flex;
        align-items: center;

        .icon {
          width: 15px;
          height: 15px;
          margin-right: 4px;
        }

        .x1 {
          color: #2c3649;
          font-size: 14px;
        }
      }
    }

    .cardBoxContent {
      width: 100%;
      margin: 10px 0;

      .x1 {
        width: 100%;
        color: #2c3649;
        font-size: 14px;
        margin: 4px;
      }
    }

    .cardBoxBtns {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        width: calc(50% - 20px);
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;

        .icon {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }

        .x1 {
          color: #2c3649;
          font-size: 14px;
        }
      }

      .btn1 {
        background-color: #e1f6ef;
      }

      .btn2 {
        background-color: #cee1f9;
      }
    }
  }
}
.overs {
  width: 100%;
  height: calc(50vh - 70px);
  overflow-y: auto;
}
</style>