Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
You need to sign in or sign up before continuing.
hookehuyr
dde019fb 1 parent 85c5e7e7

新增搜索用户和添加成员页面

Inline Side-by-side
Showing 8 changed files with 360 additions and 2 deletions
...@@ -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-10-09 11:48:35 5 + * @LastEditTime: 2022-10-09 14:37:45
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -39,6 +39,8 @@ export default { ...@@ -39,6 +39,8 @@ export default {
39 'pages/projectManage/index', 39 'pages/projectManage/index',
40 'pages/createProject/index', 40 'pages/createProject/index',
41 'pages/userManage/index', 41 'pages/userManage/index',
42 + 'pages/userAdd/index',
43 + 'pages/userSearch/index',
42 ], 44 ],
43 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 45 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
44 { 46 {
......
1 +export default {
2 + navigationBarTitleText: '添加成员',
3 + usingComponents: {
4 + },
5 +}
1 +.user-search-page {
2 + position: relative;
3 + .list-item {
4 + background-color: white;
5 + padding: 0.75rem;
6 + border-radius: 0.65rem;
7 + position: relative;
8 + margin-bottom: 1rem;
9 + .avatar {
10 + width: 100%;
11 + height: 5rem;
12 + background-size: cover;
13 + background-repeat: no-repeat;
14 + background-position: center;
15 + border-radius: 0.5rem;
16 + }
17 + .content {
18 + padding: 0.5rem 1rem;
19 + .title {
20 + font-size: 1.25rem;
21 + }
22 + .phone {
23 + color: #199A74;
24 + margin-top: 0.5rem;
25 + }
26 + }
27 + }
28 +}
1 +<!--
2 + * @Date: 2022-09-19 14:11:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-10-09 15:24:04
5 + * @FilePath: /swx/src/pages/userSearch/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view class="user-search-page">
10 + <view style="padding: 5%; background-color: #FFFFFF; position: fixed; z-index: 1; width: 90%;">
11 + <view style="border: 1px solid #199A74; border-radius: 1rem;">
12 + <van-row>
13 + <van-col span="20">
14 + <view style="padding: 0.5rem 1rem;">
15 + <input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput"
16 + placeholder="请输入用户名姓名/昵称/手机号查找" />
17 + </view>
18 + </van-col>
19 + <van-col span="4">
20 + <view
21 + style="background-color: #199A74; border-top-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem; text-align: center;">
22 + <van-icon name="search" size="2.25rem" color="white" style="margin-top: 2px;" />
23 + </view>
24 + </van-col>
25 + </van-row>
26 + </view>
27 + </view>
28 + <view style="height: 5rem;"></view>
29 + <view style="padding: 1rem;">
30 + <view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
31 + <van-row>
32 + <van-col span="6">
33 + <view class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"></view>
34 + </van-col>
35 + <van-col span="14">
36 + <view class="content">
37 + <view class="title">{{ item.name }}</view>
38 + <view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)">
39 + <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
40 + {{ item.phone }}
41 + </view>
42 + </view>
43 + </van-col>
44 + <van-col span="4">
45 + <view style="margin-top: 0.5rem;">
46 + <van-tag v-if="item.status === '1'" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配
47 + </van-tag>
48 + <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag>
49 + </view>
50 + </van-col>
51 + </van-row>
52 + <view style="position: absolute; right: 0; bottom: 0.75rem;">
53 + <view @tap="addUser"
54 + 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;">
55 + 添加成员</view>
56 + </view>
57 + </view>
58 + </view>
59 + </view>
60 + <van-dialog id="van-dialog" />
61 +
62 +</template>
63 +
64 +<script setup>
65 +import Taro from '@tarojs/taro'
66 +import { ref } from "vue";
67 +import icon_tel from '@/images/icon/tel@2x.png'
68 +import Dialog from '@vant/weapp/dist/dialog/dialog';
69 +
70 +const value1 = ref('')
71 +const bindKeyInput = (e) => {
72 + value1.value = e.detail.value;
73 +}
74 +
75 +const activityList = ref([{
76 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
77 + name: '净妙',
78 + phone: '18789800786',
79 + status: '1',
80 +}, {
81 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
82 + name: '人在路途',
83 + phone: '18789800786',
84 + status: '2',
85 +}, {
86 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
87 + name: '寒潭秋月心如洗',
88 + phone: '18789800786',
89 + status: '3',
90 +}, {
91 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
92 + name: '净妙',
93 + phone: '18789800786',
94 + status: '1',
95 +}, {
96 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
97 + name: '人在路途',
98 + phone: '18789800786',
99 + status: '2',
100 +}, {
101 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
102 + name: '寒潭秋月心如洗',
103 + phone: '18789800786',
104 + status: '3',
105 +}, {
106 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
107 + name: '人在路途',
108 + phone: '18789800786',
109 + status: '2',
110 +}, {
111 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
112 + name: '寒潭秋月心如洗',
113 + phone: '18789800786',
114 + status: '3',
115 +}])
116 +
117 +const onPhoneClick = (number) => {
118 + Taro.makePhoneCall({
119 + phoneNumber: number
120 + })
121 +}
122 +
123 +const addUser = () => {
124 + Dialog.confirm({
125 + title: '温馨提示',
126 + message: '是否确认添加成员？',
127 + // confirmButtonColor: '#199A74'
128 + })
129 + .then(() => {
130 + // on confirm
131 + })
132 + .catch(() => {
133 + // on cancel
134 + });
135 +}
136 +</script>
137 +
138 +<script>
139 +import "./index.less";
140 +
141 +export default {
142 + name: "demoPage",
143 +};
144 +</script>
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-10-09 14:36:51 4 + * @LastEditTime: 2022-10-09 15:18:22
5 * @FilePath: /swx/src/pages/userManage/index.vue 5 * @FilePath: /swx/src/pages/userManage/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
......
1 +/*
2 + * @Date: 2022-10-09 14:36:35
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-10-09 14:44:25
5 + * @FilePath: /swx/src/pages/userSearch/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '搜索用户',
10 + usingComponents: {
11 + },
12 +}
1 +.user-search-page {
2 + position: relative;
3 + .list-item {
4 + background-color: white;
5 + padding: 0.75rem;
6 + border-radius: 0.65rem;
7 + position: relative;
8 + margin-bottom: 1rem;
9 + .avatar {
10 + width: 100%;
11 + height: 5rem;
12 + background-size: cover;
13 + background-repeat: no-repeat;
14 + background-position: center;
15 + border-radius: 0.5rem;
16 + }
17 + .content {
18 + padding: 0.5rem 1rem;
19 + .title {
20 + font-size: 1.25rem;
21 + }
22 + .phone {
23 + color: #199A74;
24 + margin-top: 0.5rem;
25 + }
26 + }
27 + }
28 +}
1 +<!--
2 + * @Date: 2022-09-19 14:11:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-10-09 15:24:04
5 + * @FilePath: /swx/src/pages/userSearch/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view class="user-search-page">
10 + <view style="padding: 5%; background-color: #FFFFFF; position: fixed; z-index: 1; width: 90%;">
11 + <view style="border: 1px solid #199A74; border-radius: 1rem;">
12 + <van-row>
13 + <van-col span="20">
14 + <view style="padding: 0.5rem 1rem;">
15 + <input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput" placeholder="请输入用户名姓名/昵称/手机号查找" />
16 + </view>
17 + </van-col>
18 + <van-col span="4">
19 + <view style="background-color: #199A74; border-top-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem; text-align: center;">
20 + <van-icon name="search" size="2.25rem" color="white" style="margin-top: 2px;" />
21 + </view>
22 + </van-col>
23 + </van-row>
24 + </view>
25 + </view>
26 + <view style="height: 5rem;"></view>
27 + <view style="padding: 1rem;">
28 + <view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
29 + <van-row>
30 + <van-col span="6">
31 + <view class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"></view>
32 + </van-col>
33 + <van-col span="14">
34 + <view class="content">
35 + <view class="title">{{ item.name }}</view>
36 + <view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)">
37 + <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
38 + {{ item.phone }}
39 + </view>
40 + </view>
41 + </van-col>
42 + <van-col span="4">
43 + <view style="margin-top: 0.5rem;">
44 + <van-tag v-if="item.status === '1'" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配</van-tag>
45 + <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag>
46 + </view>
47 + </van-col>
48 + </van-row>
49 + <view style="position: absolute; right: 0; bottom: 0.75rem;">
50 + <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>
51 + </view>
52 + </view>
53 + </view>
54 + </view>
55 + <van-dialog id="van-dialog" />
56 +
57 +</template>
58 +
59 +<script setup>
60 +import Taro from '@tarojs/taro'
61 +import { ref } from "vue";
62 +import icon_tel from '@/images/icon/tel@2x.png'
63 +import Dialog from '@vant/weapp/dist/dialog/dialog';
64 +
65 +const value1 = ref('')
66 +const bindKeyInput = (e) => {
67 + value1.value = e.detail.value;
68 +}
69 +
70 +const activityList = ref([{
71 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
72 + name: '净妙',
73 + phone: '18789800786',
74 + status: '1',
75 +}, {
76 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
77 + name: '人在路途',
78 + phone: '18789800786',
79 + status: '2',
80 +}, {
81 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
82 + name: '寒潭秋月心如洗',
83 + phone: '18789800786',
84 + status: '3',
85 +}, {
86 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
87 + name: '净妙',
88 + phone: '18789800786',
89 + status: '1',
90 +}, {
91 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
92 + name: '人在路途',
93 + phone: '18789800786',
94 + status: '2',
95 +}, {
96 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
97 + name: '寒潭秋月心如洗',
98 + phone: '18789800786',
99 + status: '3',
100 +}, {
101 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
102 + name: '人在路途',
103 + phone: '18789800786',
104 + status: '2',
105 +}, {
106 + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
107 + name: '寒潭秋月心如洗',
108 + phone: '18789800786',
109 + status: '3',
110 +}])
111 +
112 +const onPhoneClick = (number) => {
113 + Taro.makePhoneCall({
114 + phoneNumber: number
115 + })
116 +}
117 +
118 +const addUser = () => {
119 + Dialog.confirm({
120 + title: '温馨提示',
121 + message: '是否确认添加成员？',
122 + // confirmButtonColor: '#199A74'
123 + })
124 + .then(() => {
125 + // on confirm
126 + })
127 + .catch(() => {
128 + // on cancel
129 + });
130 +}
131 +</script>
132 +
133 +<script>
134 +import "./index.less";
135 +
136 +export default {
137 + name: "demoPage",
138 +};
139 +</script>