merchant-app/pages/taskDetails.vue

<template>
  
  <!-- pages/index/index.wxml -->
<view class="container-details">

     <view class="head">
         <view class="bm-num">
             <view class="num">
                 {{task.baomingNum}}
             </view>
             <view class="num-label">
                 报名人数
             </view>
         </view>

         <view class="right">
             <view class="sign-num">
                 <view class="num">
                     {{task.signNum}}
                 </view>
                 <view class="num-label">
                     已到人数
                 </view>
             </view>
             <view class="no-num">
                 <view class="num">
                     {{task.baomingNum - task.signNum}}
                 </view>
                 <view class="num-label">
                     未到人数
                 </view>
             </view>
         </view>

     </view>
    <view class="search-container">
        <view class="search">
<!--            <uni-icons class="icon" type="search" size="30" @click="search"></uni-icons>-->

            <img class="icon" src="/static/images/sign/fdj.png"/>

            <input class="search-input" id="search-input"  v-model="searchVal"  type="text" placeholder="请输入姓名查询" maxlength="30"  @confirm="search"/>
        </view>
    </view>
    <view class="list">
        <view v-for="(item, index) in showSign"  :key="index" class="item" :class="item.status == 1 ? 'item-check' : 'item-noCheck'" @click="setInfo(item)">

<!--            <view class="status">-->
<!--                <uni-icons v-if="item.status == 1" class="icon" color="#11dc03" type="checkbox-filled" size="20" @click="search"></uni-icons>-->
<!--                <uni-icons v-if="item.status == 0" class="icon" color="red" type="clear" size="20" @click="search"></uni-icons>-->
<!--            </view>-->
            <view class="headImg">
                {{item.employeeName}}
            </view>
            <view class="phone">
                {{item.phone}}
            </view>
            <view class="remark">
                {{item.remark == null ? "备注说明文案" : item.remark}}
            </view>
        </view>

    </view>

     <view>
         <!-- 普通弹窗 -->
         <uni-popup ref="popup"  background-color="#fff">
             <view class="popup-content dialog" :class="{'popup-height': type === 'left' || type === 'right' }">
                 <view class="name">
                     {{signInfo.employeeName}}
                 </view>
                 <view class="phone">
                     {{signInfo.phone}}
                 </view>
                 <view class="remark">
                 <textarea placeholder="请输入备注说明"  v-model="signInfo.remark" >

                 </textarea>
                 </view>
                 <view class="bottom">
                     <view class="yidao" @click="sign(1)">
<!--                         已到-->
                     </view>
                     <view class="weidao" @click="sign(0)">
                         <!--                         未到-->
                     </view>
                 </view>
             </view>
         </uni-popup>
     </view>
 </view>

  
</template>

<script>
	import { getTaskDetails, setSign } from "@/api/task";
	// import { getCodeImg } from '@/api/login'
  export default {
	data() {
		return {
			queryParams: {
				id: null,
			},
            task: {},
            title: "任务名称",
            signInfo: {},
            searchVal: "",
            showSign: [],
		};
	  },
    onLoad: function(options) {
        this.queryParams.id = options.id;
        this.getInfo();
    },
    onUnload: function() {
      // console.log('关闭页面');
      var pages = getCurrentPages();
      // console.log(pages.length);
      var Page = pages[pages.length-1];//当前页
      // console.log(pages[pages.length-1].route);//输出当前路由
      var prevPage = pages[pages.length-2];
      // console.log(pages[pages.length-2].route);//输出上一个页面的路由
      if(pages[pages.length-2].route == 'pages/index'){  //确定要返回到相应页面，在触发
          prevPage.$vm.reload()
      }
    },
	 methods:{
		 getInfo() {
			 var that = this;
             getTaskDetails(this.queryParams).then(response => {
                 console.log(response)
				 that.task = response.data;
                 that.showSign= that.task.listSign;
                 let title = "【"+ that.task.taskName +"】人员详情";
                 uni.setNavigationBarTitle({
                     title: title
                 });
			 });
		 },
         setInfo(item){
             this.$refs.popup.open('center')
             this.signInfo = item;
         },
         sign(status){
		    let change = this.signInfo.status != status;
            this.signInfo.status = status;
             setSign(this.signInfo);
             if (change){
                 if (status == 1){
                     this.task.signNum ++;
                 }else{
                     this.task.signNum --;
                 }
             }
             this.$refs.popup.close()
         },
         search(){
             this.showSign = [];
             for (let i = 0; i < this.task.listSign.length; i++) {
                 if (this.task.listSign[i].employeeName.indexOf(this.searchVal) > -1){
                     this.showSign.push(this.task.listSign[i]);
                 }
             }

         },


	 }
  }
</script>

