diff --git a/src/assets/img/detail/u1428.png b/src/assets/img/detail/u1428.png
new file mode 100755
index 0000000..bab660e
Binary files /dev/null and b/src/assets/img/detail/u1428.png differ
diff --git a/src/assets/img/detail/u1431.png b/src/assets/img/detail/u1431.png
new file mode 100755
index 0000000..924cce9
Binary files /dev/null and b/src/assets/img/detail/u1431.png differ
diff --git a/src/assets/img/detail/u1448.png b/src/assets/img/detail/u1448.png
new file mode 100755
index 0000000..75f16b0
Binary files /dev/null and b/src/assets/img/detail/u1448.png differ
diff --git a/src/components/DetailReply.vue b/src/components/DetailReply.vue
index 11180b9..31db5d8 100755
--- a/src/components/DetailReply.vue
+++ b/src/components/DetailReply.vue
@@ -2,24 +2,23 @@
<div>
<!-- 弹窗-讨论-单行 -->
<div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
- bindtap="{{ openDiscussionSingleState ? 'handlePopCancel' : '' }}">
+ @click="openDiscussionSingleState ? 'handlePopCancel' : ''">
<div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
catchtap="return false">
<div class="discussion-header flexacenter" v-if="twoCommentData">
- <image class="discussion-avatar" mode="widthFix" src="{{ twoCommentData.avatar }}"></image>
- <div class="discussion-text">{{ twoCommentData.content }}</div>
- <image class="discussion-icom" catchtap="clearTwoCommentData"
- style="height:13px;transform: translate(0);top:0;" mode="widthFix" src="../../img/u1428.png">
- </image>
+ <img class="discussion-avatar" :src="twoCommentData.avatar" />
+ <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
+ <img class="discussion-icom" catchtap="clearTwoCommentData"
+ style="height:13px;transform: translate(0);top:0;" src="@/assets/img/detail/u1428.png">
</div>
<div class="discussion-single-box flexflex flex1">
<div class="discussion-single-content flexacenter flex1">
- <input class="discussion-single-input flex1" cursor-spacing="5" type="text" focus="{{ true }}"
- placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}" model:value="{{ commentContent }}" />
- <image class="discussion-single-input-icom" bindtap="setValue" data-key="popState"
- data-value="discussionMulti" mode="widthFix" src="../../img/u1448.png"></image>
+ <input class="discussion-single-input flex1" cursor-spacing="5" type="text"
+ :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
+ <img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti',)"
+ src="@/assets/img/detail/u1448.png" />
</div>
- <div class="discussion-single-btn flexcenter" bindtap="postComment" data-content="{{ commentContent }}">
+ <div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
发布
</div>
</div>
@@ -28,15 +27,13 @@
</div>
<!-- 弹窗-讨论-多行 -->
- <div class="pop-box flexflex flexcolumn" wx:if="{{ popState == 'discussionMulti' }}" bindtap="handlePopCancel"
- catchtouchmove="return false">
- <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: 30rpx 30rpx 0 0;"
- catchtap="return false">
+ <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionMulti'" @click="handlePopCancel()">
+ <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
+ @click.stop="">
<div class="discussion-header flexacenter" v-if="twoCommentData">
- <image class="discussion-avatar":src="twoCommentData.avatar"></image>
- <div class="discussion-text">{{ twoCommentData.content }}</div>
- <image class="discussion-icom" catchtap="clearTwoCommentData" mode="widthFix" src="../../img/u1428.png">
- </image>
+ <image class="discussion-avatar" :src="twoCommentData.avatar"></image>
+ <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
+ <img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
</div>
<div class="discussion-multi-content flexflex flex1">
<textarea v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
@@ -46,9 +43,8 @@
class="discussion-multi-textarea flex1"
:style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
- <!-- <editor id="discussion-multi-textarea" class="discussion-multi-textarea flex1" bindinput="onDiscussionTextareaChange" bindready="onDiscussionTextareaReady" placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}"></editor> -->
<image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
- src="../../img/u1431.png"></image>
+ src="@/assets/img/detail/u1431.png"></image>
<div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
</div>
<div class="discussion-multi-bottom flexflex flexacenter">
@@ -65,7 +61,15 @@ export default {
name: 'DetailReply',
data() {
return {
- commentContent: ""
+ commentContent: "",
+ twoCommentData: {
+ avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
+ content: "评论回复",
+
+ },
+ popState: "discussionSingle",
+
+ openDiscussionSingleState: ""
};
},
@@ -75,57 +79,71 @@ export default {
methods: {
+ // 提交回复
+ postComment() {
+ console.log("dffgkgfk");
+ },
+
},
};
</script>
<style lang="scss" scoped>
+.pop-box-box {
+ width: 100vw;
+ background-color: #fff;
+ border-radius: .64rem .64rem 0 0;
+ position: relative;
+}
+
.discussion-single-box {
- height: 72rpx;
+ height: .96rem;
justify-content: space-between;
- padding: 26rpx 0;
+ padding: .3467rem 0;
}
.discussion-single-btn {
- width: 105rpx;
- height: 72rpx;
- font-size: 27rpx;
+ width: 1.4rem;
+ height: .96rem;
+ font-size: .36rem;
color: #000;
- border-radius: 12rpx;
- margin-right: 24rpx;
+ border-radius: .16rem;
+ margin-right: .32rem;
background-color: rgba(80, 227, 194, 1);
}
.discussion-single-content {
- height: 72rpx;
- font-size: 27rpx;
- border-radius: 12rpx;
+ height: .96rem;
+ font-size: .36rem;
+ border-radius: .16rem;
background-color: rgba(242, 242, 242, 1);
- margin-left: 24rpx;
- margin-right: 24rpx;
- padding-left: 18rpx;
+ margin-left: .32rem;
+ margin-right: .32rem;
+ padding-left: .24rem;
}
.discussion-single-input-icom {
- width: 42rpx;
- height: 42rpx;
- padding: 15rpx;
+ width: .56rem;
+ height: .56rem;
+ padding: .2rem;
}
.discussion-single-input {
height: 100%;
+ background: transparent;
+ border: none;
+ outline: none;
}
.discussion-header {
- padding-top: 24rpx;
- padding-left: 24rpx;
+ padding-top: .32rem;
+ padding-left: .32rem;
position: relative;
-
.discussion-icom {
- width: 27rpx;
- height: 27rpx;
- padding: 24rpx;
+ width: .36rem;
+ height: .36rem;
+ padding: .32rem;
position: absolute;
top: 50%;
right: 0;
@@ -134,20 +152,15 @@ export default {
}
.discussion-text {
- font-size: 24rpx;
+ font-size: .32rem;
color: #7f7f7f;
- margin-left: 18rpx;
- width: 615rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- /* 文字超出部分省略号显示 */
- white-space: nowrap;
- /* 不换行 */
+ margin-left: .24rem;
+ width: 8.2rem;
}
.discussion-avatar {
- width: 36rpx;
- height: 36rpx;
+ width: .48rem;
+ height: .48rem;
border-radius: 50%;
}