TALL-MUI-4/pages/submitlist/submitlist.vue

<template>
	<theme class="h-full w-full pt-1">
      <view class="bg-white mx-5 my-2 rounded-md p-3 text-gray-400" v-for="item in listRef">
        <!-- 插件名称和提交时间显示 -->
        <view class="flex justify-between mb-2">
          <view class="text-gray-800">{{item.plugname}}</view>
          <view>{{item.subtime}}</view>
        </view>
        <!-- 提交的链接 -->
        <view class="text-blue-400 mb-2">
         {{item.link}}
        </view>
        <!-- 该插件物的审核人 -->
        <view class="mb-2">审核人</view>
        <view class="flex justify-between my-3" v-for="items in item.reviewer">
            <view>
                <view class="pb-2 text-gray-800">
                  {{items.name}}
                </view>
                <view class="pb-2">
                  {{items.advise}}
                </view>
                <view class="pb-2">
                  {{items.time}}
                </view>
            </view>
            <view class="text-center">
                <view :class="items.state === '已通过' ?  'text-green-500' :  items.state === '已驳回' ?  'text-red-500' : '' ">
                    {{items.state}}
                </view>
                <view v-if="items.state === '已通过'">
                    <u-circle-progress  active-color="#FA8C16" :percent="items.grade" width="90" border-width="7" class="mt-2">
                    		<view class="u-progress-content">
                          <view class="progressDot text-white">{{items.grade}}</view>
                    		</view>
                    </u-circle-progress>
                </view>
            </view>

        </view>
      </view>
  </theme>
</template>

<script setup>
  import{ref} from 'vue'
  import { onLoad } from '@dcloudio/uni-app';
  const listRef = ref([
    {
      plugname:'入职插件V0.8输出',
      subtime:'12/25 13:01',
      link:'https://www.baidu.com/',
      reviewer:[
        {
          name:'冯老师',
          time: '12/25 14:22',
          advise:'加油！',
          state:'已通过',
          grade:80
        },
        {
          name:'宋老师',
          time: '12/28 8:22',
          advise:'不详细！',
          state:'已驳回',
          grade:''
        },
        {
          name:'张老师',
          time: '',
          advise:'',
          state:'待审批',
          grade:''
        },
      ]
    },
  ])

onLoad(options => {
// 根据交付物id获取上传记录
  (async function getHistory(){
    try {
      const param = { deliverId : options.deliverId };
      const data = await uni.$u.api.getDeliverHistory(param)
      // console.log(data.deliverRecordList[32].checkerList)
      console.log(data)
    } catch (error) {
       console.log('error: ', error);
        uni.$ui.showToast('获取交付物历史失败');
    }
  }());
  });






</script>

<style lang="scss">
.progressDot{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  line-height: 50rpx;
  background-color: #FA8C16;
}
</style>