🦄 refactor: 优化捐赠完成后显示页面

hookehuyr
Commit bb5a2e3d54b8dfbe8ff6d0b4e6f35f4a0114012a bb5a2e3d 1 parent 6868aae2
Showing 3 changed files with 66 additions and 62 deletions
src/api/C/donate.js
src/views/client/donateCertificate.vue
src/views/client/wechatpayCallback.vue
--- a/src/api/C/donate.js
View file @bb5a2e3
+++ b/src/api/C/donate.js
View file @bb5a2e3
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-06-01 16:00:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-07 16:37:07
+ * @LastEditTime: 2022-06-09 21:55:06
  * @FilePath: /tswj/src/api/C/donate.js
  * @Description: 捐钱操作API
  */
@@ -11,6 +11,7 @@ import { fn, fetch } from '@/api/fn';
 const Api = {
   PREPARE_DONATE: '/srv/?a=prepare_donate',
   ADD_DONATE: '/srv/?a=add_donate',
+  ONE_CERT: '/srv/?a=one_cert',
 }
 /**
@@ -31,3 +32,10 @@ export const prepareDonateAPI = (params) => fn(fetch.post(Api.PREPARE_DONATE, pa
  * @returns 
  */
 export const addDonateAPI = (params) => fn(fetch.post(Api.ADD_DONATE, params));
+
+/**
+ * @description: 捐赠证书
+ * @param {String} donate_id 捐赠ID
+ * @returns 
+ */
+export const oneCertAPI = (params) => fn(fetch.get(Api.ONE_CERT, params));
--- a/src/views/client/donateCertificate.vue
View file @bb5a2e3
+++ b/src/views/client/donateCertificate.vue
View file @bb5a2e3
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-04-27 10:23:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-09 01:38:37
+ * @LastEditTime: 2022-06-09 22:00:41
  * @FilePath: /tswj/src/views/client/donateCertificate.vue
  * @Description: 捐赠成功后显示证书页面
 -->
@@ -17,39 +17,23 @@
 import DonateCert from '@/components/DonateCert/index'
 import ShortcutFixed from '@/components/ShortcutFixed/index'
 import { USER_ROLE } from '@/constant'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import axios from '@/utils/axios';
+import { oneCertAPI } from '@/api/C/donate'
-import { Toast } from 'vant';
 const $route = useRoute();
-const certItem = ref('')
 // 捐款成功后，查询生成捐赠证书
-axios.get('/srv/?a=one_cert', {
+const certItem = ref('')
-  params: {
+onMounted(async () => {
-    donate_id: $route.query.donate_id
+  const { data } = await oneCertAPI({ donate_id: $route.query.donate_id })
-  }
+  certItem.value = data;
-})
-.then(res => {
-  if (res.data.code === 1) {
-    certItem.value = res.data.data;
-  } else {
-    console.warn(res);
-    if (!res.data.show) return false;
-    Toast({
-      icon: 'close',
-      message: res.data.msg
-    });
-  }
-})
-.catch(err => {
-  console.error(err); 
 })
 </script>
 <style lang="less" scoped>
 @import url('@css/content-bg.less');
+
 .donate-certificate-page {
   height: 96vh;
   padding: 2vh;
--- a/src/views/client/wechatpayCallback.vue
View file @bb5a2e3
+++ b/src/views/client/wechatpayCallback.vue
View file @bb5a2e3
 <template>
   <div class="wechatpay-callback-page">
-    <div style="text-align: center; padding: 20%;">
+    <div class="pay-success">
       <van-image width="50" height="50" :src="icon_wechatpay" />
-      <div style="color: #52ab38;;">支付成功</div>
+      <div class="text">支付成功</div>
     </div>
-    <div style="color: #222222; text-align: center;">
+    <div class="pay-main">
-      <p style="font-size: 1.15rem; margin-bottom: 1rem;">上海市儿童基金会</p>
+      <p class="title">上海市儿童基金会</p>
-      <div>
+      <div class="amount">
-        <div style="font-size: 1.5rem; display: inline-block; vertical-align: middle;">¥</div>&nbsp;
+        <p>¥</p>&nbsp;
-        <div style="font-size: 2.5rem; display: inline-block; vertical-align: middle;">59.00</div>
+        <p>{{ amount }}</p>
       </div>
     </div>
-    <div style="padding: 30% 4rem;">
+    <div class="button-wrapper">
-      <my-button @on-click="getCert" type="primary">查看证书</my-button>
+      <my-button type="primary" @on-click="getCert">查看证书</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';
@@ -31,40 +29,54 @@ const $route = useRoute();
 const $router = useRouter();
 // TODO: 微信支付成功后回调
+const amount = ref(50)
+onMounted(() => {
-  onMounted(() => {
+})
-    
+
-  })
+// TODO: 需要获取 donate_id
+// 跳转到捐赠证书页面，替换掉当前页面，不能返回这个页面
+const getCert = () => {
+  $router.replace({
+    path: '/client/donateCertificate',
+    query: {
+      donate_id: $route.query.donate_id
+    }
+  });
+}
 </script>
-<script>
+<style lang="less" scoped>
-import mixin from 'common/mixin';
+.wechatpay-callback-page {
+  .pay-success {
+    text-align: center;
+    padding: 20%;
+
+    .text {
+      color: #52ab38;
+    }
+  }
-export default {
+  .pay-main {
-  mixins: [mixin.init],
+    color: #222222;
-  data () {
+    text-align: center;
-    return {
+    .title {
+      font-size: 1.15rem;
+      margin-bottom: 1rem;
     }
-  },
-  mounted () {
-  },
+    .amount {
-  methods: {
+      p {
-    getCert () {
+        font-size: 1.5rem;
-      // TODO: 需要获取 donate_id
+        display: inline-block;
-      // 跳转到捐赠证书页面，替换掉当前页面，不能返回这个页面
+        vertical-align: middle;
-      this.$router.replace({
+      }
-        path: '/client/donateCertificate',
-        query: {
-          donate_id: this.$route.query.donate_id
-        }
-      });
     }
   }
-}
-</script>
-<style lang="less" scoped>
+  .button-wrapper {
-.wechatpay-callback-page {}
+    padding: 30% 4rem;
+  }
+}
 </style>