Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f91beebb 1 parent 6a8ad831

✨ feat: 新增活动报名页面

Inline Side-by-side
Showing 5 changed files with 218 additions and 2 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 09:41:31 5 + * @LastEditTime: 2022-09-27 17:13:29
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -25,6 +25,7 @@ export default { ...@@ -25,6 +25,7 @@ export default {
25 'pages/createActivity/index', 25 'pages/createActivity/index',
26 'pages/activityDetail/index', 26 'pages/activityDetail/index',
27 'pages/post/index', 27 'pages/post/index',
28 + 'pages/joinActivity/index',
28 ], 29 ],
29 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 30 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
30 { 31 {
......
1 +/*
2 + * @Date: 2022-09-27 17:13:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-27 17:23:30
5 + * @FilePath: /swx/src/pages/joinActivity/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 +.join-activity-page {
10 + background-color: #FFFFFF;
11 + .activity-title {
12 + background-color: #FFFFFF;
13 + .box {
14 + padding: 1rem 1rem 0.5rem 1rem;
15 + text-align: center;
16 + }
17 + }
18 +
19 +
20 +}
21 +
22 +.form-item {
23 + padding: 0.5rem 1rem;
24 + background-color: #FFFFFF;
25 + .form-item-title {
26 + font-size: 1rem;
27 + &.border {
28 + padding-bottom: 0.5rem;
29 + border-bottom: 1px solid #F2F2F2;
30 + }
31 + &.required::before {
32 + color: red;
33 + content: "*";
34 + font-size: 0.9rem;
35 + left: 0.5rem;
36 + position: absolute;
37 + }
38 + .sub {
39 + color: #999;
40 + }
41 + }
42 +}
43 +
44 +.limit-wrapper {
45 + .border {
46 + overflow: auto;
47 + border-bottom: 1px solid #F2F2F2;
48 + .fix {
49 + float: left;
50 + padding-top: 0.6rem;
51 + }
52 + }
53 +}
54 +.limit-button-wrapper {
55 + padding: 1rem 0;
56 + margin: 1rem;
57 + text-align: center;
58 + .button {
59 + padding: 0.5rem 1rem; border-radius: 1rem;
60 + }
61 + .cancel {
62 + color: #199A74;
63 + border: 1px solid #199A74;
64 + }
65 + .confirm {
66 + color: #FFFFFF;
67 + background-color: #199A74;
68 + }
69 +}
1 +<!--
2 + * @Date: 2022-09-27 17:13:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-28 11:09:48
5 + * @FilePath: /swx/src/pages/joinActivity/index.vue
6 + * @Description: 活动报名
7 +-->
8 +<template>
9 + <view class="join-activity-page">
10 + <view class="activity-title">
11 + <view class="box">
12 + <text class="bg-gradient" style="font-size: 1.25rem;">请填写报名信息</text>
13 + </view>
14 + </view>
15 + <AtInput required :border="true" title="姓名" type='text' placeholder='请输入姓名' v-model:value="username" />
16 + <AtInput required :border="true" title="手机号" type='phone' placeholder='请输入手机号' v-model:value="phone" />
17 + <view class="at-input">
18 + <view class="at-input__container">
19 + <label class="h5-label at-input__title at-input__title--required">年龄段</label>
20 + <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_range" placeholder="请选择年龄范围" :disabled="true"/>
21 + <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
22 + </view>
23 + </view>
24 + <view class="at-input">
25 + <view class="at-input__container">
26 + <label class="h5-label at-input__title at-input__title--required">性别</label>
27 + <van-radio-group
28 + :value="user_sex"
29 + @change="onSexChange"
30 + direction="horizontal"
31 + >
32 + <van-radio name="female" checked-color="#199A74">男士</van-radio>
33 + <van-radio name="male" checked-color="#199A74">女士</van-radio>
34 + </van-radio-group>
35 + </view>
36 + </view>
37 + <view v-for="(item, index) in arr" :key="index">
38 + <AtInput
39 + :required="item.required"
40 + :border="true"
41 + :title="item.title"
42 + type='text'
43 + :placeholder="'请输入' + item.title"
44 + v-model:value="item.value" />
45 + </view>
46 + </view>
47 +
48 + <bottom-button @on-submit="onSubmit">确认报名</bottom-button>
49 +
50 + <!-- 年龄段弹出框 -->
51 + <van-popup :show="show_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
52 + <view class="limit-wrapper">
53 + <view class="form-item border">
54 + <view class="form-item-title fix">年龄最小值</view>
55 + <view style="float: right;">
56 + <van-field :value="min_number" type="number" label="" placeholder="请输入年龄最小值"
57 + placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
58 + maxlength="" :border="false" />
59 + </view>
60 + </view>
61 + <view class="form-item border">
62 + <view class="form-item-title fix">年龄最大值</view>
63 + <view style="float: right;">
64 + <van-field :value="max_number" type="number" label="" placeholder="请输入年龄最大值"
65 + placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
66 + maxlength="" :border="false" />
67 + </view>
68 + </view>
69 + </view>
70 + <van-row>
71 + <van-col span="12">
72 + <view class="limit-button-wrapper">
73 + <view class="button cancel" @tap="closeEditLimit">取消</view>
74 + </view>
75 + </van-col>
76 + <van-col span="12">
77 + <view class="limit-button-wrapper">
78 + <view class="button confirm" @tap="confirmEditLimit">确定</view>
79 + </view>
80 + </van-col>
81 + </van-row>
82 + </van-popup>
83 +</template>
84 +
85 +<script setup>
86 +import { ref, onMounted } from "vue";
87 +import { AtInput } from 'taro-ui-vue3'
88 +import "taro-ui-vue3/dist/style/components/input.scss";
89 +import icon_sel from '@/images/icon/sel@2x.png'
90 +import bottomButton from "@/components/bottom-button";
91 +
92 +const username = ref('');
93 +const phone = ref('');
94 +const age_range = ref('');
95 +const user_sex = ref('');
96 +const arr = ref([]);
97 +
98 +onMounted(() => {
99 + arr.value = [{
100 + title: '推荐人' ,
101 + key: 'recommender',
102 + value: '',
103 + required: false,
104 + }]
105 +})
106 +
107 +// const handleInput = (value) => {
108 +// console.warn(arr.value);
109 +// }
110 +const onSexChange = ({ detail }) => {
111 + user_sex.value = detail;
112 +}
113 +
114 +const show_popup = ref(false);
115 +const closeEditLimit = () => {
116 + show_popup.value = false;
117 +}
118 +const confirmEditLimit = () => {
119 + show_popup.value = false;
120 +}
121 +
122 +const onSubmit = (val) => {
123 + console.warn(val);
124 +}
125 +</script>
126 +
127 +<script>
128 +import "./index.less";
129 +export default {
130 + name: "demoPage",
131 +};
132 +</script>
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-22 14:02:05 4 + * @LastEditTime: 2022-09-28 09:56:33
5 * @FilePath: /swx/vantComponentConf.js 5 * @FilePath: /swx/vantComponentConf.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -33,6 +33,8 @@ const vantComponentNames = [ ...@@ -33,6 +33,8 @@ const vantComponentNames = [
33 "transition", 33 "transition",
34 "uploader", 34 "uploader",
35 "switch", 35 "switch",
36 + "radio",
37 + "radio-group",
36 ]; 38 ];
37 39
38 module.exports = vantComponentNames; 40 module.exports = vantComponentNames;
......