hookehuyr

✨ feat: 新增创建活动页面,页面新增主办方,活动主题,活动封面图录入项

...@@ -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 14:59:55 5 + * @LastEditTime: 2022-09-21 16:04:58
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -22,6 +22,7 @@ export default { ...@@ -22,6 +22,7 @@ export default {
22 'pages/index/index', 22 'pages/index/index',
23 'pages/foo/index', 23 'pages/foo/index',
24 'pages/my/index', 24 'pages/my/index',
25 + 'pages/createActivity/index',
25 ], 26 ],
26 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 27 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
27 { 28 {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-21 11:59:20 2 * @Date: 2022-09-21 11:59:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-21 15:24:58 4 + * @LastEditTime: 2022-09-21 16:05:45
5 * @FilePath: /swx/src/components/navbar.vue 5 * @FilePath: /swx/src/components/navbar.vue
6 * @Description: 底部导航栏 6 * @Description: 底部导航栏
7 --> 7 -->
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 </view> 13 </view>
14 <view><text :style="homeStyle">首页</text></view> 14 <view><text :style="homeStyle">首页</text></view>
15 </view> 15 </view>
16 - <view class="add"> 16 + <view @tap="createActivity()" class="add">
17 <view> 17 <view>
18 <van-icon :name="icon_add" size="4.5rem" color="" /> 18 <van-icon :name="icon_add" size="4.5rem" color="" />
19 </view> 19 </view>
...@@ -51,6 +51,12 @@ const goTo = (page) => { ...@@ -51,6 +51,12 @@ const goTo = (page) => {
51 } 51 }
52 } 52 }
53 53
54 +const createActivity = () => {
55 + Taro.navigateTo({
56 + url: '../createActivity/index'
57 + })
58 +}
59 +
54 const currentPage = ref(''); 60 const currentPage = ref('');
55 61
56 onMounted(() => { 62 onMounted(() => {
......
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 11:28:07 4 + * @LastEditTime: 2022-09-21 18:04:48
5 - * @FilePath: /swx/src/pages/index/index.vue 5 + * @FilePath: /swx/src/pages/_index/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
......
1 +/*
2 + * @Date: 2022-09-21 16:04:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-21 16:04:45
5 + * @FilePath: /swx/src/pages/createActivity/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '创建活动',
10 + usingComponents: {
11 + },
12 +}
1 +.input-class {
2 + font-size: 1rem;
3 +}
4 +
5 +.label-class {
6 + font-size: 1rem;
7 +}
8 +
9 +.divide-line {
10 + height: 0.5rem;
11 +}
12 +
13 +.van-field__control--disabled {
14 + color: #222 !important;
15 +}
16 +
17 +.van-field__label, .van-field__label--disabled {
18 + color: #222 !important;
19 +}
20 +
21 +.upload-box {
22 + position: relative;
23 + border: 4px dotted #199A74;
24 + background-color: #F5FFFB;
25 + height: 12rem;
26 + margin-top: 0.5rem;
27 + .upload-icon {
28 + position: absolute;
29 + left: 40%;
30 + transform: translateX(-40%);
31 + top: 50%;
32 + transform: translateY(-50%);
33 + }
34 + .upload-close {
35 + position: absolute;
36 + right: -0.5rem;
37 + top: -0.5rem;
38 + }
39 +}
1 +<!--
2 + * @Date: 2022-09-21 16:04:10
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-21 18:15:10
5 + * @FilePath: /swx/src/pages/createActivity/index.vue
6 + * @Description: 创建活动页面
7 +-->
8 +<template>
9 + <view>
10 + <van-cell-group inset>
11 + <van-field :value="value1"
12 + label-class="label-class"
13 + input-class="input-class"
14 + label="主办方"
15 + right-icon="arrow-down"
16 + placeholder="请选择活动主办方"
17 + placeholder-style="color: #999;"
18 + :required="true"
19 + :disabled="true" />
20 + <view class="divide-line"></view>
21 + <van-field
22 + :value="message"
23 + label-class="label-class"
24 + input-class="input-class"
25 + label="活动主题"
26 + type="textarea"
27 + placeholder="请输入活动主题(最多30个字)"
28 + placeholder-style="color: #999;"
29 + autosize
30 + :required="true"
31 + :maxlength="30"
32 + :border="false"
33 + @change="onChange"
34 + />
35 + <view class="divide-line"></view>
36 + <view style="padding: 0.5rem; background-color: #FFFFFF;">
37 + <view class="uploader-title" style="font-size: 1rem;"><text style="color: red;">*</text>活动封面图<text style="color: #999;">(图片比例16:9展示最佳)</text></view>
38 + <van-uploader v-if="!has_image" @after-read="afterRead">
39 + <view class="upload-box" :style="uploaderStyle">
40 + <van-icon :name="icon_upload" size="5rem" class="upload-icon" />
41 + </view>
42 + </van-uploader>
43 + <view v-else class="upload-box" :style="uploaderStyle">
44 + <van-image fit="contain" :width="uploader_width" height="12rem" :src="uploader_image" />
45 + <van-icon name="clear" size="1.5rem" color="#000" class="upload-close" @tap="removeUploadImage" />
46 + </view>
47 + </view>
48 + </van-cell-group>
49 + </view>
50 + <view @tap="onSubmit">确定发布</view>
51 +</template>
52 +
53 +<script setup>
54 +import { ref, onMounted, nextTick } from "vue";
55 +// import icon_home1 from '@/images/icon/home01@2x.png'
56 +import icon_upload from '@/images/icon/upload@2x.png'
57 +const value1 = ref('');
58 +const message = ref('');
59 +
60 +const onSubmit = () => {
61 + console.warn(message.value);
62 +}
63 +
64 +const onChange = ({ detail }) => {
65 + console.warn(detail);
66 + message.value = detail
67 +}
68 +
69 +/**************** 上传模块 ******************/
70 +const uploader_width = ref('')
71 +const uploaderStyle = ref({})
72 +const has_image = ref(false)
73 +const uploader_image = ref('')
74 +const afterRead = (event) => {
75 + const { file } = event.detail;
76 + console.warn(file);
77 + has_image.value = true;
78 + uploader_image.value = file.url
79 +}
80 +const removeUploadImage = () => {
81 + has_image.value = false;
82 + uploader_image.value = ''
83 +}
84 +/**********************************/
85 +
86 +onMounted(() => {
87 + nextTick(() => {
88 + setTimeout(() => {
89 + // 获取元素宽度
90 + wx.createSelectorQuery().selectAll('.uploader-title').boundingClientRect(function (rect) {
91 + uploaderStyle.value = {
92 + width: rect[0].width - 8 + 'px'
93 + }
94 + uploader_width.value = rect[0].width - 8 + 'px';
95 + }).exec()
96 + }, 100)
97 + })
98 +})
99 +
100 +</script>
101 +
102 +<script>
103 +import "./index.less";
104 +
105 +export default {
106 + name: "createActivityPage",
107 +};
108 +</script>
1 <!-- 1 <!--
2 * @Date: 2022-09-21 14:51:44 2 * @Date: 2022-09-21 14:51:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-21 14:52:03 4 + * @LastEditTime: 2022-09-21 16:13:17
5 * @FilePath: /swx/src/pages/my/index.vue 5 * @FilePath: /swx/src/pages/my/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 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 10:18:33 4 + * @LastEditTime: 2022-09-21 16:12:09
5 * @FilePath: /swx/vantComponentConf.js 5 * @FilePath: /swx/vantComponentConf.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
......