zxk
3 years ago
5 changed files with 873 additions and 12 deletions
@ -0,0 +1,555 @@ |
|||
<template> |
|||
<view> |
|||
<view class="container"> |
|||
<mescroll-body :down="downOption" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback"> |
|||
<yxyl-swiper :swiperItems="swiperItems"></yxyl-swiper> |
|||
<view class="easy-item" v-for="(item, index) in discussItemList" :key="index"> |
|||
<view class="avatar"><image :src="item.userLogo" mode="widthFix" @tap="goToUsers(item.userSN)"></image></view> |
|||
<view class="content"> |
|||
<text class="nick-name">{{ item.userName }}</text> |
|||
|
|||
<text class="content-text" selectable="true">{{ item.discussItemText }}</text> |
|||
|
|||
|
|||
<view class="thumbnails" v-if="item.imageList && item.imageList.length > 0"> |
|||
<view :class="item.imageList.length === 1 ? 'my-gallery' : 'thumbnail'" v-for="(image, index_images) in item.imageList" :key="index_images"> |
|||
<image class="gallery_img" lazy-load mode="aspectFill" :src="image.url" :data-src="image" @tap="previewImage(item.imageList, index_images)"></image> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="sub"> |
|||
<text class="datetime">{{ item.createTime }}</text> |
|||
</view> --> |
|||
<view class="sub"> |
|||
<text class="datetime">{{ item.createTime }}</text> |
|||
<view class="operation"> |
|||
<view class="mutiple" @tap="upItem(item.discussItemSN, index, item.isStar)"> |
|||
<fa-icon class="icon" type="thumbs-o-up" size="22" v-if="!item.isStar"></fa-icon> |
|||
<fa-icon class="icon" type="thumbs-up" size="22" v-else color="#DC3545"></fa-icon> |
|||
</view> |
|||
<view class="mutiple" @tap="comment(item.discussItemSN, index)"> |
|||
评论 |
|||
</view> |
|||
<button open-type="share" class="mutiple" :data-itemsn="item.discussItemSN" > |
|||
分享 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
<view class="sub" v-if="item.isAuthor || isManage"> |
|||
<view></view> |
|||
<view class="operation single"><view @tap="deleteItem(item.discussItemSN, index)">删除</view></view> |
|||
</view> |
|||
<view class="comment"> |
|||
<view class="top-arrow" v-if="item.starList.length>0||item.replyList.length>0"></view> |
|||
<view v-if="item.starList.length > 0"> |
|||
<view class="up-list"> |
|||
<fa-icon class="icon" type="heart-o" size="20" v-if="!item.isStar"></fa-icon> |
|||
<fa-icon class="icon" type="heart" size="20" v-else color="#DC3545"></fa-icon> |
|||
<block v-for="(up_item, up_index) in item.starList" :key="up_index"> |
|||
<text class="up-item">{{ up_item }}</text> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<view class="comment-list" v-if="item.replyList.length > 0"> |
|||
<view class="comment-item" v-for="(comment_item, comment_index) in item.replyList" :key="comment_index"> |
|||
<text class="comment-name">{{ comment_item.userName }}:</text> |
|||
<text class="comment-content">{{ comment_item.replyText }}</text> |
|||
<view class="comment-delete"> |
|||
<text |
|||
class="comment-delete-btn" |
|||
v-if="comment_item.isAuthor || isManage" |
|||
@tap="commentDelete(comment_item.discussItemReplySN, comment_index, index)" |
|||
> |
|||
删除 |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<mescroll-empty v-if="discussItemList.length==0" :options="emptyOption"></mescroll-empty> |
|||
</mescroll-body> |
|||
<view class="foot" v-show="showInput"> |
|||
<chat-input @send-message="send_comment" :show="showInput" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input> |
|||
</view> |
|||
<yxyl-fab @trigger="gotoPublish"><image src="https://img-ali.cnyanglao.com/easyAdd.png-w100" mode="widthFix"></image></yxyl-fab> |
|||
<yxyl-fab @trigger="gotoOwn" v-if="!isOwn" vertical="middle"><image src="https://img-ali.cnyanglao.com/easyOwn.png-w100" mode="widthFix"></image></yxyl-fab> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import yxylSwiper from '@/components/yxyl-swiper/yxyl-swiper.vue'; |
|||
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue'; |
|||
import MescrollBody from 'mescroll-uni/mescroll-body.vue' |
|||
import MescrollMixin from "mescroll-uni/mescroll-mixins.js"; |
|||
import MescrollEmpty from 'mescroll-uni/components/mescroll-empty.vue'; |
|||
import chatInput from '@/components/im-chat/chatinput.vue'; |
|||
import yxylFab from '@/components/yxyl-fab/yxyl-fab.vue'; |
|||
import { getSwiper } from '@/api/swiper.js'; |
|||
export default { |
|||
mixins: [MescrollMixin], |
|||
components: { |
|||
faIcon, |
|||
MescrollBody, |
|||
MescrollEmpty, |
|||
chatInput, |
|||
yxylFab, |
|||
yxylSwiper |
|||
}, |
|||
data() { |
|||
return { |
|||
swiperItems: [], |
|||
discussItemList: [], |
|||
discussItemListIndex: -1, |
|||
isManage: false, |
|||
emptyOption:{ |
|||
icon : null |
|||
}, |
|||
// 下拉刷新的常用配置 |
|||
downOption: { |
|||
use: true, // 是否启用下拉刷新; 默认true, |
|||
auto: false, |
|||
native:true |
|||
}, |
|||
//上拉加载的常用配置 |
|||
upOption: { |
|||
use: true, // 是否启用上拉加载; 默认true |
|||
auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true |
|||
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示 |
|||
empty: false, |
|||
textNoMore: '---没有了---', |
|||
toTop: { |
|||
bottom: 250 |
|||
} |
|||
}, |
|||
input_placeholder: '评论', |
|||
is_reply: false, //回复还是评论 |
|||
showInput: false, //评论输入框 |
|||
focus: false, //是否自动聚焦输入框 |
|||
focusItemSN: '', |
|||
fabPattern: { |
|||
buttonColor: '#F44336' |
|||
}, |
|||
userSN: '', |
|||
discussSN: '', |
|||
itemSN: '' |
|||
}; |
|||
}, |
|||
onLoad(e) { |
|||
// #ifndef H5 |
|||
const updateManager = uni.getUpdateManager(); |
|||
updateManager.onUpdateReady(function(res) { |
|||
uni.showModal({ |
|||
title: '更新提示', |
|||
content: '新版本已经准备好，是否重启应用？', |
|||
success(res) { |
|||
if (res.confirm) { |
|||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 |
|||
updateManager.applyUpdate(); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
// #endif |
|||
|
|||
var that = this; |
|||
this.discussSN = e.discussSN; |
|||
this.itemSN = e.itemSN; |
|||
if (e.userSN) { |
|||
this.userSN = e.userSN; |
|||
} |
|||
|
|||
this.bindList().then(() => { |
|||
this.bindSwiper(); |
|||
// #ifdef H5 |
|||
that.$wechat.share({ |
|||
link: that.handlerAppMessagePath() |
|||
}); |
|||
// #endif |
|||
}); |
|||
}, |
|||
computed: { |
|||
isOwn() { |
|||
return this.userSN == this.$store.state.user.userSn; |
|||
} |
|||
}, |
|||
onShow() {}, |
|||
onShareAppMessage(e) { |
|||
console.log(e) |
|||
let url='' |
|||
if(e.target) url='pages/discuss/discuss?discussSN=' + this.discussSN + '&itemSN='+e.target.dataset.itemsn; |
|||
return { |
|||
path: this.handlerAppMessagePath(url) |
|||
}; |
|||
}, |
|||
methods: { |
|||
gotoOwn() { |
|||
uni.navigateTo({ |
|||
url: 'discuss?userSN=' + this.$store.state.user.userSn + '&discussSN=' + this.discussSN |
|||
}); |
|||
}, |
|||
bindSwiper() { |
|||
return getSwiper({ pageType: 5, pageSN: this.discussSN }).then(res => { |
|||
this.swiperItems = res.swiperList; |
|||
}); |
|||
}, |
|||
goToUsers(userSN) { |
|||
uni.navigateTo({ |
|||
url: 'discuss?userSN=' + userSN + '&discussSN=' + this.discussSN |
|||
}); |
|||
}, |
|||
handlerAppMessagePath(url) { |
|||
return this.$handlerAppMessagePath(url); |
|||
}, |
|||
previewImage(imageList, image_index) { |
|||
var current = imageList[image_index]; |
|||
var urls = new Array(); |
|||
imageList.forEach(item => { |
|||
urls.push(item.ourl); |
|||
}); |
|||
uni.previewImage({ |
|||
current: current.ourl, |
|||
urls: urls |
|||
}); |
|||
}, |
|||
upItem(itemSN, index, isStar) { |
|||
if (!isStar) { |
|||
this.$http |
|||
.request({ |
|||
url: 'api/v1/discuss/Star', |
|||
data: { |
|||
itemSN: itemSN |
|||
}, |
|||
method: 'PUT' |
|||
}) |
|||
.then(res => { |
|||
this.discussItemList[index].isStar = true; |
|||
this.discussItemList[index].starList.push(res.userName); |
|||
}); |
|||
} |
|||
}, |
|||
downCallback() { |
|||
this.discussItemList = []; |
|||
Promise.all([this.bindList(), this.bindSwiper()]) |
|||
.then(() => { |
|||
this.mescroll.endSuccess(); |
|||
}) |
|||
.catch(() => { |
|||
this.mescroll.endErr(); |
|||
}); |
|||
}, |
|||
async upCallback(mescroll) { |
|||
try { |
|||
var LastItemSN = this.discussItemList[this.discussItemList.length - 1].discussItemSN; |
|||
var Count = await this.bindList(LastItemSN); |
|||
this.mescroll.endSuccess(Count, Count > 0); |
|||
} catch (e) { |
|||
// 失败隐藏下拉加载状态 |
|||
this.mescroll.endErr(); |
|||
} |
|||
}, |
|||
blur: function() { |
|||
this.init_input(); |
|||
}, |
|||
init_input() { |
|||
this.showInput = false; |
|||
this.focus = false; |
|||
this.input_placeholder = '评论'; |
|||
this.is_reply = false; |
|||
}, |
|||
comment(discussItemSN, index) { |
|||
this.showInput = true; //调起input框 |
|||
this.focus = true; |
|||
this.discussItemListIndex = index; |
|||
this.focusItemSN = discussItemSN; |
|||
}, |
|||
send_comment(message) { |
|||
var that = this; |
|||
|
|||
this.init_input(); |
|||
this.$http |
|||
.request({ |
|||
url: 'api/v1/discuss/Reply', |
|||
method: 'POST', |
|||
data: { |
|||
discussItemSN: that.focusItemSN, |
|||
replyText: message.content, |
|||
isManage: that.isManage |
|||
} |
|||
}) |
|||
.then(res => { |
|||
that.discussItemList[that.discussItemListIndex].replyList.push({ |
|||
userName: res.userName, |
|||
replyText: message.content, |
|||
isAuthor: true, |
|||
discussItemReplySN: res.discussItemReplySN |
|||
}); |
|||
}) |
|||
.finally(() => { |
|||
that.focusItemSN = ''; |
|||
}); |
|||
}, |
|||
deleteItem(discussItemSN, index) { |
|||
var that = this; |
|||
uni.showModal({ |
|||
title: '确认删除吗？', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
that.discussItemList.splice(index, 1); |
|||
that.discussItemList = that.discussItemList; |
|||
that.$http.request({ |
|||
url: 'api/v1/discuss/Del', |
|||
method: 'DELETE', |
|||
data: { |
|||
itemSN: discussItemSN |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
commentDelete(discussItemReplySN, commentIndex, index) { |
|||
var that = this; |
|||
uni.showModal({ |
|||
title: '确认删除吗?', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
that.discussItemList[index].replyList.splice(commentIndex, 1); |
|||
that.discussItemList = that.discussItemList; |
|||
that.$http.request({ |
|||
url: 'api/v1/discuss/DelReply', |
|||
method: 'DELETE', |
|||
data: { |
|||
itemSN: discussItemReplySN |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
gotoPublish() { |
|||
uni.redirectTo({ |
|||
url: 'publish?discussSN=' + this.discussSN |
|||
}); |
|||
}, |
|||
async bindList(LastItemSN) { |
|||
var that = this; |
|||
var result = await this.$http.request({ |
|||
url: 'api/v1/discuss/GetListLoop', |
|||
data: { |
|||
LastItemSN: LastItemSN || '', |
|||
UserSN: that.userSN || '', |
|||
discussSN:that.discussSN||'', |
|||
itemSN:that.itemSN||'' |
|||
} |
|||
}); |
|||
if (!LastItemSN) { |
|||
uni.setNavigationBarTitle({ |
|||
title: result.pageTitle |
|||
}); |
|||
} |
|||
this.isManage = result.isManage; |
|||
result.discussItemList.forEach(function(item) { |
|||
if (item.adminReply) { |
|||
item.replyList.unshift({ |
|||
userName: '管理员', |
|||
replyText: item.adminReply |
|||
}); |
|||
} |
|||
item.replyList.forEach(item => { |
|||
item.isAuthor = item.userSN == that.$store.state.user.userSn; |
|||
}); |
|||
}); |
|||
this.discussItemList = this.discussItemList.concat(result.discussItemList); |
|||
return result.discussItemList.length; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.easy-item { |
|||
width: 95%; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
padding: 20rpx 0; |
|||
|
|||
.avatar { |
|||
flex-basis: 15vw; |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
image { |
|||
width: 15vw; |
|||
height: 15vw; |
|||
border-radius: 15px; |
|||
} |
|||
} |
|||
.content { |
|||
flex-basis: 75vw; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
padding-left: 15rpx; |
|||
.nick-name { |
|||
font-weight: 600; |
|||
color: #6699cc; |
|||
font-size: 42rpx; |
|||
} |
|||
.content-text { |
|||
width: 100%; |
|||
margin-top: 10rpx; |
|||
font-size: 38rpx; |
|||
line-height: 56rpx; |
|||
} |
|||
} |
|||
.thumbnails { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
.my-gallery { |
|||
width: 100%; |
|||
.gallery_img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
.thumbnail { |
|||
flex-basis: 22vw; |
|||
height: 22vw; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
padding-left: 10rpx; |
|||
padding-bottom: 10rpx; |
|||
.gallery_img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.sub { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 20rpx; |
|||
.datetime { |
|||
font-size: 24rpx; |
|||
color: #c0c0c0; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
.operation { |
|||
font-size: 28rpx; |
|||
color: #6699cc; |
|||
display: flex; |
|||
align-items: center; |
|||
// flex-basis: 50%; |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
&.single { |
|||
justify-content: flex-end; |
|||
} |
|||
.delete { |
|||
margin-right: 20rpx; |
|||
} |
|||
.mutiple { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #fff; |
|||
text-align: center; |
|||
font-weight: 800; |
|||
border: 1px solid #ebedf0; |
|||
padding: 5rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
color: #999999; |
|||
// flex-basis: 40%; |
|||
flex-grow: 0; |
|||
margin-left: 10rpx; |
|||
height: 50rpx; |
|||
font-size: 25rpx; |
|||
.icon { |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.comment { |
|||
.top-arrow { |
|||
width: 0; |
|||
height: 0; |
|||
border: 20rpx solid transparent; |
|||
border-bottom-color: #eeeeee; |
|||
margin-left: 20rpx; |
|||
} |
|||
.up-list { |
|||
width: 100%; |
|||
background: #eeeeee; |
|||
padding: 10rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding-bottom: 10rpx; |
|||
border-bottom: 1px solid #dddddd; |
|||
.up-item { |
|||
color: #607d8b; |
|||
font-size: 30rpx; |
|||
padding-left: 10rpx; |
|||
font-weight: 800; |
|||
line-height: 50rpx; |
|||
height: 50rpx; |
|||
&:after { |
|||
content: ','; |
|||
} |
|||
&:last-child:after { |
|||
content: ''; |
|||
} |
|||
} |
|||
} |
|||
.comment-list { |
|||
width: 100%; |
|||
background: #eeeeee; |
|||
padding: 10rpx; |
|||
|
|||
.comment-item { |
|||
width: 100%; |
|||
.comment-name { |
|||
color: #496f94; |
|||
font-size: 32rpx; |
|||
} |
|||
.comment-content { |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
} |
|||
.comment-delete { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
.comment-delete-btn { |
|||
font-size: 28rpx; |
|||
color: #6699cc; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.foot { |
|||
position: fixed; |
|||
bottom: var(--window-bottom); |
|||
z-index: 9999; |
|||
width: 100%; |
|||
} |
|||
.add-btn { |
|||
font-size: 40px; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.gotoOwn { |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,286 @@ |
|||
<template> |
|||
<view class="container" @touchstart="touchStart" @touchend="touchEnd"> |
|||
<form> |
|||
<view class="uni-textarea"><textarea class="textarea" placeholder="写入文字..." v-model="input_content" maxlength="-1"/></view> |
|||
<view class="uni-list list-pd"> |
|||
<view class="uni-list-cell cell-pd"> |
|||
<view class="uni-uploader"> |
|||
<view class="uni-uploader-head"> |
|||
<view class="uni-uploader-title"></view> |
|||
<view class="uni-uploader-info">{{ imageList.length }}/9</view> |
|||
</view> |
|||
<view class="uni-uploader-body"> |
|||
|
|||
<robby-image-upload v-model="imageList" :limit="9"></robby-image-upload> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="footer"><button type="default" class="feedback-submit" @click="publish">提交</button></view> |
|||
</form> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'; |
|||
import { upload,uploadByBase64 } from '@/common/upload.js'; |
|||
import Request from '@/util/pocky-request/index'; |
|||
export default { |
|||
components: { robbyImageUpload }, |
|||
data() { |
|||
return { |
|||
discussSN: '', |
|||
imageList: [], |
|||
input_content: '', |
|||
sourceTypeIndex: 2, |
|||
sizeTypeIndex: 2, |
|||
countIndex: 8, |
|||
count: [1, 2, 3, 4, 5, 6, 7, 8, 9], |
|||
|
|||
//侧滑返回start |
|||
startX: 0, //点击屏幕起始位置 |
|||
movedX: 0, //横向移动的距离 |
|||
endX: 0 //接触屏幕后移开时的位置 |
|||
//end |
|||
}; |
|||
}, |
|||
onLoad(e) { |
|||
// #ifdef H5 |
|||
this.$wechat.hideMenu(); |
|||
// #endif |
|||
this.discussSN = e.discussSN; |
|||
}, |
|||
methods: { |
|||
publish: async function() { |
|||
if (!this.input_content) { |
|||
uni.showModal({ content: '内容不能为空', showCancel: false }); |
|||
return; |
|||
} |
|||
var that = this; |
|||
var uploadImages = []; |
|||
if (this.imageList.length > 0) { |
|||
// #ifdef MP-WEIXIN |
|||
var uploadImages = await upload(1, this.imageList); |
|||
// #endif |
|||
// #ifdef H5 |
|||
var uploadImages = await uploadByBase64(1, this.imageList); |
|||
// #endif |
|||
} |
|||
Request() |
|||
.request({ |
|||
url: 'api/v1/discuss/Create', |
|||
method: 'POST', |
|||
data: { |
|||
discussSN: that.discussSN, |
|||
text: that.input_content, |
|||
imageUrlList: uploadImages |
|||
} |
|||
}) |
|||
.then(res => { |
|||
uni.showToast({ |
|||
title:'发布成功', |
|||
icon:"success", |
|||
success() { |
|||
setTimeout(()=>{ |
|||
uni.redirectTo({ |
|||
url:'discuss?discussSN=' + that.discussSN |
|||
}); |
|||
},1500) |
|||
} |
|||
}) |
|||
|
|||
}); |
|||
}, |
|||
|
|||
close(e) { |
|||
this.imageList.splice(e, 1); |
|||
}, |
|||
chooseImage: async function() { |
|||
if (this.imageList.length === 9) { |
|||
let isContinue = await this.isFullImg(); |
|||
console.log('是否继续?', isContinue); |
|||
if (!isContinue) { |
|||
return; |
|||
} |
|||
} |
|||
uni.chooseImage({ |
|||
sourceType: sourceType[this.sourceTypeIndex], |
|||
sizeType: sizeType[this.sizeTypeIndex], |
|||
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex], |
|||
success: res => { |
|||
// #ifdef APP-PLUS |
|||
//提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台 |
|||
var compressd = cp_images => { |
|||
this.imageList = this.imageList.concat(cp_images); //压缩后的图片路径 |
|||
}; |
|||
image.compress(res.tempFilePaths, compressd); |
|||
// #endif |
|||
|
|||
// #ifndef APP-PLUS |
|||
this.imageList = this.imageList.concat(res.tempFilePaths); //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩 |
|||
// #endif |
|||
} |
|||
}); |
|||
}, |
|||
isFullImg: function() { |
|||
return new Promise(res => { |
|||
uni.showModal({ |
|||
content: '已经有9张图片了,是否清空现有图片？', |
|||
success: e => { |
|||
if (e.confirm) { |
|||
this.imageList = []; |
|||
res(true); |
|||
} else { |
|||
res(false); |
|||
} |
|||
}, |
|||
fail: () => { |
|||
res(false); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
previewImage: function(e) { |
|||
var current = e.target.dataset.src; |
|||
uni.previewImage({ |
|||
current: current, |
|||
urls: this.imageList |
|||
}); |
|||
}, |
|||
touchStart: function(e) { |
|||
this.startX = e.mp.changedTouches[0].pageX; |
|||
}, |
|||
|
|||
touchEnd: function(e) { |
|||
this.endX = e.mp.changedTouches[0].pageX; |
|||
if (this.endX - this.startX > 200) { |
|||
uni.navigateBack(); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
.cell-pd { |
|||
padding: 20rpx 30rpx; |
|||
} |
|||
.uni-textarea { |
|||
width: auto; |
|||
padding: 20rpx 25rpx; |
|||
line-height: 1.6; |
|||
height: 250rpx; |
|||
} |
|||
.textarea{ |
|||
height: 100%; |
|||
} |
|||
.uni-list::before { |
|||
height: 0; |
|||
} |
|||
.uni-list:after { |
|||
height: 0; |
|||
} |
|||
.list-pd { |
|||
margin-top: 0; |
|||
} |
|||
.close-view { |
|||
text-align: center; |
|||
line-height: 30rpx; |
|||
height: 35rpx; |
|||
width: 35rpx; |
|||
background: #ef5350; |
|||
color: #ffffff; |
|||
position: absolute; |
|||
top: 1rpx; |
|||
right: 1rpx; |
|||
font-size: 35rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
.container { |
|||
width: 750rpx; |
|||
height: 100%; |
|||
} |
|||
.uni-uploader { |
|||
flex: 1; |
|||
flex-direction: column; |
|||
} |
|||
.uni-uploader-head { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
} |
|||
.uni-uploader-info { |
|||
color: #b2b2b2; |
|||
} |
|||
.uni-uploader-body { |
|||
margin-top: 16upx; |
|||
} |
|||
.uni-uploader__files { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
} |
|||
.uni-uploader__file { |
|||
margin: 10upx; |
|||
width: 210upx; |
|||
height: 210upx; |
|||
} |
|||
.uni-uploader__img { |
|||
display: block; |
|||
width: 210upx; |
|||
height: 210upx; |
|||
} |
|||
.uni-uploader__input-box { |
|||
position: relative; |
|||
margin: 10upx; |
|||
width: 208upx; |
|||
height: 208upx; |
|||
border: 2upx solid #d9d9d9; |
|||
} |
|||
.uni-uploader__input-box:before, |
|||
.uni-uploader__input-box:after { |
|||
content: ' '; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
-webkit-transform: translate(-50%, -50%); |
|||
transform: translate(-50%, -50%); |
|||
background-color: #d9d9d9; |
|||
} |
|||
.uni-uploader__input-box:before { |
|||
width: 4upx; |
|||
height: 79upx; |
|||
} |
|||
.uni-uploader__input-box:after { |
|||
width: 79upx; |
|||
height: 4upx; |
|||
} |
|||
.uni-uploader__input-box:active { |
|||
border-color: #999999; |
|||
} |
|||
.uni-uploader__input-box:active:before, |
|||
.uni-uploader__input-box:active:after { |
|||
background-color: #999999; |
|||
} |
|||
.uni-uploader__input { |
|||
position: absolute; |
|||
z-index: 1; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 0; |
|||
} |
|||
.feedback-submit { |
|||
background: $uni-color-main-dark; |
|||
border: none; |
|||
border-radius: 0; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue