✨ feat(组件): 新增捐赠功能控件

+<template>
+  <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: popupHeight }">
+    <div class="donate-wrapper">
+      <div class="donate-header">
+        <van-row>
+          <van-col>
+            <div class="donate-book">
+              <van-image width="80" height="80" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
+            </div>
+          </van-col>
+          <van-col>
+            <div class="donate-detail">
+              <p class="text">逃家小兔绘本</p>
+              <p class="price">¥59</p>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="donate-name">
+        <van-row>
+          <van-col span="4" style="line-height: 2;">捐赠人<span style="color: red;">*</span></van-col>
+          <van-col class="donate-input" span="18">
+            <input v-model="donate_name" type="text" style="border: 0; padding: 0.25rem;" />
+          </van-col>
+        </van-row>
+      </div>
+      <div class="van-hairline--bottom donate-tips">
+        <p style="color: #999999;">
+          <van-icon name="warning-o" />&nbsp;&nbsp;您捐献的书籍将用于多民族语言发展项目
+        </p>
+      </div>
+      <div class="donate-number">
+        <van-row>
+          <van-col span="12"> 数量 </van-col>
+          <van-col span="12" style="text-align: right;">
+            <van-stepper v-model="donate_number" min="1" max="100" integer input-width="40px" button-size="32px" />
+          </van-col>
+        </van-row>
+      </div>
+      <div class="donate-handle">
+        <div class="donate-cancel">
+          <my-button @on-click="cancelDonate" type="plain">取消</my-button>
+        </div>
+        <div class="donate-imd">
+          <my-button @on-click="donateBook" type="primary">立即捐赠</my-button>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import MyButton from '@/components/MyButton/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();
+
+onMounted(() => {
+
+})
+</script>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  props: ['showPopup'],
+  mixins: [mixin.init],
+  data() {
+    return {
+      popupHeight: '60%',
+      show: false,
+      donate_number: 1,
+      donate_name: ''
+    }
+  },
+  mounted() {
+  },
+  watch: {
+    showPopup(value, pre) {
+      if (value) {
+        this.show = value;
+        // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
+        this.$nextTick(() => {
+          let height = $('.donate-wrapper').height();
+          this.popupHeight = height + 10 + 'px';
+        })
+      }
+    }
+  },
+  methods: {
+    closeBtn() {
+      this.$emit('on-close', false)
+      this.show = false;
+    },
+    cancelDonate() { 
+      this.closeBtn();
+    },
+    donateBook() {
+      console.warn(this.donate_name); 
+      console.warn(this.donate_number); 
+      this.closeBtn();
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.donate-wrapper {
+  .donate-header {
+    padding: 1rem;
+    .donate-book {
+      border: 1px solid #ECECEC; 
+      border-radius: 5px; 
+      padding: 0.1rem;
+      .donate-detail {
+        font-size: 1.25rem; 
+        padding: 1rem;
+        .text {
+          color: #292929; 
+          font-weight: bold;
+        }
+        .price {
+          color: #EE332E;
+        }
+      }
+    }
+  }
+  .donate-name {
+    padding: 1rem;
+    .donate-input {
+      border: 1px solid #B9B9B9; 
+      border-radius: 5px; 
+      padding: 0.2rem; 
+      margin-left: 1rem;
+    }
+  }
+  .donate-tips {
+    padding: 1rem; 
+    padding-top: 0;
+  }
+  .donate-number {
+    padding: 1rem;
+  }
+  .donate-handle {
+    overflow: auto;
+    .donate-cancel {
+      width: 49%; 
+      float: left;
+    }
+    .donate-imd {
+      width: 50%; 
+      float: left;
+    }
+  }
+}
+.button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding: 0 0.5rem;
+}
+</style>
\ No newline at end of file