<template>
  <div class="finishUpload-page">
    <div style="background-color: #F7F7F7; padding-top: 2rem; padding-bottom: 2rem;">
      <van-image round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_success" />
      <p style="font-size: 1.05rem; margin: 0.5rem; font-weight: bold;">提交成功！</p>
      <p style="font-size: 0.9rem; margin-bottom: 0.5rem;">您的作品正在等待老师审核</p>
      <p style="font-size: 0.9rem;">请耐心等待～～</p>
    </div>
    <div style=" padding-top: 2rem; padding-bottom: 2rem; font-size: 0.9rem; color: #713610;">
      <p style=" margin-bottom: 0.5rem;">您是否愿意与偏远山区的小朋友</p>
      <p>共读这么精彩的书籍</p>
    </div>
    <div style="padding: 0 15% 0.5rem 15%;">
      <my-button @on-click="toDonate" type="plain">我要爱心捐书</my-button>
    </div>
    <div style="padding: 0 15% 1rem 15%;">
      <my-button @on-click="goBack" type="primary">返回</my-button>
    </div>
  </div>

  <donate-book :showPopup="showDonate" @on-close="closeDonate"></donate-book>
</template>

<script setup>
import icon_success from '@images/que-sucess@2x.png'

import MyButton from '@/components/MyButton/index.vue'
import DonateBook from '@/components/DonateBook/index.vue'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

// 弹出捐赠弹框模块
const showDonate = ref(false);
const closeDonate = (v) => { // 查看更多回复
  showDonate.value = v;
}
const toDonate = () => {
  showDonate.value = true;
}
const goBack = () => {
  $router.push({
    path: '/client/bookDetail'
  })
}


onMounted(() => {

})
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.finishUpload-page {
  color: #222222;
  text-align: center;
}
</style>