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 = { |
module.exports = { |
||||
transpileDependencies: ['@climblee/uv-ui'] |
|
||||
|
transpileDependencies: ['@climblee/uv-ui', '@dcloudio/uni-ui'] |
||||
} |
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue