austin
/
Retired
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI更改

This commit is contained in:
张文涛 2024-10-22 22:55:08 +08:00
parent 1e581dda5f
commit 2572f8273f
12 changed files with 547 additions and 464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages.json
View File

@ -142,7 +142,7 @@
{ // 新鲜事/话题/分类 { // 新鲜事/话题/分类
"path": "pages/news/news-topic-cate", "path": "pages/news/news-topic-cate",
"style": { "style": {
"navigationBarTitleText": "话题分类", "navigationBarTitleText": "分类",
"app-plus": { "app-plus": {
"bounce": "none" "bounce": "none"
} }
@ -373,13 +373,13 @@
"iconWidth": "24px", "iconWidth": "24px",
"list": [{ "list": [{
"pagePath": "pages/home/home", "pagePath": "pages/home/home",
"text": "招聘", "text": "首页",
"iconPath": "/static/img/tabbar/home.png", "iconPath": "/static/img/tabbar/home.png",
"selectedIconPath": "/static/img/tabbar/home-ed.png" "selectedIconPath": "/static/img/tabbar/home-ed.png"
}, },
{ {
"pagePath": "pages/news/news", "pagePath": "pages/news/news",
"text": "培训", "text": "课程",
"iconPath": "/static/img/tabbar/news.png", "iconPath": "/static/img/tabbar/news.png",
"selectedIconPath": "/static/img/tabbar/news-ed.png" "selectedIconPath": "/static/img/tabbar/news-ed.png"
}, },

25
pages/home/cpns/info-list.vue
View File

@ -35,7 +35,8 @@
<slot> <slot>
<view class="relative flex flex-row justify-center items-center"> <view class="relative flex flex-row justify-center items-center">
<!-- 图片 --> <!-- 图片 -->
<image class="w-full rounded-20" :src="info.coverPic" mode="widthFix" lazy-load @click="goDetail()"> <image class="rounded-20" style="width: 100%; height: 300rpx !important;" :src="info.coverPic"
mode="aspectFill" lazy-load @click="goDetail()">
</image> </image>
<template v-if="info.type === 'video'"> <template v-if="info.type === 'video'">
<!-- 视频 --> <!-- 视频 -->
@ -47,7 +48,7 @@
</view> </view>
</slot> </slot>
<!-- 点赞、评论 --> <!-- 点赞、评论 -->
<view class="flex flex-row justify-between items-center text-gray-500 my-10"> <!-- <view class="flex flex-row justify-between items-center text-gray-500 my-10">
<view class="flex flex-row justify-center items-center"> <view class="flex flex-row justify-center items-center">
<view class="flex flex-row justify-center items-center mr-20" @click.stop="handleMark('smile')"> <view class="flex flex-row justify-center items-center mr-20" @click.stop="handleMark('smile')">
<view class="iconfont mr-10 text-36" :class="[handleIcon('smile',info.infoNum)]"></view> <view class="iconfont mr-10 text-36" :class="[handleIcon('smile',info.infoNum)]"></view>
@ -68,7 +69,7 @@
{{info.shareNum}} {{info.shareNum}}
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
</template> </template>
@ -153,7 +154,23 @@
goDetail() { goDetail() {
if (this.isDetail) return // 详情页，不跳转 if (this.isDetail) return // 详情页，不跳转
this.$u.route('pages/home/detail', { this.$u.route('pages/home/detail', {
data: JSON.stringify(this.info) data: JSON.stringify({
age: 30,
commentNum: 388,
coverPic: "/static/img/list/01.jpg",
infoNum: {
cryNum: 2,
index: 0,
smileNum: 13
},
isFollow: false,
sex: 1,
shareNum: 32,
title: "做一件有价值的事情，坚持下去等待时间的回报吧！",
type: "img",
userPic: "/static/img/header/a.svg",
username: "芒种"
})
}) })
} }
} }

16
pages/home/detail.vue
View File

@ -12,13 +12,12 @@
@click="handlePreview(index)"></image> @click="handlePreview(index)"></image>
</view> </view>
</info-list> </info-list>
<u-gap height="20" bgColor="#F9FAFB"></u-gap> <!-- <u-gap height="20" bgColor="#F9FAFB"></u-gap>
<view class="p-20 text-30 font-bold"> <view class="p-20 text-30 font-bold">
最新评论<text class="ml-10">3</text> 最新评论<text class="ml-10">3</text>
</view> </view> -->
<!-- 评论列表 --> <!-- 评论列表 -->
<view class="comment"> <!-- <view class="comment">
<!-- 头像 -->
<image class="rounded-full mr-20" src="../../static/img/header/a.svg" mode="aspectFill" <image class="rounded-full mr-20" src="../../static/img/header/a.svg" mode="aspectFill"
style="width: 100rpx;height: 100rpx;"></image> style="width: 100rpx;height: 100rpx;"></image>
<view class="flex-1 flex flex-col"> <view class="flex-1 flex flex-col">
@ -40,13 +39,13 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view> -->
<!-- 分享功能 --> <!-- 分享功能 -->
<popup-share :show.sync="showShare"></popup-share> <popup-share :show.sync="showShare"></popup-share>
<!-- 底部操作栏 --> <!-- 底部操作栏 -->
<view class="bottom-input"> <!-- <view class="bottom-input">
</view> </view>
<bottom-input v-if="showComment" @submit="submit"></bottom-input> <bottom-input v-if="showComment" @submit="submit"></bottom-input> -->
</view> </view>
</template> </template>
@ -67,6 +66,7 @@
} }
}, },
onLoad(e) { onLoad(e) {
console.log(e);
e.data && this.init(JSON.parse(e.data)) e.data && this.init(JSON.parse(e.data))
}, },
// 监听原生标题栏按钮点击事件 // 监听原生标题栏按钮点击事件
@ -179,4 +179,4 @@
height: 100rpx; height: 100rpx;
} }
} }
</style> </style>