<style lang='scss'>
    html, body {
        background-color: #ffffff;
        height: 100%;
    }
    .container-details{
        /*background-color: #e3e3e3;*/

        background-image:url('data:image/png;base64,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

        /*background-image: url('/static/images/sign/bg.png');*/

        /*height: 1100rpx;*/
        min-height: 100%;
        background-size: 100% 100%;
        /*background-size: 100%;*/
        background-repeat: no-repeat;
        background-position: center;
        z-index: 1000;
        padding: 30rpx 30rpx 0 30rpx;
    }
    .head{
        height: 300rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .bm-num{
            background-image: url('/static/images/sign/bmNum.png');
            background-size: 100% 100%;
            /*width: 40%;*/
            height: 300rpx;
            width: 300rpx;
            padding: 40rpx 0 0 40rpx;

            .num{
                width: 100%;
                color: #ffffff;
                font-weight: 650;
                font-size: 60rpx;
            }
            .num-label{
                color: #ffffff;
                margin-top: 10rpx;
                width: 100%;

            }
        }

        .right{
            /*width: 60%;*/
            margin-left:auto ;
            .sign-num{
                width: 370rpx;
                height: 145rpx;
                background-image: url('/static/images/sign/ydrs.png');
                background-size: 100% 100%;
                padding: 12rpx 0 0 12rpx;
                .num{
                    width: 100%;
                    color: #ffffff;
                    font-weight: 650;
                    font-size: 40rpx;
                }
                .num-label{
                    color: #ffffff;
                    width: 100%;
                }
            }
            .no-num{
                margin-top: 2rpx;
                width: 370rpx;
                height: 145rpx;
                background-image: url('/static/images/sign/wdrs.png');
                background-size: 100% 100%;
                padding: 12rpx 0 0 12rpx;
                .num{
                    width: 100%;
                    color: #ffffff;
                    font-weight: 650;
                    font-size: 40rpx;
                }
                .num-label{
                    color: #ffffff;
                    width: 100%;
                }
            }


        }

    }
    .search-container{
        margin-top: 10rpx;
        margin-bo: 10rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .search{
            width: 100%;
            height: 80rpx;
            border-radius: 450px;
            border: 1px solid #6c6c6c;
            display: flex;
            align-items: center;
            /*justify-content: center;*/
            .icon{
                margin-left: 20rpx;
                width: 50rpx;
                height: 50rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .search-input{
                width: 82%;
                margin-left: 16rpx;
            }

        }
    }
    .list{
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 创建3个等宽的列 */
        list-style-type: none;
        /*padding: 0rpx 10rpx 10rpx 10rpx;*/
        margin-top: 30rpx;
        place-items: center;
        .item-check{
            background-size: 100% 100%;
            background-image: url("/static/images/sign/sign.png");
        }
        .item-noCheck{
            background-size: 100% 100%;
            background-image: url("/static/images/sign/noSign1.png");
        }
        .item{
            position: relative;
            width: 160rpx;
            height: 160rpx;
            margin: 0rpx 0 13rpx 0 ;
            display: grid;
            place-items: center;
            padding: 25rpx 10rpx 25rpx 10rpx;
            border-radius: 10rpx;

            .status{
                position: absolute;
                top: 0rpx;
                right: 0rpx;
            }
            .headImg{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100rpx;
                height: 50rpx;
                font-weight: 650;
                font-size: 28rpx;
            }
            .phone{
                color: #5e5e5e;
                font-size: 20rpx;
            }
            .remark{
                color: #adadad;
                background-color: #e3e3e3;
                width: 90%;
                display: grid;
                text-align: center;
                place-items: center;
                font-size: 20rpx;
                height: 30rpx;
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden; /* 隐藏超出div的内容 */
                text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
            }
        }
    }


    .uni-popup__wrapper{
        background-color: #ffffff;
        border-radius: 20rpx;
        width: 90%;
        padding: 20rpx;
    }

    .dialog{
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        .name{
            width: 100%;
            text-align: center;
            font-weight: 350;
            font-size: 58rpx;
        }
        .phone{
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            color: #3e3e3e;
        }
        .remark{
            margin-top: 10rpx;
            width: 92%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ececec;
            padding: 20rpx;
            textarea{
                width: 100%;
                height: 200rpx;
            }
        }
        .bottom{
            width: 100%;
            height: 150rpx;
            display: flex;
            align-items: center;
            .weidao{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 90rpx;
                width: 50%;
                text-align: center;
                margin: 0 50rpx 0 50rpx ;
                background-image: url("/static/images/sign/noSignBtn.png");
                background-size: 100% 100%;
            }
            .yidao{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 90rpx;
                width: 50%;
                margin: 0 50rpx 0 50rpx ;
                background-image: url("/static/images/sign/signBtn.png");
                background-size: 100% 100%;

            }
        }

    }



</style>