Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
dde019fb 1 parent 85c5e7e7

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

Inline Side-by-side
Showing 8 changed files with 360 additions and 2 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-27 15:57:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 11:48:35
* @LastEditTime: 2022-10-09 14:37:45
* @FilePath: /swx/src/app.config.js
* @Description:
*/
......@@ -39,6 +39,8 @@ export default {
'pages/projectManage/index',
'pages/createProject/index',
'pages/userManage/index',
'pages/userAdd/index',
'pages/userSearch/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
export default {
navigationBarTitleText: '添加成员',
usingComponents: {
},
}
.user-search-page {
position: relative;
.list-item {
background-color: white;
padding: 0.75rem;
border-radius: 0.65rem;
position: relative;
margin-bottom: 1rem;
.avatar {
width: 100%;
height: 5rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 0.5rem;
}
.content {
padding: 0.5rem 1rem;
.title {
font-size: 1.25rem;
}
.phone {
color: #199A74;
margin-top: 0.5rem;
}
}
}
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 15:24:04
* @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="14">
<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="4">
<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>
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 14:36:51
* @LastEditTime: 2022-10-09 15:18:22
* @FilePath: /swx/src/pages/userManage/index.vue
* @Description: 文件描述
-->
......
/*
* @Date: 2022-10-09 14:36:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 14:44:25
* @FilePath: /swx/src/pages/userSearch/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '搜索用户',
usingComponents: {
},
}
.user-search-page {
position: relative;
.list-item {
background-color: white;
padding: 0.75rem;
border-radius: 0.65rem;
position: relative;
margin-bottom: 1rem;
.avatar {
width: 100%;
height: 5rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 0.5rem;
}
.content {
padding: 0.5rem 1rem;
.title {
font-size: 1.25rem;
}
.phone {
color: #199A74;
margin-top: 0.5rem;
}
}
}
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 15:24:04
* @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="14">
<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="4">
<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>