JiangNingUmale-h5/subcontract/work/taskmanage/info.vue

<!--
 * @Author: 张涛
 * @Date: 2023-11-06 14:18:06
 * @LastEditors: 张涛
 * @LastEditTime: 2023-11-08 13:33:18
 * @FilePath: \JiangNingUmale-App\subcontract\work\taskmanage\info.vue
-->
<template>
  <view class="page">
    <u-navbar
      title="任务详情"
      back-icon-color="#FFFFFF"
      title-color="#FFFFFF"
      leftText="返回"
      :autoBack="true"
      :placeholder="true"
    >
      <view class="u-nav-slot" slot="right" @click="clickNavRight">
        <text>申请延期</text>
      </view>
    </u-navbar>
    <view class="main-content">
      <view class="view-list">
        <view class="view-header">
          <text>待受理任务</text>
        </view>
        <view
          class="list-item"
          v-for="(item, index) in 10"
          :key="index"
          @click="goPath"
        >
          <view class="item-header" v-show="false"></view>
          <view class="item-content">
            <view>
              <text class="title">任务编号：</text>
              <text class="content">2023073024251</text>
            </view>
            <view>
              <text class="title">任务标题：</text>
              <text class="content">下水道结冰堵塞</text>
            </view>
            <view>
              <text class="title">任务类型：</text>
              <text class="content">城市安全类</text> </view
            ><view>
              <text class="title">任务地址：</text>
              <text class="content">XXXXXXXXXXXXXXXXXXXX</text>
            </view>
            <view>
              <text class="title">处理期限：</text>
              <text class="content">2023-07-30</text>
            </view>
            <view>
              <text class="title">所属网格：</text>
              <text class="content">网格1</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="btn-back" @click="goPath('back')">回退</button>
      <button class="btn-accept" @click="goPath('accept')">接收</button>
      <button class="btn-add" @click="goPath('add')">处理</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ["待受理", "待审核", "已退回"],
      current: 0,
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    clickNavRight() {
      this.$tab.navigateTo("/subcontract/work/taskmanage/info");
    },
    goPath(e) {
      if (e == "back") {
        this.$tab.navigateTo("/subcontract/work/taskmanage/back");
      } else if (e == "accept") {
        this.$tab.navigateTo("/subcontract/work/taskmanage/exam");
      } else if (e == "add") {
        this.$tab.navigateTo("/subcontract/work/taskmanage/deal");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f6f7f8;
  .u-nav-slot {
    text {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #367bef;
    }
  }

  .main-content {
    position: relative;

    .view-list {
      padding: 30rpx 20rpx 160rpx 20rpx;

      .view-header {
        background: #ffffff;
        box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
        opacity: 1;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 21rpx 0;

        text {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #2e2f31;
        }
      }

      .list-item {
        margin: 30rpx 0 30rpx 0;
        position: relative;
        .item-header {
          width: 177rpx;
          height: 177rpx;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          background-image: url("@/static/images/umale/triangle.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .item-content {
          padding: 11rpx 29rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
          border-radius: 16rpx;
          & > view {
            display: flex;
            align-items: center;
            padding: 10rpx 0;

            font-size: 28rpx;
            font-family: PingFang SC;
            letter-spacing: 2rpx;

            & > .title {
              color: #9da2ab;
            }
            & > .content {
              color: #2e2f31;
            }
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    border: 1rpx solid #dce3ec;
    padding: 18rpx 28rpx 60rpx 28rpx;
    display: flex;

    .btn-back {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #ff4b4b 0%, #fa4d4d 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }

    .btn-accept {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #32b78b 0%, #37d9a3 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }

    .btn-add {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }
  }
}
</style>