From b5ace3848184390362565cdcf1187694ba6d590f Mon Sep 17 00:00:00 2001
From: XiaoMo <a1300399510@qq.com>
Date: Fri, 31 Mar 2023 11:20:11 +0800
Subject: [PATCH] =?UTF-8?q?a1300399510@qq.com=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=8E=202023/03/31=20-11:20:01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/detail/u1428.png | Bin 0 -> 1099 bytes
 src/assets/img/detail/u1431.png | Bin 0 -> 1011 bytes
 src/assets/img/detail/u1448.png | Bin 0 -> 961 bytes
 src/components/DetailReply.vue  | 121 ++++++++++++++++++--------------
 4 files changed, 67 insertions(+), 54 deletions(-)
 create mode 100755 src/assets/img/detail/u1428.png
 create mode 100755 src/assets/img/detail/u1431.png
 create mode 100755 src/assets/img/detail/u1448.png

diff --git a/src/assets/img/detail/u1428.png b/src/assets/img/detail/u1428.png
new file mode 100755
index 0000000000000000000000000000000000000000..bab660e118be12eca06ba3c34c7d6aba3b619ee0
GIT binary patch
literal 1099
zcmV-R1ho5!P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91AfN*P1ONa40RR91AOHXW0IY^$^8f$?wMj%lR9FeMmrY1iQ5460&zY&r
z!WNMPK?WK`R4xhvL1!3dAZbyXT)An{&caF|NT`HTDQp!)+XxEWHIUlOC}z<nqmM;}
z1&Ua-un)(X@nia(=X;MCXMFdK>4EEg_ul_G|8vhh=gw6taVe2VWP4dzSz{)X37~SA
zwwG2x6PclXV{J^+w5ZqXeOgyn_s3XK{LvKaC4+;5H6D+r9b6LxWh%U^<3s}NBVE_K
z>g(%2JL#<I!071cmQ*Tr1LgBHkCPFHwRs%r#i0(r-=8dmE9k(`&`|Z#(o!D^2MZ~!
zVeS<=r*L9=rEZ=Bkk>-~4B*a{;Qt&?awI1>l6Tp5avU&s{$c~jEzSu(j%7zew^m}Y
z*k*SAWCO{CY7ecCirORt5!(U2J84p08!g8v=PMS8aRgForKP1Gm|SbNTlU=ce*sp@
zQ5X?0>)eTa0foD?FK!qpyT{<-4%l+avqRQ(x#8%W9Kf<PfwvbH7Z>X={!xMLY-ngW
z1FqW%$9gk)SFW4atLlcUipS$!!C>(F!ootp!HG^Bz1rX3zZ>#iCkI&DN^8^!h1~5*
z0oSH*!Y23md@=AfDx+*9AUWVV^GzpiOC-3a{ph|I5(&5LoMhew`G6a8(F1o#9H^3k
zTS2K+A`uRUe~=SF$Xht`b_qMlJk0t5x3<vTr(rCGlFzM@g+uuc#1~~OJBK`447q71
zWt5?1w8&mc(-0y7cV@{N7t>1;{w_wr#7e0dVW*TXWgUmAM02Q!;xCE7*PL0!0HvIS
z1Kz_i<|U@WjIqq-$0Y(|ZonqS-g$PyVWTw~jdrgg5^r^O6m{u<W1VB?vN+-5va;#W
zd9IC&jBMj}n`RfQ-i81_apwD_)Kr%Yc6tJVKpVLcglWKL%m0{Vs?zv11pI)(*?f#W
zGmjJZFn*F5<-Gy659|)Ga#<A=F!$NiIin2a^$KdfAaZ%qi@_E?mE-~kdz#LPJWbSv
zbNN9cPiK@=KOTZ#7vbe4RWmNe?2Cwy$nUefUN=<W8BHdW*DMmv`jDPnsHA&MlegQt
z3*=Mjboyv06q>S(+Yyin<B6o}jeJg8fOYIAIOcFRx!BHeKqkz0doA7$%XppSC3fUF
zZv1>_+st!776JZDBoZN<xXw`ObxnePnqA+Vo14RA{(nVcG$#iNu}EHEqyuBktjjaX
zjm(07NV`Qu9e-<-4p?kBQqH&Jho5!?<5lz(G?5vc6rwluG1emNSf1WW`3FMxsdCl9
R5x)Qc002ovPDHLkV1k-R>EHkW

literal 0
HcmV?d00001

diff --git a/src/assets/img/detail/u1431.png b/src/assets/img/detail/u1431.png
new file mode 100755
index 0000000000000000000000000000000000000000..924cce93e93f35437165ba4ae59c0b0bfe75ecbf
GIT binary patch
literal 1011
zcmV<P0}T9$P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NFT}ebiRA>e5Sj}q_K@@L3nh%g_
zbF`qK;Kh2V3PPxuED6zIP&`ENs^Gz!N5P9Ap1c$U{{=yhLewVN5D$V>u!tgl^<rrW
zR3)`)$cMidGRv@;+1)g|**)yQFmK*`yx;Hbyf>3fP5H(5fbRj{18#aC;HGgi+qGJ4
zq1){)VctK~Yw2`)O}{3rS9qmgsZ>q?{0rcjB}{=p;5M48B=aT6cbt;T<?<Z7dCcnm
z1Rj7j@Pl<5qV<jwP*pV@3WdJHo2vkJM+Ab`Nx-YkX7esTkI9Y`==FM+P$OgzUcJH$
zi&`1@R;zWsP$=w();LZ8MyEN$eIi_66DeSW!QgW!`e%MH@Dgnym&^UuChCMq5YU+%
z?h<%>rDfCvH%j2oA@gi=x*^eZ0^@)uHm(vF7rd(k>;Uf?0lUDvLcmV&ZV;Hog;v&O
z8x?u}tXZ}pu%a^Qx6mFP2-7^Tn?KZ@Gyxuf+HSWm#$vJQdcDqHUi~?EI_%{0d3uE!
z7RS>lo)6z82vXs2_$NqgiE2C^->z1x_atjIwWZ$!rBW#oi9{B0)kn3J1_I9bw??C}
zS}Yb@6tp<^uQ5GjutYZ0!@!JDe3%k|7xrP3cc^nRD-!(|5V@=<$_n<lfjRe4EjfVO
z??Wn;I*PAIM1;jk49sKYsNl)iVHkb_@bmEC1GG=kKMhj*g-C{#zo2?-1fG_d5{O2l
zD@b#1VEFj34O7iQ%veM%fy5eGs<swW0?B0Z54?A()9D;R48)mroa-M<#t)VRc^f1T
zFdb{5JH%usT2lgK6y9s2c`pJ0aug$vMBr&Yh?&NjXkV+kvC=4ICm5=ro@54rcZ<oB
zXm?G3JdgNz29OIJ&`o@a3tZoE(b5spqZk|;`qx17JmgKpiGoXM1H|-89P5w#1&qLF
zG8ti<IEEe@k3_(0;K?zT33w5_WddFWZ;61H!J870<oR`^$}_Tn#jV_-jk!XXpkqZE
z0|XxFa2b}hJdaCi9Zv{6FqMxoMA>YX9$~Kr<9|U`mCdz7FT4kK3!Vd%1@IgQzXjRP
zoZfa(_)fvOe+Wz0nKdh(XLBdr%8t-p2E@zY38U}`;n{o(M_>lE3j#NB3_dYJe(QU{
h_kiyK-vhh{{saCypZZDeIimmo002ovPDHLkV1kqeuHpay

literal 0
HcmV?d00001

diff --git a/src/assets/img/detail/u1448.png b/src/assets/img/detail/u1448.png
new file mode 100755
index 0000000000000000000000000000000000000000..75f16b068e1720ffc5ddae338cfbf1781977be48
GIT binary patch
literal 961
zcmV;y13vtTP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NFD@jB_RA>e5SX*loK@`r#T&3EF
ziVwahh59Cl7B%M5O+pa#Rr~`!i^U&cp7h1vA!3Ch!a|Hm{y=>2sij4s1}a3vhoItS
zllV>83DaR`r@PtN2Hb^ZF6YcS-*@($nca;<!YhnG7=bVXVFdo?2t-wr?{qpV(P(rN
zepX!gGAEPCwx($xWNU&T@CqOv$bj&2kTznm*u`S8_>Gsb;}|<o(Fc$vFLv<+lB3aR
zRkrq&OkrL*2s{Ru->|dnV2hBv;UE`^loKeGO8fABUxc91Xq--^QaVVAR2=7(r;w9(
z27J*;&q;P-1aw_LlT0R?i2MvZ(yi|V)=qXJ1W4qw+3Y(2x<x?&{2q!{m}*pyZ<W^o
z@6ax72zbLVv_vA2<@IIbK%amU_*$)YC<ALJ4~&2c@PtqxDP$FF0|k4NMv<nC*T_>l
z%AY{D+f8IL866I1;L+d3Yr@97;0X!k1O|fvIbm-TXV$eFkH^chcO0rLYn2ng*0{s$
z?>kQ5P17`3z*zT}9ozMl6R1|JKLG3s^8YTj%5|s6L$?QzO$%tZ-|v621I^A!U#C%k
zDdg}bqOpYNy(kn4KUo8Q_v`g~3_dQQMh@^jV9M-EcOjgZj}X1*xFd+<c^G^sGK!Cv
zH1wW<>>Apq<#PF>NLMru0%OQNi{$*glmLLNF^euU{Ucoh9uwODe}@RrUO;n|^i^KI
z)Bpt!pi}S`V5O->gEBV(0r(zvA7QFd=YF(v5g-K)5L>v}$oIzMv4$Pxiyr`GHarus
zcBeORaF1~^1z)LDj$MSzT2Eb11QrE6VeFc~B7yfpAdN%qEf&tw2HWLV6zoQjX+wb1
zOL`7aMXSBejmd6P4ys@|-_xP%6k?17Ua*YsS=a3om@Y)xkRMe~&@Q*z?Q1h@RtKl|
z1pj*W^ZERMm-#*RL;(26$M<Uxu*E~>hr{9bR;#s++BmRP@@Z0<LI88*9o>cBb68t(
zq3=mmN&u(oOIZHp);ho+;(qUTom+kT9N?@po6WO$KVJo)W9ehLnNFwoa=F|e&Qv%I
jBM?R)j6fKH#frc`r_~`(TGr2>00000NkvXXu0mjf$7!F$

literal 0
HcmV?d00001

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%;
     }