merchant-app/pages/employee/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="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 class="list">
        <view v-for="(item, index) in task.listSign"  :key="index" class="item" @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="weidao" @click="sign(0)">
                         未到
                     </view>
                     <view class="yidao" @click="sign(1)">
                         已到
                     </view>
                 </view>


             </view>
         </uni-popup>



     </view>


 </view>

  
</template>

<script>
	import { getTaskDetails, setSign } from "@/api/employee/task";
	// import { getCodeImg } from '@/api/employee/login'
  export default {
	data() {
		return {
			queryParams: {
				id: null,
			},
            task: {},
            title: "任务名称",
            signInfo: {},
		};
	  },
    onLoad: function(options) {
        this.queryParams.id = options.id;
        this.getInfo();
    },

	 methods:{
		 getInfo() {
			 var that = this;
             getTaskDetails(this.queryParams).then(response => {
                 console.log(response)
				 that.task = response.data;

                 let title = "【"+ that.task.taskName +"】人员详情";
                 uni.setNavigationBarTitle({
                     title: title
                 });
			 });
		 },
         setInfo(item){
             this.$refs.popup.open('center')
             this.signInfo = item;
         },
         sign(status){
             this.signInfo.status = status;
             setSign(this.signInfo);
             this.$refs.popup.close()
         },


	 }
  }
</script>

<style lang='scss'>
    .container-details{
        background-color: #e3e3e3;
    }
    .head{
        margin-top: 10rpx;
        background-color: #ffffff;
        height: 200rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .no-num{
            width: 33%;
            .num{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ff0008;
                font-weight: 650;
                font-size: 40rpx;
            }
            .num-label{
                margin-top: 10rpx;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .bm-num{
            width: 33%;
            .num{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #3a8ee6;
                font-weight: 650;
                font-size: 40rpx;
            }
            .num-label{
                margin-top: 10rpx;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .sign-num{
            width: 33%;
            .num{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #f19b60;
                font-weight: 650;
                font-size: 40rpx;
            }
            .num-label{
                margin-top: 10rpx;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .list{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 创建3个等宽的列 */
        list-style-type: none;
        padding: 0rpx 10rpx 10rpx 10rpx;
        place-items: center;
        .item{
            position: relative;
            width: 230rpx;
            height: 230rpx;
            background-color: #FFFFFF;
            margin: 10rpx 0 0 0;
            display: grid;
            place-items: center;
            padding: 15rpx;
            border-radius: 10rpx;

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

    .uni-popup__wrapper{
        background-color: #ffffff;
        border-radius: 10rpx;
        width: 90%;
    }
    .dialog{
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        .name{
            width: 100%;
            text-align: center;
            font-weight: 950;
            font-size: 58rpx;
        }
        .phone{
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            color: #868686;
        }
        .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: 70rpx;
                width: 50%;
                border-radius: 10rpx;
                color: #54a0f1;
                border: 1px solid #54a0f1;
                text-align: center;
                margin: 0 50rpx 0 50rpx ;
            }
            .yidao{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 70rpx;
                width: 50%;
                color: #ffffff;
                border-radius: 10rpx;
                background-color: #54a0f1;
                margin: 0 50rpx 0 50rpx ;
            }
        }

    }



</style>