9 changed files with 418 additions and 46 deletions
-
39package.json
-
7src/pages.json
-
67src/subpackage/community/components/list_item.vue
-
4src/subpackage/community/components/tab_bar.vue
-
42src/subpackage/community/pages/index.vue
-
97src/subpackage/community/pages/modules/tab_pages/one.vue
-
187src/subpackage/community/pages/modules/tab_pages/three.vue
-
3vue.config.js
-
18yarn.lock
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view class="list-item"> |
|||
<image src="https://imgcdn.ouxuanzhineng.cn/upload/63/362/banner/95187047953124ba158c7146e09805a2.jpg" class="wi-img" mode="widthFix"></image> |
|||
<view class="wi-content"> |
|||
<view class="wi-des">天神之眼👀是什么</view> |
|||
<view class="wi-user"> |
|||
<view class="wu-info"> |
|||
<image class="wi-img" mode="aspectFill" src="https://imgcdn.ouxuanzhineng.cn/upload/63/362/banner/95187047953124ba158c7146e09805a2.jpg"></image> |
|||
<view class="wi-name">湖人总冠军</view> |
|||
</view> |
|||
<view class="wu-like"> |
|||
<!-- <uv-icon name="heart"></uv-icon> --> |
|||
<uv-icon name="heart-fill" color="#ff0036"></uv-icon> |
|||
<text>1</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.list-item { |
|||
overflow: hidden; |
|||
border-radius: 12upx; |
|||
background: #fff; |
|||
.wi-img{ |
|||
width: 100%; |
|||
} |
|||
.wi-content{ |
|||
padding: 12upx; |
|||
} |
|||
.wi-des{ |
|||
@include flcw(28upx, 40upx, #333); |
|||
} |
|||
.wi-user{ |
|||
margin-top: 12upx; |
|||
@include ctf(space-between); |
|||
.wu-info{ |
|||
@include ctf; |
|||
.wi-img{ |
|||
margin-right: 12upx; |
|||
flex-shrink: 0; |
|||
width: 56upx; |
|||
height: 56upx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
.wi-name{ |
|||
flex-grow: 1; |
|||
@include flcw(24upx, 60upx, #5A5A5A); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.wu-like{ |
|||
margin-left: 16upx; |
|||
@include flcw(28upx, 42upx, #ACACAC); |
|||
@include ctf(flex-end); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,49 +1,45 @@ |
|||
<template> |
|||
<view class="index-container"> |
|||
|
|||
<scroll-view class="ic-scroll" :style="scrollStyle"> |
|||
|
|||
</scroll-view> |
|||
<tab-bar ref="tabBar"></tab-bar> |
|||
<pages-one v-show="tabIdx === 0" :safe-height="safeHeight"></pages-one> |
|||
<pages-three v-show="tabIdx === 2" :tab-bar-height="tabBarHeight" :safe-height="safeHeight"></pages-three> |
|||
<tab-bar ref="tabBar" @click:item="tabChange"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import pagesOne from "./modules/tab_pages/one.vue"; |
|||
import pagesThree from "./modules/tab_pages/three.vue"; |
|||
import tabBar from "../components/tab_bar.vue"; |
|||
import { getNodeMes } from "../../../utils/util.js"; |
|||
export default { |
|||
components:{ tabBar }, |
|||
computed: { |
|||
scrollStyle(){ |
|||
let { remainHeight } = this; |
|||
return `height: ${remainHeight}px;`; |
|||
} |
|||
}, |
|||
components:{ tabBar, pagesOne, pagesThree }, |
|||
data() { |
|||
return { |
|||
remainHeight: 650, |
|||
tabBarHeight: 0, |
|||
safeHeight: 0, |
|||
tabIdx: 0, |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
async onLoad(){ |
|||
this.initSafeHeight(); |
|||
}, |
|||
methods: { |
|||
async initSafeHeight(){ |
|||
let _tabBarInfo = await this.$refs?.tabBar?.getDomInfo?.(); |
|||
let _winInfo = uni.getWindowInfo(); |
|||
console.log('wInfo --->', _winInfo); |
|||
let _remainHeight = _winInfo?.windowHeight - _tabBarInfo?.height; |
|||
this.remainHeight = _remainHeight; |
|||
console.warn('_remainHeight -->', _remainHeight) |
|||
let _tHeight = _tabBarInfo?.height ?? 0; |
|||
let _remainHeight = (_winInfo?.windowHeight ?? 0) - _tHeight; |
|||
this.tabBarHeight = _tHeight; |
|||
this.safeHeight = _remainHeight; |
|||
}, |
|||
tabChange(idx){ |
|||
this.tabIdx = idx; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.index-container{ |
|||
.ic-scroll{ |
|||
background: #000; |
|||
} |
|||
page{ |
|||
background: #f2f2f7; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<view class="page-one"> |
|||
<view class="po-tab"> |
|||
<uv-tabs id="uvTabs" ref="tabs" :list="tabList" :current="0" :scroll-count="0" bar-animate-mode="worm" |
|||
:active-style="{color: '#000',fontWeight: 700}" bg-color="#fff" @click="clickTab"> |
|||
</uv-tabs> |
|||
</view> |
|||
<scroll-view scroll-y :style="scrollStyle"> |
|||
<uv-waterfall ref="waterfall" |
|||
v-model="list" |
|||
:add-time="10" |
|||
:left-gap="leftGap" |
|||
:right-gap="rightGap" |
|||
:column-gap="columnGap" |
|||
@changeList="changeList" |
|||
> |
|||
<!-- 第一列数据 --> |
|||
<template v-slot:list1> |
|||
<!-- 为了磨平部分平台的BUG，必须套一层view --> |
|||
<view> |
|||
<view style="height: 24rpx;"></view> |
|||
<list-item></list-item> |
|||
<view style="height: 24rpx;"></view> |
|||
<list-item></list-item> |
|||
<view style="height: 24rpx;"></view> |
|||
<list-item></list-item> |
|||
<view style="height: 24rpx;"></view> |
|||
</view> |
|||
</template> |
|||
<!-- 第二列数据 --> |
|||
<template v-slot:list2> |
|||
<!-- 为了磨平部分平台的BUG，必须套一层view --> |
|||
<view> |
|||
<list-item></list-item> |
|||
<view style="height: 24rpx;"></view> |
|||
<list-item></list-item> |
|||
</view> |
|||
</template> |
|||
</uv-waterfall> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getNodeMes } from "@/utils/util.js"; |
|||
import listItem from "../../../components/list_item.vue"; |
|||
export default { |
|||
components: { listItem }, |
|||
props: { |
|||
safeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
scrollStyle(){ |
|||
let { scrollHeight } = this; |
|||
return `height: ${scrollHeight}px;`; |
|||
}, |
|||
}, |
|||
watch: { |
|||
safeHeight: { |
|||
async handler(val) { |
|||
console.log('one watch safeHeight', val); |
|||
if(!val)return this.scrollHeight = 0; |
|||
let _tabsInfo = await getNodeMes('.po-tab',this); |
|||
this.scrollHeight = val - (_tabsInfo?.height ?? 0); |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
tabList: [{ name: '门店' }, { name: '品牌' }, { name: '附近' }], |
|||
scrollHeight: 0, |
|||
list: [],// 瀑布流全部数据 |
|||
list1: [],// 瀑布流第一列数据 |
|||
list2: [],// 瀑布流第二列数据 |
|||
leftGap: 10, |
|||
rightGap: 10, |
|||
columnGap: 10, |
|||
} |
|||
}, |
|||
async mounted(){ |
|||
|
|||
}, |
|||
methods: { |
|||
clickTab(){ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<scroll-view class="pages-tree" scroll-y :style="scrollStyle"> |
|||
|
|||
<view class="pt-release"> |
|||
<view class="pr-tit">上传图片</view> |
|||
<uv-upload |
|||
:fileList="fileList1" |
|||
name="1" |
|||
multiple |
|||
:maxCount="10" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
></uv-upload> |
|||
<view class="line"></view> |
|||
<input class="title-input" type="text" placeholder="输入标题(可选)" :maxlength="20"> |
|||
<view class="line"></view> |
|||
<textarea class="content-textarea" auto-height :show-confirm-bar="false" |
|||
:cursor-spacing="50" placeholder="添加正文" :maxlength="9999"></textarea> |
|||
</view> |
|||
<picker> |
|||
<uv-cell icon="bag" title="商品卡" isLink></uv-cell> |
|||
</picker> |
|||
<uv-cell icon="map" title="XXX店"></uv-cell> |
|||
|
|||
<view class="fixed-box" :style="fixedStyle"> |
|||
<view class="fixed-line-container"> |
|||
<view class="item-box"> |
|||
<uni-icons type="compose" size="30"></uni-icons> |
|||
<view class="text"> 存草稿 </view> |
|||
</view> |
|||
<view class="send-box"> |
|||
发布帖子 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
safeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
tabBarHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
scrollStyle(){ |
|||
let { safeHeight } = this; |
|||
return `height: ${safeHeight}px;`; |
|||
}, |
|||
fixedStyle(){ |
|||
let { tabBarHeight } = this; |
|||
return `bottom: ${tabBarHeight}px;`; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
fileList1: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
// 删除图片 |
|||
deletePic(event) { |
|||
this[`fileList${event.name}`].splice(event.index, 1) |
|||
}, |
|||
// 新增图片 |
|||
async afterRead(event) { |
|||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 |
|||
let lists = [].concat(event.file) |
|||
let fileListLen = this[`fileList${event.name}`].length |
|||
lists.map((item) => { |
|||
this[`fileList${event.name}`].push({ |
|||
...item, |
|||
status: 'uploading', |
|||
message: '上传中' |
|||
}) |
|||
}) |
|||
for (let i = 0; i < lists.length; i++) { |
|||
const result = await this.uploadFilePromise(lists[i].url) |
|||
let item = this[`fileList${event.name}`][fileListLen] |
|||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { |
|||
status: 'success', |
|||
message: '', |
|||
url: result |
|||
})) |
|||
fileListLen++ |
|||
} |
|||
}, |
|||
uploadFilePromise(url) { |
|||
return new Promise((resolve, reject) => { |
|||
setTimeout(() => { |
|||
resolve(url) |
|||
}, 1000) |
|||
// let a = uni.uploadFile({ |
|||
// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址 |
|||
// filePath: url, |
|||
// name: 'file', |
|||
// formData: { |
|||
// user: 'test' |
|||
// }, |
|||
// success: (res) => { |
|||
// setTimeout(() => { |
|||
// resolve(res.data.data) |
|||
// }, 1000) |
|||
// } |
|||
// }); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.pages-tree{ |
|||
padding-bottom: 130upx; |
|||
position: relative; |
|||
background: #fff; |
|||
.fixed-box { |
|||
position: fixed; |
|||
z-index: 90; |
|||
bottom: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
background-color: #f7f7f7; |
|||
.fixed-line-container { |
|||
width: 100%; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
padding: 20rpx 30rpx; |
|||
.item-box { |
|||
margin-right: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
.icon { |
|||
flex-shrink: 0; |
|||
height: 40rpx; |
|||
width: 40rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.text { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.send-box { |
|||
flex: 1; |
|||
border-radius: 100rpx; |
|||
background-color: $mColor; |
|||
color: #fff; |
|||
text-align: center; |
|||
@include flcw(32upx, 88upx, #fff); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.pt-release{ |
|||
padding: 10rpx 30rpx 20rpx; |
|||
.pr-tit{ |
|||
margin-bottom: 24upx; |
|||
@include flcw(32upx, 42upx, #333, 500); |
|||
} |
|||
.title-input { |
|||
margin-top: 10rpx; |
|||
height: 80rpx; |
|||
font-size: 32rpx; |
|||
// border: 2rpx #eee solid; |
|||
} |
|||
|
|||
.line { |
|||
border: 2rpx #eee solid; |
|||
margin: 20rpx 0; |
|||
|
|||
} |
|||
|
|||
.content-textarea { |
|||
min-height: 400rpx; |
|||
width: 100%; |
|||
// border: 2rpx #eee solid; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
module.exports = { |
|||
transpileDependencies: ['@climblee/uv-ui', '@dcloudio/uni-ui'] |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue