Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d7dc21db 1 parent fe9c5b8a

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

Inline Side-by-side
Showing 9 changed files with 173 additions and 7 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-27 15:57:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 14:59:55
* @LastEditTime: 2022-09-21 16:04:58
* @FilePath: /swx/src/app.config.js
* @Description:
*/
......@@ -22,6 +22,7 @@ export default {
'pages/index/index',
'pages/foo/index',
'pages/my/index',
'pages/createActivity/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
<!--
* @Date: 2022-09-21 11:59:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 15:24:58
* @LastEditTime: 2022-09-21 16:05:45
* @FilePath: /swx/src/components/navbar.vue
* @Description: 底部导航栏
-->
......@@ -13,7 +13,7 @@
</view>
<view><text :style="homeStyle">首页</text></view>
</view>
<view class="add">
<view @tap="createActivity()" class="add">
<view>
<van-icon :name="icon_add" size="4.5rem" color="" />
</view>
......@@ -51,6 +51,12 @@ const goTo = (page) => {
}
}
const createActivity = () => {
Taro.navigateTo({
url: '../createActivity/index'
})
}
const currentPage = ref('');
onMounted(() => {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-20 11:28:07
* @FilePath: /swx/src/pages/index/index.vue
* @LastEditTime: 2022-09-21 18:04:48
* @FilePath: /swx/src/pages/_index/index.vue
* @Description: 文件描述
-->
<template>
......
/*
* @Date: 2022-09-21 16:04:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 16:04:45
* @FilePath: /swx/src/pages/createActivity/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '创建活动',
usingComponents: {
},
}
.input-class {
font-size: 1rem;
}
.label-class {
font-size: 1rem;
}
.divide-line {
height: 0.5rem;
}
.van-field__control--disabled {
color: #222 !important;
}
.van-field__label, .van-field__label--disabled {
color: #222 !important;
}
.upload-box {
position: relative;
border: 4px dotted #199A74;
background-color: #F5FFFB;
height: 12rem;
margin-top: 0.5rem;
.upload-icon {
position: absolute;
left: 40%;
transform: translateX(-40%);
top: 50%;
transform: translateY(-50%);
}
.upload-close {
position: absolute;
right: -0.5rem;
top: -0.5rem;
}
}
<!--
* @Date: 2022-09-21 16:04:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 18:15:10
* @FilePath: /swx/src/pages/createActivity/index.vue
* @Description: 创建活动页面
-->
<template>
<view>
<van-cell-group inset>
<van-field :value="value1"
label-class="label-class"
input-class="input-class"
label="主办方"
right-icon="arrow-down"
placeholder="请选择活动主办方"
placeholder-style="color: #999;"
:required="true"
:disabled="true" />
<view class="divide-line"></view>
<van-field
:value="message"
label-class="label-class"
input-class="input-class"
label="活动主题"
type="textarea"
placeholder="请输入活动主题（最多30个字）"
placeholder-style="color: #999;"
autosize
:required="true"
:maxlength="30"
:border="false"
@change="onChange"
/>
<view class="divide-line"></view>
<view style="padding: 0.5rem; background-color: #FFFFFF;">
<view class="uploader-title" style="font-size: 1rem;"><text style="color: red;">*</text>活动封面图<text style="color: #999;">（图片比例16:9展示最佳）</text></view>
<van-uploader v-if="!has_image" @after-read="afterRead">
<view class="upload-box" :style="uploaderStyle">
<van-icon :name="icon_upload" size="5rem" class="upload-icon" />
</view>
</van-uploader>
<view v-else class="upload-box" :style="uploaderStyle">
<van-image fit="contain" :width="uploader_width" height="12rem" :src="uploader_image" />
<van-icon name="clear" size="1.5rem" color="#000" class="upload-close" @tap="removeUploadImage" />
</view>
</view>
</van-cell-group>
</view>
<view @tap="onSubmit">确定发布</view>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
// import icon_home1 from '@/images/icon/home01@2x.png'
import icon_upload from '@/images/icon/upload@2x.png'
const value1 = ref('');
const message = ref('');
const onSubmit = () => {
console.warn(message.value);
}
const onChange = ({ detail }) => {
console.warn(detail);
message.value = detail
}
/**************** 上传模块 ******************/
const uploader_width = ref('')
const uploaderStyle = ref({})
const has_image = ref(false)
const uploader_image = ref('')
const afterRead = (event) => {
const { file } = event.detail;
console.warn(file);
has_image.value = true;
uploader_image.value = file.url
}
const removeUploadImage = () => {
has_image.value = false;
uploader_image.value = ''
}
/**********************************/
onMounted(() => {
nextTick(() => {
setTimeout(() => {
// 获取元素宽度
wx.createSelectorQuery().selectAll('.uploader-title').boundingClientRect(function (rect) {
uploaderStyle.value = {
width: rect[0].width - 8 + 'px'
}
uploader_width.value = rect[0].width - 8 + 'px';
}).exec()
}, 100)
})
})
</script>
<script>
import "./index.less";
export default {
name: "createActivityPage",
};
</script>
<!--
* @Date: 2022-09-21 14:51:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 14:52:03
* @LastEditTime: 2022-09-21 16:13:17
* @FilePath: /swx/src/pages/my/index.vue
* @Description: 文件描述
-->
......
/*
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-20 10:18:33
* @LastEditTime: 2022-09-21 16:12:09
* @FilePath: /swx/vantComponentConf.js
* @Description: 文件描述
*/
......