You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.5 KiB
111 lines
3.5 KiB
<template>
|
|
<gui-popup
|
|
ref="guipopupforsubcomment"
|
|
position="bottom"
|
|
:canCloseByShade="true"
|
|
@close="closePop"
|
|
:zIndex="zIndex">
|
|
<view class="gui-comments gui-bg-white"
|
|
@tap.stop.prevent="stopfun">
|
|
<text class="gui-comments-at gui-block-text"
|
|
:style="{color:atColor}"
|
|
v-if="comment.at != ''">@ {{comment.at}}</text>
|
|
<view style="height:20rpx;"
|
|
v-if="comment.at == ''"></view>
|
|
<view
|
|
class="gui-flex gui-rows gui-nowrap gui-space-between">
|
|
<view class="gui-comments-img gui-relative"
|
|
v-if="comment.img != ''">
|
|
<image :src="comment.img"
|
|
class="gui-comments-img-in"
|
|
mode="widthFix"></image>
|
|
<text class="gui-comments-img-remove gui-icons"
|
|
@tap="removeImg"
|
|
:style="{color:removeBtnColor}"></text>
|
|
</view>
|
|
<textarea :show-confirm-bar="false"
|
|
cursor-spacing="200" v-model="comment.content"
|
|
class="gui-comments-textarea gui-border-box gui-bg-gray"
|
|
:placeholder="placeholder" />
|
|
</view>
|
|
<view class="gui-flex gui-rows gui-space-between gui-align-items-center">
|
|
<text class="gui-comments-btns gui-icons gui-color-gray"
|
|
@tap="selectImg" v-if="isImg"></text>
|
|
<text class="gui-comments-btns" v-if="!isImg"></text>
|
|
<view class="gui-comments-submit"
|
|
hover-class="gui-tap">
|
|
<text class="gui-comments-btns gui-comments-submit gui-icons"
|
|
:style="{color:submitColor}"
|
|
@tap="submit">提交</text>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<gui-iphone-bottom></gui-iphone-bottom>
|
|
</view>
|
|
</view>
|
|
</gui-popup>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
name : "gui-submit-comment",
|
|
props : {
|
|
placeholder : { type : String, default : "说点什么吧"},
|
|
isImg : { type : Boolean, default : true},
|
|
atColor : { type : String, default : '#008AFF'},
|
|
submitColor : { type : String, default : '#008AFF'},
|
|
removeBtnColor : { type : String, default : '#FF0036'},
|
|
zIndex : { type : Number, default : 999}
|
|
},
|
|
data() {
|
|
return {
|
|
comment : {img:'', content:'',at:''}
|
|
}
|
|
},
|
|
methods:{
|
|
open : function(){
|
|
this.$refs.guipopupforsubcomment.open();
|
|
},
|
|
close : function(){
|
|
this.$refs.guipopupforsubcomment.close();
|
|
this.$emit('close');
|
|
},
|
|
closePop : function(){
|
|
this.$emit('close');
|
|
},
|
|
stopfun : function(e){
|
|
e.stopPropagation();
|
|
return null;
|
|
},
|
|
submit : function () {
|
|
this.$emit('submit', this.comment);
|
|
this.close();
|
|
this.comment = {img:'', content:'',at:''}
|
|
},
|
|
selectImg : function(){
|
|
uni.chooseImage({
|
|
count:1,
|
|
success:(res)=>{this.comment.img = res.tempFilePaths[0];}
|
|
});
|
|
},
|
|
removeImg : function () {
|
|
this.comment.img = '';
|
|
},
|
|
setAt : function(name){
|
|
this.comment.at = name;
|
|
},
|
|
setContent : function (content) {
|
|
this.comment.content = content;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-comments{padding:10rpx 30rpx;}
|
|
.gui-comments-at{line-height:80rpx; height:80rpx; font-size:28rpx; font-weight:bold;}
|
|
.gui-comments-textarea{width:200rpx; border-radius:8rpx; padding:15rpx; font-size:26rpx; line-height:36rpx; height:160rpx; flex:1;}
|
|
.gui-comments-img{width:160rpx; height:160rpx; margin-right:25rpx; font-size:0; overflow:hidden; border-radius:8rpx;}
|
|
.gui-comments-img-in{width:160rpx;}
|
|
.gui-comments-img-remove{width:60rpx; height:60rpx; line-height:60rpx; position:absolute; right:0; top:0; text-align:center; font-size:50rpx; color:#FF0036;}
|
|
.gui-comments-btns{width:96rpx; height:80rpx; line-height:80rpx; font-size:44rpx;}
|
|
.gui-comments-submit{width:180rpx; text-align:right; font-size:28rpx;}
|
|
</style>
|