整合上架版进入标准流程

src/project/saas/AppCountryAlbum/PhotoRank.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="photo-rank">
+    <div class="info-rank">
+      <div class="info-item__title">
+        <h2>成员拍照排名</h2>
+      </div>
+      <div class="info-rank__wrapper">
+        <div class="rank-item" v-for="(item, index) in list" :key="index">
+          <div class="rank-item__left">
+            <image src="./images/rank1.png" v-if="index === 0" />
+            <image src="./images/rank2.png" v-else-if="index === 1" />
+            <image src="./images/rank3.png" v-else-if="index === 2" />
+            <span v-else>{{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}</span>
+            <h2><AiOpenData v-if="item.name" type="userName" :openid="item.name"/></h2>
+          </div>
+          <div class="rank-item__right">
+            <span>已上传</span>
+            <i>{{ item.num }}</i>
+            <span>张</span>
+          </div>
+        </div>
+        <AiEmpty v-if="!list.length"></AiEmpty>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'PhotoRank',
+
+    appName: '拍照排名',
+
+    data () {
+      return {
+        list: []
+      }
+    },
+
+    onLoad (query) {
+      this.getList(query.date)
+    },
+
+    methods: {
+      getList (date) {
+        this.$http.post(`/api/appattendancerecord/alluserphotosort?queryTime=${date}`).then(res => {
+          if (res.code === 0) {
+            this.list = Object.keys(res.data).map(v => {
+              return {
+                name: v,
+                num: res.data[v]
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .photo-rank {
+    padding: 32px 0 40px;
+
+    * {
+      box-sizing: border-box;
+      font-style: normal;
+    }
+
+    .info-rank {
+      margin: 0 32px;
+      padding: 0 32px 32px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
+      border-radius: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .info-item__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 108px;
+
+        h2 {
+          font-weight: 600;
+          font-size: 32px;
+          color: #333;
+        }
+      }
+
+      .info-rank__wrapper {
+        .rank-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #DDDDDD;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          & > div {
+            display: flex;
+            align-items: center;
+          }
+
+          .rank-item__right {
+            font-size: 28px;
+            color: #999999;
+
+            i {
+              color: #2E88FF;
+            }
+          }
+
+          .rank-item__left {
+            image {
+              width: 50px;
+              height: 50px;
+              margin-right: 32px;
+            }
+
+            span {
+              width: 60px;
+              margin-right: 22px;
+              padding-left: 6px;
+              color: #CCCCCC;
+              font-size: 32px;
+              font-weight: 600;
+            }
+
+            h2 {
+              color: #333333;
+              font-size: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>