index.vue
3.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!--
* @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>