0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
pages/tabbar/components/member/layout.vue Normal file
View File

@@ -0,0 +1,233 @@
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
<template>
<view class="content">
<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
<z-paging ref="paging" use-virtual-list :force-close-inner-list="true" :paging-style="{ paddingTop: paddingTop + 'px', paddingBottom: paddingBottom + 'rpx' }" cell-height-mode="dynamic" @virtualListChange="virtualListChange" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
<template #top>
<nav-bar :title="title" @initNav="initNav">
<template v-if="$slots.navLeft" #left>
<slot name="navLeft"></slot>
</template>
<template v-if="$slots.navContent" #content>
<slot name="navContent"></slot>
</template>
</nav-bar>
</template>
<view>
<slot name="top"></slot>
</view>
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
<view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList">
<view-item :index="index" :item="item" @onLongPress="onLongPress"></view-item>
</view>
</z-paging>
<view class="shade" v-show="showShade" @tap="hidePop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
</view>
</view>
</view>
</template>
<script>
import NavBar from '@/pages/tabbar/components/member/navBar.vue';
import ViewItem from '@/pages/tabbar/components/member/viewItem.vue';
import UserApi from '@/sheep/api/member/user';
export default {
components: {
NavBar,
ViewItem,
},
props: {
title: {
type: String,
default: '',
}
},
data() {
return {
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
virtualList: [],
winSize: {},
/* 显示遮罩 */
showShade: false,
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ["标为关注", "置顶聊天", "删除该聊天"],
/* 弹窗定位样式 */
popStyle: "",
/* 选择的用户下标 */
pickerUserIndex: -1,
paddingTop: 0,
paddingBottom: 100,
navSwiper: false,
navSwiperH: 80,
navNotice: false,
navNoticeH: 90,
height: 0,
}
},
methods: {
initNav(e) {
this.height = e.height;
this.paddingTop = this.height;
if(this.navSwiper){
this.paddingTop = this.paddingTop + this.navSwiperH;
}
if(this.navNotice){
this.paddingTop = this.paddingTop + this.navNoticeH;
}
},
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
virtualListChange(vList) {
this.virtualList = vList;
},
queryList(pageNo, pageSize) {
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
const params = {
pageNo: pageNo,
pageSize: pageSize,
random: this.tabIndex === 1
}
UserApi.getUserPage(params).then(res => {
// 将请求的结果数组传递给z-paging
this.$refs.paging.complete(res.data.list);
}).catch(res => {
// 如果请求失败写this.$refs.paging.complete(false);
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
})
},
/* 获取窗口尺寸 */
getWindowSize() {
uni.getSystemInfo({
success: (res) => {
this.winSize = {
"witdh": res.windowWidth,
"height": res.windowHeight
}
}
})
},
/* 长按监听 */
onLongPress(e) {
let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`;
} else {
style = `top:${touches.clientY}px;`;
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`;
} else {
style += `left:${touches.clientX}px`;
}
this.popStyle = style;
this.pickerUserIndex = Number(index);
this.showShade = true;
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10);
});
},
/* 隐藏弹窗 */
hidePop() {
this.showPop = false;
this.pickerUserIndex = -1;
setTimeout(() => {
this.showShade = false;
}, 250);
},
/* 选择菜单 */
pickerMenu(e) {
let index = Number(e.currentTarget.dataset.index);
console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
// 在这里开启你的代码秀
uni.showToast({
title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
icon: "none",
mask: true,
duration: 600
});
/*
因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
*/
this.hidePop();
},
}
}
</script>
<style lang="scss" scoped>
.item {
background-color: #fff;
}
/* 遮罩 */
.shade {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-touch-callout: none;
.pop {
position: fixed;
z-index: 101;
width: 260rpx;
box-sizing: border-box;
font-size: 28upx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80upx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
</style>

94
pages/tabbar/components/member/navBar.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<view>
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
<view>
<view class="nav-box">
<view class="action">
<slot v-if="$slots.left" name="left"></slot>
</view>
<slot v-if="$slots.content" name="content"></slot>
<view class="title" v-else>
<text class="nickname">{{title}}</text>
</view>
</view>
<view>
<slot name="card-swiper"></slot>
</view>
<view>
<slot name="card-notice"></slot>
</view>
</view>
</tui-navigation-bar>
</view>
</template>
<script>
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
export default {
components: {
tuiNavigationBar,
},
props: {
title: {
type: String,
default: '',
},
},
data() {
return {
top: 0, //标题图标距离顶部距离
opacity: 1,
height: 0,
scrollTop: 0.5,
}
},
methods: {
initNavigation(e) {
this.height = e.height;
this.opacity = e.opacity;
this.top = e.top;
this.$emit('initNav', e);
},
opacityChange(e) {
this.opacity = e.opacity;
},
}
}
</script>
<style lang="scss" scoped>
.nav-box {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
flex-direction: column;
font-size: 22rpx;
position: relative;
.title {
justify-content: center;
align-items: center;
text-align: center;
display: flex;
width: 100%;
font-size: 32rpx;
}
.action {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
padding: 0 5px;
align-items: center;
width: 50px;
}
}
</style>

216
pages/tabbar/components/member/viewItem.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<view>
<!-- 用户消息 -->
<view class="msg-list" @click="toChat(item)" :data-index="index">
<view class="msg-user">
<view class="avatar">
<image class="img" :src="item.avatar"></image>
<view class="badge"></view>
</view>
<view class="content">
<view class="text-black">
<view class="text-nickname">
<view class="nickname">{{item.nickname}}</view>
<view class="sex-badge" v-if="item.sex == 1">
<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
</view>
<view class="sex-man" v-if="item.sex == 0">
<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
</view>
<image class="vip-img" src="@/static/images/vip.png"></image>
</view>
<text class="time">19:39</text>
</view>
<view class="text-gray">
<view class="text-msg">
<view>[已读]</view>
<view>希望打个赏哦</view>
</view>
<view v-if="item.slashed == 1">
<u-icon name="bell-slash" custom-prefix="iconfont"></u-icon>
</view>
<view v-else>
<view v-if="item.unreadMessageCount > 0">
<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
import ImConversationApi from '@/sheep/api/im/memberConversation';
export default {
components: {
tuiBadge,
},
props: {
index: {
type: Number,
default: -1,
},
item: {
type: Object,
default: function() {
return {
dd: '',
}
}
}
},
data() {
return {
}
},
methods: {
toChat(e) {
ImConversationApi.createMemberConversation({
userId: e.id,
groupType: 1,
lastMessageContentType: 1,
}).then(res => {
this.$u.route({
url: 'pages/im/index',
params: {
groupId: res.data,
receiveUserId: e.id,
}
});
});
},
}
}
</script>
<style lang="scss" scoped>
.msg-list {
display: flex;
padding: 15px;
.msg-user{
display: flex;
align-items: center;
flex: 1;
.avatar {
width: 88rpx;
height: 88rpx;
position: relative;
.img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.badge {
width: 20rpx;
height: 20rpx;
top: 0;
right: 0;
border: 1px solid #fff;
position: absolute;
background-color: #dd514c;
border-radius: 85px;
}
}
.content {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 10px;
.new {
width: 14rpx;
height: 14rpx;
background-color: #dd514c;
border-radius: 85px;
}
.text-black {
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-between;
color: #333333;
margin-bottom: 8rpx;
.tag {
margin-right: 5px;
}
.time {
color: #aaaaaa;
font-size: 24rpx;
}
.text-nickname {
display: flex;
align-items: center;
}
}
.text-gray {
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
color: #aaaaaa;
.text-msg {
display: flex;
align-items: center;
}
}
}
}
}
.green {
color: #735fed;
}
.sex-badge {
display: flex;
align-items: center;
justify-content: center;
background-color: #e03997;
color: #ffffff;
border-radius: 3px;
font-size: 8px;
height: 30rpx;
width: 30rpx;
margin: 0 10rpx;
}
.sex-man {
display: flex;
align-items: center;
justify-content: center;
background-color: #0081ff;
color: #ffffff;
border-radius: 3px;
font-size: 8px;
height: 30rpx;
width: 30rpx;
margin: 0 10rpx;
}
.vip-img {
width: 34rpx;
height: 34rpx;
}
.svip-img {
width: 60rpx;
height: 30rpx;
}
</style>