OfficeApp/components/task/taskItem.vue

<template>
  <view class="c_task_item" @click="clickTask">
    <view class="personnel_list">
      <view class="cards">
        <view class="cards_head">
          <text style="font-size: 32rpx">任务名称: {{ datas.title }}</text>
          <text>点击查看</text>
        </view>
        <view class="cards_content">
          <view class="right" style="width: 100%">
            <view class="" style="display: flex">
              <view>任务状态 :</view>
              <view class="text" style="color: #ff7c32">
                <text v-if="datas.status == 3" style="color: #488f00"
                  >已完成</text
                >
                <text v-else-if="datas.status == 5" style="color: #ccc"
                  >已关闭</text
                >
                <block
                  v-else-if="
                    datas.type == 31 ||
                    datas.type == 32 ||
                    datas.type == 33 ||
                    datas.type == 34 ||
                    datas.type == 35
                  "
                >
                  <block v-if="datas.extend && datas.extend.informationg">
                    {{
                      (datas.extend.informationg.update
                        ? datas.extend.informationg.update
                        : 0) +
                      "/" +
                      (datas.extend.informationg.count
                        ? datas.extend.informationg.count
                        : 0)
                    }}
                  </block>
                  <block
                    v-else-if="
                      datas.extend &&
                      datas.extend.transaction &&
                      datas.extend.transaction.arr
                    "
                  >
                    {{
                      (datas.extend.transaction.arr.transaction_pool
                        ? datas.extend.transaction.arr.transaction_pool
                        : 0) +
                      "元/" +
                      (datas.extend.transaction.arr.day_money
                        ? datas.extend.transaction.arr.day_money
                        : 0) +
                      "元"
                    }}
                    <!-- <text style="color: #488F00;margin-left: 26rpx;">{{(datas.extend.transaction.arr.transaction_pool?datas.extend.transaction.arr.transaction_pool:1)+'元'}}</text> -->
                  </block>
                  <block v-else-if="datas.extend && datas.extend.update">
                    <text
                      v-if="
                        (datas.extend.update.transfer &&
                          datas.extend.update.transfer.lnglat[0]) ||
                        datas.status == 3
                      "
                      style="color: #488f00"
                      >抵达终点</text
                    >
                    <text
                      v-else-if="
                        datas.extend.update.terminus &&
                        datas.extend.update.terminus.lnglat[0]
                      "
                      >抵达中转点</text
                    >
                    <text v-else>进行中</text>
                  </block>
                  <block v-else>进行中</block>
                </block>
              </view>
            </view>
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <view>
                <text>完成时间 :</text>
                <text>{{ datas.end_time }}</text>
              </view>
              <text
                v-if="datas.status == 2 || datas.status == 1"
                style="background-color: #ff7c32"
                class="status"
                >进行中</text
              >
              <text
                v-if="datas.status == 3"
                style="background-color: #488f00"
                class="status"
                >已完成</text
              >
              <text
                v-if="datas.status == 5"
                style="background-color: #ccc"
                class="status"
                >已关闭</text
              >
            </view>
            <view class="">
              <text>任务金额 :</text>
              <text> {{ datas.money + "元" || "0.00" }} </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 	<view class="top">
			<view class="left">
				<view>任务名称:</view>
				<view class="text">{{datas.title}}</view>
			</view>
			<view class="right">
				<image class="icon" src="../../static/icons/ok_c.png"></image>

			</view>
		</view>
		<view class="bottom">
			<image class="b_left" src="../../static/img/task/task.png"></image>
			<view class="b_right">
				<view class="item">
					<view class="left">
						<view>任务状态:</view>
						<view class="text">
							<text v-if="datas.status==2||datas.status==1" style="color: #ff7c32;">
								<block v-if="(datas.type==31||datas.type==32||datas.type==33)">
									<block v-if="datas.extend&&datas.extend.informationg">
										{{(datas.extend.informationg.update?datas.extend.informationg.update:0)+'/'+(datas.extend.informationg.count?datas.extend.informationg.count:0)}}
									</block>
									<block
										v-else-if="datas.extend&&datas.extend.transaction&&datas.extend.transaction.arr">
										{{(datas.extend.transaction.arr.total_price?datas.extend.transaction.arr.total_price:0)+'元/'+(datas.extend.transaction.arr.day_money?datas.extend.transaction.arr.day_money:0)+'元'}}
									</block>
									<block v-else>进行中</block>
								</block>
								<block v-else>进行中</block>
							</text>
							<text v-if="datas.status==3" style="color: #46be61;">已完成</text>
							<text v-if="datas.status==5">已关闭</text>
						</view>
					</view>
					<view class="right">￥{{datas.money||'0.00'}}<text class="price">元</text></view>
				</view>
				<view class="item">
					<view class="left">
						<view>完成时间:</view>
						<view class="text">{{datas.end_time}}</view>
					</view>
					<view class="right">
						<view>进入任务<uni-icons type="right" color="#0122c7"></uni-icons></view>
					</view>
				</view>
			</view>
		</view>
	 -->
  </view>
