✨ 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