zianxin/Friendship-and-chat-uniapp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:收藏页；发布朋友圈；暗色主题调整

Browse Source
This commit is contained in:
ctw committed 2025-11-17 17:57:18 +08:00
1 parent 36947f692d
commit b620d5c71d
19 files changed
+757 -864
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/main.scss
+2 -6
View File
@@ -11,11 +11,7 @@ page {
body,
html {
user-select: none;
background-color: $color-background;
color: $color-text;
background-color: #222222;
color: #ffffff;
font-size: 14px;
}
:root {
--van-back-top-background: red;
}
src/main.ts
+19 -2
View File
@@ -1,16 +1,33 @@
import App from './App.vue';
import { createSSRApp } from 'vue';
import { createSSRApp, h, defineComponent } from 'vue';
// @ts-ignore
import { setupPinia } from './sheep/store';
import './main.scss';
import 'virtual:uno.css';
import Vant from 'vant';
import 'vant/lib/index.css';
import { ConfigProvider } from 'vant';
// 自定义vant组件颜色变量
const THEME_VARS = {
primaryColor: '#ffcd32',
primaryColorDark: '#ffcd32',
primaryColorLight: '#ffcd32',
tabsBottomBarColor: '#ffcd32',
};
const AppWithConfigProvider = defineComponent({
setup() {
return () =>
h(ConfigProvider, { theme: 'dark', themeVars: THEME_VARS }, { default: () => h(App) });
},
});
export function createApp() {
const app = createSSRApp(App);
const app = createSSRApp(AppWithConfigProvider);
setupPinia(app);
app.use(Vant);
app.use(ConfigProvider);
return {
app,
};
src/pages.json
+7
View File
@@ -77,6 +77,13 @@
"navigationBarTitleText": "修改资料",
"navigationStyle": "custom"
}
},
{
"path": "like",
"style": {
"navigationBarTitleText": "喜欢",
"navigationStyle": "custom"
}
}
]
},
src/pages/home/city.vue
+25 -27
View File
@@ -1,34 +1,32 @@
<template>
<van-config-provider theme="dark">
<van-nav-bar title="城市" fixed z-index="10">
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
</van-nav-bar>
<van-nav-bar title="城市" fixed z-index="10">
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
</van-nav-bar>
<view class="mt-100rpx">
<van-search v-model="cityName" shape="round" background="#222222" placeholder="搜索" />
</view>
<view class="mt-100rpx">
<van-search v-model="cityName" shape="round" background="#222222" placeholder="搜索" />
</view>
<view class="px-3 text-sm">热门城市</view>
<view class="flex flex-wrap gap-3 my-3 mx-4">
<text
v-for="(item, index) in hotCity"
:key="index"
class="bg-color-light text-color-theme px-2 rounded-1"
@click.stop="selectHot(item)"
>
{{ item.t }}
</text>
</view>
<view class="px-3 text-sm">热门城市</view>
<view class="flex flex-wrap gap-3 my-3 mx-4">
<text
v-for="(item, index) in hotCity"
:key="index"
class="bg-color-light text-color-theme px-2 rounded-1"
@click.stop="selectHot(item)"
>
{{ item.t }}
</text>
</view>
<van-index-bar highlight-color="#ffcd32" :sticky-offset-top="46">
<template v-for="(item, index) in cityIndex" :key="index">
<van-index-anchor :index="item.letter" />
<van-cell v-for="(v, i) in item.data" :key="i" :title="v.t" @click.stop="select(v)" />
</template>
</van-index-bar>
</van-config-provider>
<van-index-bar highlight-color="#ffcd32" :sticky-offset-top="46">
<template v-for="(item, index) in cityIndex" :key="index">
<van-index-anchor :index="item.letter" />
<van-cell v-for="(v, i) in item.data" :key="i" :title="v.t" @click.stop="select(v)" />
</template>
</van-index-bar>
</template>
<script lang="ts">
src/pages/home/detail.vue
+80 -82
View File
@@ -1,97 +1,95 @@
<template>
<van-config-provider theme="dark">
<van-nav-bar title="">
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
<view class="flex items-center" :style="navUserInfoStyle">
<image class="size-70rpx bg-#333 rounded-full mr-1" src="" mode="scaleToFill" />
<text class="truncate">稍后发非麻烦咖啡</text>
<van-nav-bar title="">
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
<view class="flex items-center" :style="navUserInfoStyle">
<image class="size-70rpx bg-#333 rounded-full mr-1" src="" mode="scaleToFill" />
<text class="truncate">稍后发非麻烦咖啡</text>
</view>
</template>
<template #right>
<view class="flex items-center">
<view class="py-1 px-2 text-xs bg-color-theme-dark rounded-full mr-3">
365.56km · 在线
</view>
</template>
<template #right>
<view class="flex items-center">
<view class="py-1 px-2 text-xs bg-color-theme-dark rounded-full mr-3">
365.56km · 在线
</view>
<uni-icons type="more-filled" size="28" color="#ffcd32"></uni-icons>
</view>
</template>
</van-nav-bar>
<uni-icons type="more-filled" size="28" color="#ffcd32"></uni-icons>
</view>
</template>
</van-nav-bar>
<scroll-view
style="height: calc(100vh - 100rpx)"
scroll-y
refresher-enabled
refresher-background="#222"
:refresher-triggered="refresherTriggered"
:refresher-threshold="100"
@refresherrefresh="onRefresherRefresh"
@refresherabort="onRefresherAbort"
@scrolltolower="onScrollToLower"
@scroll="onScroll"
>
<view class="w-full h-600rpx relative">
<scroll-view
style="height: calc(100vh - 100rpx)"
scroll-y
refresher-enabled
refresher-background="#222"
:refresher-triggered="refresherTriggered"
:refresher-threshold="100"
@refresherrefresh="onRefresherRefresh"
@refresherabort="onRefresherAbort"
@scrolltolower="onScrollToLower"
@scroll="onScroll"
>
<view class="w-full h-600rpx relative">
<image
class="w-full h-full absolute inset-0"
src="http://dummyimage.com/100x100/ac0ee3"
mode="aspectFill"
/>
<view class="absolute bottom-40rpx left-0 right-0 flex flex-col items-center z-100 w-full">
<image
class="w-full h-full absolute inset-0"
class="text-center size-150rpx rounded-full bg-#333 mb-20rpx"
src="http://dummyimage.com/100x100/ac0ee3"
mode="aspectFill"
/>
<view class="absolute bottom-40rpx left-0 right-0 flex flex-col items-center z-100 w-full">
<image
class="text-center size-150rpx rounded-full bg-#333 mb-20rpx"
src="http://dummyimage.com/100x100/ac0ee3"
mode="aspectFill"
/>
<view class="text-sm mb-20rpx">{{ '啊发发' }}</view>
<view class="bg-color-theme text-sm c-black px-2 rounded-1 mb-20rpx">真人认证</view>
<view class="flex flex-wrap justify-center mb-20rpx">
<text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">女·23岁</text>
<text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">170cm</text>
</view>
<view class="text-sm">{{ '发哈夫哈佛哈维合法i凤凰网你' }}</view>
<view class="text-sm mb-20rpx">{{ '啊发发' }}</view>
<view class="bg-color-theme text-sm c-black px-2 rounded-1 mb-20rpx">真人认证</view>
<view class="flex flex-wrap justify-center mb-20rpx">
<text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">女·23岁</text>
<text class="px-2 rounded-1 mr-2 text-sm bg-#222 text-color-theme">170cm</text>
</view>
<view class="absolute z-10 top-0 left-0 size-full bg-#33333333" :style="filterStyle"></view>
<view class="text-sm">{{ '发哈夫哈佛哈维合法i凤凰网你' }}</view>
</view>
<view class="absolute z-10 top-0 left-0 size-full bg-#33333333" :style="filterStyle"></view>
</view>
<view class="m-4">
<view class="my-2 text-size-base">相册</view>
<image
class="size-140rpx rounded-1 mr-2 mb-1"
v-for="(item, index) in 5"
:key="index"
src="http://dummyimage.com/100x100/ac0ee3"
/>
</view>
<view class="m-4">
<view class="my-2 text-base">评价1+</view>
<view class="flex justify-around flex-wrap text-color-theme text-base">
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>身材</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>颜值</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>耐心</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>有趣</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="m-4">
<view class="my-2 text-size-base">相册</view>
<image
class="size-140rpx rounded-1 mr-2 mb-1"
v-for="(item, index) in 5"
:key="index"
src="http://dummyimage.com/100x100/ac0ee3"
/>
</view>
<view class="m-4">
<view class="my-2 text-base">评价1+</view>
<view class="flex justify-around flex-wrap text-color-theme text-base">
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>身材</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>颜值</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>耐心</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
<view class="bg-color-dark flex items-center px-2 py-1 mb-2 rounded-2 gap-2">
<text>有趣</text>
<uni-rate :value="2" :touchable="false" :readonly="true" size="18" />
</view>
</view>
<moment v-for="(item, index) in listData">{{ index }}</moment>
<uni-load-more
:status="loadMoreStatus"
:content-text="loadMoreContent"
@clickLoadMore="onClickLoadMore"
/>
<view style="height: 100rpx"></view>
</scroll-view>
</van-config-provider>
</view>
<moment v-for="(item, index) in listData">{{ index }}</moment>
<uni-load-more
:status="loadMoreStatus"
:content-text="loadMoreContent"
@clickLoadMore="onClickLoadMore"
/>
<view style="height: 100rpx"></view>
</scroll-view>
</template>
<script setup lang="ts">
src/pages/home/home.vue
+71 -73
View File
@@ -1,81 +1,79 @@
<template>
<van-config-provider theme="dark">
<uni-nav-bar
dark
:fixed="true"
:border="false"
:height="50"
title=""
left-text=""
background-color="#222"
leftWidth="180rpx"
rightWidth="180rpx"
>
<view class="m-auto">
<segmented v-model="current" :items="segmentedItems" @change="segmentedChange" />
<uni-nav-bar
dark
:fixed="true"
:border="false"
:height="50"
title=""
left-text=""
background-color="#222"
leftWidth="180rpx"
rightWidth="180rpx"
>
<view class="m-auto">
<segmented v-model="current" :items="segmentedItems" @change="segmentedChange" />
</view>
<template v-slot:left>
<view class="flex items-center text-size-base" @click="selectAddress">
<uni-icons type="location" size="24" color="#ffcd32"></uni-icons>
<text class="truncate">{{ userCity.t || '未选择' }}</text>
</view>
<template v-slot:left>
<view class="flex items-center text-size-base" @click="selectAddress">
<uni-icons type="location" size="24" color="#ffcd32"></uni-icons>
<text class="truncate">{{ userCity.t || '未选择' }}</text>
</view>
</template>
<template v-slot:right></template>
</uni-nav-bar>
</template>
<template v-slot:right></template>
</uni-nav-bar>
<scroll-view
style="height: calc(100vh - 100rpx - 100rpx)"
scroll-y
refresher-enabled
refresher-background="#222"
:refresher-triggered="refresherTriggered"
:refresher-threshold="100"
@refresherrefresh="onRefresherRefresh"
@refresherabort="onRefresherAbort"
@scrolltolower="onScrollToLower"
>
<view class="flex px-6 py-2" v-for="user in listData" :key="user.id" @click="detail">
<image
class="w-200rpx h-300rpx mr-3 rounded-2 bg-#777"
:src="user.member.memberAvatar"
mode="aspectFill"
/>
<view class="flex-1">
<view class="flex justify-between items-center">
<text class="text-size-base">{{ user.member.memberNickname }}</text>
<text class="px-2 rounded-full text-size-sm bg-color-theme-dark">{{ '在线' }}</text>
</view>
<view class="mt-2">
<text class="px-2 text-xs c-black rounded-full bg-color-theme-dark">真人认证</text>
</view>
<view class="mt-2 flex flex-wrap gap-3">
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.gender || '未知性别' }}·{{ user.member.memberAge }}岁
</text>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1"
>{{ user.member.memberHeight }}cm</text
>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1"
>{{ user.member.memberWeight }}kg</text
>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.member.memberOcc }}
</text>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.issueCity }}km
</text>
</view>
<scroll-view
style="height: calc(100vh - 100rpx - 100rpx)"
scroll-y
refresher-enabled
refresher-background="#222"
:refresher-triggered="refresherTriggered"
:refresher-threshold="100"
@refresherrefresh="onRefresherRefresh"
@refresherabort="onRefresherAbort"
@scrolltolower="onScrollToLower"
>
<view class="flex px-6 py-2" v-for="user in listData" :key="user.id" @click="detail">
<image
class="w-200rpx h-300rpx mr-3 rounded-2 bg-#777"
:src="user.member.memberAvatar"
mode="aspectFill"
/>
<view class="flex-1">
<view class="flex justify-between items-center">
<text class="text-size-base">{{ user.member.memberNickname }}</text>
<text class="px-2 rounded-full text-size-sm bg-color-theme-dark">{{ '在线' }}</text>
</view>
<view class="mt-2">
<text class="px-2 text-xs c-black rounded-full bg-color-theme-dark">真人认证</text>
</view>
<view class="mt-2 flex flex-wrap gap-3">
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.gender || '未知性别' }}·{{ user.member.memberAge }}岁
</text>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1"
>{{ user.member.memberHeight }}cm</text
>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1"
>{{ user.member.memberWeight }}kg</text
>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.member.memberOcc }}
</text>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.issueCity }}km
</text>
</view>
</view>
<uni-load-more
:status="loadMoreStatus"
:content-text="loadMoreContent"
@clickLoadMore="onClickLoadMore"
/>
<view style="height: 100rpx"></view>
<van-back-top right="6vw" bottom="10vh" />
</scroll-view>
</van-config-provider>
</view>
<uni-load-more
:status="loadMoreStatus"
:content-text="loadMoreContent"
@clickLoadMore="onClickLoadMore"
/>
<view style="height: 100rpx"></view>
<van-back-top right="6vw" bottom="10vh" />
</scroll-view>
</template>
<script setup lang="ts">
src/pages/login/login.vue
+52 -113
View File
@@ -1,66 +1,95 @@
<template>
<view class="page">
<image class="background-image" src="/static/11.png" mode="aspectFill" />
<view class="content">
<view class="title-section">
<view class="main-title">荷塘月色</view>
<view class="sub-title">• 高端社交圈 •</view>
<view class="relative h-screen w-screen overflow-hidden">
<image
class="absolute inset-0 h-full w-full scale-110"
style="filter: blur(10rpx)"
src="/static/11.png"
mode="aspectFill"
/>
<view class="relative z-10 flex flex-col items-center px-40rpx">
<view class="my-100rpx text-center">
<view class="mb-30rpx text-36px font-bold text-white/80">荷塘月色</view>
<view class="text-15px tracking-4rpx text-white/80">• 高端社交圈 •</view>
</view>
<template v-if="scene === 'register'">
<view class="form-section">
<view class="input-wapper">
<view class="flex w-full flex-col items-center gap-40rpx">
<view class="relative flex w-full items-center">
<input
class="input"
class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white"
type="number"
placeholder="请输入手机号"
placeholder-style="color: rgba(255, 255, 255, 0.6)"
v-model="phone"
/>
</view>
<view class="input-wapper">
<view class="relative flex w-full items-center">
<input
class="input"
class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white"
type="number"
placeholder="验证码"
placeholder-style="color: rgba(255, 255, 255, 0.6)"
v-model="smsCode"
/>
<view class="get-code-btn" @click="handleGetCode">获取验证码</view>
<view
class="absolute right-20rpx rounded-16rpx bg-color-theme-dark px-20rpx py-16rpx text-12px"
@click="handleGetCode"
>
获取验证码
</view>
</view>
</view>
<button class="register-btn" @click="handleRegister">注 册</button>
<button class="scene-change" @click="goLogin">去登录</button>
<button
class="mt-40rpx w-full rounded-50rpx bg-color-theme-dark text-18px text-white"
@click="handleRegister"
>
注 册
</button>
<button class="mt-40rpx border-0 bg-transparent text-white" @click="goLogin">去登录</button>
</template>
<template v-else>
<view class="form-section">
<view class="input-wapper">
<view class="flex w-full flex-col items-center gap-40rpx">
<view class="relative flex w-full items-center">
<input
class="input"
class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white"
type="number"
placeholder="请输入手机号"
placeholder-style="color: rgba(255, 255, 255, 0.6)"
v-model="phone"
/>
</view>
<view class="input-wapper">
<view class="relative flex w-full items-center">
<input
class="input"
class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white"
type="number"
placeholder="验证码"
placeholder-style="color: rgba(255, 255, 255, 0.6)"
v-model="smsCode"
/>
<view class="get-code-btn" @click="handleGetCode">获取验证码</view>
<view
class="absolute right-20rpx rounded-16rpx bg-color-theme-dark px-20rpx py-16rpx text-12px"
@click="handleGetCode"
>
获取验证码
</view>
</view>
</view>
<button class="register-btn" @click="handleLogin">登 录</button>
<button class="scene-change" @click="goRegister">去注册</button>
<button
class="mt-40rpx w-full rounded-50rpx bg-color-theme-dark text-18px text-white"
@click="handleLogin"
>
登 录
</button>
<button class="mt-40rpx border-0 bg-transparent text-white" @click="goRegister">
去注册
</button>
</template>
</view>
<view class="agreement-text">登录即同意《用户协议》和《隐私政策》并同意授权</view>
<view class="absolute bottom-40rpx w-full text-center text-14px text-white">
登录即同意《用户协议》和《隐私政策》并同意授权
</view>
</view>
</template>
@@ -115,93 +144,3 @@
scene.value = 'register';
};
</script>
<style scoped lang="scss">
.page {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
.background-image {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
filter: blur(10rpx);
transform: scale(1.1);
}
.content {
padding: 0 40rpx;
display: flex;
flex-direction: column;
align-items: center;
.title-section {
margin: 100rpx 0;
text-align: center;
.main-title {
font-size: 72rpx;
font-weight: bold;
color: $color-text-ll;
margin-bottom: 30rpx;
}
.sub-title {
font-size: 30rpx;
color: $color-text-ll;
letter-spacing: 4rpx;
}
}
.form-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 40rpx;
.input-wapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
.input {
width: 100%;
height: 100rpx;
background: $color-highlight-background;
border-radius: 50rpx;
padding: 0 40rpx;
font-size: 32rpx;
}
.get-code-btn {
position: absolute;
right: 20rpx;
font-size: $font-size-small;
background: $color-theme-d;
white-space: nowrap;
padding: 16rpx;
border-radius: 16rpx;
}
}
}
}
.register-btn {
width: 100%;
margin-top: 40rpx;
border-radius: 50rpx;
align-items: center;
font-size: $font-size-large;
background: $color-theme-d;
color: $color-text;
}
.scene-change {
margin-top: 40rpx;
background-color: transparent;
border-color: transparent;
color: $color-text;
}
.agreement-text {
position: absolute;
width: 100%;
text-align: center;
bottom: 40rpx;
font-size: $font-size-medium;
}
}
</style>
src/pages/messages/messages.vue
+72 -122
View File
@@ -1,134 +1,84 @@
<template>
<view class="messages-page">
<view class="header">
<view class="message-type">
<text class="message">消息</text>
<text>缘友</text>
</view>
<view class="interact">
<uni-icons type="chat" size="24" color="#333"></uni-icons>
<text class="text">互动消息</text>
</view>
<view class="flex h-100rpx items-center justify-between px-4">
<view class="flex items-center text-base">
<text class="mr-4">消息</text>
<text>缘友</text>
</view>
<view class="flex items-center rounded-full bg-color-theme px-2">
<uni-icons type="chat" size="20" color="#333" />
<text class="text-sm c-black">互动消息</text>
</view>
</view>
<scroll-view class="chat-list" scroll-y>
<view class="chat-item" v-for="message in 10" :key="message.id">
<uni-badge size="small" text="100" absolute="rightTop" :offset="[10, 10]" :custom-style="{ borderColor: 'red' }">
<image :src="message.avatar" class="avatar" />
</uni-badge>
<view class="chat-user">
<view class="top">
<text class="username">{{ message.username }}</text>
<text class="time">{{ message.time }}</text>
</view>
<view class="bottom">
<text class="text">{{ message.lastMessage }}</text>
</view>
<scroll-view class="h-[calc(100vh-200rpx)]" scroll-y>
<view
class="flex items-center border-1 border-b-solid border-#333333 px-6 py-2"
v-for="message in messageList"
:key="message.id"
>
<uni-badge
size="small"
:text="String(message.unread)"
absolute="rightTop"
:offset="[10, 10]"
:custom-style="{ borderColor: 'red' }"
>
<image :src="message.avatar" class="mr-2 size-100rpx rounded-full bg-#333333" />
</uni-badge>
<view class="flex-1 overflow-hidden px-3">
<view class="flex items-center justify-between">
<text class="text-base">{{ message.username }}</text>
<text class="text-sm">{{ message.time }}</text>
</view>
<view class="flex">
<text class="mt-1 flex-1 text-sm truncate">{{ message.lastMessage }}</text>
</view>
</view>
<view style="height: 100rpx"></view>
</scroll-view>
</view>
</view>
<view class="h-100rpx"></view>
</scroll-view>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { ref, computed } from 'vue';
interface Message {
id: number;
username: string;
avatar: string;
lastMessage: string;
time: string;
unread: number;
}
interface Message {
id: number;
username: string;
avatar: string;
lastMessage: string;
time: string;
unread: number;
}
const messageList = ref<Message[]>();
const messageList = ref<Message[]>([
{
id: 1,
username: '1',
avatar: 'https://dummyimage.com/100x100/333333/ffffff&text=A',
lastMessage: '111',
time: '12:30',
unread: 3,
},
{
id: 2,
username: '2',
avatar: 'https://dummyimage.com/100x100/444444/ffffff&text=B',
lastMessage: '222',
time: '昨天',
unread: 0,
},
{
id: 3,
username: '3',
avatar: 'https://dummyimage.com/100x100/555555/ffffff&text=C',
lastMessage: '333',
time: '周二',
unread: 5,
},
]);
const unreadCount = computed(() => {
return messageList.value.reduce((total, message) => total + message.unread, 0);
});
const unreadCount = computed(() => {
return messageList.value.reduce((total, message) => total + message.unread, 0);
});
</script>
<style scoped lang="scss">
.messages-page {
background-color: $color-background;
height: calc(100vh - 100rpx);
.header {
position: relative;
height: 100rpx;
.message-type {
position: absolute;
top: 0;
bottom: 0;
left: 20rpx;
display: flex;
align-items: center;
font-size: $font-size-large;
.message {
margin-right: 20rpx;
}
}
.interact {
position: absolute;
right: 20rpx;
top: 50rpx;
transform: translateY(-50%);
display: flex;
align-items: center;
background-color: $color-theme;
border-radius: 40rpx;
padding: 4rpx 20rpx;
.text {
font-size: $font-size-medium;
color: #333;
}
}
}
.chat-list {
height: calc(100vh - 100rpx - 100rpx);
.chat-item {
display: flex;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #333;
.avatar {
width: 50px;
height: 50px;
border-radius: 25px;
margin-right: 15rpx;
background-color: #333;
}
.chat-user {
flex: 1;
padding: 0 20rpx;
overflow: hidden;
.top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.username {
font-size: $font-size-medium-x;
}
.time {
font-size: $font-size-small;
color: $color-text-l;
}
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
.text {
font-size: $font-size-medium;
flex: 1;
margin-top: 10rpx;
@include no-wrap();
}
}
}
}
}
}
</style>
src/pages/moments/moments.vue
+15 -28
View File
@@ -1,13 +1,17 @@
<template>
<view class="header">
<segmented class="segmented" v-model="current" :items="segmentedItems"></segmented>
<view class="camera" @click="goPublish">
<view class="relative h-100rpx">
<segmented
class="absolute left-30rpx top-1/2 -translate-y-1/2"
v-model="current"
:items="segmentedItems"
/>
<view class="absolute right-30rpx top-1/2 -translate-y-1/2" @click="goPublish">
<uni-icons type="camera" size="24" color="#ffcd32"></uni-icons>
</view>
</view>
<scroll-view
class="moments-list"
class="h-[calc(100vh-200rpx)]"
scroll-y
refresher-enabled
refresher-background="#222"
@@ -38,7 +42,7 @@
:content-text="loadMoreContent"
@clickLoadMore="onClickLoadMore"
/>
<view style="height: 100rpx"></view>
<view class="h-100rpx"></view>
</scroll-view>
</template>
@@ -58,7 +62,12 @@
onRefresherAbort,
onScrollToLower,
onClickLoadMore,
} = useScroll(RecentApi.quickPage);
} = useScroll(RecentApi.quickPage, {
scene: 'DYNAMIC_RECOMMEND',
province: '',
city: '',
memberId: '',
});
const current = ref(0);
const segmentedItems = ['动态', '附近'];
@@ -69,25 +78,3 @@
});
};
</script>
<style scoped lang="scss">
.header {
position: relative;
height: 100rpx;
.segmented {
position: absolute;
left: 30rpx;
top: 50rpx;
transform: translateY(-50%);
}
.camera {
position: absolute;
top: 50rpx;
transform: translateY(-50%);
right: 30rpx;
}
}
.moments-list {
height: calc(100vh - 100rpx - 100rpx);
}
</style>
src/pages/moments/publish.vue
+54 -14
View File
@@ -1,21 +1,61 @@
<template>
<van-config-provider theme="dark">
<van-nav-bar title="发布动态" fixed>
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
<template #right>
<view class="bg-color-theme px-3 py-1 rounded-full c-black" @click="publishMoments">
发布
</view>
</template>
</van-nav-bar>
</van-config-provider>
<van-nav-bar title="发布动态">
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
<template #right>
<view class="bg-color-theme px-3 py-1 rounded-full c-black" @click="publishMoments">
发布
</view>
</template>
</van-nav-bar>
<van-field
v-model="params.description"
rows="12"
type="textarea"
maxlength="1000"
placeholder="记录这一刻..."
show-word-limit
/>
<van-tabs v-model:active="activeTab" sticky>
<van-tab title="发图片">
<view class="p-4">
<s-uploader v-model:url="params.coverPic" fileMediatype="image" limit="1" mode="grid" />
</view>
</van-tab>
<van-tab title="发视频">
<view class="p-4">
<s-uploader v-model:url="params.videos" fileMediatype="video" limit="1" mode="grid" />
</view>
</van-tab>
</van-tabs>
</template>
<script setup lang="ts">
// 发布
const publishMoments = () => {};
import { reactive, ref } from 'vue';
import sUploader from '@/sheep/components/s-uploader/s-uploader.vue';
import RecentApi from '@/sheep/api/member/recent';
const activeTab = ref();
const params = reactive({
description: '',
coverPic: [],
videos: [],
issueLong: '30.750651',
issueLat: '120.731208',
issueProvince: '浙江省',
issueCity: '嘉兴市',
issueDistrict: '南湖区',
issueAddress: '南湖区嘉兴学院农银大学(浙江分校)南100米',
});
// 发布朋友圈
const publishMoments = async () => {
console.log({ ...params, coverPic: params.coverPic[0] });
await RecentApi.createMoment({ ...params, coverPic: params.coverPic[0] });
};
function back() {
uni.navigateBack();
src/pages/profile/like.vue
+98
View File
@@ -0,0 +1,98 @@
<template>
<van-nav-bar title="">
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
<template #title>
<segmented v-model="current" :items="segmentedItems" @change="segmentedChange" />
</template>
</van-nav-bar>
<scroll-view
style="height: calc(100vh - 100rpx - 100rpx)"
scroll-y
refresher-enabled
refresher-background="#222"
:refresher-triggered="refresherTriggered"
:refresher-threshold="100"
@refresherrefresh="onRefresherRefresh"
@refresherabort="onRefresherAbort"
@scrolltolower="onScrollToLower"
>
<view class="flex px-6 py-2" v-for="user in listData" :key="user.id" @click="detail">
<image
class="w-200rpx h-300rpx mr-3 rounded-2 bg-#777"
:src="user.member.memberAvatar"
mode="aspectFill"
/>
<view class="flex-1">
<view class="flex justify-between items-center">
<text class="text-size-base">{{ user.member.memberNickname }}</text>
<text class="px-2 rounded-full text-size-sm bg-color-theme-dark">{{ '在线' }}</text>
</view>
<view class="mt-2">
<text class="px-2 text-xs c-black rounded-full bg-color-theme-dark">真人认证</text>
</view>
<view class="mt-2 flex flex-wrap gap-3">
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.gender || '未知性别' }}·{{ user.member.memberAge }}岁
</text>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1"
>{{ user.member.memberHeight }}cm</text
>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1"
>{{ user.member.memberWeight }}kg</text
>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.member.memberOcc }}
</text>
<text class="bg-#333 text-color-theme text-xs px-2 rounded-1">
{{ user.issueCity }}km
</text>
</view>
</view>
</view>
<uni-load-more
:status="loadMoreStatus"
:content-text="loadMoreContent"
@clickLoadMore="onClickLoadMore"
/>
<view style="height: 100rpx"></view>
<van-back-top right="6vw" bottom="10vh" />
</scroll-view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import segmented from '@/sheep/components/segmented/segmented.vue';
import useScroll from '@/sheep/hooks/use-scroll';
import RecentApi from '@/sheep/api/member/recent';
const current = ref(0);
const segmentedItems = ['我喜欢', '喜欢我'];
const {
listData,
refresherTriggered,
loadMoreContent,
loadMoreStatus,
onRefresherRefresh,
onRefresherAbort,
onScrollToLower,
onClickLoadMore,
} = useScroll(RecentApi.likeIt);
onLoad((options: any) => {
const { type } = options;
current.value = type;
});
const segmentedChange = () => {};
const detail = () => {};
function back() {
uni.navigateBack();
}
</script>
src/pages/profile/profile.vue
+57 -112
View File
@@ -1,31 +1,58 @@
<template>
<view class="profile-page">
<view class="header">
<view class="name">我的</view>
<view class="edit-info" @click="editUserInfo">
<uni-icons type="auth" size="20" color="#333"></uni-icons>
<text class="text">编辑资料</text>
<!-- 顶部导航 -->
<view class="relative h-100rpx">
<text class="mx-auto text-base absolute left-1/2 top-1/2 -translate-1/2">我的</text>
<view
class="absolute right-20rpx top-50rpx flex -translate-y-1/2 items-center rounded-full bg-color-theme px-2 text-black"
@click="editUserInfo"
>
<uni-icons type="auth" size="20" color="#333"></uni-icons>
<text class="text-sm">编辑资料</text>
</view>
</view>
<scroll-view class="h-[calc(100vh-200rpx)]" scroll-y>
<!-- 个人信息 -->
<view class="flex items-center px-6 pb-3">
<image :src="userInfo.avatar" class="mr-4 size-80px rounded-full bg-#333" />
<view class="flex-1">
<view class="mb-1 text-lg">{{ userInfo.username }}</view>
<view class="mb-1 text-xs text-#ffffff80">ID: {{ userInfo.id }}</view>
<view class="inline-block rounded-full bg-color-theme px-2 text-xs c-black">
{{ 'vip' }}
</view>
</view>
</view>
<scroll-view class="content" scroll-y>
<view class="user-card">
<image :src="userInfo.avatar" class="user-avatar" />
<view class="user-info">
<text class="username">{{ userInfo.username }}</text>
<text class="user-id">ID: {{ userInfo.id }}</text>
<text class="tag">{{ 'vip' }}</text>
</view>
<view class="flex justify-around my-2">
<view class="flex flex-col items-center" @click="goLike(0)">
<text class="text-color-theme font-bold">{{ 1 }}</text>
<text class="text-color-theme">我喜欢</text>
</view>
<view class="menu-section">
<view class="menu-item" v-for="item in menuList" :key="item.id">
<view class="menu-icon">{{ item.icon }}</view>
<text class="menu-text">{{ item.text }}</text>
<uni-icons type="right" size="16" color="#999999"></uni-icons>
</view>
<view class="flex flex-col items-center" @click="goLike(1)">
<text class="text-color-theme font-bold">{{ 1 }}</text>
<text class="text-color-theme">喜欢我</text>
</view>
<view style="height: 100rpx"></view>
</scroll-view>
</view>
<view class="flex flex-col items-center">
<text class="text-color-theme font-bold">{{ 1 }}</text>
<text class="text-color-theme">钱包</text>
</view>
</view>
<!-- 菜单 -->
<view class="mx-12 my-4">
<view
v-for="item in menuList"
:key="item.id"
class="flex items-center border-1 border-b-solid border-#333 py-3 text-base"
>
<view class="mr-2 w-60">{{ item.icon }}</view>
<text class="flex-1">{{ item.text }}</text>
<uni-icons type="right" size="16" color="#999999"></uni-icons>
</view>
</view>
<view style="height: 100rpx"></view>
</scroll-view>
</template>
<script setup lang="ts">
@@ -65,93 +92,11 @@
url: '/pages/profile/userinfo',
});
};
</script>
<style scoped lang="scss">
.profile-page {
background-color: $color-background;
height: calc(100vh - 100rpx);
.header {
position: relative;
height: 100rpx;
.name {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: $font-size-medium-x;
}
.edit-info {
position: absolute;
right: 20rpx;
top: 50rpx;
transform: translateY(-50%);
display: flex;
align-items: center;
background-color: $color-theme;
border-radius: 40rpx;
padding: 0 10rpx;
.text {
font-size: $font-size-medium;
color: #333;
}
}
}
.content {
height: calc(100vh - 100rpx - 100rpx);
.user-card {
display: flex;
align-items: center;
border-bottom: 1px solid #333;
padding: 0 40rpx 20rpx;
.user-avatar {
width: 80px;
height: 80px;
border-radius: 40px;
margin-right: 15px;
background-color: #333;
}
.user-info {
flex: 1;
.username {
display: block;
font-size: $font-size-medium-x;
font-weight: bold;
margin-bottom: 8px;
}
.user-id {
display: block;
font-size: 12px;
color: $color-text-l;
margin-bottom: 8px;
}
.tag {
background-color: $color-theme;
color: #000;
padding: 2px 8px;
border-radius: 10px;
font-size: $font-size-small;
}
}
}
.menu-section {
margin: 20px 40px;
.menu-item {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #333;
font-size: $font-size-medium;
.menu-icon {
width: 30px;
font-size: 18px;
margin-right: 15px;
}
.menu-text {
flex: 1;
}
}
}
}
}
</style>
// type: 0-我喜欢 1-喜欢我
const goLike = (type: 0 | 1) => {
uni.navigateTo({
url: `/pages/profile/like?type=${type}`,
});
};
</script>
src/pages/profile/userinfo.vue
+122 -124
View File
@@ -1,133 +1,131 @@
<template>
<van-config-provider theme="dark">
<van-nav-bar title="修改资料" fixed>
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
<template #right>
<view class="bg-color-theme px-3 py-1 rounded-full c-black" @click="saveUserInfo">
保存
</view>
</template>
</van-nav-bar>
<van-nav-bar title="修改资料" fixed>
<template #left>
<uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
</template>
<template #right>
<view class="bg-color-theme px-3 py-1 rounded-full c-black" @click="saveUserInfo">
保存
</view>
</template>
</van-nav-bar>
<view class="my-100rpx">
<scroll-view scroll-y>
<view class="flex-row-center my-8">
<s-uploader
v-model:url="userinfo.avatar"
fileMediatype="image"
limit="1"
mode="grid"
:imageStyles="{ width: '168rpx', height: '168rpx' }"
/>
</view>
<view class="my-100rpx">
<scroll-view scroll-y>
<view class="flex-row-center my-8">
<s-uploader
v-model:url="userinfo.avatar"
fileMediatype="image"
limit="1"
mode="grid"
:imageStyles="{ width: '168rpx', height: '168rpx' }"
/>
</view>
<view class="ml-5 mb-3">语音签名</view>
<van-cell-group inset>
<van-cell title="单元格" value="去录制" is-link>
<template #title>
<view class="flex items-center">
<uni-icons type="mic" size="30" color="#ffcd32"></uni-icons>
<text class="truncate">添加语音签名，让你更受关注</text>
</view>
</template>
</van-cell>
</van-cell-group>
<view class="ml-5 mb-3">语音签名</view>
<van-cell-group inset>
<van-cell title="单元格" value="去录制" is-link>
<template #title>
<view class="flex items-center">
<uni-icons type="mic" size="30" color="#ffcd32"></uni-icons>
<text class="truncate">添加语音签名，让你更受关注</text>
</view>
</template>
</van-cell>
</van-cell-group>
<view class="ml-5 my-3">基本资料</view>
<van-cell-group inset>
<van-cell title="昵称" value="输入">
<template #value>
<input type="text" v-model="userinfo.nickname" :maxlength="12" />
</template>
</van-cell>
<van-cell
title="生日"
:value="userinfo.birthday || '未填写'"
is-link
@click="showPopupPicker('birthday')"
/>
<van-cell
title="身高"
:value="userinfo.height ? userinfo.height + 'cm' : '未填写'"
is-link
@click="showPopupPicker('height')"
/>
<van-cell
title="体重"
:value="userinfo.weight ? userinfo.weight + 'kg' : '未填写'"
is-link
@click="showPopupPicker('weight')"
/>
<van-cell
title="从事职业"
:value="userinfo.occ || '未填写'"
is-link
@click="showPopupPicker('occ')"
/>
</van-cell-group>
<view class="ml-5 my-3">基本资料</view>
<van-cell-group inset>
<van-cell title="昵称" value="输入">
<template #value>
<input type="text" v-model="userinfo.nickname" :maxlength="12" />
</template>
</van-cell>
<van-cell
title="生日"
:value="userinfo.birthday || '未填写'"
is-link
@click="showPopupPicker('birthday')"
/>
<van-cell
title="身高"
:value="userinfo.height ? userinfo.height + 'cm' : '未填写'"
is-link
@click="showPopupPicker('height')"
/>
<van-cell
title="体重"
:value="userinfo.weight ? userinfo.weight + 'kg' : '未填写'"
is-link
@click="showPopupPicker('weight')"
/>
<van-cell
title="从事职业"
:value="userinfo.occ || '未填写'"
is-link
@click="showPopupPicker('occ')"
/>
</van-cell-group>
<view class="ml-5 my-3">个人简介</view>
<van-cell-group inset>
<van-field
v-model="userinfo.description"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="说点什么吧..."
show-word-limit
/>
</van-cell-group>
<view class="ml-5 my-3">个人简介</view>
<van-cell-group inset>
<van-field
v-model="userinfo.description"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="说点什么吧..."
show-word-limit
/>
</van-cell-group>
<view class="mx-5 my-3 flex justify-between">
<text>个人相册</text>
<text>{{ userinfo.photo.length || 0 }}/9</text>
</view>
<view class="px-4">
<s-uploader v-model:url="userinfo.photo" fileMediatype="image" limit="9" mode="grid" />
</view>
<view class="h-100"></view>
</scroll-view>
</view>
<view class="mx-5 my-3 flex justify-between">
<text>个人相册</text>
<text>{{ userinfo.photo.length || 0 }}/9</text>
</view>
<view class="px-4">
<s-uploader v-model:url="userinfo.photo" fileMediatype="image" limit="9" mode="grid" />
</view>
<view class="h-100"></view>
</scroll-view>
</view>
<van-popup v-model:show="showPicker" position="bottom">
<van-date-picker
v-if="pickerFiled === 'birthday'"
:model-value="userinfo.birthday?.split('-') || []"
title="生日"
:min-date="new Date(1980, 1, 1)"
:max-date="new Date()"
@confirm="(e) => onConfirm(e, 'birthday')"
@cancel="showPicker = false"
/>
<van-picker
v-else-if="pickerFiled === 'height'"
:model-value="[userinfo.height]"
title="身高"
:columns="columnsHeight"
@confirm="(e) => onConfirm(e, 'height')"
@cancel="showPicker = false"
/>
<van-picker
v-else-if="pickerFiled === 'weight'"
:model-value="[userinfo.weight]"
title="体重"
:columns="columnsWeight"
@confirm="(e) => onConfirm(e, 'weight')"
@cancel="showPicker = false"
/>
<van-picker
v-else-if="pickerFiled === 'occ'"
:model-value="[userinfo.occ]"
title="选择职业"
:columns="columnsOcc"
@confirm="(e) => onConfirm(e, 'occ')"
@cancel="showPicker = false"
/>
</van-popup>
</van-config-provider>
<van-popup v-model:show="showPicker" position="bottom">
<van-date-picker
v-if="pickerFiled === 'birthday'"
:model-value="userinfo.birthday?.split('-') || []"
title="生日"
:min-date="new Date(1980, 1, 1)"
:max-date="new Date()"
@confirm="(e) => onConfirm(e, 'birthday')"
@cancel="showPicker = false"
/>
<van-picker
v-else-if="pickerFiled === 'height'"
:model-value="[userinfo.height]"
title="身高"
:columns="columnsHeight"
@confirm="(e) => onConfirm(e, 'height')"
@cancel="showPicker = false"
/>
<van-picker
v-else-if="pickerFiled === 'weight'"
:model-value="[userinfo.weight]"
title="体重"
:columns="columnsWeight"
@confirm="(e) => onConfirm(e, 'weight')"
@cancel="showPicker = false"
/>
<van-picker
v-else-if="pickerFiled === 'occ'"
:model-value="[userinfo.occ]"
title="选择职业"
:columns="columnsOcc"
@confirm="(e) => onConfirm(e, 'occ')"
@cancel="showPicker = false"
/>
</van-popup>
</template>
<script lang="ts">
@@ -156,7 +154,7 @@
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, watch } from 'vue';
import { reactive, ref } from 'vue';
// @ts-ignore
import UserApi from '@/sheep/api/member/user';
import sUploader from '@/sheep/components/s-uploader/s-uploader.vue';
src/sheep/api/member/recent.ts
+26
View File
@@ -13,6 +13,32 @@ const RecentApi = {
},
});
},
// 创建朋友圈
createMoment: (data: any) => {
return request({
url: '/member/recent/create',
method: 'POST',
data,
custom: {
showLoading: true,
showSuccess: true,
loadingMsg: '提交中',
successMsg: '提交成功',
},
});
},
// 查看我喜欢
likeIt: (data: any) => {
return request({
url: '/member/recent/like/it-page',
method: 'POST',
data,
custom: {
showLoading: true,
loadingMsg: '加载中',
},
});
},
};
export default RecentApi;
src/sheep/components/moment/moment.vue
+50 -125
View File
@@ -1,144 +1,69 @@
<template>
<view class="moment">
<view class="user">
<image :src="avatar" class="avatar" />
<view class="details">
<view>
<text class="username">{{ name }}</text>
<text v-if="verification" class="verification">实人认证</text>
<view class="border-1 border-b-solid border-#333333 px-6 py-2">
<view class="mb-30rpx flex items-center">
<image :src="avatar" class="mr-3 h-88rpx w-88rpx rounded-full bg-#333333" />
<view class="flex-1">
<view class="flex items-center">
<text class="mr-2 text-base">{{ name }}</text>
<text v-if="verification" class="rounded-6rpx bg-color-theme px-2 py-1 text-sm text-black"
>实人认证</text
>
</view>
<view class="info">女 · 20岁 | 学生</view>
<view class="mt-6 text-xs text-white/80">女 · 20岁 | 学生</view>
</view>
</view>
<view class="content">
<text class="text">{{ content }}</text>
<view class="images" v-if="images && images.length > 0">
<image v-for="(img, index) in images" :key="index" :src="img" class="moment-image" />
<view class="mb-30rpx px-40rpx">
<text class="leading-[1.5] text-white">{{ content }}</text>
<view class="mt-20rpx flex flex-wrap gap-20rpx" v-if="images && images.length > 0">
<image
v-for="(img, index) in images"
:key="index"
:src="img"
class="size-200rpx rounded-full bg-#333333"
/>
</view>
</view>
<view class="address">
<view class="mb-20rpx flex items-center gap-10rpx px-40rpx text-xs text-white/70">
<uni-icons type="location" size="16" color="#B5B4BC"></uni-icons>
<text class="city">{{ location }}</text>
<text>{{ location }}</text>
</view>
<view class="actions">
<view class="action-btn">
<view class="flex gap-60rpx px-40rpx text-white">
<view class="flex items-center gap-10rpx text-sm">
<uni-icons type="heart" size="24" color="#B5B4BC"></uni-icons>
<uni-icons type="heart-filled" size="24" color="#ffcd32"></uni-icons>
<text class="text">{{ likes }} 喜欢</text>
<text>{{ likes }} 喜欢</text>
</view>
<view class="action-btn">
<view class="flex items-center gap-10rpx text-sm">
<uni-icons type="chat" size="24" color="#B5B4BC"></uni-icons>
<text class="text">{{ comments }} 打招呼</text>
<text>{{ comments }} 打招呼</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
withDefaults(
defineProps<
Partial<{
avatar: string;
name: string;
verification: boolean;
content: string;
images: string[];
location: string;
likes: number | string;
comments: number | string;
}>
>(),
{
avatar: "",
name: "",
verification: false,
content: "",
images: () => [],
location: "",
likes: 0,
comments: 0,
}
);
withDefaults(
defineProps<
Partial<{
avatar: string;
name: string;
verification: boolean;
content: string;
images: string[];
location: string;
likes: number | string;
comments: number | string;
}>
>(),
{
avatar: '',
name: '',
verification: false,
content: '',
images: () => [],
location: '',
likes: 0,
comments: 0,
},
);
</script>
<style scoped lang="scss">
.moment {
padding: 20px;
border-bottom: 1px solid #333;
.user {
display: flex;
align-items: center;
margin-bottom: 15px;
.avatar {
width: 44px;
height: 44px;
border-radius: 20px;
margin-right: 10px;
background-color: #333;
}
.details {
flex: 1;
.username {
font-size: $font-size-medium-x;
margin-right: 20rpx;
}
.verification {
background-color: $color-theme;
font-size: $font-size-small;
color: black;
padding: 4rpx;
border-radius: 6rpx;
}
.info {
font-size: $font-size-small;
margin-top: 20rpx;
}
}
}
.content {
flex: 1;
padding: 0 20px;
margin-bottom: 15px;
.text {
line-height: 1.5;
}
.images {
margin-top: 20rpx;
display: flex;
gap: 10px;
flex-wrap: wrap;
.moment-image {
width: 100px;
height: 100px;
border-radius: 8px;
background-color: #333;
}
}
}
.address {
display: flex;
align-items: center;
gap: 10rpx;
padding: 0 20rpx;
margin-bottom: 20rpx;
.city {
font-size: $font-size-small;
}
}
.actions {
display: flex;
gap: 60rpx;
padding: 0 20rpx;
.action-btn {
display: flex;
align-items: center;
gap: 10rpx;
color: $color-text;
font-size: $font-size-medium;
.text {
font-size: $font-size-medium;
}
}
}
}
</style>
src/sheep/components/s-uploader/s-uploader.vue
+2 -1
View File
@@ -199,7 +199,8 @@
return {
files: [],
localValue: [],
imgsrc: sheep.$url.static('/static/img/shop/upload-camera.png'),
// imgsrc: sheep.$url.static('/static/img/shop/upload-camera.png'),
imgsrc: '/static/upload-icon.png',
};
},
watch: {
src/sheep/hooks/use-scroll.ts
+5 -5
View File
@@ -26,17 +26,17 @@ export default function useScroll(fetchList: (...arg: any) => Promise<any>, fetc
}
if (isRefresh) {
pageInfo.current = 1;
const { data } = await fetchList({ ...pageInfo, ...fetchBody });
listData.value = data.list;
const { data = [] } = await fetchList({ ...pageInfo, ...fetchBody });
listData.value = data.list ?? [];
pageInfo.total = data.total;
} else {
const { data } = await fetchList({ ...pageInfo, ...fetchBody });
listData.value.push(...data.list);
const { data = [] } = await fetchList({ ...pageInfo, ...fetchBody });
listData.value.push(...(data.list ?? []));
pageInfo.total = data.total;
}
pageInfo.current = pageInfo.current + 1;
if (listData.value.length >= pageInfo.total) {
if (listData.value?.length >= pageInfo.total) {
loadMoreStatus.value = 'noMore';
} else {
loadMoreStatus.value = 'more';
src/static/upload-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/uni.scss
-30
View File
@@ -74,33 +74,3 @@ $uni-color-subtitle: #555; // 二级标题颜色
$uni-font-size-subtitle: 18px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;
// ---------------------------------------------------------------------------------------------
// 自定义scss变量
// 颜色
$color-background: #222222;
$color-background-d: rgba(0, 0, 0, 0.3);
$color-highlight-background: #333;
$color-theme: #ffcd32;
$color-theme-d: rgba(255, 205, 49, 0.5);
$color-sub-theme: #d93f30;
$color-text: #ffffff;
$color-text-d: rgba(255, 255, 255, 0.3);
$color-text-l: rgba(255, 255, 255, 0.5);
$color-text-ll: rgba(255, 255, 255, 0.8);
$color-dialog-background: #666;
// 字体
$font-size-small-s: 10px;
$font-size-small: 12px;
$font-size-medium: 14px;
$font-size-medium-x: 16px;
$font-size-large: 18px;
$font-size-large-x: 22px;
@mixin no-wrap() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}