ZGZQBWG/game/src/views/RedeemFormForCertification.vue

<template>
  <div class="redeem-form">
    <div class="paper">
      <div class="form-item">
        <h3>您的称呼</h3>
        <input
          v-model="name"
          type="text"
          autofocus
          placeholder="请输入内容，5字以内"
        >
      </div>

      <hr>

      <div class="number-info-item">
        <div class="key">
          您的积分
        </div>
        <div class="value">
          {{ store.state.score }}
        </div>
      </div>
      <div class="number-info-item">
        <div class="key">
          礼品消费
        </div>
        <div class="value red">
          -{{ prizeInfo.score }}
        </div>
      </div>
      <div class="number-info-item">
        <div class="key bold">
          剩余
        </div>
        <div class="value">
          {{ result }}
        </div>
      </div>
    </div>

    <div class="btn-group">
      <button
        class="submit"
        :class="{
          needInfo: !name,
          notEnough: result < 0,
          over: haveSubmitted,
        }"
        @click="submit"
      >
        {{ result >= 0 ? '发起兑换' : '积分不足，无法兑换' }}
      </button>
      <button
        class="return"
        @click="$router.go(-1)"
      >
        返回
      </button>
    </div>

    <transition name="fade-in-out">
      <NotifyComp
        v-show="ifShowNotify"
        text="提交成功，工作人员会与您及时联系"
      />
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { redeem, getScore } from '@/api.js'
import NotifyComp from '@/components/NotifyComp.vue'

const route = useRoute()
const router = useRouter()
const store = useStore()

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(390, 752)

const prizeInfo = JSON.parse(route.query.prizeInfo)

const result = ref(store.state.score - prizeInfo.score)

const name = ref('')
watch(name, (vNew) => {
  if (vNew.length > 5) {
    vNew = vNew.slice(0, 5)
    name.value = vNew
  }
})
const ifShowNotify = ref(false)
const haveSubmitted = ref(false)

function submit() {
  redeem('', name.value, '', prizeInfo.id, prizeInfo.score, prizeInfo.name).then((res) => {
    haveSubmitted.value = true
    getScore().then((res) => {
      store.commit('setScore', res.total)
      store.commit('setIfScoreLimitReached', res.hasOver)
    })
    router.replace({
      name: 'CertificationView'
    })
  })
}
</script>

<style lang="less" scoped>
.redeem-form{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(207, 187, 156, 1);
  >.paper{
    position: absolute;
    width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(582 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    top: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(@/assets/images/redeem-paper.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-left: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-right: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >.form-item{
      margin-bottom: calc(410 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >h3{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        color: #A97C46;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >input{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: rgba(169, 124, 70, 1);
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: 100%;
        border-bottom: 1px dashed #CFBB9C;
        padding-bottom: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        &::placeholder {
          font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: 400;
          color: #B8B8B8;
          line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
    }
    >.form-item.last{
      margin-bottom: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    >hr{
      position: absolute;
      top: calc(468 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: 50%;
      transform: translate(-50%, 0);
      width: calc(306 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: 0;
      border-top: 1px dashed #CFBB9C;
    }
    >.number-info-item{
      margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      justify-content: space-between;
      align-items: center;
      >.key{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #A97C46;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.key.bold{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        color: #A97C46;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.value{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        color: #A97C46;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.value.red{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        color: #FF4040;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
  >.btn-group{
    position: absolute;
    top: calc(620 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    >button.submit{
      width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-color: #FFE6A5;
      border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bold;
      color: #A97C46;
      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    >button.submit.needInfo{
      opacity: 0.5;
      pointer-events: none;
    }
    >button.submit.notEnough{
      opacity: 1;
      color: #7B7B7B;
      background: #CECECE;
      pointer-events: none;
    }
    >button.submit.over{
      pointer-events: none;
    }
    >button.return{
      margin-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border: 1px solid #fff;
      width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bold;
      color: #fff;
      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
}
</style>