✨ feat: 证书背景图调整

@@ -147,8 +147,6 @@ const cancelDonate = () => {
   closeBtn();
 }
 
-// TODO: 微信支付
-
 onMounted(() => {
 
 })

@@ -34,11 +34,23 @@
       </div>
     </div>
     <div class="date">{{ item.donate_date }}</div>
-    <div style="color: #713610; padding: 1rem 2rem; font-size: 0.9rem;">
+    <div style="color: #713610; padding-left: 10%; font-size: 0.9rem; position: relative; bottom: 1rem;">
       证书编号：{{ item.cert_code }}
     </div>
-    <div class="wrapper-border" />
-    <div style="height: 2rem;" />
+    <div style="height: 3rem;" />
+    <div class="wrapper-border">
+      <div class="top-bg">
+        <van-image :src="donate_top" style="width: 100%; height: 10rem;" />
+      </div>
+      <div class="center-bg">
+        <!-- <van-image :src="donate_center" style="width: 100%;" /> -->
+        <img :src="donate_center" :style="style">
+      </div>
+      <div class="bottom-bg">
+        <van-image :src="donate_bottom" style="width: 100%;" />
+      </div>
+      <div style="height: 3rem;" />
+    </div>
   </div>
 </template>
 
@@ -47,6 +59,11 @@
 import icon_cert from '@images/zhengshu@2x.png'
 import icon_stamp01 from '@images/stamp01.png'
 import icon_stamp02 from '@images/stamp02.png'
+import donate_bg_c_2 from '@images/donate_bg_c_2.png'
+import donate_top from '@images/donate_top.png'
+import donate_center from '@images/donate_center.png'
+import donate_bottom from '@images/donate_bottom.png'
+import $ from 'jquery'
 
 </script>
 
@@ -60,11 +77,17 @@ export default {
     return {
       name: '',
       price: '',
-      datetime: ''
+      datetime: '',
+      style: ''
     }
   },
   mounted() {
-
+    // 动态计算背景图高度
+    const wrapper_height = $('.donate-certificate').height()
+    const top_height = $('.top-bg').height()
+    const bottom_height = $('.bottom-bg').height()
+    const height = (wrapper_height - top_height - bottom_height).toFixed();
+    this.style = `width: 100%;height:${height}px;`;
   },
   methods: {
 
@@ -138,12 +161,37 @@ export default {
   }
   .wrapper-border {
     position: absolute;
-    border: 1px dashed #11D2B1;
+    // border: 0.5px solid #11D2B1;
     height: 95%;
     top: 0;
     width: 93%;
     margin: 3%;
-    border-radius: 1rem;
+    // border-radius: 1.5rem;
+    // overflow: hidden;
+    .top-bg {
+      margin: 0;
+        padding: 0;
+        font-size: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+    .center-bg {
+      margin: 0;
+        padding: 0;
+        font-size: 0;
+        position: absolute;
+        top: 10%;
+        width: 100%;
+    }
+    .bottom-bg {
+      margin: 0;
+        padding: 0;
+        font-size: 0;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
   }
 }
 </style>

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 22:09:58
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-09 18:32:49
+ * @LastEditTime: 2022-06-16 15:12:18
  * @FilePath: /tswj/src/components/DonateFlower/index.vue
  * @Description: 捐花组件
 -->
@@ -29,12 +29,13 @@
       <div class="donate-number">
         <van-row v-if="more_donate">
           <van-col span="18" style="text-align: right;">
-            <van-field style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" v-model="donate_number" type="digit"
+            <van-field v-model="donate_number" style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" type="digit"
               input-align="center" label="" placeholder="请输入花花数量" />
           </van-col>
           <van-col span="6" style="line-height: 2.5;">&nbsp;朵花花</van-col>
         </van-row>
-        <div v-else style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" @click="showMoreDonate">更多花花</div>
+        <div v-else style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" @click="more_donate = true">更多花花
+        </div>
       </div>
       <div v-if="userType === USER_TYPE.CHILDREN || userType === USER_TYPE.KINDERGARTEN" class="donate-name">
         <van-row>
@@ -96,7 +97,7 @@
 <script setup>
 import { icon_flower } from '@/utils/generateIcons'
 import MyButton from '@/components/MyButton/index.vue'
-import { ref, onMounted, watch, nextTick } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { $, Toast } from '@/utils/generatePackage'
 import { addDonateAPI } from '@/api/C/donate.js'
@@ -147,8 +148,12 @@ const addDonate = async (params) => {
   const { data } = await addDonateAPI(params);
   if (data.id) {
     closeBtn();
+    // TODO: 微信支付
+    // wechatPay(data.id);
     // 交易成功跳转回调页面
-    // TEMP: 临时传参 donate_id
+    // TEMP: 临时传参 donate_id, 页面到时候给到后端跳转
+    // 回调地址
+    // http://voice.onwall.cn/f/voice/#/client/wechatpayCallback?donate_id=xxx
     $router.push({
       path: '/client/wechatpayCallback',
       query: {
@@ -202,26 +207,12 @@ const cancelDonate = () => {
 }
 
 // TODO: 微信支付
-onMounted(async () => {
-  // 获取 wx 配置文件
-  // const { data } = await wxJsAPI()
-  // const cfg = data
-  // wx.config(cfg);
-  // wx.ready((res) => {
-  // });
-  // wx.error((err) => {
-  //   console.error(err);
-  // });
-});
-// const wxPay = async () => {
-//   const params = { bill_id: bill_id }
-//   const { data } = await wxPayAPI(params)
-// }
+const wechatPay = (id) => {
+  const base = 'http://voice.onwall.cn/WxpayAPI/voice_pay/jsapi_voice.php'
+  location.href = `${base}?i=${id}`
+}
 
 const more_donate = ref(false);
-const showMoreDonate = () => {
-  more_donate.value = true
-}
 // 选择捐赠数量
 const selectDonate = (index) => {
   donate_number.value = index