AiSkinMeasurementMp/pages/details/records.vue

<template>
  <view class="records">
    <view class="main">
      <view class="steps">
        <view class="step-content">
          <view class="step-banner" v-if="userInfo">
            <view class="right">
              <u-avatar :src="avatarSrc" size="60"></u-avatar>
            </view>
            <view class="left">
              <view class="date">
                {{ now || '--' }}
              </view>
              <view class="info">
                <view class="tag">{{ calculateAge(userInfo.date) || '--' }}岁</view>
                <view class="tag">{{ userInfo.gender || '--' }}</view>
              </view>
            </view>

          </view>
          <view class="add-user" v-else>
            <u-icon name="plus-people-fill" :color="themeColor" size="40"></u-icon>
            <view class="btn-box">
              <u-button @click="onAddUser()" shape="circle" color="#000" type="info" size="large">
                <text :style="{ color: themeColor, fontSize: '32rpx', fontWeight: 'bold', }">添加用户</text>
              </u-button>
            </view>

          </view>
        </view>
      </view>

      <view class="skin-evaluation-container">
        <view class="list" v-if="evaluations.length > 0">
          <view v-for="(item, index) in evaluations" :key="index" class="evaluation-item" @click="onResult(item)">
            <view class="date-time">
              <view class="left">
                <text>{{ item.date }}</text>
                <text>{{ item.time }}</text>
                <text>{{ item.day }}</text>
              </view>
              <view class="right">
                <text>{{ item.year }}</text>
              </view>
            </view>


            <view class="image-text">
              <u--image :src="item.imageSrc" mode="widthFix"
                :customStyle="{ marginLeft: '20rpx', marginRight: '20rpx' }" shape="circle" width="50px" height="50px"
                @click="onPre"></u--image>
              <view class="right">
                <text class="evaluation-text gray">测肤评价</text>
                <text class="evaluation-text">{{ item.evaluation }}</text>
              </view>

            </view>
          </view>
        </view>
        <view class="no-data" v-else>
          <u-empty mode="history" height="220" width="220" icon="https://telpo-healthy.oss-cn-hangzhou.aliyuncs.com/healthy/diary/202503/ca3b689e7f074ff8bc61a0764710b393.png">
          </u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { src: '' },
        { src: '' },
      ],
      evaluations: [
        /* {
          date: '03月11日',
          time: '12:20',
          day: '星期二',
          year: '2025',
          imageSrc: 'path/to/image1.jpg',
          evaluation: '伤口减小，肉芽无增生，皮肤逐渐变浅'
        },
        {
          date: '03月09日',
          time: '19:07',
          day: '星期日',
          year: '2025',
          imageSrc: 'path/to/image2.jpg',
          evaluation: '伤口减小，肉芽无增生，皮肤逐渐变浅'
        }, */
      ]
    }
  },
  computed: {
    themeColor() {
      return this.$themeColor
    },
    avatarSrc() {
      return this.$store.state.user.userInfo.avatarSrc || require('../../static/tabbar/user_default.png')
    },
    userInfo() {
      return this.$store.state.user.userInfo
    },
    now() {
      return this.$util.formateDate('yyy-mm-dd', new Date())
    }
  },
  onLoad() {
    this.initDat();
  },
  methods: {
    initDat() {
      uni.showLoading({
        title: '数据加载中',
        mask: true,
      })
      setTimeout(() => {
        uni.showToast({ title: '加载成功', icon: 'success' });
        this.evaluations = this.$store.state.user.resultList || []
      }, 1500);

    },
    calculateAge(date) {
      return this.$util.calculateAge(date)
    },
    onAddUser() {
      uni.reLaunch({
				url: '/pages/user/info',
			})
    },
    onResult(item){
      uni.reLaunch({ url: '/pages/details/result' })
    }
  }
}
</script>

<style lang="scss">
.records {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  .main {
    position: relative;
    background: #fff;
    

    .steps {
      padding: 24rpx 32rpx;
      background: $cus-theme-color;

      .step-content {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;

        .step-banner {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .left {
            margin-left: 40rpx;

            .date {
              color: #282828;
              font-weight: bold;
              font-size: 24rpx;
            }

            .info {
              margin-top: 20rpx;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .tag {
                width: 100rpx;
                height: 20rpx;
                padding: 10rpx 0;
                margin-right: 20rpx;
                border-radius: 20rpx;
                background-color: $cus-theme-color;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
              }
            }
          }

          .right {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            text {
              margin-left: 10rpx;
              color: $cus-theme-color
            }
          }
        }

        .add-user {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .btn-box {
            margin-left: 20rpx;
            width: 220rpx;
          }
        }
      }
    }

    .skin-evaluation-container {
      overflow: scroll;
      padding: 20rpx;
      max-height: calc(100vh - 120px);
    }

    .evaluation-item {
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .date-time {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left,
        .right {
          text {
            padding-left: 10rpx;
            font-weight: bold;
            font-size: 24rpx;
          }
        }
      }

      .image-text {
        width: 100%;
        margin: 20rpx 0;
        padding: 40rpx 0;
        display: flex;
        align-items: center;
        border: 2rpx solid $cus-theme-color;
        border-radius: 30rpx;


        .skin-image {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .right {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;

          .evaluation-text {
            font-size: 16px;
            color: #333;
            padding: 10rpx 0;
            font-weight: bold;

            &.gray {
              font-weight: 400;
              color: $uni-text-color-grey;
            }
          }
        }


      }

    }





  }
}
</style>