From 13de5e0775fd8713525974b27ed309eba0c78923 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 31 May 2022 10:38:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=BC=E5=9B=BE=E6=B1=87=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bin/serve.js                                  |   2 +-
 src/saas/AppCountryAlbum/AddReport.vue        |  26 +++
 .../components/report/RenderContent.vue       | 152 ++++++++++++++----
 .../AppCountryAlbum/images/down_boldw.png     | Bin 0 -> 293 bytes
 src/saas/AppCountryAlbum/images/jiancai.png   | Bin 0 -> 243 bytes
 .../AppCountryAlbum/images/remove-black.png   | Bin 0 -> 334 bytes
 src/saas/AppCountryAlbum/images/xiugai.png    | Bin 0 -> 572 bytes
 7 files changed, 150 insertions(+), 30 deletions(-)
 create mode 100644 src/saas/AppCountryAlbum/images/down_boldw.png
 create mode 100644 src/saas/AppCountryAlbum/images/jiancai.png
 create mode 100644 src/saas/AppCountryAlbum/images/remove-black.png
 create mode 100644 src/saas/AppCountryAlbum/images/xiugai.png

diff --git a/bin/serve.js b/bin/serve.js
index 59be85ff..a9cbf775 100644
--- a/bin/serve.js
+++ b/bin/serve.js
@@ -15,7 +15,7 @@ const getFileInfo = (app, file) => {
     let {name, label} = app,
         path = app.path.replace(/.+[\\\/]([^\\\/]+)[\\\/]([^\\\/]+)$/g, `/apps/$1/$2`)
     apps.list.push({
-      id: file.replace(/\.\/?(vue)?/g, '')?.replace(/[\\\/]/g, '_'),
+      id: file.replace(/\.\/?(vue)?/g, '').replace(/[\\\/]/g, '_'),
       name,
       label,
       path,
diff --git a/src/saas/AppCountryAlbum/AddReport.vue b/src/saas/AppCountryAlbum/AddReport.vue
index ce398ce9..f27d1c0f 100644
--- a/src/saas/AppCountryAlbum/AddReport.vue
+++ b/src/saas/AppCountryAlbum/AddReport.vue
@@ -10,6 +10,7 @@
         @click="changeComponent(item, index)">
         <image class="img" :src="item.thum" />
         <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+        <span @click="toEdit">编辑</span>
       </div>
     </div>
     <div class="report-btn" data-html2canvas-ignore @click="save">完成</div>
@@ -65,6 +66,10 @@
         })
       },
 
+      toEdit () {
+        this.$refs.reportItem.linkTo()
+      },
+
       save () {
         this.$loading()
         this.$refs.reportItem.screenshot() && this.$refs.reportItem.screenshot().then(canvas => {
@@ -173,6 +178,23 @@
           height: 208px;
         }
 
+        span {
+          display: none;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          z-index: 1;
+          width: 128px;
+          height: 56px;
+          line-height: 56px;
+          text-align: center;
+          color: #fff;
+          font-size: 32px;
+          background: rgba(0, 0, 0, 0.8);
+          border-radius: 8px;
+          transform: translate(-50%, -50%);
+        }
+
         .checked {
           position: absolute;
           top: 0;
@@ -186,6 +208,10 @@
           .img {
             border: 4px solid #408EF6;
           }
+
+          span {
+            display: block;
+          }
         }
       }
     }
diff --git a/src/saas/AppCountryAlbum/components/report/RenderContent.vue b/src/saas/AppCountryAlbum/components/report/RenderContent.vue
index b7e48a68..88749fee 100644
--- a/src/saas/AppCountryAlbum/components/report/RenderContent.vue
+++ b/src/saas/AppCountryAlbum/components/report/RenderContent.vue
@@ -1,9 +1,36 @@
 <template>
   <div class="rich">
-    <div class="rich-item" v-for="(item, index) in richList" :key="index">
-      <p @click="onLongpress(item, index)" v-if="item.type === 'text'">{{ item.value }}</p>
-      <image @click="onLongpress(item, index)" v-else mode="widthFix" :src="item.value" />
+    <div
+      class="rich-item"
+      @click="onLongpress(item, index)"
+      v-for="(item, index) in richList"
+      :key="index"
+      :class="[currIndex === index ? 'active' : '']">
+      <p v-if="item.type === 'text'">{{ item.value }}</p>
+      <image v-else mode="widthFix" :src="item.value" />
     </div>
+    <u-popup v-model="isShow" :closeable="false" border-radius="32" mode="bottom" @close="isShow = false, currIndex = -1">
+			<div class="rich-bottom">
+        <div class="top">
+          <h2>编辑文本</h2>
+          <image @click="isShow = false, currIndex = -1" src="../../images/down_boldw.png" />
+        </div>
+        <div class="btns">
+          <div class="btn-item" hover-class="bg-hover" @click="remove">
+            <image src="../../images/remove-black.png" />
+            <span>删除</span>
+          </div>
+          <div class="btn-item" hover-class="bg-hover" v-if="type === 'text'" @click="toEditText">
+            <image src="../../images/xiugai.png" />
+            <span>修改</span>
+          </div>
+          <div class="btn-item" hover-class="bg-hover" v-else>
+            <image src="../../images/jiancai.png" />
+            <span>剪裁</span>
+          </div>
+        </div>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -13,37 +40,45 @@
 
     data () {
       return {
-
+        currIndex: -1,
+        isShow: false,
+        type: '',
+        value: '',
+        action: ''
       }
     },
 
     methods: {
+      toEditText () {
+        this.$emit('onLongpress', {
+          type: this.type,
+          value: this.value,
+          index: this.currIndex,
+          action: 'edit'
+        })
+
+        this.currIndex = -1
+        this.isShow = false
+      },
+
+      remove () {
+        this.$emit('onLongpress', {
+          type: this.type,
+          value: this.value,
+          index: this.currIndex,
+          action: 'remove'
+        })
+
+        this.currIndex = -1
+        this.isShow = false
+      },
+
       onLongpress (item, index) {
-        if (item.type === 'text') {
-          uni.showActionSheet({
-            itemList: ['编辑', '删除'],
-            success: res => {
-              this.$emit('onLongpress', {
-                type: item.type,
-                value: item.value,
-                index: index,
-                action: res.tapIndex === 0 ? 'edit' : 'remove'
-              })
-            }
-          })
-        } else {
-          uni.showActionSheet({
-            itemList: ['删除'],
-            success: () => {
-              this.$emit('onLongpress', {
-                type: item.type,
-                value: item.value,
-                index: index,
-                action: 'remove'
-              })
-            }
-          })
-        }
+        this.currIndex = index
+        this.type = item.type
+        this.value = item.value
+
+        this.isShow = true
       },
 
       prview (url) {
@@ -58,13 +93,72 @@
 
 <style lang="scss" scoped>
   .rich {
+    * {
+      box-sizing: border-box;
+    }
+
+    .rich-bottom {
+      .top {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        height: 96px;
+
+        h2 {
+          font-size: 28px;
+          color: #333333;
+          line-height: 40px;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 32px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+      }
+
+      .btns {
+        display: flex;
+        align-items: center;
+        height: 216px;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          flex: 1;
+
+          image {
+            width: 80px;
+            height: 80px;
+          }
+
+          span {
+            color: #333333;
+            font-size: 28px;
+          }
+        }
+      }
+    }
+
     .rich-item {
       margin-bottom: 20rpx;
+      border: 2px solid transparent;
 
       &:last-child {
         margin-bottom: 0;
       }
 
+      &.active {
+        border: 2px solid #2477F1;
+      }
+
       p {
         line-height: 1.3;
         word-break: break-all;
diff --git a/src/saas/AppCountryAlbum/images/down_boldw.png b/src/saas/AppCountryAlbum/images/down_boldw.png
new file mode 100644
index 0000000000000000000000000000000000000000..40215314f99fbb5a3c2c864f6bcb84cd6dc5b98f
GIT binary patch
literal 293
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyjKx9jP7LeL$-D$|TmyVUT!AzY
z=<Dm7nwlCJ85tTH8XFq}89)GJzyX{KX8@((?CZ4)J%Of(l?3?(GcZca+S<GMwoI5f
zd(PY=CvUy@{N=|_U9BU$KovQjE{-7<r{7+(6lzf5aR@xX8geI~`2S)puQo-Usj4eE
z{+pgT5HVNYeP*Nk^rXAdHqs2ftv49dV%$1f-iEhJ&tF-w`-}DUg$w3(?Px#rE%;J+
z<-~V!PprDsZqK#&bhp##zspK{C*9h=dsgmb)O*OGI8A@`6p#l!UHx3vIVCg!04{N2
ATmS$7

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/jiancai.png b/src/saas/AppCountryAlbum/images/jiancai.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc69108824056103eeb35cf743716e62f060c7fe
GIT binary patch
literal 243
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5jKx9jP7LeL$-D$|<N|y`T!FN<
zwzj^$zMh_*iHV6ZDp-Bw*>a!?&XOR%U<Nj6nVhZ1&wq-XnUVw)%=2_{4DmRgoFKuf
zEO=&)<*I@UnsYcAJ<iNDzAe)kVo|({X(Cs;n9%A1uEKeSb1i!<TF)4#3rN~nG-roA
zTyZFIVL^&W^;~1#j^G)V#xpEh=NWHg@@ai^L@Q;LN|0i+2irt0_s4Y|8ZxYhxfvJ)
X?r&UD^x)Y8pv?@Pu6{1-oD!M<A5Kft

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/remove-black.png b/src/saas/AppCountryAlbum/images/remove-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..f05201ee332ebe7249f503e1aa099fb79481d65f
GIT binary patch
literal 334
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVB7>k44ofy`glX(f`m<9NRxB_V)
zFg7;U*48#PH3c$^jEsP!iHQl2L<0~hprGa4I7Of~!IB`qU<M{u9s~2h(5^{KZrpkN
z>BqnAn_6cBC0Ba7IEF+VetXTEuSG$?HPGd$vPr@B{WtG5IC}VOx%|FQBIF#4&?$+f
zQ>sk#gjUR}s=h4#rG3G!@3!|0l|O_Zn7G-Yk%^V7hWW=i`=t!o^(m~U3}!U!wco^?
zDPhxaL%#EXAy3tUyuF=knd&6ANd71}@|HQpdf)k-Y*%*7zjtQWaV`_{&5CWWeQkZ#
z&hgHuUDujg)Lpvsd20Hy&Hp@}@@T*Oa7|<BmCdz`v0trbiq=I=1BHaAtDnm{r-UW|
DL*ROY

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/xiugai.png b/src/saas/AppCountryAlbum/images/xiugai.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd97e0a6064ea8e0cd6d327062a2d236b82de980
GIT binary patch
literal 572
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVB7>k44ofy`glX(f`ObhS{aRt&4
z;Nak3Y;3HntE;D{XKHF{Vq#)sWMpV)2xLRJ5D}mt1OOES0Z<S~0!1LQ5H5rS%Yzgk
ztA_~UB7rI)QWteLX9JyOSQ6wH%)rRR!YU}Eq;Bl&?BeGi7M+luSJBYXIc3JoS&Npf
zTD@uap2J7Z-oA71+3WY8zW)6C&;H`^9H3XlJzX3_A`ZX3e!7g&QJ~?W)N~&Sr=IAJ
zg9<EjXa4^iug9(ad`8;REY-jE2e!Xh6}81fLxk(^<VP>duJ*s#^Gz}#aQi1Ac818i
z*ES0Yvrk#9ul@1S(oab$|0<JI%jz2*#lAUW9v`FeZDV2h8~cBCzpqz6@-pntkC$PL
zK3ijJsN1;mm7P{n6w~vF^8D*boIAE9%{QONvBRZU{$jiSD;vT1D^>eed|#Dx{lMxj
zv3XH@KDsR8J+LqFY3#eRst396<+>-Y54%xyiN&vN-jM?bFH9EOVEknX^OLrDUmBJ!
zRA)}edvQ`=hD4PS+ozK?GvD*6bNi=-1XWLxtezBKcr@_+$>&zHd)u4imW!HaKh*zK
h^U;Bkr`5^-qJA}3$MX3Z-HD)R_jL7hS?83{1OOnU*KGg*

literal 0
HcmV?d00001