Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
28fb0236 1 parent 0dee7289

页面废弃

Inline Side-by-side
Showing 2 changed files with 122 additions and 103 deletions
<!--
* @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
* @LastEditTime: 2022-10-25 13:07:53
* @FilePath: /swx/src/pages/userAdd/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;">
<view id="page-header" style="padding: 5%; background-color: #FFFFFF; z-index: 1; width: 90%;">
<view style="border: 1px solid #199A74; border-radius: 2rem;">
<van-row>
<van-col span="20">
<view style="padding: 0.5rem 1rem;">
<input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput"
placeholder="请输入用户名姓名/昵称/手机号查找" />
<view style="padding: 0.7rem 1rem 0rem 1.5rem;">
<input :value="search" class="weui-input" @input="bindKeyInput" placeholder="请输入用户名姓名/手机号查找" style="width: 100%;" />
</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 @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 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 }}
<scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
<view style="padding: 1rem;">
<view v-for="(item, index) in member_list" :key="index" class="list-item" style="position: relative;">
<van-row>
<van-col span="6">
<view 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 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 style="position: absolute; right: 0; bottom: 0.75rem;">
<view @tap="addUser(item)"
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>
</scroll-view>
</view>
<van-dialog id="van-dialog" />
<van-toast id="van-toast" />
</template>
<script setup>
......@@ -66,79 +66,98 @@ 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',
}])
import Toast from '@/components/vant-weapp/toast/toast';
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";
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: "userAddPage",
mixins: [mixin.init],
async onShow () {
},
onHide () { // 离开当前页面
this.page = 0;
this.flag = true;
},
mounted () {
// 设置滚动列表可视高度
const windowHeight = wx.getSystemInfoSync().windowHeight;
setTimeout(async () => {
const headerHeight = await $('#page-header').height();
this.scrollStyle = {
height: windowHeight - headerHeight + 'px'
}
}, 500);
},
data() {
return {
member_list: [],
role: 'player',
flag: true,
page: 0,
limit: 10,
scrollStyle: { height: '1000rpx' },
activated: 1,
search: '',
};
},
methods: {
onSearch () {
this.getList()
},
bindKeyInput (e) {
this.search = e.detail.value;
},
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('没有数据')
}
}
},
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
});
}
},
};
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 15:24:04
* @LastEditTime: 2022-10-25 12:59:30
* @FilePath: /swx/src/pages/userSearch/index.vue
* @Description: 文件描述
-->
......@@ -12,7 +12,7 @@
<van-row>
<van-col span="20">
<view style="padding: 0.5rem 1rem;">
<input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput" placeholder="请输入用户名姓名/昵称/手机号查找" />
<input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput" placeholder="请输入用户名姓名/手机号查找" />
</view>
</van-col>
<van-col span="4">
......