拼图汇报

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,

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

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: {
-      onLongpress (item, index) {
-        if (item.type === 'text') {
-          uni.showActionSheet({
-            itemList: ['编辑', '删除'],
-            success: res => {
+      toEditText () {
         this.$emit('onLongpress', {
-                type: item.type,
-                value: item.value,
-                index: index,
-                action: res.tapIndex === 0 ? 'edit' : 'remove'
+          type: this.type,
+          value: this.value,
+          index: this.currIndex,
+          action: 'edit'
         })
-            }
-          })
-        } else {
-          uni.showActionSheet({
-            itemList: ['删除'],
-            success: () => {
+
+        this.currIndex = -1
+        this.isShow = false
+      },
+
+      remove () {
         this.$emit('onLongpress', {
-                type: item.type,
-                value: item.value,
-                index: index,
+          type: this.type,
+          value: this.value,
+          index: this.currIndex,
           action: 'remove'
         })
-            }
-          })
-        }
+
+        this.currIndex = -1
+        this.isShow = false
+      },
+
+      onLongpress (item, index) {
+        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;