ufutx.dma.case.h5/src/views/UserListView.vue

<template>

  <div class="tdesign-mobile-demo-block__summary" style="margin-left: 16px; margin-top: 24px">请选择用户标签</div>
    <div class="user-label-line">
        <span :class="`user-label ${search.indexOf(symptom.id) > -1 ? 'user-label-active' :  ''}`" v-for="symptom in labelList" @click="selectOption(symptom.id)">{{ symptom.label }}</span>
    </div>
  <div v-for="user in userList" class="user-line">
    <div class="user-name-line">
        <t-cell :title="`用户名：${user.username}`" class="user-name" note="查看详情" arrow @click="toUserDetail(user.id)"></t-cell>
    </div>

    <div class="user-label-line">
        <span class="user-label user-label-active" v-for="label in user.labelList">{{ label.label }}</span>
    </div>
    <div class="user-pic-line">
        <div class="user-line-block user-before">
            <div class="user-day">
                开始日期：{{ user.before.day }}
            </div>
            <div class="user-pic-block">
                <t-image
                class="user-pic"
                
                fit="fill"
                :src="user.before.picCover"
                ></t-image> 
            </div>
        </div>
        <div class="user-line-block user-after">
            <div class="user-day">
                结束日期：{{ user.after.day }}
            </div>
            <div class="user-pic-block">
                <t-image
                class="user-pic"
                fit="fill"
                :src="user.after.picCover"
                ></t-image> 
            </div>
        </div>
    </div>
  </div>
    <div class="empty-bar"></div>
    <div class="empty-bar"></div>
</template>
<script lang="ts" setup>
import { Icon as TIcon } from 'tdesign-icons-vue-next';
import { ref, onMounted } from 'vue';
import {useRouter} from 'vue-router'
import {labelList, userList} from '../api/example'
const router = useRouter()
const search = ref([])

const selectOption = (id) => {
    let idList = search.value
    if (idList.indexOf(id) > -1 ){
        idList.splice(idList.indexOf(id), 1)
    }else{
        idList.push(id)
    }
    console.log()
    search.value = idList
}
const toUserDetail = (id) => {
    router.push({name: 'user_detail', params:{id}})
}
onMounted(() =>{
    let idList = []
    labelList.forEach(label => {
        idList.push(label.id)
    })
    search.value = idList

})
</script>
<style lang="less">
.card {
  position: relative;
  margin: 16px;
  border-radius: 6px;
//   overflow: hidden;
  box-sizing: border-box;
  border: 1.5px solid var(--bg-color-demo, #fff);
  border-color: var(--td-success-color-4);
}

.card--active {
  border-color: var(--td-brand-color);
}

.card--active::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  border: 14px solid var(--td-success-color-4);
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.card__icon {
  color: var(--td-text-color-anti);
  position: absolute;
  left: 1.5px;
  top: 1.5px;
  z-index: 1;
}

/* 横向布局 */
.horizontal-box {
  width: calc(100% - 32px);
  display: flex;
  align-items: start;
  margin: 16px;
  white-space: nowrap
}

.horizontal-box .card {
  flex: 1;
  margin: 0;
}

.horizontal-box .card + .card {
  margin-left: 12px;
}

.horizontal-box .card::after {
  border-width: 12px;
}

.horizontal-box .card__icon {
  font-size: 12px;
}
.user-line{
    width: calc(100vw - 8px);
    border: 1px solid var(--td-success-color-4);
    margin: 4px;
    border-radius: 8px;
}
.user-pic-line{
    display:flex;
    
    border-top: 1px solid var(--td-success-color-4);
}
.user-line-block{
    width: 50%;
}
.user-pic-block{
    width: 100%;
}
.user-pic{
    padding: 16px;
}
.user-day{
    padding-top: 8px;
    display: flex;
    justify-content: center;
}
.user-label-line{
    margin:16px;
}
.user-label{
    margin: 4px;
    padding: 4px 12px 4px 12px;
    line-height: 36px;
    border-radius: 16px;
    color: #000;
    white-space: nowrap;
    border: 1px solid var(--td-success-color-4);
}
.user-label-active{

    color: #fff;
    background-color: var(--td-success-color-4);
}
.user-name-line{
    border-bottom: 1px solid var(--td-success-color-4);
    // border-radius: 8px;
}
.user-name{
    border-radius: 8px;
}
.t-checkbox--block {
    padding: 4px;
    padding-left: 16px;
}
</style>