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

<!--
 * @Author: 张涛
 * @Date: 2023-11-06 14:18:06
 * @LastEditors: 张涛
 * @LastEditTime: 2023-11-10 10:44:00
 * @FilePath: \JiangNingUmale-App\subcontract\work\taskmanage\index.vue
-->
<template>
  <view class="page">
	  <!--   @load="myonload" -->
	<web-view :src="urlParams" @message="addMessage" id="myWebView"></web-view> 
    <!-- <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="view-segmented">
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="button"
        activeColor="#007aff"
        bgColor="#FFFFFF"
        fontColor="#34373B"
        tabHeight="88rpx"
        tabFontsize="32rpx"
        tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.1)"
        tabBorderRadius="16rpx"
        class="segmented-controls"
      ></uni-segmented-control>
    </view>

    <view class="main-content">
      <view v-show="current === 0">
        <view class="view-list">
          <view class="list-item" @click="goPath2">
            <view class="item-header"></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
            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 v-show="current === 1">
        <view class="view-list">
          <view class="list-item" v-for="(item, index) in 5" :key="index">
            <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>
                <text class="title">处理完成时间：</text>
                <text class="content">2023-07-30</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="current === 2">
        <view class="view-list">
          <view class="list-item" v-for="(item, index) in 2" :key="index">
            <view class="item-header"></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> -->

    <!-- <view class="footer">
      <button class="btn-add">任务台账</button>
    </view> -->
  </view>
</template>

<script>
import { getCode } from "@/api/jn/login.js"
export default {
  data() {
    return {
      items: ["待受理", "待审核", "已退回"],
      current: 0,
	  urlParams:"",
    };
  },
  mounted() {
	let token = uni.getStorageSync("token")
	if (token) {
		getCode({"accesstoken":token}).then(res=>{
			console.log(res,'获取code的');
			this.urlParams = `https://t-kd-process-app.jsszkd.com/pages/oauth2/login?code=${res.data.code}&clientId=221224176384&redirect=/pages/tasks/tasksManage`
			console.log(this.urlParams,"urlParams");
		})
	}
	// var myWebView = document.getElementById('myWebView');
	// myWebView.onload = ()=>{
	// 	myWebView.contentWindow.postMessage('onload','*');
	// }
	// window.addEventListener('message', (event)=>{
	// 	// console.log("event",event);
	// 	if(event.data.data.arg.action == "to-home") {
	// 		// console.log("进入判断");
	// 		uni.reLaunch({url:'/pages/index'})
	// 	}
	// });
	
  },
  methods: {
    clickNavRight() {
      this.$tab.navigateTo("/subcontract/work/taskmanage/ledger");
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    goPath() {
      this.$tab.navigateTo("/subcontract/work/taskmanage/info");
    },
    goPath2() {
      this.$tab.navigateTo("/subcontract/work/taskmanage/infoexam");
    },
	toHome(event){
		console.log("监听到事件--------------------->");
		console.log(event.data);
		if(event.data == "to-home") {
			this.$tab.reLaunch('/pages/index')
		}
	},
	addMessage(event){
		console.log(event,"监听到的事件");
		if(event.detail.data[0].action == 'to-home') {
			this.$tab.switchTab("/pages/index");
		}
	},
	myonload(){
		console.log("网页加载完成");
	},
  },
};
</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;
    }
  }

  .view-segmented {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f7f8;
    position: fixed;
    top: calc(var(--status-bar-height) + 44px);
    z-index: 99;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    .segmented-controls {
      width: 688rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      //   font-weight: bold;

      /deep/.segmented-control--button {
        /deep/.segmented-control__item--button {
          /deep/.segmented-control__text {
            color: #34373b;
          }
        }
      }
    }
  }
  .main-content {
    position: relative;
    padding: calc(var(--status-bar-height) + 102px) 0;
    margin-left: 20rpx;
    margin-right: 20rpx;

    .view-list {
      padding-bottom: 20rpx;
      .list-item {
        margin: 0 20rpx 30rpx 20rpx;
        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%;
    //   height: 188rpx;
    background: #ffffff;
    border: 1px solid #dce3ec;
    padding: 18rpx 28rpx 60rpx 28rpx;
    .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;
    }
  }
}
</style>