first commit
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 导航栏 -->
|
||||
<nav-bar title="发现"></nav-bar>
|
||||
|
||||
<!-- 通讯录列表 -->
|
||||
<list-item title="朋友圈" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
<view slot="right" class="p-1">
|
||||
<view class="position-relative" v-if="!notice.num">
|
||||
<text class="rounded-circle bg-danger position-absolute" style="width: 20rpx;height: 20rpx;top: 0;right: 0;"></text>
|
||||
</view>
|
||||
<badge v-if="notice.num" :value="notice.num"></badge>
|
||||
</view>
|
||||
</list-item>
|
||||
<divider></divider>
|
||||
<list-item title="扫一扫" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
<list-item title="摇一摇" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
<divider></divider>
|
||||
<list-item title="看一看" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
<list-item title="搜一搜" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
<divider></divider>
|
||||
<list-item title="购物" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import navBar from "@/components/ui/nav-bar.vue"
|
||||
import listItem from "@/components/ui/list-item.vue"
|
||||
import divider from "@/components/ui/divider.vue"
|
||||
import badge from "@/components/ui/badge.vue"
|
||||
import auth from '@/common/mixin/auth.js'
|
||||
|
||||
export default {
|
||||
mixins:[auth],
|
||||
components: {
|
||||
navBar,
|
||||
listItem,
|
||||
divider,
|
||||
badge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notice:{
|
||||
num: 1,
|
||||
userId:"lld",
|
||||
avatar:"/static/images/userpic.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<nav-bar title="微信(10)">
|
||||
</nav-bar>
|
||||
|
||||
<!-- 置顶列表 -->
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<media-list v-if="item.istop" :item="item" :index="index" @long="long"></media-list>
|
||||
</block>
|
||||
|
||||
<!-- 非置顶列表 -->
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<media-list v-if="!item.istop" :item="item" :index="index" @long="long"></media-list>
|
||||
</block>
|
||||
|
||||
<!-- 弹出层 -->
|
||||
<popup ref="extend" :bodyWidth="240" :bodyHeight="getMenusHeight">
|
||||
<view class="flex flex-column" style="width: 240rpx;" :style="getMenusStyle">
|
||||
<view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in menus" :key="index"
|
||||
@click="clickEvent(item.event)">
|
||||
<text class="font-md pl-3">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navBar from "@/components/ui/nav-bar.vue"
|
||||
import mediaList from "@/components/ui/media-list.vue"
|
||||
import popup from "@/components/ui/popup.vue"
|
||||
import auth from '@/common/mixin/auth.js'
|
||||
|
||||
export default {
|
||||
mixins:[auth],
|
||||
components: {
|
||||
navBar,
|
||||
mediaList,
|
||||
popup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
propIndex: -1,
|
||||
list: [{
|
||||
avatar: "/static/images/userpic.png",
|
||||
nickname: "lld",
|
||||
id: "lld",
|
||||
updateTime: 1657554934224,
|
||||
data: "我是lld",
|
||||
istop: true,
|
||||
noreadnum: 1
|
||||
},
|
||||
{
|
||||
avatar: "/static/images/userpic.png",
|
||||
nickname: "lld2",
|
||||
id: "lld2",
|
||||
updateTime: 1654962934000,
|
||||
data: "我是lld2",
|
||||
istop: false,
|
||||
noreadnum: 0
|
||||
},
|
||||
{
|
||||
avatar: "../../../static/images/userpic.png",
|
||||
nickname: "lld3",
|
||||
id: "lld3",
|
||||
updateTime: 1626018934000,
|
||||
data: "我是lld3",
|
||||
istop: true,
|
||||
noreadnum: 1
|
||||
}
|
||||
],
|
||||
|
||||
menus: [{
|
||||
name: "设为置顶",
|
||||
event: "setTop"
|
||||
},
|
||||
{
|
||||
name: "删除该聊天",
|
||||
event: "delChat"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
computed:{
|
||||
// 动态获取菜单高度
|
||||
getMenusHeight(){
|
||||
let H = 100
|
||||
return this.menus.length * H
|
||||
},
|
||||
// 获取菜单的样式
|
||||
getMenusStyle(){
|
||||
return `height: ${this.getMenusHeight}rpx;`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openExtend() {
|
||||
this.$refs.extend.show();
|
||||
},
|
||||
long({
|
||||
x,
|
||||
y,
|
||||
index
|
||||
}) {
|
||||
// 初始化 索引
|
||||
this.propIndex = index
|
||||
// 拿到当前对象
|
||||
let item = this.list[index]
|
||||
// 判断之前是否处于置顶状态
|
||||
this.menus[0].name = item.istop ? '取消置顶' : '设为置顶'
|
||||
this.$refs.extend.show(x, y)
|
||||
},
|
||||
// 分发菜单事件
|
||||
clickEvent(event){
|
||||
switch (event){
|
||||
case "setTop": // 置顶/取消置顶会话
|
||||
this.setTop()
|
||||
break;
|
||||
case "delChat": // 删除当前会话
|
||||
this.delChat()
|
||||
break;
|
||||
}
|
||||
this.$refs.extend.hide()
|
||||
},
|
||||
// 置顶/取消置顶会话
|
||||
setTop(){
|
||||
let item = this.list[this.propIndex]
|
||||
item.istop = !item.istop
|
||||
},
|
||||
// 删除当前会话
|
||||
delChat(){
|
||||
this.list.splice(this.propIndex,1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
166
l-im-app-imooc-master/l-im-app-imooc/pages/tabbar/mail/mail.vue
Normal file
166
l-im-app-imooc-master/l-im-app-imooc/pages/tabbar/mail/mail.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<nav-bar title="通讯录" :showBack="false" :showRight="false">
|
||||
|
||||
</nav-bar>
|
||||
|
||||
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'" :scroll-into-view="scrollInto">
|
||||
<!-- 通讯录列表 :showRight="item.id === 'friend' && applyCount > 0" -->
|
||||
<list-item v-for="(item,index) in topList" :title="item.title" :key="item.id" :cover="item.cover">
|
||||
</list-item>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<!-- 侧边导航条 -->
|
||||
<view class="position-fixed right-0 bottom-0 bg-light flex flex-column" :style="'top:' +top+ 'px'"
|
||||
style="width: 50rpx;">
|
||||
</view>
|
||||
|
||||
<!-- 侧边导航条 -->
|
||||
<!-- <view class="position-fixed right-0 bottom-0 bg-light flex flex-column" :style="'top:'+top+'px;'"
|
||||
style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
|
||||
<view class="flex-1 flex align-center justify-center" v-for="(item,index) in list.keys()" :key="index">
|
||||
<text class="font-sm text-muted">{{item}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="position-fixed rounded-circle bg-light border flex align-center justify-center" v-if="current"
|
||||
style="width: 150rpx;height: 150rpx;left: 300rpx;"
|
||||
:style="'top:'+modalTop+'px;'">
|
||||
<text class="font-lg">{{current}}</text>
|
||||
</view> -->
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navBar from "@/components/ui/nav-bar.vue"
|
||||
import listItem from "@/components/ui/list-item.vue"
|
||||
import auth from '@/common/mixin/auth.js'
|
||||
import badge from "@/components/ui/badge.vue"
|
||||
|
||||
export default {
|
||||
mixins:[auth],
|
||||
components: {
|
||||
navBar,
|
||||
listItem,
|
||||
badge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
friendRequestNum: 0,
|
||||
topList: [{
|
||||
id: "friend",
|
||||
title: "新的朋友",
|
||||
cover: "/static/images/mail/friend.png",
|
||||
path: "mail/apply-list/apply-list"
|
||||
},
|
||||
{
|
||||
id: "group",
|
||||
title: "群聊",
|
||||
cover: "/static/images/mail/group.png",
|
||||
path: "mail/group-list/group-list"
|
||||
},
|
||||
{
|
||||
id: "tag",
|
||||
title: "标签",
|
||||
cover: "/static/images/mail/tag.png",
|
||||
path: "mail/tag-list/tag-list"
|
||||
}
|
||||
],
|
||||
// list: new Map(),
|
||||
list:
|
||||
[{
|
||||
"letter": "A",
|
||||
"data": [
|
||||
"AAAAA微商",
|
||||
"a ",
|
||||
"澳门风云"
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "B",
|
||||
"data": [
|
||||
"宝贝",
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "C",
|
||||
"data": [
|
||||
"草原",
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "D",
|
||||
"data": []
|
||||
},
|
||||
{
|
||||
"letter": "E",
|
||||
"data": []
|
||||
},
|
||||
{
|
||||
"letter": "F",
|
||||
"data": []
|
||||
},
|
||||
{
|
||||
"letter": "G",
|
||||
"data": []
|
||||
},
|
||||
{
|
||||
"letter": "H",
|
||||
"data": [
|
||||
"黄飞鸿",
|
||||
"黄继光"
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "I",
|
||||
"data": [
|
||||
"ICON",
|
||||
"icc",
|
||||
"icc",
|
||||
"icc",
|
||||
"icc"
|
||||
]
|
||||
}
|
||||
]
|
||||
,
|
||||
|
||||
top: 0,
|
||||
scrollHeight: 0,
|
||||
scrollInto: '',
|
||||
current: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
onLoad() {
|
||||
let res = uni.getSystemInfoSync()
|
||||
this.top = res.statusBarHeight + uni.upx2px(90)
|
||||
this.scrollHeight = res.windowHeight - this.top
|
||||
},
|
||||
onShow() {
|
||||
},
|
||||
computed: {
|
||||
// 每个索引的高度
|
||||
itemHeight() {
|
||||
let count = this.list.size
|
||||
// debugger;
|
||||
if (count < 1) {
|
||||
return 0
|
||||
}
|
||||
return this.scrollHeight / count
|
||||
},
|
||||
modalTop(){
|
||||
return (this.scrollHeight - uni.upx2px(150)) / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
77
l-im-app-imooc-master/l-im-app-imooc/pages/tabbar/my/my.vue
Normal file
77
l-im-app-imooc-master/l-im-app-imooc/pages/tabbar/my/my.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 导航栏 -->
|
||||
<nav-bar bgColor="bg-white">
|
||||
<icon-button slot="right" :icon="'\ue6ed'"></icon-button>
|
||||
</nav-bar>
|
||||
|
||||
<list-item :cover="user.photo ? user.photo : '/static/images/userpic.jpg'"
|
||||
coverSize="120" :title="user.nickName" showRight @click="open('my/userinfo/userinfo')">
|
||||
<view class="flex flex-column">
|
||||
<text class="text-dark font-lg font-weight-bold">{{user.nickName}}</text>
|
||||
<text class="text-light-muted font mt-2">仿微信号：{{user.nickName}}</text>
|
||||
</view>
|
||||
<view slot="right">
|
||||
<text class="iconfont font-md text-light-muted"></text>
|
||||
</view>
|
||||
</list-item>
|
||||
|
||||
<divider></divider>
|
||||
|
||||
<list-item title="支付" showRight>
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
|
||||
<divider></divider>
|
||||
|
||||
<list-item title="相册" showRight
|
||||
@click="open()">
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
|
||||
<divider></divider>
|
||||
|
||||
<list-item title="设置" showRight @click="open('my/setting/setting')">
|
||||
<text slot="icon" class="iconfont font-lg py-1"></text>
|
||||
</list-item>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navBar from "@/components/ui/nav-bar.vue"
|
||||
import iconButton from "@/components/ui/icon-button.vue"
|
||||
import listItem from "@/components/ui/list-item.vue"
|
||||
import divider from "@/components/ui/divider.vue"
|
||||
import auth from '@/common/mixin/auth.js'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
navBar,
|
||||
listItem,
|
||||
iconButton,
|
||||
divider
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user:{
|
||||
nickName:"lld"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(path){
|
||||
uni.navigateTo({
|
||||
url: '/pages/'+path
|
||||
});
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user