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> |
<template> |
||||
<view class="index-container"> |
<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> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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 tabBar from "../components/tab_bar.vue"; |
||||
import { getNodeMes } from "../../../utils/util.js"; |
|
||||
export default { |
export default { |
||||
components:{ tabBar }, |
|
||||
computed: { |
|
||||
scrollStyle(){ |
|
||||
let { remainHeight } = this; |
|
||||
return `height: ${remainHeight}px;`; |
|
||||
} |
|
||||
}, |
|
||||
|
components:{ tabBar, pagesOne, pagesThree }, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
remainHeight: 650, |
|
||||
|
tabBarHeight: 0, |
||||
|
safeHeight: 0, |
||||
|
tabIdx: 0, |
||||
} |
} |
||||
}, |
}, |
||||
onLoad(){ |
|
||||
|
async onLoad(){ |
||||
this.initSafeHeight(); |
this.initSafeHeight(); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
async initSafeHeight(){ |
async initSafeHeight(){ |
||||
let _tabBarInfo = await this.$refs?.tabBar?.getDomInfo?.(); |
let _tabBarInfo = await this.$refs?.tabBar?.getDomInfo?.(); |
||||
let _winInfo = uni.getWindowInfo(); |
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> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
.index-container{ |
|
||||
.ic-scroll{ |
|
||||
background: #000; |
|
||||
} |
|
||||
|
page{ |
||||
|
background: #f2f2f7; |
||||
} |
} |
||||
</style> |
</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