Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d9baa1ef 1 parent fa185b29

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

Inline Side-by-side
Showing 11 changed files with 176 additions and 11 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-27 15:57:59 3 * @Date: 2022-05-27 15:57:59
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-09-27 17:13:29 5 + * @LastEditTime: 2022-09-28 15:04:19
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -26,6 +26,7 @@ export default { ...@@ -26,6 +26,7 @@ export default {
26 'pages/activityDetail/index', 26 'pages/activityDetail/index',
27 'pages/post/index', 27 'pages/post/index',
28 'pages/joinActivity/index', 28 'pages/joinActivity/index',
29 + 'pages/joinSuccess/index',
29 ], 30 ],
30 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 31 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
31 { 32 {
...@@ -44,5 +45,5 @@ export default { ...@@ -44,5 +45,5 @@ export default {
44 // "van-button": "./components/vant-weapp/button/index", 45 // "van-button": "./components/vant-weapp/button/index",
45 // "van-tab": "./components/vant-weapp/tab/index", 46 // "van-tab": "./components/vant-weapp/tab/index",
46 // "van-tabs": "./components/vant-weapp/tabs/index" 47 // "van-tabs": "./components/vant-weapp/tabs/index"
47 - }, 48 + }
48 } 49 }
......
1 /* 1 /*
2 * @Date: 2022-09-19 14:11:05 2 * @Date: 2022-09-19 14:11:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-21 09:49:03 4 + * @LastEditTime: 2022-09-28 14:18:13
5 * @FilePath: /swx/src/app.js 5 * @FilePath: /swx/src/app.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -13,16 +13,16 @@ import '@/components/vant-weapp/common/index.wxss' ...@@ -13,16 +13,16 @@ import '@/components/vant-weapp/common/index.wxss'
13 13
14 const App = createApp({ 14 const App = createApp({
15 // 可以使用所有的 Vue 生命周期方法 15 // 可以使用所有的 Vue 生命周期方法
16 - mounted () {}, 16 + mounted() { },
17 17
18 // 对应 onLaunch 18 // 对应 onLaunch
19 - onLaunch () {}, 19 + onLaunch() { },
20 20
21 // 对应 onShow 21 // 对应 onShow
22 - onShow (options) {}, 22 + onShow(options) { },
23 23
24 // 对应 onHide 24 // 对应 onHide
25 - onHide () {}, 25 + onHide() { },
26 26
27 // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖 27 // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
28 }) 28 })
......
...@@ -3,4 +3,5 @@ page { ...@@ -3,4 +3,5 @@ page {
3 background-color: #F6F6F6; 3 background-color: #F6F6F6;
4 padding: 0; 4 padding: 0;
5 margin: 0; 5 margin: 0;
6 + height: 100%;
6 } 7 }
......
1 /* 1 /*
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-20 13:55:01 4 + * @LastEditTime: 2022-09-28 15:05:22
5 * @FilePath: /swx/src/pages/index/index.config.js 5 * @FilePath: /swx/src/pages/index/index.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -9,4 +9,5 @@ export default { ...@@ -9,4 +9,5 @@ export default {
9 navigationBarTitleText: '胜文轩-活动工具', 9 navigationBarTitleText: '胜文轩-活动工具',
10 usingComponents: { 10 usingComponents: {
11 }, 11 },
12 + enableShareAppMessage: true
12 } 13 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-26 17:07:34 4 + * @LastEditTime: 2022-09-28 15:22:32
5 * @FilePath: /swx/src/pages/index/index.vue 5 * @FilePath: /swx/src/pages/index/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -51,6 +51,11 @@ const activity_list = ref([{ ...@@ -51,6 +51,11 @@ const activity_list = ref([{
51 address: '', 51 address: '',
52 }]); 52 }]);
53 53
54 +// 分享功能
55 +wx.showShareMenu({
56 + withShareTicket: true,
57 + menus: ['shareAppMessage', 'shareTimeline']
58 +})
54 </script> 59 </script>
55 60
56 <script> 61 <script>
...@@ -113,6 +118,41 @@ export default { ...@@ -113,6 +118,41 @@ export default {
113 }; 118 };
114 }, 119 },
115 methods: { 120 methods: {
121 + },
122 + // TODO：分享内容待设置
123 + onShareAppMessage(options) {
124 + // 设置菜单中的转发按钮触发转发事件时的转发内容
125 + var shareObj = {
126 + title: "胜文轩-活动工具", // 默认是小程序的名称(可以写slogan等)
127 + path: '/pages/share/share', // 默认是当前页面，必须是以‘/'开头的完整路径
128 + imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
129 + success: function (res) {
130 + // 转发成功之后的回调
131 + if (res.errMsg == 'shareAppMessage:ok') {
132 + //
133 + }
134 + },
135 + fail: function () {
136 + // 转发失败之后的回调
137 + if (res.errMsg == 'shareAppMessage:fail cancel') {
138 + // 用户取消转发
139 + } else if (res.errMsg == 'shareAppMessage:fail') {
140 + // 转发失败，其中 detail message 为详细失败信息
141 + }
142 + },
143 + complete: function () {
144 + // 转发结束之后的回调（转发成不成功都会执行）
145 + }
146 + }
147 + // 来自页面内的按钮的转发
148 + if (options.from == 'button') {
149 + var eData = options.target.dataset;
150 + console.warn(eData); // shareBtn
151 + // 此处可以修改 shareObj 中的内容
152 + shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
153 + }
154 + // 返回shareObj
155 + return shareObj;
116 } 156 }
117 }; 157 };
118 </script> 158 </script>
......
1 <!-- 1 <!--
2 * @Date: 2022-09-27 17:13:05 2 * @Date: 2022-09-27 17:13:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-28 11:48:21 4 + * @LastEditTime: 2022-09-28 11:59:17
5 * @FilePath: /swx/src/pages/joinActivity/index.vue 5 * @FilePath: /swx/src/pages/joinActivity/index.vue
6 * @Description: 活动报名 6 * @Description: 活动报名
7 --> 7 -->
...@@ -88,6 +88,7 @@ import { AtInput } from 'taro-ui-vue3' ...@@ -88,6 +88,7 @@ import { AtInput } from 'taro-ui-vue3'
88 import "taro-ui-vue3/dist/style/components/input.scss"; 88 import "taro-ui-vue3/dist/style/components/input.scss";
89 import icon_sel from '@/images/icon/sel@2x.png' 89 import icon_sel from '@/images/icon/sel@2x.png'
90 import bottomButton from "@/components/bottom-button"; 90 import bottomButton from "@/components/bottom-button";
91 +import Taro from '@tarojs/taro'
91 92
92 const username = ref(''); 93 const username = ref('');
93 const phone = ref(''); 94 const phone = ref('');
...@@ -126,10 +127,13 @@ const confirmEditLimit = () => { ...@@ -126,10 +127,13 @@ const confirmEditLimit = () => {
126 127
127 const onSubmit = (val) => { 128 const onSubmit = (val) => {
128 console.warn(val); 129 console.warn(val);
129 - wx.showToast({ 130 + Taro.showToast({
130 title: '请检查输入项', 131 title: '请检查输入项',
131 icon: 'error', 132 icon: 'error',
132 duration: 2000 133 duration: 2000
134 + });
135 + Taro.redirectTo({
136 + url: '../joinSuccess/index'
133 }) 137 })
134 } 138 }
135 </script> 139 </script>
......
1 +/*
2 + * @Date: 2022-09-28 11:52:13
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-28 14:13:06
5 + * @FilePath: /swx/src/pages/joinSuccess/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '活动报名',
10 + usingComponents: {
11 + },
12 + enableShareAppMessage: true
13 +}
1 +.join-success-page {
2 + position: relative;
3 + background-image: url(https://tva1.sinaimg.cn/large/5f01a858gy1h6m8pogomej20ku0b2wft.jpg);
4 + background-repeat: no-repeat;
5 + background-color: white;
6 + height: 100%;
7 + .success-icon {
8 + z-index: 1;
9 + position: absolute;
10 + top: 4rem;
11 + transform: translateX(50%);
12 + }
13 + .success-info {
14 + position: absolute;
15 + top: 17rem;
16 + text-align: center;
17 + width: 100%;
18 + .text {
19 + font-size: 1.5rem;
20 + color: #199A74;
21 + }
22 + .join {
23 + font-size: 1.15rem;
24 + padding: 1rem;
25 + margin: 1.5rem 3rem;
26 + border: 1px solid #199A74;
27 + color: #199A74;
28 + border-radius: 2rem;
29 + }
30 + }
31 +}
1 +<!--
2 + * @Date: 2022-09-28 11:52:13
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-28 15:37:50
5 + * @FilePath: /swx/src/pages/joinSuccess/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view class="join-success-page">
10 + <view class="success-icon">
11 + <van-image width="12rem" height="12rem" fit="contain"
12 + src="https://tva1.sinaimg.cn/large/5f01a858gy1h6m8rrcoywj208c07maav.jpg" />
13 + </view>
14 + <view class="success-info">
15 + <view class="text">报名成功</view>
16 + <!-- <view @tap="shareJoin" class="join">邀请好友报名</view> -->
17 + <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>
18 + </view>
19 + </view>
20 +</template>
21 +
22 +<script setup>
23 +import { ref } from "vue";
24 +import Taro from '@tarojs/taro'
25 +
26 +// 打开朋友圈分享
27 +wx.showShareMenu({
28 + withShareTicket: true,
29 + menus: ['shareAppMessage', 'shareTimeline']
30 +})
31 +</script>
32 +
33 +<script>
34 +import "./index.less";
35 +
36 +export default {
37 + name: "joinSuccessPage",
38 + // TODO：分享内容待设置
39 + onShareAppMessage(options) {
40 + // 设置菜单中的转发按钮触发转发事件时的转发内容
41 + var shareObj = {
42 + title: "胜文轩-活动报名", // 默认是小程序的名称(可以写slogan等)
43 + path: 'pages/joinActivity/index', // 默认是当前页面，必须是以‘/'开头的完整路径
44 + imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
45 + success: function (res) {
46 + // 转发成功之后的回调
47 + if (res.errMsg == 'shareAppMessage:ok') {
48 + //
49 + }
50 + },
51 + fail: function () {
52 + // 转发失败之后的回调
53 + if (res.errMsg == 'shareAppMessage:fail cancel') {
54 + // 用户取消转发
55 + } else if (res.errMsg == 'shareAppMessage:fail') {
56 + // 转发失败，其中 detail message 为详细失败信息
57 + }
58 + },
59 + complete: function () {
60 + // 转发结束之后的回调（转发成不成功都会执行）
61 + }
62 + }
63 + // 来自页面内的按钮的转发
64 + // if (options.from == 'button') {
65 + // var eData = options.target.dataset;
66 + // console.warn(eData); // shareBtn
67 + // // 此处可以修改 shareObj 中的内容
68 + // // shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
69 + // }
70 + // 返回shareObj
71 + return shareObj;
72 + }
73 +}
74 +</script>