index.vue
5.2 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 13:47:07
* @FilePath: /swx/src/pages/myCreateActivity/index.vue
* @Description: 文件描述
-->
<template>
<div class="my-create-activity-page">
<view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
<view style="height: 4rem; padding: 1rem;">
<van-row>
<van-col span="18">
<view style="position: relative;">
<AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
<view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
<text style="font-size: 1.05rem;">周三读书会（主办方）</text>
<van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
</view>
</view>
</van-col>
<van-col span="6">
<view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
</van-col>
</van-row>
</view>
<view class="my-create-activity-header">
<view class="activity-title">
<view class="box">
<text class="bg-gradient" style="font-size: 1.15rem;">活动统计</text>
</view>
</view>
<view class="header-info">
<view class="activity">
<view><text style="font-size: 1.25rem;">5</text>场</view>
<view>
<van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
<text style="font-size: 0.9rem; color: #999999;">活动总数</text>
</view>
</view>
<view class="job">
<text style="font-size: 1.25rem;">24</text>人
<view>
<van-icon :name="icon_job" size="1.25rem" color="" style="vertical-align: sub;" />
<text style="font-size: 0.9rem; color: #999999;">岗位人数</text>
</view>
</view>
<view class="sign">
<view><text style="font-size: 1.25rem;">233</text>人</view>
<view>
<van-icon :name="icon_sign" size="1.25rem" color="" style="vertical-align: sub;" />
<text style="font-size: 0.9rem; color: #999999;">用户总数</text>
</view>
</view>
</view>
</view>
</view>
<view style="padding: 0 1rem;">
<view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
<view @tap="show_status_popup=true" style="float: left; color: #666666; font-size: 0.9rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem;">
{{ status_type === '' ? '全部' : status_type }}
<van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
</view>
</view>
<view style="">
<activity-card v-for="(item, index) in activity_list" :key="index" :data="item" status="edit" style="margin-bottom: 1rem;"></activity-card>
</view>
<view style="height: 3rem;"></view>
</view>
</div>
<!-- 切换状态弹出框 -->
<van-popup :show="show_status_popup" position="bottom" custom-style="height: 45%;" :lock-scroll="true">
<van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_type_columns"
toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel" @change="onStatusTypeChange" />
</van-popup>
</template>
<script setup>
import { ref } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
import Taro from '@tarojs/taro'
import { AtAvatar } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/avatar.scss"
import icon_join from '@/images/icon/baoming@2x.png'
import icon_job from '@/images/icon/yigong@2x.png'
import icon_sign from '@/images/icon/qiandao@2x.png'
import icon_sel2 from '@/images/icon/sel02@2x.png'
import activityCard from '@/components/activity-card.vue'
const show_status_popup = ref(false);
const status_type = ref('');
const status_type_columns = ref(['一个月之内', '三个月之内', '一年之内']);
const onStatusTypeChange = (event) => {
const { picker, value, index } = event.detail;
}
const onStatusTypeConfirm = (event) => {
const { picker, value, index } = event.detail;
show_status_popup.value = false;
status_type.value = value;
console.warn('查询新数据');
}
const onStatusTypeCancel = (event) => {
show_status_popup.value = false;
}
const activity_list = ref([{
title: '智慧没有烦恼',
address: '上海市杨浦区军工路100号A座05室',
}, {
title: '万人共乘浪漫热气球',
address: '',
}, {
title: '八段锦',
address: '',
}, {
title: '智慧没有烦恼',
address: '上海市杨浦区军工路100号A座05室',
}, {
title: '万人共乘浪漫热气球',
address: '',
}, {
title: '八段锦',
address: '',
}]);
</script>
<script>
import "./index.less";
export default {
name: "demoPage",
};
</script>