358
pages/home/home.vue
View File

@ -1,242 +1,250 @@
<template> <template>
<!-- 首页 --> <!-- 新鲜事页 -->
<view class="home"> <view class="news">
<!-- 小程序导航栏 --> <!-- 导航栏 -->
<!-- <u-navbar placeholder>
<view slot="left"></view>
<view slot="center" class="nav-center">
<view :class="{'active':tabIndex === index}" @click="changeTab(index)" v-for="(item,index) in tabList"
:key="index">
<view class="nav-title">{{item.name}}</view>
<view class="active-line"></view>
</view>
</view>
</u-navbar> -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-navbar placeholder> <u-navbar placeholder>
<view slot="left" @click="btn" class="iconfont iconqiandao" style="visibility: hidden;"></view> <view slot="left" @click="btn" class="iconfont iconqiandao" style="visibility: hidden;"></view>
<view slot="center" class="nav-center"> <view slot="center" class="nav-center">
<u-search placeholder="搜索新鲜事" @click="handleSearch()" :showAction="false" disabled></u-search> <u-search placeholder="搜索新鲜事" @click="goSearch()" :showAction="false" disabled></u-search>
</view> </view>
<!-- <view slot="right" class="iconfont iconPensyumaobi" @click="handlePublish()"></view> --> <!-- <view slot="right" class="iconfont iconPensyumaobi" @click="handlePublish()"></view> -->
</u-navbar> </u-navbar>
<!-- #endif --> <!-- #endif -->
<!-- 标签 --> <!-- 信息列表 -->
<u-sticky bgColor="#fff"> <swiper class="bg-white px-20 py-20" :style="{height:swiperHeight + 'px'}" :current="tabIndex"
<u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex" @change="changeSwiper">
lineColor="#3c9cff" :activeStyle="{color:'#3c9cff'}" :inactiveStyle="{color:'#909399'}" lineWidth="30" <!-- <swiper-item>
:scrollable="false"> <scroll-view scroll-y class="flow h-full" @scrolltolower="reachBottom">
</u-tabs> <info-list v-for="(item,index) in followList.list" :key="index" :item="item">
</u-sticky> </info-list>
<!-- 列表 --> <u-loadmore :status="followList.loadStatus"></u-loadmore>
<swiper class="flex-1" :current="swiperIndex" @animationfinish="animationfinish"> </scroll-view>
<swiper-item class="h-full" v-for="(item, index) in swiperList" :key="index"> </swiper-item> -->
<scroll-view :ref="'scrollView'+index" :scroll-top="scrollTops[tabIndex]" class="w-full h-full" scroll-y <!-- 话题 -->
@scrolltolower="reachBottom" @scroll="scroll"> <swiper-item>
<!-- 有内容 --> <scroll-view scroll-y class="topic h-full">
<template v-if="item.list.length > 0"> <!-- 搜索框 -->
<!-- 资讯列表 --> <!-- <view class="search-input" @click="goSearch">
<info-list :item="item1" v-for="(item1,index1) in item.list" :key="index1" :index="index1" <u-input type="text" placeholder="请输入搜索内容"
@mark="handleMark" @follow="handleFollow"> placeholderClass="iconfont iconsousuo text-28" border="none" inputAlign="center" clearable
</info-list> confirmType="search" disabled>
<u-loadmore :status="loadStatus[tabIndex]"></u-loadmore> </u-input>
</template> </view> -->
<!-- 无内容 --> <!-- 轮播图 -->
<template v-else> <u-swiper :list="topicList.swiper" keyName="image" indicator indicatorMode="line" circular
<u-empty text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16" marginTop='25%' height="320rpx" bgColor="#ffffff"></u-swiper>
mode="list"></u-empty> <news-topic-nav title="招聘公告" url=""></news-topic-nav>
</template> <view class="last-update">
<topic-list v-if='index<=2' :item="item" v-for="(item,index) in topicList.list"
:key="index"></topic-list>
</view>
<news-topic-nav title="技能培训" url=""></news-topic-nav>
<view class="last-update">
<topic-list v-if='index<=2' :item="item" v-for="(item,index) in topicList.list"
:key="index"></topic-list>
</view>
</scroll-view> </scroll-view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<!-- 回到顶部 -->
<view v-if="scrollTop[tabIndex] > 400" class="go-top" @click="goTop">
<u-icon color="#3c9cff" name="arrow-up" size="24"></u-icon>
</view>
</view> </view>
</template> </template>
<script> <script>
import { import {
newsList newsList,
topicList
} from "@/utils/data/data.js" } from "@/utils/data/data.js"
import {
register
} from '@/api/login.js'
import InfoList from "@/pages/home/cpns/info-list.vue" import InfoList from "@/pages/home/cpns/info-list.vue"
import NewsTopicNav from "@/pages/news/cpns/news-topic-nav.vue"
import TopicList from "@/pages/news/cpns/topic-list.vue"
export default { export default {
components: { components: {
InfoList InfoList,
NewsTopicNav,
TopicList
}, },
data() { data() {
return { return {
scrollTops: [0, 0, 0, 0, 0, 0], // 导航标签
scrollTop: [0, 0, 0, 0, 0, 0], tabIndex: 1,
// 加载更多 // loadmore/ loading / nomore tabList: [{
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'], name: "关注",
// 标签栏 id: 'follow'
tabIndex: 0,
tablist: [{
name: "关注"
}, },
{ {
name: "谷雨" name: "话题",
}, id: 'topic'
{
name: "芒种"
},
{
name: "小满",
},
{
name: "霜降"
},
{
name: "寒露"
} }
], ],
// 列表数据 swiperHeight: 0,
swiperIndex: 0, // 关注列表
swiperList: newsList followList: {
// 加载更多
loadStatus: 'loadmore',
// 列表数据
list: newsList[0].list
},
// 话题列表
topicList: {
swiper: [ // 轮播图
{
image: '/static/img/demo/winter.png',
title: '迷人的春天是令人欢欣鼓舞的。'
},
{
image: '/static/img/demo/winter.png',
title: '一道残阳铺水中，半江瑟瑟半江红。'
},
{
image: '/static/img/demo/winter.png',
title: '金秋的阳光温馨恬静，金秋的微风和煦轻柔。'
},
{
image: '/static/img/demo/winter.png',
title: '风吹过，寒气直侵入骨头。'
}
],
list: topicList[1].list
}
} }
}, },
// 监听原生标题栏搜索输入框点击事件 onLoad() {
onNavigationBarSearchInputClicked() { // 设置swiperHeight
this.handleSearch() uni.getSystemInfo({
}, success: (res) => {
// 监听原生标题栏按钮点击事件 // 屏幕高度（screenHeight) = 手机状态栏的高度(statusBarHeight) + 导航栏高度(44px) + 可使用窗口高度(windowHeight)
onNavigationBarButtonTap(e) { // 可使用窗口高度 = swiper高度 + 自定义导航栏高度
switch (e.index) { this.swiperHeight = res.windowHeight - 44
case 1: }
this.handlePublish() })
break;
}
}, },
methods: { methods: {
btn() { // tabbar点击
uni.login({ changeTab(index) {
success: (res) => { this.tabIndex = index
console.log(res);
}
})
}, },
// 发布 // swiper滑动
handlePublish() { changeSwiper(e) {
this.$u.route('/pages/home/release')
},
// 搜索
handleSearch() {
this.$u.route('/pages/home/search', {
type: 'info'
})
},
// tab栏切换
changeTab(item) {
this.tabIndex = item.index
this.swiperIndex = item.index
},
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
this.tabIndex = e.detail.current this.tabIndex = e.detail.current
this.swiperIndex = e.detail.current
}, },
// scroll-view到底部加载更多 // scroll-view触底
reachBottom() { reachBottom() {
// 是否可加载 // 是否可加载
if (this.loadStatus[this.tabIndex] !== 'loadmore') return if (this.followList.loadStatus !== 'loadmore') return;
// 加载中 // 加载更多
this.loadStatus.splice(this.tabIndex, 1, "loading") this.followList.loadStatus = "loading"
setTimeout(() => { setTimeout(() => {
this.getList(this.tabIndex) this.getList()
}, 1000); }, 1000);
}, },
// 获取列表 // 获取列表
getList(index) { getList(idx) {
// 随机添加5条数据 // 随机添加5条数据
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
let curr = this.$u.random(0, this.swiperList[index].list.length - 1) let index = this.$u.random(0, this.followList.list.length - 1)
let data = this.swiperList[index].list[curr] let data = JSON.parse(JSON.stringify(this.followList.list[index]))
this.swiperList[index].list.push(data) this.followList.list.push(data)
} }
// 加载更多 // 更新加载状态
this.loadStatus.splice(this.tabIndex, 1, "nomore") this.followList.loadStatus = "nomore"
}, },
// 回到顶部 // 搜索
scroll(e) { goSearch() {
const index = this.tabIndex this.$u.route('/pages/home/search', {
this.scrollTop.splice(index, 1, e.detail.scrollTop) // 400显示回到顶部 type: 'topic'
},
// 回到顶部
goTop() {
const index = this.tabIndex
// 解决view层不同步的问题
this.scrollTops.splice(index, 1, this.scrollTop[index])
this.$nextTick(function() {
this.scrollTops.splice(index, 1, 0)
this.scrollTop.splice(index, 1, 0)
}) })
}, }
// 关注
handleFollow(item) {
this.swiperList[this.swiperIndex].list[item.index].isFollow = item.value
const title = item.value ? '关注成功' : '取消成功'
uni.showToast({
title,
icon: 'none',
})
},
// 表情
handleMark(item) {
let infoNum = this.swiperList[this.swiperIndex].list[item.index].infoNum
switch (item.value) {
case 'smile':
if (infoNum.index == 1) return // 微笑
else if (infoNum.index == 2) infoNum.cryNum--
infoNum.index = 1
infoNum.smileNum++
break;
case 'cry':
if (infoNum.index == 2) return // 踩
else if (infoNum.index == 1) infoNum.smileNum--
infoNum.index = 2
infoNum.cryNum++
break
}
const title = item.value === 'smile' ? '谢谢表扬' : '继续加油'
uni.showToast({
title,
icon: 'none',
})
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .news {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
width: 100%;
// 小程序导航栏 // 导航栏
/* #ifdef MP-WEIXIN */
/deep/ .u-navbar { /deep/ .u-navbar {
.iconfont { .iconfont {
font-size: 48rpx; font-size: 48rpx;
color: $uni-color-green; color: $uni-color-green;
} }
.nav-center {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.nav-title {
width: 60rpx;
font-size: 30rpx;
padding: 0 15rpx;
font-weight: bold;
color: $uni-text-color-gray;
}
.active {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.nav-title {
color: $uni-color-green;
}
.active-line {
border-bottom: 8rpx solid $uni-color-green;
border-radius: 20rpx;
width: 70rpx;
position: absolute;
bottom: -10rpx;
left: 50%;
margin-left: -35rpx;
}
}
}
.u-navbar__content { .u-navbar__content {
margin-right: 180rpx !important; // 胶囊按钮 padding-right: 180rpx !important; // 胶囊按钮
} }
} }
/* #endif */ .topic {
.search-input {
margin-top: 20rpx;
margin-bottom: 20rpx;
height: 70rpx;
background-color: #F4F4F4;
border-radius: 10rpx;
/deep/ .u-input {
height: 100%;
}
}
.last-update {
padding: 0 20rpx 20rpx;
.last-update-name {
font-size: 32rpx;
padding-bottom: 5rpx;
}
}
// 回到顶部
.go-top {
position: fixed;
right: 30rpx;
bottom: 100rpx;
height: 80rpx;
width: 80rpx;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
} }
} }
</style> </style>

