yixing_zc_wx/pages/subPackages/visits_task/index.vue

<template>
  <div class="area_asset">
    <van-tabs :active="active" @change="onChange">
      <van-tab title="待处理" :name="null"></van-tab>
      <van-tab title="已处理" :name="1"></van-tab>
    </van-tabs>
    <div style="display: flex">
      <div class="searchbox">
        <uni-search-bar
          placeholder="资产名称模糊查找"
          clearButton="none"
          cancelButton="none"
          v-model="search.qymc"
        >
        </uni-search-bar>
      </div>
      <div class="addbutton" @click="goadd">
        <uni-icons type="plusempty" size="30rpx"></uni-icons>新增走访
      </div>
    </div>
    <div class="area_list">
      <div class="status">待走访</div>
      <div class="area_value">资产名称：原金路织带公司（土地）</div>
      <div class="mt22rpx area_value">
        资产类型/面积（㎡）：土地（房屋751.77/土地2430.3
      </div>
      <div class="mt22rpx area_value">坐落位置：湖渎社区</div>
      <div class="mt22rpx area_value">当前状态：闲置</div>
      <div style="display: flex; justify-content: flex-end">
        <button
          style="
            width: 200px;
            background-color: blue;
            height: 48rpx;
            line-height: 48rpx;
          "
          @click="clockIn()"
          type="primary"
        >
          打卡
        </button>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <button
          style="
            width: 200px;
            background-color: blue;
            height: 48rpx;
            line-height: 48rpx;
          "
          @click="reportTask()"
          type="primary"
        >
          走访记录
        </button>
      </div>
    </div>
    <confirm-position ref="confirmposition" />
  </div>
</template>
  
  <script>
import confirmPosition from "./confirm_position.vue";
export default {
  data() {
    return {
      search: {},
    };
  },
  components: {
    confirmPosition,
  },
  methods: {
    clockIn() {
      this.$refs.confirmposition.setVisible();
    },
    reportTask() {
      uni.navigateTo({
        url: "/pages/subPackages/visits_task/report",
      });
    },
    goadd() {
      uni.navigateTo({
        url: "/pages/subPackages/visits_task/add",
      });
    },
  },
};
</script>
  
  <style lang="scss">
.dis_flex {
  display: flex;
}
.area_asset {
  .searchbox {
    display: inline-block;
    background: white;
    width: 80%;
  }
  .addbutton {
    height: 102rpx;
    line-height: 102rpx;
    background: white;
    color: #0000cc;
  }
  .title {
    width: calc(100%-48rpx);
    padding: 48rpx 48rpx 16rpx 48rpx;
    background: white;
    font-size: 22rpx;
    color: #666666;
    .title_name {
      margin-bottom: 20rpx;
    }
    .title_info {
      display: flex;
      justify-content: space-between;
    }
  }
  .area_list {
    width: calc(100%-110rpx);
    padding: 22rpx;
    margin: 22rpx 22rpx;
    background: white;
    .status {
      text-align: right;
    }
  }
  .area_value {
    font-size: 26rpx;
    color: #333333;
  }
  .mt22rpx {
    margin-top: 22rpx;
  }
}
</style>