From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 16 十月 2024 15:59:38 +0800
Subject: [PATCH] 代码初始化
---
h5/pages/staff/memberSel.vue | 448 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 258 insertions(+), 190 deletions(-)
diff --git a/h5/pages/staff/memberSel.vue b/h5/pages/staff/memberSel.vue
index 2cdf735..8405ca0 100644
--- a/h5/pages/staff/memberSel.vue
+++ b/h5/pages/staff/memberSel.vue
@@ -1,216 +1,284 @@
<template>
- <view class="main_app">
- <view class="search_inp df_ac">
- <u-icon size="28" class="mr12" color="#B2B2B2" name="search" />
- <input type="text" placeholder="鎼滅储" placeholder-style="color: #999999;" />
- </view>
- <view class="member_list">
- <view class="line">
- <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
- <view class="content">
- <view class="info">
- <text class="name">name</text>
- <text class="tag">tag</text>
- </view>
- <view class="depart">xx绉戝</view>
- </view>
- <checkbox class="checkbox" />
- <text></text>
- </view>
- <view class="empty"></view>
- </view>
- <!-- -->
- <view class="sub_wrap">
- <view class="sel_mem">
- <text>宸查�夋嫨锛�</text>
- <view class="members">
- <text v-for="(item, i) in 100" :key="i">{{ item }}</text>
- </view>
- <image @click="isShowSelMem = true" class="open_icon" src="../../static/staff/renyuan_ic_open.png" mode=""></image>
- </view>
- <view class="btn" @click="onSubmit">纭(00/20)</view>
- </view>
- <!-- -->
- <u-popup :show="isShowSelMem" :round="12" mode="bottom" @close="isShowSelMem = false">
- <view class="modal">
- <view class="modal_header">
- <text class="status">宸查�夋嫨锛歺x浜�</text>
- <text class="btn" @click="isShowSelMem = false">纭</text>
- </view>
- <view class="modal_mem_list">
- <view class="line">
- <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
- <view class="content">
- <view class="info">
- <text class="name">name</text>
- </view>
- <view class="depart">xx绉戝</view>
- </view>
- <view class="btn">绉婚櫎</view>
- </view>
- </view>
- </view>
- </u-popup>
-
- </view>
+ <view class="main_app">
+ <view class="search_inp df_ac">
+ <image
+ class="mr12 search"
+ src="../../static/ic_search@2x.png"
+ mode="widthFix"
+ ></image>
+ <input
+ v-model="param.name"
+ @blur="initData()"
+ type="text"
+ placeholder="璇疯緭鍏ュ鍚嶈繘琛屾悳绱�"
+ placeholder-style="color: #999999;"
+ />
+ </view>
+ <view class="member_list">
+ <checkbox-group @change="changeMem">
+ <view v-for="item in memberList" :key="item.id" class="line">
+ <image v-if="item.faceImgFull" :src="item.faceImgFull" class="avatar" ></image>
+ <span v-else class="img_name">{{item.name && item.name.slice(0,1)}}</span>
+ <view class="content">
+ <view class="info">
+ <text class="name">{{ item.name }}</text>
+ <!-- <text class="tag">tag</text> -->
+ </view>
+ <view class="depart">{{ item.companyName }}</view>
+ </view>
+ <label>
+ <checkbox
+ :value="String(item.id)"
+ class="checkbox"
+ />
+ </label>
+ <text></text>
+ </view>
+ </checkbox-group>
+ <view class="empty"></view>
+ </view>
+ <!-- -->
+ <!-- <view class="sub_wrap">
+ <view class="sel_mem">
+ <text>宸查�夋嫨锛�</text>
+ <view class="members">
+ <text v-for="(item, i) in 100" :key="i">{{ item }}</text>
+ </view>
+ <image
+ @click="isShowSelMem = true"
+ class="open_icon"
+ src="../../static/staff/renyuan_ic_open.png"
+ mode=""
+ ></image>
+ </view>
+ <view class="btn" @click="onSubmit">纭(00/20)</view>
+ </view> -->
+ <!-- -->
+ <u-popup
+ :show="isShowSelMem"
+ :round="12"
+ mode="bottom"
+ @close="isShowSelMem = false"
+ >
+ <view class="modal">
+ <view class="modal_header">
+ <text class="status">宸查�夋嫨锛歺x浜�</text>
+ <text class="btn" @click="isShowSelMem = false">纭</text>
+ </view>
+ <view class="modal_mem_list">
+ <view class="line">
+ <image
+ src="../../static/logo@2x.png"
+ class="avatar"
+ mode=""
+ ></image>
+ <view class="content">
+ <view class="info">
+ <text class="name">name</text>
+ </view>
+ <view class="depart">xx绉戝</view>
+ </view>
+ <view class="btn">绉婚櫎</view>
+ </view>
+ </view>
+ </view>
+ </u-popup>
+ </view>
</template>
<script>
+import { findHiddenAreaMemberList } from '@/api'
export default {
- data() {
- return {
- memberList: [],
- selList: [],
+ data() {
+ return {
+ memberList: [],
+ selList: [],
+ param: {},
- isShowSelMem: false
- }
- },
- methods: {
- onSubmit() {
+ isShowSelMem: false
+ }
+ },
+ onLoad(option) {
+ this.$set(this.param, 'id', option.areaId || '')
+ this.initData()
+ },
+ methods: {
+ onSubmit() {
+ uni.navigateBack()
+ },
+ changeMem(e) {
+ console.log( e.detail.value[0]);
+ const id = Number(e.detail.value[0])
+ const item = this.memberList.find(i => i.id === id)
+ this.$eventBus.$emit('snapshotSel', item)
uni.navigateBack()
- }
- }
+ },
+ initData() {
+ const { param } = this
+ findHiddenAreaMemberList({
+ name: param.name,
+ id: param.id
+ }).then(res => {
+ this.memberList = res.data || []
+ })
+ }
+ }
};
</script>
<style lang="scss">
.modal {
- padding: 40rpx 30rpx;
- .modal_header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .status {
- font-weight: 600;
- }
- .btn {
- color: #279baa;
- }
- }
- .modal_mem_list {
- .line {
- display: flex;
- align-items: center;
- border-bottom: 1rpx solid #e5e5e5;
- padding: 30rpx 0;
- .avatar {
- width: 64rpx;
- height: 64rpx;
- border-radius: 50%;
- overflow: hidden;
- margin-right: 20rpx;
- }
- .content {
- flex: 1;
- .depart {
- font-size: 24rpx;
- color: #666666;
- }
- .info {
- display: flex;
- margin-bottom: 16rpx;
- .name {
- font-size: 30rpx;
- }
- }
- }
- .btn{
- width: 80rpx;
- height: 48rpx;
- line-height: 48rpx;
- text-align: center;
- font-size: 24rpx;
- color: #333333;
- border-radius: 4rpx;
- border: 1rpx solid #999999;
- }
- }
- }
+ padding: 40rpx 30rpx;
+ .modal_header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .status {
+ font-weight: 600;
+ }
+ .btn {
+ color: $uni-color-primary;
+ }
+ }
+ .modal_mem_list {
+ .line {
+ display: flex;
+ align-items: center;
+ border-bottom: 1rpx solid #e5e5e5;
+ padding: 30rpx 0;
+ .avatar {
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 20rpx;
+ }
+ .content {
+ flex: 1;
+ .depart {
+ font-size: 24rpx;
+ color: #666666;
+ }
+ .info {
+ display: flex;
+ margin-bottom: 16rpx;
+ .name {
+ font-size: 30rpx;
+ }
+ }
+ }
+ .btn {
+ width: 80rpx;
+ height: 48rpx;
+ line-height: 48rpx;
+ text-align: center;
+ font-size: 24rpx;
+ color: #333333;
+ border-radius: 4rpx;
+ border: 1rpx solid #999999;
+ }
+ }
+ }
}
.sub_wrap {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
- padding: 30rpx 30rpx 64rpx;
- .sel_mem {
- display: flex;
- align-items: center;
- .members {
- width: 500rpx;
- color: #4d98a7;
- white-space: nowrap;
- overflow: hidden; //鏂囨湰瓒呭嚭闅愯棌
- text-overflow: ellipsis;
- margin-right: 20rpx;
- }
- .open_icon {
- width: 44rpx;
- height: 44rpx;
- }
- }
- .btn {
- width: 690rpx;
- height: 88rpx;
- line-height: 88rpx;
- background: #279baa;
- border-radius: 44rpx;
- color: #fff;
- text-align: center;
- margin-top: 22rpx;
- }
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
+ padding: 30rpx 30rpx 64rpx;
+ .sel_mem {
+ display: flex;
+ align-items: center;
+ .members {
+ width: 500rpx;
+ color: $uni-color-primary;
+ white-space: nowrap;
+ overflow: hidden; //鏂囨湰瓒呭嚭闅愯棌
+ text-overflow: ellipsis;
+ margin-right: 20rpx;
+ }
+ .open_icon {
+ width: 44rpx;
+ height: 44rpx;
+ }
+ }
+ .btn {
+ width: 690rpx;
+ height: 88rpx;
+ line-height: 88rpx;
+ background: $uni-color-primary;
+ border-radius: 44rpx;
+ color: #fff;
+ text-align: center;
+ margin-top: 22rpx;
+ }
}
.member_list {
- .line {
- display: flex;
- align-items: center;
- border-bottom: 1rpx solid #e5e5e5;
- padding: 30rpx 0;
- .avatar {
+ .line {
+ display: flex;
+ align-items: center;
+ border-bottom: 1rpx solid #e5e5e5;
+ padding: 30rpx 0;
+ .avatar {
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 20rpx;
+ }
+ .img_name{
width: 64rpx;
height: 64rpx;
+ line-height: 64rpx;
+ text-align: center;
border-radius: 50%;
overflow: hidden;
margin-right: 20rpx;
+ background: $uni-color-primary;
+ color: #fff;
+ border: 1rpx solid $uni-color-primary;
}
- .content {
- flex: 1;
- .depart {
- font-size: 24rpx;
- color: #666666;
- }
- .info {
- display: flex;
- margin-bottom: 16rpx;
- .name {
- font-size: 30rpx;
- }
- .tag {
- font-size: 24rpx;
- border-radius: 4rpx;
- border: 1rpx solid #f62710;
- color: #f62710;
- padding: 0rpx 6rpx;
- margin-left: 8rpx;
- }
- }
- }
- }
- .empty {
- width: 100%;
- height: 280rpx;
- }
+ .content {
+ flex: 1;
+ .depart {
+ font-size: 24rpx;
+ color: #666666;
+ }
+ .info {
+ display: flex;
+ margin-bottom: 16rpx;
+ .name {
+ font-size: 30rpx;
+ }
+ .tag {
+ font-size: 24rpx;
+ border-radius: 4rpx;
+ border: 1rpx solid #f62710;
+ color: #f62710;
+ padding: 0rpx 6rpx;
+ margin-left: 8rpx;
+ }
+ }
+ }
+ }
+ .empty {
+ width: 100%;
+ height: 280rpx;
+ }
}
.search_inp {
- height: 72rpx;
- background: #f7f7f7;
- border-radius: 4rpx;
- padding-left: 16rpx;
- input {
- flex: 1;
- font-size: 28rpx;
- color: #333333;
- }
+ height: 72rpx;
+ background: #f7f7f7;
+ border-radius: 4rpx;
+ padding-left: 16rpx;
+ .search {
+ width: 28rpx;
+ }
+ input {
+ flex: 1;
+ font-size: 28rpx;
+ color: #333333;
+ }
}
</style>
--
Gitblit v1.9.3