34
pages/mine/mine.vue
View File

@ -6,15 +6,15 @@
<!-- 头像栏 --> <!-- 头像栏 -->
<view class="flex items-center wrap-card" hover-class="bg-gray-100" @click="$u.route('/pages/mine/set')"> <view class="flex items-center wrap-card" hover-class="bg-gray-100" @click="$u.route('/pages/mine/set')">
<image class="header-img" src="/static/img/header/a.svg" mode="" <image class="header-img" src="/static/img/header/a.svg" mode=""
@click.stop="$u.route('/pages/mine/user-space')"></image> @click.stop="$u.route('/pages/mine/set')"></image>
<view class="flex flex-col flex-1 px-20"> <view class="flex flex-col flex-1 px-20">
<text class="text-32 font-bold">MrThinco</text> <text class="text-32 font-bold">MrThinco</text>
<text class="text-28 text-gray-500 mt-10">总帖子&nbsp;38&nbsp;&nbsp;今日发帖&nbsp;2</text> <text class="text-28 text-gray-500 mt-10">17729744485</text>
</view> </view>
<text class="iconfont iconqianjin"></text> <text class="iconfont iconqianjin"></text>
</view> </view>
<!-- 统计栏 --> <!-- 统计栏 -->
<view class="wrap-card flex items-center"> <!-- <view class="wrap-card flex items-center">
<view v-for="(item,index) in countList" :key="index" <view v-for="(item,index) in countList" :key="index"
class="flex-1 flex flex-col items-center justify-center"> class="flex-1 flex flex-col items-center justify-center">
<view class="text-32 font-bold"> <view class="text-32 font-bold">
@ -24,7 +24,7 @@
{{item.name}} {{item.name}}
</view> </view>
</view> </view>
</view> </view> -->
<!-- 广告位 --> <!-- 广告位 -->
<view class="wrap-card"> <view class="wrap-card">
<image class="adv-img rounded-20" src="../../static/img/list/01.jpg" mode="aspectFill"></image> <image class="adv-img rounded-20" src="../../static/img/list/01.jpg" mode="aspectFill"></image>
@ -63,23 +63,23 @@
], ],
// 设置列表 // 设置列表
setList: [ setList: [
{ // {
icon: 'iconhuiyuan', // icon: 'iconhuiyuan',
name: '个人空间', // name: '个人空间',
url: 'user-space' // url: 'user-space'
}, // },
{ {
icon: 'iconliulan', icon: 'iconliulan',
name: '浏览历史' name: '浏览历史'
}, },
{ // {
icon: 'iconrenzheng', // icon: 'iconrenzheng',
name: '社区认证' // name: '社区认证'
}, // },
{ // {
icon: 'iconshenhe', // icon: 'iconshenhe',
name: '审核帖子' // name: '审核帖子'
}, // },
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
{ {
icon: 'iconshezhi1', icon: 'iconshezhi1',

62
pages/mine/set.vue
View File

@ -7,18 +7,18 @@
</u-cell> </u-cell>
</u-cell-group> </u-cell-group>
<!-- 底部操作 --> <!-- 底部操作 -->
<view class="wrap-bottom-bar"> <!-- <view class="wrap-bottom-bar">
<view class="bar-placeholder"></view> <view class="bar-placeholder"></view>
<view class="bar-content"> <view class="bar-content">
<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="goPage('logout')">退出</u-button> <u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="goPage('logout')">退出</u-button>
</view> </view>
</view> </view> -->
<!-- 退出 --> <!-- 退出 -->
<u-modal title="提示" @cancel="logoutShow=false" showCancelButton :show="logoutShow" @confirm="logout" <!-- <u-modal title="提示" @cancel="logoutShow=false" showCancelButton :show="logoutShow" @confirm="logout"
ref="uModal" :asyncClose="true" content="您是否确定要，退出登录?"></u-modal> ref="uModal" :asyncClose="true" content="您是否确定要，退出登录?"></u-modal> -->
<!-- 注销 --> <!-- 注销 -->
<u-modal title="提示" @cancel="cancleShow=false" showCancelButton :show="cancleShow" @confirm="cancleShow=false" <!-- <u-modal title="提示" @cancel="cancleShow=false" showCancelButton :show="cancleShow" @confirm="cancleShow=false"
ref="uModal" :asyncClose="true" content="您是否确定要，注销账号?"></u-modal> ref="uModal" :asyncClose="true" content="您是否确定要，注销账号?"></u-modal> -->
</view> </view>
</template> </template>
@ -29,34 +29,36 @@
logoutShow: false, logoutShow: false,
cancleShow: false, cancleShow: false,
// 设置列表 // 设置列表
setList: [{ setList: [
name: '账号与安全', // {
url: 'edit-pwd' // name: '账号与安全',
}, // url: 'edit-pwd'
{ // },
name: '绑定邮箱', // {
url: 'bind-email' // name: '绑定邮箱',
}, // url: 'bind-email'
// },
{ {
name: '修改资料', name: '修改资料',
url: 'edit-info' url: 'edit-info'
},
{
name: '清除缓存',
url: 'clear'
},
{
name: '意见反馈',
url: 'feedback'
},
{
name: '关于社区',
url: 'about'
},
{
name: '注销账号',
url: 'cancle'
} }
// ,
// {
// name: '清除缓存',
// url: 'clear'
// },
// {
// name: '意见反馈',
// url: 'feedback'
// },
// {
// name: '关于社区',
// url: 'about'
// },
// {
// name: '注销账号',
// url: 'cancle'
// }
], ],
// 按钮配置 // 按钮配置
btnStyle: { btnStyle: {

60
pages/news/cpns/news-topic-nav.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<view class="hot-nav"> <view class="hot-nav">
<view class="flex justify-between column-one"> <view class="flex justify-between column-one">
<view class="">热门分类</view> <view class="">{{title}}</view>
<view class="flex justify-between items-center" @click="goTopicNav()"> <view class="flex justify-between items-center nav" @click="goTopicNav()">
更多<view class="iconfont iconqianjin"></view> 更多<view class="iconfont iconqianjin"></view>
</view> </view>
</view> </view>
@ -20,17 +20,20 @@
* @property {Array} list 列表信息 * @property {Array} list 列表信息
*/ */
export default { export default {
props:{ props: {
list: Array list: Array,
title: "",
url: ''
}, },
data() { data() {
return { return {
}; };
}, },
methods: { methods: {
// 话题分类 // 话题分类
goTopicNav() { goTopicNav() {
//
this.$u.route('/pages/news/news-topic-cate'); this.$u.route('/pages/news/news-topic-cate');
} }
} }
@ -38,27 +41,34 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hot-nav { .hot-nav {
// border-top: 1rpx solid #EEEEEE; // border-top: 1rpx solid #EEEEEE;
border-bottom: 1rpx solid #EEEEEE; border-bottom: 1rpx solid #EEEEEE;
padding: 20rpx 20rpx 0 20rpx; padding: 20rpx 20rpx 0 20rpx;
margin-top: 10rpx; margin-top: 10rpx;
.column-one {
margin-bottom: 20rpx; .column-one {
& > view:last-child { margin-bottom: 20rpx;
&>view:last-child {
color: #9b9b9b;
}
&>view:first-child {
font-size: 32rpx;
}
}
.column-two>view {
text-align: center;
flex: 1;
background: #f9f9f9;
color: #9b9b9b; color: #9b9b9b;
} border-radius: 10rpx;
& > view:first-child { margin: 0 10rpx;
font-size: 32rpx;
} }
} }
.column-two > view { .nav{
text-align: center; font-size: 28rpx;
flex: 1;
background: #f9f9f9;
color: #9b9b9b;
border-radius: 10rpx;
margin: 0 10rpx;
} }
} </style>
</style>

31
pages/news/cpns/topic-list.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<!-- 新鲜事/话题列表 --> <!-- 新鲜事/话题列表 -->
<view class="topic-list flex items-center" @click="goTopicDetail(item)"> <view class="topic-list flex items-center" @click="goTopicDetail(item)">
<image style="width: 200rpx; height: 140rpx;" :src="item.img" lazy-load mode="aspectFill"></image> <image style="width: 200rpx; height: 140rpx;" :src="item.img" lazy-load mode="aspectFill"></image>
<view class="my-20 flex-1"> <view class="my-20 flex-1">
<view class="text-black text-32">#{{item.title}}#</view> <view class="text-black text-32">#{{item.title}}#</view>
<view class="text-gray-400 text-26 my-10">{{item.desc}}</view> <view class="text-gray-400 text-26 my-10">{{item.desc}}</view>
<view class="text-gray-400 text-24 my-10 flex w-full"> <view class="text-gray-400 text-24 my-10 flex w-full">
<view class="w-1-2 text-left">热度：{{item.totalNum}}</view> <view class="w-1-2 text-left">观看量：{{item.totalNum}}</view>
<view class="w-1-2 text-left">今日：{{item.todayNum}}</view> <view class="w-1-2 text-left">今日：{{item.todayNum}}</view>
</view> </view>
</view> </view>
@ -35,9 +35,28 @@
methods: { methods: {
// 话题详情 // 话题详情
goTopicDetail(item) { goTopicDetail(item) {
this.$u.route({ // this.$u.route({
url: '/pages/news/news-topic-detail', // url: '/pages/news/news-topic-detail',
params: item // params: item
// })
this.$u.route('pages/home/detail', {
data: JSON.stringify({
age: 30,
commentNum: 388,
coverPic: "/static/img/list/01.jpg",
infoNum: {
cryNum: 2,
index: 0,
smileNum: 13
},
isFollow: false,
sex: 1,
shareNum: 32,
title: "做一件有价值的事情，坚持下去等待时间的回报吧！",
type: "img",
userPic: "/static/img/header/a.svg",
username: "芒种"
})
}) })
} }
} }
@ -53,4 +72,4 @@
margin-right: 20rpx; margin-right: 20rpx;
} }
} }
</style> </style>

2
pages/news/news-topic-cate.vue
View File

@ -4,7 +4,7 @@
<!-- 标签 --> <!-- 标签 -->
<u-sticky bgColor="#fff"> <u-sticky bgColor="#fff">
<u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex" <u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex"
lineColor="#01906c" :activeStyle="{color:'#01906c'}" :inactiveStyle="{color:'#909399'}" lineWidth="30" lineColor="#3c9cff" :activeStyle="{color:'#3c9cff'}" :inactiveStyle="{color:'#909399'}" lineWidth="30"
:scrollable="false"> :scrollable="false">
</u-tabs> </u-tabs>
</u-sticky> </u-sticky>

359
pages/news/news.vue
View File

@ -1,248 +1,245 @@
<template> <template>
<!-- 新鲜事页 --> <!-- 首页 -->
<view class="news"> <view class="home">
<!-- 导航栏 --> <!-- 小程序导航栏 -->
<!-- <u-navbar placeholder>
<view slot="left"></view>
<view slot="center" class="nav-center">
<view :class="{'active':tabIndex === index}" @click="changeTab(index)" v-for="(item,index) in tabList"
:key="index">
<view class="nav-title">{{item.name}}</view>
<view class="active-line"></view>
</view>
</view>
</u-navbar> -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-navbar placeholder> <u-navbar placeholder>
<view slot="left" @click="btn" class="iconfont iconqiandao" style="visibility: hidden;"></view> <view slot="left" @click="btn" class="iconfont iconqiandao" style="visibility: hidden;"></view>
<view slot="center" class="nav-center"> <view slot="center" class="nav-center">
<u-search placeholder="搜索新鲜事" @click="goSearch()" :showAction="false" disabled></u-search> <u-search placeholder="搜索新鲜事" @click="handleSearch()" :showAction="false" disabled></u-search>
</view> </view>
<!-- <view slot="right" class="iconfont iconPensyumaobi" @click="handlePublish()"></view> --> <!-- <view slot="right" class="iconfont iconPensyumaobi" @click="handlePublish()"></view> -->
</u-navbar> </u-navbar>
<!-- #endif --> <!-- #endif -->
<!-- 信息列表 --> <!-- 标签 -->
<swiper class="bg-white px-20 py-20" :style="{height:swiperHeight + 'px'}" :current="tabIndex" <u-sticky bgColor="#fff">
@change="changeSwiper"> <u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex"
<!-- <swiper-item> lineColor="#3c9cff" :activeStyle="{color:'#3c9cff'}" :inactiveStyle="{color:'#909399'}" lineWidth="30"
<scroll-view scroll-y class="flow h-full" @scrolltolower="reachBottom"> :scrollable="false">
<info-list v-for="(item,index) in followList.list" :key="index" :item="item"> <view slot="right" style="padding-right: 4px;" @tap="$u.route('/pages/news/news-topic-cate')">
</info-list> <u-icon name="list" size="23" bold></u-icon>
<u-loadmore :status="followList.loadStatus"></u-loadmore> </view>
</scroll-view> </u-tabs>
</swiper-item> --> </u-sticky>
<!-- 话题 --> <!-- 列表 -->
<swiper-item> <swiper class="flex-1" :current="swiperIndex" @animationfinish="animationfinish">
<scroll-view scroll-y class="topic h-full"> <swiper-item class="h-full" v-for="(item, index) in swiperList" :key="index">
<!-- 搜索框 --> <scroll-view :ref="'scrollView'+index" :scroll-top="scrollTops[tabIndex]" class="w-full h-full" scroll-y
<!-- <view class="search-input" @click="goSearch"> @scrolltolower="reachBottom" @scroll="scroll">
<u-input type="text" placeholder="请输入搜索内容" <!-- 有内容 -->
placeholderClass="iconfont iconsousuo text-28" border="none" inputAlign="center" clearable <template v-if="item.list.length > 0">
confirmType="search" disabled> <!-- 资讯列表 -->
</u-input> <info-list :item="item1" v-for="(item1,index1) in item.list" :key="index1" :index="index1"
</view> --> @mark="handleMark" @follow="handleFollow">
<!-- 轮播图 --> </info-list>
<u-swiper :list="topicList.swiper" keyName="image" indicator indicatorMode="line" circular <u-loadmore :status="loadStatus[tabIndex]"></u-loadmore>
height="320rpx" bgColor="#ffffff"></u-swiper> </template>
<!-- 热门分类 --> <!-- 无内容 -->
<news-topic-nav></news-topic-nav> <template v-else>
<!-- 最近更新 --> <u-empty text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16" marginTop='25%'
<view class="last-update"> mode="list"></u-empty>
<!-- <view class="last-update-name">最近更新</view> --> </template>
<topic-list v-if='index<=3' :item="item" v-for="(item,index) in topicList.list"
:key="index"></topic-list>
</view>
</scroll-view> </scroll-view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<!-- 回到顶部 -->
<view v-if="scrollTop[tabIndex] > 400" class="go-top" @click="goTop">
<u-icon color="#3c9cff" name="arrow-up" size="24"></u-icon>
</view>
</view> </view>
</template> </template>
<script> <script>
import { import {
newsList, newsList
topicList
} from "@/utils/data/data.js" } from "@/utils/data/data.js"
import {
register
} from '@/api/login.js'
import InfoList from "@/pages/home/cpns/info-list.vue" import InfoList from "@/pages/home/cpns/info-list.vue"
import NewsTopicNav from "@/pages/news/cpns/news-topic-nav.vue"
import TopicList from "@/pages/news/cpns/topic-list.vue"
export default { export default {
components: { components: {
InfoList, InfoList
NewsTopicNav,
TopicList
}, },
data() { data() {
return { return {
// 导航标签 scrollTops: [0, 0, 0, 0, 0, 0],
tabIndex: 1, scrollTop: [0, 0, 0, 0, 0, 0],
tabList: [{ // 加载更多 // loadmore/ loading / nomore
name: "关注", loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
id: 'follow' // 标签栏
tabIndex: 0,
tablist: [{
name: "关注"
}, },
{ {
name: "话题", name: "谷雨"
id: 'topic' },
{
name: "芒种"
},
{
name: "小满",
},
{
name: "霜降"
},
{
name: "寒露"
} }
], ],
swiperHeight: 0, // 列表数据
// 关注列表 swiperIndex: 0,
followList: { swiperList: newsList
// 加载更多
loadStatus: 'loadmore',
// 列表数据
list: newsList[0].list
},
// 话题列表
topicList: {
swiper: [ // 轮播图
{
image: '/static/img/demo/winter.png',
title: '迷人的春天是令人欢欣鼓舞的。'
},
{
image: '/static/img/demo/winter.png',
title: '一道残阳铺水中，半江瑟瑟半江红。'
},
{
image: '/static/img/demo/winter.png',
title: '金秋的阳光温馨恬静，金秋的微风和煦轻柔。'
},
{
image: '/static/img/demo/winter.png',
title: '风吹过，寒气直侵入骨头。'
}
],
list: topicList[1].list
}
} }
}, },
onLoad() { // 监听原生标题栏搜索输入框点击事件
// 设置swiperHeight onNavigationBarSearchInputClicked() {
uni.getSystemInfo({ this.handleSearch()
success: (res) => { },
// 屏幕高度（screenHeight) = 手机状态栏的高度(statusBarHeight) + 导航栏高度(44px) + 可使用窗口高度(windowHeight) // 监听原生标题栏按钮点击事件
// 可使用窗口高度 = swiper高度 + 自定义导航栏高度 onNavigationBarButtonTap(e) {
this.swiperHeight = res.windowHeight - 44 switch (e.index) {
} case 1:
}) this.handlePublish()
break;
}
}, },
methods: { methods: {
// tabbar点击 btn() {
changeTab(index) { uni.login({
this.tabIndex = index success: (res) => {
console.log(res);
}
})
}, },
// swiper滑动 // 发布
changeSwiper(e) { handlePublish() {
this.$u.route('/pages/home/release')
},
// 搜索
handleSearch() {
this.$u.route('/pages/home/search', {
type: 'info'
})
},
// tab栏切换
changeTab(item) {
this.tabIndex = item.index
this.swiperIndex = item.index
},
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
this.tabIndex = e.detail.current this.tabIndex = e.detail.current
this.swiperIndex = e.detail.current
}, },
// scroll-view触底 // scroll-view到底部加载更多
reachBottom() { reachBottom() {
// 是否可加载 // 是否可加载
if (this.followList.loadStatus !== 'loadmore') return; if (this.loadStatus[this.tabIndex] !== 'loadmore') return
// 加载更多 // 加载中
this.followList.loadStatus = "loading" this.loadStatus.splice(this.tabIndex, 1, "loading")
setTimeout(() => { setTimeout(() => {
this.getList() this.getList(this.tabIndex)
}, 1000); }, 1000);
}, },
// 获取列表 // 获取列表
getList(idx) { getList(index) {
// 随机添加5条数据 // 随机添加5条数据
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
let index = this.$u.random(0, this.followList.list.length - 1) let curr = this.$u.random(0, this.swiperList[index].list.length - 1)
let data = JSON.parse(JSON.stringify(this.followList.list[index])) let data = this.swiperList[index].list[curr]
this.followList.list.push(data) this.swiperList[index].list.push(data)
} }
// 更新加载状态 // 加载更多
this.followList.loadStatus = "nomore" this.loadStatus.splice(this.tabIndex, 1, "nomore")
}, },
// 搜索 // 回到顶部
goSearch() { scroll(e) {
this.$u.route('/pages/home/search', { const index = this.tabIndex
type: 'topic' this.scrollTop.splice(index, 1, e.detail.scrollTop) // 400显示回到顶部
},
// 回到顶部
goTop() {
const index = this.tabIndex
// 解决view层不同步的问题
this.scrollTops.splice(index, 1, this.scrollTop[index])
this.$nextTick(function() {
this.scrollTops.splice(index, 1, 0)
this.scrollTop.splice(index, 1, 0)
}) })
} },
// 关注
handleFollow(item) {
this.swiperList[this.swiperIndex].list[item.index].isFollow = item.value
const title = item.value ? '关注成功' : '取消成功'
uni.showToast({
title,
icon: 'none',
})
},
// 表情
handleMark(item) {
let infoNum = this.swiperList[this.swiperIndex].list[item.index].infoNum
switch (item.value) {
case 'smile':
if (infoNum.index == 1) return // 微笑
else if (infoNum.index == 2) infoNum.cryNum--
infoNum.index = 1
infoNum.smileNum++
break;
case 'cry':
if (infoNum.index == 2) return // 踩
else if (infoNum.index == 1) infoNum.smileNum--
infoNum.index = 2
infoNum.cryNum++
break
}
const title = item.value === 'smile' ? '谢谢表扬' : '继续加油'
uni.showToast({
title,
icon: 'none',
})
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.news { .home {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
width: 100%;
// 导航栏 // 小程序导航栏
/* #ifdef MP-WEIXIN */
/deep/ .u-navbar { /deep/ .u-navbar {
.iconfont { .iconfont {
font-size: 48rpx; font-size: 48rpx;
color: $uni-color-green; color: $uni-color-green;
} }
.nav-center {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.nav-title {
width: 60rpx;
font-size: 30rpx;
padding: 0 15rpx;
font-weight: bold;
color: $uni-text-color-gray;
}
.active {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.nav-title {
color: $uni-color-green;
}
.active-line {
border-bottom: 8rpx solid $uni-color-green;
border-radius: 20rpx;
width: 70rpx;
position: absolute;
bottom: -10rpx;
left: 50%;
margin-left: -35rpx;
}
}
}
.u-navbar__content { .u-navbar__content {
padding-right: 180rpx !important; // 胶囊按钮 margin-right: 180rpx !important; // 胶囊按钮
} }
} }
.topic { /* #endif */
.search-input {
margin-top: 20rpx;
margin-bottom: 20rpx;
height: 70rpx;
background-color: #F4F4F4;
border-radius: 10rpx;
/deep/ .u-input {
height: 100%;
}
}
.last-update {
padding: 0 20rpx 20rpx;
.last-update-name {
font-size: 32rpx;
padding-bottom: 5rpx;
}
}
// 回到顶部
.go-top {
position: fixed;
right: 30rpx;
bottom: 100rpx;
height: 80rpx;
width: 80rpx;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
} }
} }
</style> </style>

48
pages/paper/cpns/paper-list.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<!-- 小纸条列表 --> <!-- 小纸条列表 -->
<view class="paper-item flex items-center p-20 border-b border-gray-100" hover-class="bg-gray" @click="goChat"> <view class="paper-item flex items-center p-20 border-b border-gray-100" hover-class="bg-gray" @click="goChat">
<image class="item-img mr-20 rounded-full" :src="item.avatar" mode=""></image> <image class=" rounded-20" style="width: 80rpx; height: 80rpx;margin: 0 20rpx;" :src="item.avatar" mode=""></image>
<view class="flex-1 flex flex-col"> <view style="display: flex;align-items: center;">
<view class="flex justify-between items-center"> <view class="flex flex-content">
<text class="text-30">{{item.nickName}}</text> <text class="text1">退役士兵教育培训承训机构申请表</text>
<text class="text-28 text-gray-500">{{item.createTime}}</text> <text class="text2">退役士兵教育培训承训机构申请表描述信息</text>
</view> </view>
<view class="flex justify-between items-center text-26 text-gray-500"> <view>
<image style="width: 50rpx; height: 50rpx;" :src="imageUrl+'retired/icon-retired-download.png'" mode="">
</image>
</view>
<!-- <view class="flex justify-between items-center text-26 text-gray-500">
<text class="item-content line-1">{{item.content}}</text> <text class="item-content line-1">{{item.content}}</text>
<u-badge type="error" max="99" :value="item.count"></u-badge> <u-badge type="error" max="99" :value="item.count"></u-badge>
</view> </view> -->
</view> </view>
</view> </view>
</template> </template>
@ -25,7 +29,7 @@
}, },
data() { data() {
return { return {
imageUrl: getApp().globalData.imgUrl
} }
}, },
methods: { methods: {
@ -47,4 +51,30 @@
max-width: 500rpx; max-width: 500rpx;
} }
} }
</style>
.flex-content {
flex-direction: column;
// border: solid 1px red;
margin-right: 30rpx;
.text1 {
width: 480rpx;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
font-size: 32rpx;
}
.text2 {
width: 480rpx;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
font-size: 24rpx;
color: #a2a2a2;
margin-top: 12rpx;
}
}
</style>

