Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9ab1f050 1 parent 28fb0236

✨ feat(主办方管理): API联调，搜索功能放在页面上，废弃头部设计稿设计，联调添加/删除成员功能

Inline Side-by-side
Showing 2 changed files with 215 additions and 149 deletions
.my-create-activity-header {
background-color: white;
margin: 1rem;
padding: 0.5rem;
border-radius: 1rem;
.header-info {
display: flex;
text-align: center;
padding-bottom: 1rem;
margin-top: 0.5rem;
.activity {
flex: 1;
height: 50rpx;
line-height: 50rpx;
}
.job {
flex: 1;
border-right: 1px solid #F5F5F5;
border-left: 1px solid #F5F5F5;
height: 100rpx;
line-height: 50rpx;
}
.sign {
flex: 1;
height: 50rpx;
line-height: 50rpx;
.my-create-activity-page {
#page-header {
width: 100%;
background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png);
background-size: contain;
background-repeat: no-repeat;
.toolbar-box {
// background-color: white;
margin: 1rem 0;
padding: 1rem;
padding-bottom: 0;
border-radius: 1rem;
}
}
}
......@@ -71,4 +57,23 @@
margin-top: 0.5rem;
}
}
.handle-box {
position: absolute; right: 0; bottom: 0.75rem;
.add-user {
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;
}
.del-user {
color: #FFFFFF;
background-color: #E32525;
border-bottom-left-radius: 0.85rem;
border-top-left-radius: 0.85rem;
padding: 0.25rem 0.5rem 0.25rem 1rem;
font-size: 0.9rem;
}
}
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-10 14:39:20
* @LastEditTime: 2022-10-25 13:13:28
* @FilePath: /swx/src/pages/userManage/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 id="page-header">
<view style="height: 4rem; padding: 1rem;">
<van-row>
<van-col span="18">
......@@ -23,8 +23,8 @@
</van-col>
</van-row>
</view>
<view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
<view style="display: flex; text-align: center;">
<view class="toolbar-box">
<!-- <view style="display: flex; text-align: center;">
<view @tap="goToAddUser" style="flex: 1;">
<van-icon :name="icon_add" size="3.5rem" color="" style="vertical-align: middle;" />
<text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;添加成员</text>
......@@ -33,54 +33,72 @@
<van-icon :name="icon_user" size="3.5rem" color="" style="vertical-align: middle;" />
<text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;搜索用户</text>
</view>
</view> -->
<view style="border: 1px solid #199A74; border-radius: 2rem; background-color: #FFF;">
<van-row>
<van-col span="20">
<view style="padding: 0.7rem 1rem 0rem 1.5rem;">
<input :value="search" class="weui-input" @blur="bindKeyBlur" @input="bindKeyInput" placeholder="请输入用户名姓名/手机号查找" style="width: 100%;" />
</view>
</van-col>
<van-col span="4">
<view @tap="onSearch"
style="background-color: #199A74; border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; text-align: center; height: auto;">
<van-icon name="search" size="2.25rem" color="white" style="margin-top: 0.43rem;" />
</view>
</van-col>
</van-row>
</view>
</view>
</view>
<view class="list-wrapper" style="margin: 1rem;">
<view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
<view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
<view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
<view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">所有用户</view>
<view @tap="toggleColum('player')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">所有用户</view>
</view>
<view style="display: inline-block; line-height: 60rpx; position: relative;">
<view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">全部成员</view>
<view @tap="toggleColum('volunteer')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">全部成员</view>
</view>
</view>
<view>
<view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
<van-row>
<van-col span="6">
<view @tap="goToUserInfo()" 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 }}
<scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
<view>
<view v-for="(item, index) in member_list" :key="index" class="list-item" style="position: relative;">
<van-row>
<van-col span="6">
<view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar ? item.avatar : 'http://gyzs.onwall.cn/tou%402x.png'})`, 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>
</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>
</van-col>
<van-col span="4">
<view v-if="item.role === 'player'" style="margin-top: 0.5rem;">
<van-tag v-if="!item.partner" :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 class="handle-box">
<view v-if="item.role === 'player'" @tap="addUser(item)" class="add-user">添加成员</view>
<view v-if="item.role === 'volunteer'" @tap="delUser(item)" class="del-user">删除成员</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view style="height: 2rem;"></view>
</div>
<van-dialog id="van-dialog" />
<van-toast id="van-toast" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
// import icon_vip from '@/images/icon/vip@2x.png'
import icon_p from '@/images/icon/zhubanfang@2x.png'
import Taro from '@tarojs/taro'
import { AtAvatar } from 'taro-ui-vue3'
......@@ -89,93 +107,21 @@ import icon_tel from '@/images/icon/tel@2x.png'
import icon_add from '@/images/icon/chengyuan@2x.png'
import icon_user from '@/images/icon/yonghu@2x.png'
import Dialog from '@vant/weapp/dist/dialog/dialog';
import Toast from '@/components/vant-weapp/toast/toast';
let instance = Taro.getCurrentInstance();
const $query = ref('');
onMounted(() => {
onMounted(async () => {
// 获取页面参数
$query.value = instance.router.params;
})
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',
}])
const onPhoneClick = (number) => {
Taro.makePhoneCall({
phoneNumber: number
})
}
const activated = ref(1);
const toggleColum = (type) => {
if (type === 'activity') {
activityList.value = [{
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',
}];
activated.value = 1
} else {
activityList.value = [];
activated.value = 2
}
}
const goToUserInfo = () => {
Taro.navigateTo({
url: '../userInfo/index'
......@@ -184,13 +130,13 @@ const goToUserInfo = () => {
const goToAddUser = () => {
Taro.navigateTo({
url: '../userAdd/index'
url: '../userAdd/index?host_id=' + getCurrentPageParam().host_id
})
}
const goToSearchUser = () => {
Taro.navigateTo({
url: '../userSearch/index'
url: '../userSearch/index?host_id=' + getCurrentPageParam().host_id
})
}
......@@ -200,24 +146,139 @@ const editInfo = (id) => {
})
}
const addUser = () => {
Dialog.confirm({
title: '温馨提示',
message: '是否确认添加成员？',
// confirmButtonColor: '#199A74'
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
}
</script>
<script>
import "./index.less";
import { listMemberAPI, setRoleMemberAPI } from '@/api/Member/index';
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";
export default {
name: "demoPage",
name: "userManagePage",
mixins: [mixin.init],
async onShow () {
// 获取活动和轮播信息
const { code, data } = await listMemberAPI({ host_id: getCurrentPageParam().host_id, role: this.role, page: this.page, limit: this.limit });
if (code) {
this.member_list = data.member_list;
this.page = this.page + 1;
}
},
onHide () { // 离开当前页面
this.page = 0;
this.flag = true;
},
mounted () {
// 设置滚动列表可视高度
const windowHeight = wx.getSystemInfoSync().windowHeight;
setTimeout(async () => {
const headerHeight = await $('#page-header').height();
const navHeight = await $('#navbar-page').height();
this.scrollStyle = {
height: windowHeight - headerHeight - navHeight - 50 + 'px'
}
}, 500);
},
data() {
return {
member_list: [],
role: 'player',
flag: true,
page: 0,
limit: 10,
scrollStyle: { height: '1000rpx' },
activated: 1,
search: ''
};
},
methods: {
onSearch () {
this.member_list = [];
this.page = 0;
this.flag = true;
this.getList()
},
bindKeyBlur (e) {
this.search = e.detail.value;
this.onSearch()
},
bindKeyInput (e) {
this.search = e.detail.value;
if (!this.search) {
this.onSearch()
}
},
onScrollToLower () {
if(!this.flag){
return
}
this.flag = false;
this.getList();
},
async getList () {
// 获取推荐活动列表
const { code, data } = await listMemberAPI({ search: this.search, host_id: getCurrentPageParam().host_id, role: this.role, page: this.page, limit: this.limit });
if (code) {
if (data.member_list.length) {
this.member_list = this.member_list.concat(data.member_list);
this.page = this.page + 1;
this.flag = true;
} else {
Toast('没有数据')
}
}
},
toggleColum (type) {
if (type === 'player') {
this.activated = 1;
this.role = 'player';
} else {
this.activated = 2;
this.role = 'volunteer';
}
this.member_list = [];
this.flag = true;
this.page = 0;
this.getList();
},
addUser ({ id }) {
Dialog.confirm({
title: '温馨提示',
message: '是否确认添加成员？',
confirmButtonColor: '#199A74'
})
.then(async () => {
// 添加成员
const { code } = await setRoleMemberAPI({ i: id, role: 'volunteer' });
if (code) {
this.member_list.splice(this.member_list.findIndex(item => item.id === id), 1);
Toast.success('添加成功');
}
})
.catch(() => {
// on cancel
});
},
delUser ({ id }) {
Dialog.confirm({
title: '温馨提示',
message: '是否确认删除成员？',
confirmButtonColor: '#199A74'
})
.then(async () => {
// 删除成员
const { code } = await setRoleMemberAPI({ i: id, role: 'player' });
if (code) {
this.member_list.splice(this.member_list.findIndex(item => item.id === id), 1);
Toast.success('删除成功');
}
})
.catch(() => {
// on cancel
});
},
},
};
</script>
......