Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
57fedb8e 1 parent f7ab5205

✨ feat: 新增活动详情页面

Inline Side-by-side
Showing 7 changed files with 201 additions and 3 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-21 16:04:58 5 + * @LastEditTime: 2022-09-26 14:37:22
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -23,6 +23,7 @@ export default { ...@@ -23,6 +23,7 @@ export default {
23 'pages/foo/index', 23 'pages/foo/index',
24 'pages/my/index', 24 'pages/my/index',
25 'pages/createActivity/index', 25 'pages/createActivity/index',
26 + 'pages/activityDetail/index',
26 ], 27 ],
27 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 28 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
28 { 29 {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-20 15:39:37 2 * @Date: 2022-09-20 15:39:37
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-21 15:25:19 4 + * @LastEditTime: 2022-09-26 14:40:18
5 * @FilePath: /swx/src/components/activity-card.vue 5 * @FilePath: /swx/src/components/activity-card.vue
6 * @Description: 活动卡片组件 6 * @Description: 活动卡片组件
7 --> 7 -->
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 </view> 42 </view>
43 </van-col> 43 </van-col>
44 <van-col :span="5"> 44 <van-col :span="5">
45 - <view class="status-button"> 45 + <view @tap="goTo()" class="status-button">
46 <text>我要报名</text> 46 <text>我要报名</text>
47 </view> 47 </view>
48 </van-col> 48 </van-col>
...@@ -56,9 +56,17 @@ import { ref, defineProps } from 'vue' ...@@ -56,9 +56,17 @@ import { ref, defineProps } from 'vue'
56 import icon_time from '@/images/icon/time@2x.png' 56 import icon_time from '@/images/icon/time@2x.png'
57 import icon_address from '@/images/icon/address@2x.png' 57 import icon_address from '@/images/icon/address@2x.png'
58 58
59 +import Taro from '@tarojs/taro'
60 +
59 const props = defineProps({ 61 const props = defineProps({
60 data: Object 62 data: Object
61 }) 63 })
64 +
65 +const goTo = () => {
66 + Taro.navigateTo({
67 + url: '../activityDetail/index'
68 + })
69 +}
62 </script> 70 </script>
63 71
64 <style lang="less"> 72 <style lang="less">
......
1 +/*
2 + * @Date: 2022-09-26 14:36:57
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-26 14:41:01
5 + * @FilePath: /swx/src/pages/activityDetail/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '活动详情',
10 + usingComponents: {
11 + },
12 +}
1 +.bg-gradient {
2 + background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
3 + /*调整下划线的宽度占百分之百 高度是3px */
4 + background-size: 100% 1vw;
5 + /* 调整下划线的起始位置 左侧是0 上边是1.15em */
6 + background-position: 0 1.25rem;
7 +}
8 +
9 +.divide-line {
10 + height: 0.5rem;
11 + background-color: #F6F6F6;
12 +}
13 +
14 +.activity-title {
15 + background-color: #FFFFFF;
16 + .box {
17 + padding: 1rem 1rem 0.5rem 1rem;
18 + text-align: center;
19 + }
20 +}
21 +
22 +.activity-info-wrapper {
23 + .box {
24 + padding: 0 1rem;
25 + .border {
26 + border-bottom: 1px solid #F2F2F2;
27 + overflow: auto;
28 + padding-top: 1rem;
29 + padding-bottom: 1rem;
30 + .label {
31 + color: #999999;
32 + }
33 + .value {
34 + color: #222222;
35 + }
36 + }
37 + }
38 +}
1 +<!--
2 + * @Date: 2022-09-26 14:36:57
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-26 16:08:19
5 + * @FilePath: /swx/src/pages/activityDetail/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view style="background-color: #FFFFFF;">
10 + <view style="position: relative;">
11 + <van-image
12 + width="100%"
13 + height="15rem"
14 + fit="cover"
15 + :src="img_demo"
16 + />
17 + <view style="position: absolute; top: 1rem; right: 0; background-color: #199A74; border-top-left-radius: 1rem;border-bottom-left-radius: 1rem; padding: 0.5rem; color: #FFFFFF;">
18 + <van-icon name="share-o" />
19 + <text>分享</text>
20 + </view>
21 + </view>
22 + <view style="border-bottom: 1px solid #F6F6F6; padding: 1rem; font-size: 1.15rem;">八段锦</view>
23 + <view class="activity-title">
24 + <view class="box">
25 + <text class="bg-gradient" style="font-size: 1.25rem;">活动信息</text>
26 + </view>
27 + </view>
28 + <view class="activity-info-wrapper">
29 + <view class="box">
30 + <view class="border">
31 + <van-row>
32 + <van-col span="7">
33 + <text class="label">主办方:</text>
34 + </van-col>
35 + <van-col span="17">
36 + <text class="value">周三读书会</text>
37 + </van-col>
38 + </van-row>
39 + </view>
40 + </view>
41 + <view class="box">
42 + <view class="border">
43 + <van-row>
44 + <van-col span="7">
45 + <text class="label">活动时间:</text>
46 + </van-col>
47 + <van-col span="17">
48 + <text class="value">2023-08-27 23:49</text>
49 + </van-col>
50 + </van-row>
51 + </view>
52 + </view>
53 + <view class="box">
54 + <view class="border">
55 + <van-row>
56 + <van-col span="7">
57 + <text class="label">活动方式:</text>
58 + </van-col>
59 + <van-col span="17">
60 + <text class="value">现场活动</text>
61 + </van-col>
62 + </van-row>
63 + </view>
64 + </view>
65 + <view class="box">
66 + <view class="border">
67 + <van-row>
68 + <van-col span="7">
69 + <text class="label">活动地址:</text>
70 + </van-col>
71 + <van-col span="17">
72 + <text class="value">上海市杨浦区军工路100号A座05室上海市杨浦区军工路100号A座05室</text>
73 + </van-col>
74 + </van-row>
75 + </view>
76 + </view>
77 + <view class="box">
78 + <view class="border">
79 + <van-row>
80 + <van-col span="7">
81 + <text class="label">报名开始时间:</text>
82 + </van-col>
83 + <van-col span="17">
84 + <text class="value">2022-08-28 00:22</text>
85 + </van-col>
86 + </van-row>
87 + </view>
88 + </view>
89 + <view class="box">
90 + <view class="border">
91 + <van-row>
92 + <van-col span="7">
93 + <text class="label">报名截止时间:</text>
94 + </van-col>
95 + <van-col span="17">
96 + <text class="value">2022-08-28 00:22</text>
97 + </van-col>
98 + </van-row>
99 + </view>
100 + </view>
101 + </view>
102 + <view class="divide-line"></view>
103 + <view class="activity-title">
104 + <view class="box">
105 + <text class="bg-gradient" style="font-size: 1.25rem;">活动详情</text>
106 + </view>
107 + </view>
108 + <view style="padding: 0.5rem 1rem 1rem 1rem;">
109 + <van-image
110 + width="100%"
111 + height="32rem"
112 + fit="contain"
113 + :src="img_demo1"
114 + />
115 + </view>
116 + <view style="padding: 0.5rem 1rem 1rem 1rem;">
117 + 八段锦对人体的好处,简单来说就是滋阴助阳,培补元气,舒经活络,活血生津。长期习练,便可身心调和，耳聪目明,延年益寿。
118 + 每天早七点，一起八段锦！
119 + </view>
120 + </view>
121 + <view>
122 +
123 + </view>
124 +</template>
125 +
126 +<script setup>
127 +import img_demo from '@/images/demo@2x.png'
128 +import img_demo1 from '@/images/demo@2x-1.png'
129 +
130 +import { ref } from "vue";
131 +const str = ref('demo')
132 +</script>
133 +
134 +<script>
135 +import "./index.less";
136 +export default {
137 + name: "demoPage",
138 +};
139 +</script>