wxservice-web/src/views/isolations/ReceiveCoupon.vue

<template>
  <window-size :show-back-nav="false">
    <div class="icon-wrapper">
      <svg v-if="state==='SUCCESS'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon-success">
        <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path>
      </svg>

      <svg v-if="state==='FAILURE'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon-failure">
        <path d="M511.999488 65.290005C265.29162 65.290005 65.290517 265.291109 65.290517 511.998977c0 246.708891 200.001103 446.709995 446.708971 446.709995S958.70846 758.707868 958.70846 511.998977C958.70846 265.291109 758.707356 65.290005 511.999488 65.290005L511.999488 65.290005zM716.82855 637.854383c6.803963 6.819313 6.803963 17.856693 0 24.676006l-54.298673 54.29765c-6.819313 6.804986-17.85567 6.820336-24.676006 0L511.999488 590.973656 386.144082 716.828039c-6.819313 6.804986-17.871019 6.804986-24.676006 0l-54.29765-54.29765c-6.804986-6.804986-6.804986-17.856693 0-24.676006l125.869732-125.855406L307.170426 386.144594c-6.804986-6.819313-6.804986-17.871019 0-24.676006l54.29765-54.298673c6.820336-6.803963 17.856693-6.803963 24.676006 0l125.855406 125.870756 125.854383-125.870756c6.820336-6.803963 17.856693-6.803963 24.676006 0l54.298673 54.298673c6.803963 6.804986 6.803963 17.856693 0 24.676006L590.973144 511.998977 716.82855 637.854383 716.82855 637.854383zM716.82855 637.854383" fill="#FF696A"></path>
      </svg>

      <div class="result_title">
        <p>{{title}}</p>
      </div>
      <div class="result_subtitle">
        <p>{{response}}</p>
      </div>
    </div>
  </window-size>
</template>

<script setup>
import router from "../../router";
import {receiveSalesmanCoupon} from "../../api/coupon";
import {computed, ref} from "vue";

const key = router.currentRoute.value.params.key

const response = ref('')
const state = ref('WAITING')

const title = computed(() => {
  switch (state.value) {
    case 'SUCCESS':
      return '领取成功'
    case 'FAILURE':
      return '领取失败'
    default:
      return ''
  }
})

receiveSalesmanCoupon(key).then(res => {
  response.value = res
  state.value = 'SUCCESS'
}).catch((err) => {
  response.value = err
  state.value = 'FAILURE'
})
</script>


<style scoped>
.icon-wrapper {
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

.icon-success {
  color: #67c23a;
  width: 128px;
  height: 128px;
}
.icon-failure {
  width: 128px;
  height: 128px;
}

.result_title {
  margin-top: 20px;
}
.result_title > p {
  margin: 0;
  font-size: 20px;
  color: #303133;
  line-height: 1.3;
}
.result_subtitle {
  margin-top: 10px;
}
.result_subtitle > p {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.3;
}
</style>