hookehuyr

✨ 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
......