积分规则显示完成

src/apps/AppCreditPoints/AppGridIntegral.vue

@@ -19,8 +19,12 @@
         </div>
       </div>
     </div>
-    <div class="detail-content" v-if="list.length">
+    <div class="detail-content" v-if="!list.length">
-      <div class="title">积分明细</div>
+      <div flex>
+        <div class="title fill">积分明细</div>
+        <u-icon name="question-circle" label="积分规则" color="#3F8DF5" label-color="#3F8DF5" @click="gotoRules"/>
+      </div>
+      <u-gap/>
       <div class="item" v-for="(item, index) in list" :key="index">
         <div class="item-info">
           <p v-text="item.eventDesc"/>
@@ -69,6 +73,9 @@ export default {
         })
       }
     },
+    gotoRules() {
+      uni.navigateTo({url: './integralRules'})
+    }
   },
   onReachBottom() {
     this.current++
@@ -79,6 +86,7 @@ export default {
 <style scoped lang="scss">
 .AppGridIntegral {
   width: 100vw;
+  min-height: 100vh;
   background-color: #f3f6f9;
   display: flex;
   flex-direction: column;
@@ -168,7 +176,6 @@ export default {
       font-weight: 500;
       color: #333;
       line-height: 48px;
-      margin-bottom: 30px;
     }
 
     .item {

src/apps/AppCreditPoints/integralRules.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="integralRules">
+    <div v-for="(e,i) in list" :key="i" flex class="item">
+      <div class="fill label" v-text="e[0]"/>
+      <div class="fill" v-text="e[1]"/>
+    </div>
+    <AiEmpty v-if="!list.length"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "integralRules",
+  appName: "积分规则",
+  data() {
+    return {
+      list: [],
+    }
+  },
+  methods: {
+    getList() {
+      this.$http.post("/app/appintegralrule/girdMemberRuleInfo").then(res => {
+        if (res?.data) {
+          this.list = [res.data].flat().filter(Boolean).map(e => e.split("："))
+        }
+      })
+    }
+  },
+  created() {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.integralRules {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-size: 36px;
+  line-height: 60px;
+  padding-top: 60px;
+  white-space: nowrap;
+  .item{
+    width: 100%;
+  }
+
+  .label {
+    text-align: right;
+
+    &:after {
+      content: "：";
+      flex-shrink: 0;
+    }
+  }
+}
+</style>