dvcp_v2_wxcp_app/src/apps/AppMyGrid/signResult.vue

<template>
  <section class="signResult">
    <div class="successImg"/>
    <b class="mar-t32">今日已完成签到</b>
    <div v-if="result.changeIntegral>0" class="mar-t32 score mar-b112">积分{{ result.changeIntegral }}</div>
    <u-gap v-else class="mar-t32 mar-b112" height="32"/>
    <AiItem label="时间" :border="false">{{ result.createTime }}</AiItem>
    <AiItem label="位置" :border="false">{{ result.address }}</AiItem>
  </section>
</template>

<script>
export default {
  name: "signResult",
  appName: "签到结果",
  data() {
    return {
      result: {}
    }
  },
  methods: {
    getResult() {
      const {id} = this.$route.query
      id && this.$http.post("/app/appwxsigninfo/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.result = res.data
        }
      })
    }
  },
  created() {
    this.getResult()
  }
}
</script>

<style lang="scss" scoped>
.signResult {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px 70px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 32px;

  .successImg {
    background-image: url("./assets/qiandaochenggong.png");
    width: 192px;
    height: 192px;
  }

  & > b {
    font-size: 40px;
  }

  .score {
    color: #3975C6;
    height: 32px;
    padding-left: 48px;
    background-image: url("./assets/score.png");
    background-repeat: no-repeat;
    background-position: left center;
  }

  .mar-b112 {
    margin-bottom: 112px;
  }

  ::v-deep.normal {
    height: 56px;
  }
}
</style>