10
pages/paper/paper.vue
View File

@ -5,13 +5,13 @@
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-navbar placeholder> <u-navbar placeholder>
<view class="flex" slot="left"> <view class="flex" slot="left">
<view class="iconfont iconduoren" @click="handleFirend()"> <view style="visibility: hidden;" class="iconfont iconduoren" @click="handleFirend()">
</view> </view>
<view class="iconfont iconcaidan ml-20" @click="showPopup = true"> <view style="visibility: hidden;" class="iconfont iconcaidan ml-20" @click="showPopup = true">
</view> </view>
</view> </view>
<view slot="center" class="nav-center"> <view slot="center" class="nav-center">
小纸条 技能培训
</view> </view>
</u-navbar> </u-navbar>
<!-- #endif --> <!-- #endif -->
@ -20,7 +20,7 @@
<u-empty v-if="list.length === 0" text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16" <u-empty v-if="list.length === 0" text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16"
marginTop='25%' mode="list"></u-empty> marginTop='25%' mode="list"></u-empty>
<!-- 底部弹窗 --> <!-- 底部弹窗 -->
<u-popup :show="showPopup" @close="showPopup = false" mode="top" :safeAreaInsetTop="true"> <!-- <u-popup :show="showPopup" @close="showPopup = false" mode="top" :safeAreaInsetTop="true">
<view class="flex justify-center items-center text-30 py-20 border-b" hover-class="bg-gray" <view class="flex justify-center items-center text-30 py-20 border-b" hover-class="bg-gray"
@click="popupHandle('friend')"> @click="popupHandle('friend')">
<text class="iconfont iconsousuo mr-20"></text>添加好友 <text class="iconfont iconsousuo mr-20"></text>添加好友
@ -29,7 +29,7 @@
@click="popupHandle('clear')"> @click="popupHandle('clear')">
<text class="iconfont iconshanchu mr-20"></text>清空消息 <text class="iconfont iconshanchu mr-20"></text>清空消息
</view> </view>
</u-popup> </u-popup> -->
</view> </view>
</template> </template>