</template>

<script>
import {
  Toast
} from '../../libs/uniApi';
export default {
  name: "task",
  props: {
    datas: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {

    };
  },
  created () {
    try {

    } catch (e) {
      //TODO handle the exception
    }
  },
  computed: {
    total_price () {
      return this.datas?.extend?.transaction?.arr?.transaction_pool ? this.datas.extend.transaction.arr.total_price += +this.datas.extend.transaction.arr.transaction_pool : this.datas.extend.transaction.arr.total_price
    }
  },
  methods: {
    navTo (url) {
      if (url) {
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        uni.navigateTo({
          url: url,
          success () {
            uni.hideLoading()
          }
        })
      } else Toast('暂未开放')
    },
    clickTask () {
      // console.log('点击', this.$props.datas);
      // if ((this.$props.datas.type != 31) && this.$props.datas.status !== 2 && this.$props.datas.status !== 1) {
      // 	return this.$props.datas.status == 3 ? Toast('任务已完成!') : Toast('任务已结束!');
      // }
      if (this.$props.datas.type == 31) {
        // this.navTo('/subpkg/fileTask/fileTask?id=' + JSON.stringify(this.$props.datas?.extend?.informationg?.arr))
        if (this.$store.state.app.userInfo.admin_id) this.navTo(`/subpkg/captain/captain?task_id=${this.$props.datas?.id}`);
        else this.navTo(`/subpkg/archives/archives?task_id=${this.$props.datas?.id}`);
      } else if (this.$props.datas.type == 32) {
        // this.navTo('/subpkg/fileTask/fileTask?id=' + JSON.stringify(this.$props.datas?.extend?.informationg?.arr))
        this.navTo(`/subpkg/property/vehicle?task_id=${this.$props.datas?.id}`)
      } else if (this.$props.datas.type == 33) {
        this.navTo(`/subpkg/blockTransaction/blockTransaction?task_id=${this.$props.datas?.id}`)
      } else if (this.$props.datas.type == 34) {
        this.navTo(`/subpkg/otherTask/otherTask?task_id=${this.$props.datas?.id}`)
      } else if (this.$props.datas.type == 35) {
        this.navTo(`/subpkg/buyShare/buyShare?task_id=${this.$props.datas?.id}`)
      }
      else this.navTo('');
    }
  }
}
</script>

<style lang="scss">
.c_task_item {
  margin: 0 auto;
  // margin-bottom: 28rpx;
  width: 694rpx;
  // background: #FFFFFF;
  border-radius: 14rpx 14rpx 14rpx 14rpx;
  opacity: 1;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  line-height: 39rpx;

  .text {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 39rpx;
    margin-left: 18rpx;
  }

  .top {
    display: flex;
    justify-content: space-between;
    padding: 28rpx;
    border-bottom: 1rpx solid #f5f5f5ff;

    .left {
      display: flex;
      justify-content: left;
      align-items: center;
    }

    .right {
      .icon {
        width: 43rpx;
        height: 43rpx;
      }
    }
  }

  .bottom {
    padding: 28rpx;
    display: flex;

    .b_left {
      width: 103.39rpx;
      height: 94.63rpx;
      margin-right: 18rpx;
    }

    .b_right {
      flex: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .item {
        display: flex;
        justify-content: space-between;
        // margin: 18rpx 28rpx 0 28rpx;

        // &:last-child {
        //   padding-bottom: 18rpx;
        // }

        .left {
          display: flex;
        }

        .right {
          font-size: 32rpx;
          font-weight: 400;
          color: #3274f9;
          line-height: 39rpx;

          .price {
            font-size: 25rpx;
          }
        }
      }
    }
  }
}

.personnel_list {
  // padding: 28rpx 0;
  padding-bottom: 28rpx;

  .cards {
    margin: 0 auto;
    // margin-bottom: 28rpx;
    width: 694rpx;
    background: #ffffff;
    border-radius: 30rpx;
    opacity: 1;
    overflow: hidden;
    // box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

    .cards_head {
      padding: 28rpx;
      background-color: $theme-oa-color;
      color: white;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
    }

    .cards_content {
      padding: 28rpx;
      display: flex;
      justify-content: space-between;

      .left {
        text-align: center;
        // padding: 15rpx 25rpx;
        padding-top: 20rpx;

        width: 160rpx;
        background-color: $theme-oa-color;
        color: white;
        border-radius: 40rpx;

        .cir {
          width: 120rpx;
          height: 120rpx;
          background-color: #ffffff;
          margin-left: 25rpx;
          border-radius: 120rpx;
          position: relative;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        view {
          text:nth-child(2) {
            margin-left: 20rpx;
          }

          .status {
            display: inline-block;
            float: right;
            color: white;
            text-align: center;
            padding: 10rpx 30rpx;
            border-radius: 30rpx;
          }
        }
      }
    }

    .u_avatar {
      position: absolute;
      top: 50%;
      left: 50%;

      transform: translate(-50%, -50%);
    }
  }
}
</style>