✨ feat: 新增报名成功页面，调试分享朋友功能

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-27 15:57:59
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-27 17:13:29
+ * @LastEditTime: 2022-09-28 15:04:19
  * @FilePath: /swx/src/app.config.js
  * @Description:
  */
@@ -26,6 +26,7 @@ export default {
     'pages/activityDetail/index',
     'pages/post/index',
     'pages/joinActivity/index',
+    'pages/joinSuccess/index',
   ],
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
     {
@@ -44,5 +45,5 @@ export default {
     // "van-button": "./components/vant-weapp/button/index",
     // "van-tab": "./components/vant-weapp/tab/index",
     // "van-tabs": "./components/vant-weapp/tabs/index"
-  },
+  }
 }

 /*
  * @Date: 2022-09-19 14:11:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-21 09:49:03
+ * @LastEditTime: 2022-09-28 14:18:13
  * @FilePath: /swx/src/app.js
  * @Description: 文件描述
  */
@@ -13,16 +13,16 @@ import '@/components/vant-weapp/common/index.wxss'
 
 const App = createApp({
   // 可以使用所有的 Vue 生命周期方法
-  mounted () {},
+  mounted() { },
 
   // 对应 onLaunch
-  onLaunch () {},
+  onLaunch() { },
 
   // 对应 onShow
-  onShow (options) {},
+  onShow(options) { },
 
   // 对应 onHide
-  onHide () {},
+  onHide() { },
 
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 })

@@ -3,4 +3,5 @@ page {
   background-color: #F6F6F6;
   padding: 0;
   margin: 0;
+  height: 100%;
 }

 /*
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-20 13:55:01
+ * @LastEditTime: 2022-09-28 15:05:22
  * @FilePath: /swx/src/pages/index/index.config.js
  * @Description: 文件描述
  */
@@ -9,4 +9,5 @@ export default {
   navigationBarTitleText: '胜文轩-活动工具',
   usingComponents: {
   },
+  enableShareAppMessage: true
 }

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-26 17:07:34
+ * @LastEditTime: 2022-09-28 15:22:32
  * @FilePath: /swx/src/pages/index/index.vue
  * @Description: 首页
 -->
@@ -51,6 +51,11 @@ const activity_list = ref([{
   address: '',
 }]);
 
+// 分享功能
+wx.showShareMenu({
+  withShareTicket: true,
+  menus: ['shareAppMessage', 'shareTimeline']
+})
 </script>
 
 <script>
@@ -113,6 +118,41 @@ export default {
     };
   },
   methods: {
+  },
+  // TODO：分享内容待设置
+  onShareAppMessage(options) {
+    // 设置菜单中的转发按钮触发转发事件时的转发内容
+    var shareObj = {
+      title: "胜文轩-活动工具",    // 默认是小程序的名称(可以写slogan等)
+      path: '/pages/share/share',    // 默认是当前页面，必须是以‘/'开头的完整路径
+      imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
+      success: function (res) {
+        // 转发成功之后的回调
+        if (res.errMsg == 'shareAppMessage:ok') {
+          //
+        }
+      },
+      fail: function () {
+        // 转发失败之后的回调
+        if (res.errMsg == 'shareAppMessage:fail cancel') {
+          // 用户取消转发
+        } else if (res.errMsg == 'shareAppMessage:fail') {
+          // 转发失败，其中 detail message 为详细失败信息
+        }
+      },
+      complete: function () {
+        // 转发结束之后的回调（转发成不成功都会执行）
+      }
+    }
+    // 来自页面内的按钮的转发
+    if (options.from == 'button') {
+      var eData = options.target.dataset;
+      console.warn(eData);   // shareBtn
+      // 此处可以修改 shareObj 中的内容
+      shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
+    }
+    // 返回shareObj
+    return shareObj;
   }
 };
 </script>

 <!--
  * @Date: 2022-09-27 17:13:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-28 11:48:21
+ * @LastEditTime: 2022-09-28 11:59:17
  * @FilePath: /swx/src/pages/joinActivity/index.vue
  * @Description: 活动报名
 -->
