hookehuyr

✨ feat(客户端): 新增微信支付成功页,新增捐赠证书页面

......@@ -104,6 +104,11 @@ export default {
console.warn(this.donate_name);
console.warn(this.donate_number);
this.closeBtn();
// 交易成功跳转回调页面
this.$router.push({
path: '/client/wechatpayCallback'
})
},
}
}
......@@ -117,16 +122,16 @@ export default {
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-detail {
font-size: 1.25rem;
padding: 1rem;
.text {
color: #292929;
font-weight: bold;
}
.price {
color: #EE332E;
}
}
}
......
<template>
<div class="donate-certificate">
<div class="header-bg">
<van-image width="100" height="100" fit="contain" :src="icon_cert" style="margin-top: 15vh;" />
</div>
<div class="title">
<van-row align="center">
<van-col>
<span style="font-size: 0.8rem; color: #272727;">尊敬的</span>
</van-col>
<van-col>
<div style="color: #713610; padding: 1rem;" class="van-hairline--bottom">{{ name }}</div>
</van-col>
<van-col>:</van-col>
</van-row>
</div>
<div class="content">
感谢您对“童声无界-声音漂流记”活动的支持。上海市儿童基金会已收到您的捐助,您的捐助将全部用于多民族语言发展项目,感谢您的爱心捐赠!
</div>
<div class="price">
<div>爱心捐赠</div>
<div>{{ price }}&nbsp;元</div>
</div>
<div class="organizer">
<div class="wrapper">
<p>上海市儿童基金会</p>
<p>上海初心为爱公益基金会</p>
<div style="position: absolute; width: 50%; height: 100%; top: 0; left: 0;">
<van-image height="100%" fit="contain" :src="icon_stamp01" />
</div>
<div style="position: absolute; width: 50%; height: 100%; top: 0; right: 0;">
<van-image height="100%" fit="contain" :src="icon_stamp02" />
</div>
</div>
</div>
<div class="date">{{ datetime }}</div>
</div>
</template>
<script setup>
import icon_cert from '@images/zhengshu@2x.png'
import icon_stamp01 from '@images/stamp01.png'
import icon_stamp02 from '@images/stamp02.png'
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 {
mixins: [mixin.init],
data() {
return {
name: '杨桐桐',
price: '359',
datetime: '2022年04月25日'
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.donate-certificate {
background-image: url('@images/zhengshu-banner@2x.png');
background-color: white;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
position: relative;
border-radius: 10px;
height: 85vh;
.header-bg {
text-align: center;
}
.title {
padding: 0 2rem;
}
.content {
font-size: 0.85rem;
padding: 2rem;
line-height: 1.75;
}
.price {
margin-left: 5rem;
div:first-child {
display: inline-block;
font-size: 0.5rem;
vertical-align: middle;
margin-right: 0.5rem;
}
div:last-child {
display: inline-block;
font-size: 1.25rem;
color: red;
vertical-align: middle;
}
}
.organizer {
margin: 1rem;
overflow: auto;
.wrapper {
float: right;
font-size: 0.8rem;
text-align: center;
line-height: 2;
position: relative;
color: #0B3A72;
padding: 0.5rem 0;
}
}
.date {
color: #272727;
font-size: 0.85rem;
text-align: right;
padding-right: 2rem;
}
}
</style>
\ No newline at end of file
......@@ -68,15 +68,31 @@ export default [{
title: '实名认证'
},
children: []
}, {
}, {
path: '/client/finishUpload',
name: '客户端上传作品成功跳转页面',
name: '客户端上传作品成功跳转页面',
component: () => import('./views/client/finishUpload.vue'),
meta: {
title: '作品上传'
},
children: []
}, {
meta: {
title: '作品上传'
},
children: []
}, {
path: '/client/wechatpayCallback',
name: '微信付款成功后跳转页面',
component: () => import('./views/client/wechatpayCallback.vue'),
meta: {
title: '微信支付'
},
children: []
}, {
path: '/client/donateCertificate',
name: '捐书成功后提示证书页面',
component: () => import('./views/client/donateCertificate.vue'),
meta: {
title: '捐赠证书'
},
children: []
}, {
path: '/image',
name: 'html转图片',
component: () => import('./views/html2canvas.vue'),
......
<template>
<div class="donate-certificate-page content-bg">
<donate-cert></donate-cert>
</div>
</template>
<script setup>
import DonateCert from '@/components/DonateCert/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 {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import url('@css/content-bg.less');
.donate-certificate-page {
height: 96vh;
padding: 2vh;
}
</style>
\ No newline at end of file
<template>
<div class="wechatpay-callback-page">
<div style="text-align: center; padding: 20%;">
<van-image width="50" height="50" :src="icon_wechatpay" />
<div style="color: #52ab38;;">支付成功</div>
</div>
<div style="color: #222222; text-align: center;">
<p style="font-size: 1.15rem; margin-bottom: 1rem;">上海市儿童基金会</p>
<div>
<div style="font-size: 1.5rem; display: inline-block; vertical-align: middle;">¥</div>&nbsp;
<div style="font-size: 2.5rem; display: inline-block; vertical-align: middle;">59.00</div>
</div>
</div>
<div style="padding: 30% 4rem;">
<my-button @on-click="getCert" type="primary">查看证书</my-button>
</div>
</div>
</template>
<script setup>
import MyButton from '@/components/MyButton/index.vue'
import icon_wechatpay from '@images/zhifu@2x.png'
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 {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
getCert () {
this.$router.push({
path: '/client/donateCertificate'
});
}
}
}
</script>
<style lang="less" scoped>
.wechatpay-callback-page {}
</style>
\ No newline at end of file