index.vue
4.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
134
135
136
137
138
139
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-03 15:53:45
* @FilePath: /swx/src/pages/userSearch/index.vue
* @Description: 文件描述
-->
<template>
<view class="user-search-page">
<view style="padding: 5%; background-color: #FFFFFF; position: fixed; z-index: 1; width: 90%;">
<view style="border: 1px solid #199A74; border-radius: 1rem;">
<van-row>
<van-col span="20">
<view style="padding: 0.5rem 1rem;">
<input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput" placeholder="请输入用户名姓名/手机号查找" />
</view>
</van-col>
<van-col span="4">
<view style="background-color: #199A74; border-top-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem; text-align: center;">
<van-icon name="search" size="2.25rem" color="white" style="margin-top: 2px;" />
</view>
</van-col>
</van-row>
</view>
</view>
<view style="height: 5rem;"></view>
<view style="padding: 1rem;">
<view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
<van-row>
<van-col span="6">
<view class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"></view>
</van-col>
<van-col span="13">
<view class="content">
<view class="title">{{ item.name }}</view>
<view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)">
<van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
{{ item.phone }}
</view>
</view>
</van-col>
<van-col span="5">
<view style="margin-top: 0.5rem;">
<van-tag v-if="item.status === '1'" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配</van-tag>
<van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag>
</view>
</van-col>
</van-row>
<view style="position: absolute; right: 0; bottom: 0.75rem;">
<view @tap="addUser" style="color: #FFFFFF; background-color: #199A74; border-bottom-left-radius: 0.85rem; border-top-left-radius: 0.85rem; padding: 0.25rem 0.5rem 0.25rem 1rem; font-size: 0.9rem;">成为义工</view>
</view>
</view>
</view>
</view>
<van-dialog id="van-dialog" />
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import icon_tel from '@/images/icon/tel@2x.png'
import Dialog from '@vant/weapp/dist/dialog/dialog';
const value1 = ref('')
const bindKeyInput = (e) => {
value1.value = e.detail.value;
}
const activityList = ref([{
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '净妙',
phone: '18789800786',
status: '1',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '净妙',
phone: '18789800786',
status: '1',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}])
const onPhoneClick = (number) => {
Taro.makePhoneCall({
phoneNumber: number
})
}
const addUser = () => {
Dialog.confirm({
title: '温馨提示',
message: '是否确认成为义工？',
// confirmButtonColor: '#199A74'
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
}
</script>
<script>
import "./index.less";
export default {
name: "demoPage",
};
</script>