@@ -88,6 +88,7 @@ import { AtInput } from 'taro-ui-vue3'
 import "taro-ui-vue3/dist/style/components/input.scss";
 import icon_sel from '@/images/icon/sel@2x.png'
 import bottomButton from "@/components/bottom-button";
+import Taro from '@tarojs/taro'
 
 const username = ref('');
 const phone = ref('');
@@ -126,10 +127,13 @@ const confirmEditLimit = () => {
 
 const onSubmit = (val) => {
   console.warn(val);
-  wx.showToast({
+  Taro.showToast({
     title: '请检查输入项',
     icon: 'error',
     duration: 2000
+  });
+  Taro.redirectTo({
+    url: '../joinSuccess/index'
   })
 }
 </script>

+/*
+ * @Date: 2022-09-28 11:52:13
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-28 14:13:06
+ * @FilePath: /swx/src/pages/joinSuccess/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '活动报名',
+  usingComponents: {
+  },
+  enableShareAppMessage: true
+}

+.join-success-page {
+  position: relative;
+  background-image: url(https://tva1.sinaimg.cn/large/5f01a858gy1h6m8pogomej20ku0b2wft.jpg);
+  background-repeat: no-repeat;
+  background-color: white;
+  height: 100%;
+  .success-icon {
+    z-index: 1;
+    position: absolute;
+    top: 4rem;
+    transform: translateX(50%);
+  }
+  .success-info {
+    position: absolute;
+    top: 17rem;
+    text-align: center;
+    width: 100%;
+    .text {
+      font-size: 1.5rem;
+      color: #199A74;
+    }
+    .join {
+      font-size: 1.15rem;
+      padding: 1rem;
+      margin: 1.5rem 3rem;
+      border: 1px solid #199A74;
+      color: #199A74;
+      border-radius: 2rem;
+    }
+  }
+}

+<!--
+ * @Date: 2022-09-28 11:52:13
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-28 15:37:50
+ * @FilePath: /swx/src/pages/joinSuccess/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <view class="join-success-page">
+    <view class="success-icon">
+      <van-image width="12rem" height="12rem" fit="contain"
+        src="https://tva1.sinaimg.cn/large/5f01a858gy1h6m8rrcoywj208c07maav.jpg" />
+    </view>
+    <view class="success-info">
+      <view class="text">报名成功</view>
+      <!-- <view @tap="shareJoin" class="join">邀请好友报名</view> -->
+      <button id="share" data-name="shareBtn" open-type="share" style="font-size: 1.15rem; padding: 0; margin: 1.5rem 3rem; border: 1px solid #199A74; color: #199A74; border-radius: 2rem; background-color: white;">邀请好友报名</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Taro from '@tarojs/taro'
+
+// 打开朋友圈分享
+wx.showShareMenu({
+  withShareTicket: true,
+  menus: ['shareAppMessage', 'shareTimeline']
+})
+</script>
+
+<script>
+import "./index.less";
+
+export default {
+  name: "joinSuccessPage",
+  // TODO：分享内容待设置
+  onShareAppMessage(options) {
+    // 设置菜单中的转发按钮触发转发事件时的转发内容
+    var shareObj = {
+      title: "胜文轩-活动报名",    // 默认是小程序的名称(可以写slogan等)
+      path: 'pages/joinActivity/index',    // 默认是当前页面，必须是以‘/'开头的完整路径
+      imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
+      success: function (res) {
+        // 转发成功之后的回调
+        if (res.errMsg == 'shareAppMessage:ok') {
+          //
+        }
+      },
+      fail: function () {
+        // 转发失败之后的回调
+        if (res.errMsg == 'shareAppMessage:fail cancel') {
+          // 用户取消转发
+        } else if (res.errMsg == 'shareAppMessage:fail') {
+          // 转发失败，其中 detail message 为详细失败信息
+        }
+      },
+      complete: function () {
+        // 转发结束之后的回调（转发成不成功都会执行）
+      }
+    }
+    // 来自页面内的按钮的转发
+    // if (options.from == 'button') {
+    //   var eData = options.target.dataset;
+    //   console.warn(eData);   // shareBtn
+    //   // 此处可以修改 shareObj 中的内容
+    //   // shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
+    // }
+    // 返回shareObj
+    return shareObj;
+  }
+}
+</script>