7 changed files with 211 additions and 8 deletions
-
1package.json
-
5src/pages.json
-
2src/subpackage/community/components/tab_bar.vue
-
17src/subpackage/community/pages/index.vue
-
187src/subpackage/community/pages/modules/tab_pages/three.vue
-
2vue.config.js
-
5yarn.lock
@ -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> |
|||
@ -1,3 +1,3 @@ |
|||
module.exports = { |
|||
transpileDependencies: ['@climblee/uv-ui'] |
|||
transpileDependencies: ['@climblee/uv-ui', '@dcloudio/uni-ui'] |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue