天府星

src/project/tianfuxing/AppSquare/AppSquare.vue

@@ -1,22 +1,101 @@
 <template>
   <div class="AppSquare">
-    <div class="item" v-for="(item, index) in 10" :key="index">
-      <image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
+    <div class="item" v-for="(item, index) in list" :key="index">
+      <image :src="item.accessUrl" mode="aspectFill" @click="preview(item.accessUrl)" />
       <div class="item-bottom">
         <div class="left">
           <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png" />
-          <span>张三</span>
+          <span>{{ item.userName }}</span>
         </div>
-        <p>2022-11-05 17:45</p>
+        <p>{{ item.createTime }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import { mapActions, mapState } from 'vuex'
+
   export default {
     appName: '文明广场',
     name: 'AppSquare',
+
+    data () {
+      return {
+        current: 1,
+        list: [],
+        isMore: false,
+        isFixed: false,
+        statusBarHeight: 20,
+      }
+    },
+
+    computed: {
+      ...mapState(['user', 'token'])
+    },
+
+    onLoad () {
+      this.getList()
+
+      if (!this.token) {
+        this.autoLogin()
+      } else {
+        this.getUserInfo()
+      }
+    },
+
+    methods: {
+      ...mapActions(['autoLogin', 'getUserInfo']),
+
+      preview (url) {
+        let imgs = this.list.map(v => v.accessUrl)
+
+        uni.previewImage({
+          urls: imgs,
+          current: url
+        })
+      },
+
+      getList () {
+        if (this.isMore) return
+
+        this.$loading()
+        this.$instance.post(`/api/appwechatescalation/list`, null, {
+          params: {
+            current: this.current,
+            size: 10,
+            status: 1,
+            openStatus: 1,
+            listType: 0
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.$hideLoading()
+            if (this.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.current = this.current + 1
+          } else {
+            this.isMore = true
+          }
+        }).catch(() => {
+          this.$hideLoading()
+        })
+      }
+    },
+
+    onReachBottom () {
+      this.getList()
+    }
   }
 </script>